Добавление пользовательской панели на панель мониторинга в веб-интерфейсе акселератора решения для удаленного мониторинга

Статья
10/05/2018

В этой статье показано, как добавить новую панель на страницу панели мониторинга в веб-интерфейсе акселератора решения для удаленного мониторинга. Содержание статьи:

Подготовка локальной среды разработки.
Добавление новой панели на страницу панели мониторинга в пользовательском веб-интерфейсе.

Пример панели в этой статье отображается на имеющейся странице панели мониторинга.

Предварительные требования

Чтобы выполнить действия, описанные в этом руководстве, необходимо установить следующее ПО на локальный компьютер разработки:

Git
Node.js

Перед началом работы

Прежде чем продолжить, следует выполнить действия, описанные в статье Добавление пользовательской страницы в веб-интерфейс акселератора решения для удаленного мониторинга.

Добавление панели

Чтобы добавить панель в веб-интерфейс, необходимо добавить исходные файлы, которые определяют панель, а затем изменить панель мониторинга, чтобы на ней отображалась эта панель.

Добавление новых файлов, которые определяют панель

Чтобы приступить к работе, просмотрите файлы, которые определяют панель, в папке src/walkthrough/components/pages/dashboard/panels/examplePanel, включая следующие:

examplePanel.js

import React, { Component } from 'react';

import {
  Panel,
  PanelHeader,
  PanelHeaderLabel,
  PanelContent,
} from 'components/pages/dashboard/panel';

import './examplePanel.scss';

export class ExamplePanel extends Component {
  constructor(props) {
    super(props);

    this.state = { isPending: true };
  }

  render() {
    const { t } = this.props;

    return (
      <Panel>
        <PanelHeader>
          <PanelHeaderLabel>{t('walkthrough.dashboard.panels.example.header')}</PanelHeaderLabel>
        </PanelHeader>
        <PanelContent className="example-panel-container">
          {t('walkthrough.dashboard.panels.example.panelBody')}
        </PanelContent>
      </Panel>
    );
  }
}

Скопируйте папку src/walkthrough/components/pages/dashboard/panels/examplePanel в папку src/components/pages/dashboard/panels.

Добавьте в файл src/walkthrough/components/pages/dashboard/panels/index.js следующий экспорт:

export * from './examplePanel';

Добавление панели на панель мониторинга

Чтобы добавить панель, измените файл src/components/pages/dashboard/dashboard.js.

Добавьте пример панели в список операций импорта из панелей:

import {
  OverviewPanel,
  AlertsPanel,
  TelemetryPanel,
  AnalyticsPanel,
  MapPanel,
  transformTelemetryResponse,
  chartColorObjects,
  ExamplePanel
} from './panels';

Добавьте следующее определение ячейки в сетку содержимого страницы:

          <Cell className="col-2">
            <ExamplePanel t={t} />
          </Cell>

Если веб-интерфейс еще не запущен локально, запустите следующую команду в корне локальной копии репозитория:

npm start

Предыдущая команда запускает пользовательский интерфейс локально по адресу https://localhost:3000/dashboard. Чтобы просмотреть новую панель, перейдите на страницу панели мониторинга.

Дополнительная информация

Из статьи вы узнали о ресурсах, которые могут помочь вам при настройке или добавлении панелей мониторинга в пользовательском веб-интерфейсе в акселераторе решения для удаленного мониторинга.

Дополнительные концептуальные сведения об акселераторе решения для удаленного мониторинга см. в статье об архитектуре удаленного мониторинга.

Share via