在遠端監視解決方案加速器 Web UI 中的儀表板上新增自訂面板

發行項
10/05/2018

本文說明如何在遠端監視解決方案加速器 Web UI 中的儀表板頁面新增面板。本文章說明：

如何準備本機開發環境。
如何在 Web UI 中的儀表板頁面新增面板。

本文中的面板範例會顯示於現有儀表板頁面上。

必要條件

若要完成本操作指南中的部署，您必須在本機開發機器上安裝下列軟體：

Git
Node.js

在您開始使用 Intune 之前

請先完成在遠端監視解決方案加速器 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 中新增或自訂儀表板的資源。

如需遠端監視解決方案加速器的詳細資訊，請參閱遠端監視架構。

共用方式為