向远程监视解决方案加速器 Web UI 中的仪表板上添加自定义面板
本文介绍如何向远程监视解决方案加速器 Web UI 中的仪表板页上添加新面板。 本文介绍:
- 如何准备本地开发环境。
- 如何在 Web UI 中的仪表板页上添加新面板。
本文的示例面板在现有仪表板页上显示。
先决条件
要完成本操作指南中的步骤,需要在本地开发计算机上安装以下软件:
开始之前
应现完成将自定义页面添加到远程监视解决方案加速器 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 中添加或自定义仪表板的资源。
有关远程监视解决方案加速器的更多概念信息,请参阅 远程监视体系结构。