向远程监视解决方案加速器 Web UI 中的仪表板上添加自定义面板

项目
10/05/2018

本文介绍如何向远程监视解决方案加速器 Web UI 中的仪表板页上添加新面板。本文介绍：

如何准备本地开发环境。
如何在 Web UI 中的仪表板页上添加新面板。

本文的示例面板在现有仪表板页上显示。

先决条件

要完成本操作指南中的步骤，需要在本地开发计算机上安装以下软件：

Git
Node.js

开始之前

应现完成将自定义页面添加到远程监视解决方案加速器 Web UI 文章中的步骤，然后再继续操作。

添加面板

要将面板添加到 Web UI，需要添加定义面板的源文件，然后修改仪表板以显示面板。

添加定义面板的新文件

首先，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>

如果 Web UI 尚未在本地运行，请在存储库的本地副本的根目录中运行以下命令：

npm start

上述命令在本地 (https://localhost:3000/dashboard) 运行 UI。导航到“仪表板”页查看新面板。

后续步骤

本文介绍了可以帮助你在远程监视解决方案加速器 Web UI 中添加或自定义仪表板的资源。

有关远程监视解决方案加速器的更多概念信息，请参阅远程监视体系结构。

通过