自定義遠端監視解決方案加速器

本文提供如何存取原始程式碼及自定義遠端監視解決方案加速器 UI 的相關信息。

Azure Cloud Shell

Azure Cloud Shell 是裝載於 Azure 中的互動式殼層環境，可在瀏覽器中使用。 您可以使用 Bash 或 PowerShell 搭配 Cloud Shell，與 Azure 服務共同使用。 您可以使用 Cloud Shell 預先安裝的命令，執行本文提到的程式碼，而不必在本機環境上安裝任何工具。

要啟動 Azure Cloud Shell：

選項	範例/連結
選取程式碼或命令區塊右上角的 [試試看]。 選取 [試試看] 並不會自動將程式碼或命令複製到 Cloud Shell 中。
請前往 https://shell.azure.com，或選取 [啟動 Cloud Shell] 按鈕，在瀏覽器中開啟 Cloud Shell。
選取 Azure 入口網站右上方功能表列上的 [Cloud Shell] 按鈕。

若要使用 Azure Cloud Shell：

1. 啟動 Cloud Shell。

2. 選取程式碼區塊 (或命令區塊) 上的 [複製] 按鈕以複製程式碼或命令。

3. 透過在 Windows 和 Linux 上選取 Ctrl+Shift+V；或在 macOS 上選取 Cmd+Shift+V，將程式碼或命令貼到 Cloud Shell 工作階段中。

4. 選取 Enter 鍵執行程式碼或命令。

準備UI的本機開發環境

遠端監視解決方案加速器 UI 程式代碼是使用 React.js 架構實作。 您可以在 azure-iot-pcs-remote-monitoring-webui GitHub 存放庫中找到原始程式碼。

若要變更 UI，您可以在本機執行其複本。 若要完成擷取遙測之類的動作，本機複本會連線到解決方案的已部署實例。

下列步驟概述設定UI開發的本機環境的程式：

1. 使用pcs CLI 部署解決方案加速器的基本實例。 記下部署的名稱，以及您為虛擬機提供的認證。 如需詳細資訊，請參閱 使用 CLI 部署。

2. 若要啟用在解決方案中裝載微服務的虛擬機的 SSH 存取，請使用 Azure 入口網站 或 Azure Cloud Shell。 例如：

   az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
   

   只在測試和開發期間啟用 SSH 存取。 如果您啟用 SSH， 您應該在完成使用 SSH 之後立即將其停用。

3. 使用 Azure 入口網站 或 Azure Cloud Shell 來尋找虛擬機的名稱和公用 IP 位址。 例如：

   az resource list --resource-group {your solution name} -o table
   az vm list-ip-addresses --name {your vm name from previous command} --resource-group {your solution name} -o table
   

4. 使用 SSH 連線到您的虛擬機。 使用上一個步驟中的IP位址，以及執行計算機來部署解決方案時所提供的認證。 命令 ssh 可在 Azure Cloud Shell 中使用。

5. 若要允許本機 UX 連線，請在虛擬機的 bash 殼層上執行下列命令：

   cd /app
   sudo ./start.sh --unsafe
   

6. 當您看到命令完成且網站啟動時，您可以中斷與虛擬機的連線。

7. 在 azure-iot-pcs-remote-monitoring-webui 存放庫的本機複本中，編輯 .env 檔案以新增已部署解決方案的 URL：

   NODE_PATH = src/
   REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
   

8. 在命令提示字元中，瀏覽至資料夾的 azure-iot-pcs-remote-monitoring-webui 本機複本。

9. 若要安裝必要的連結庫並在本機執行 UI，請執行下列命令：

   npm install
   npm start
   

10. 上一個命令會在本機執行UI http://localhost:3000/dashboard. 您可以在月臺執行時編輯程序代碼，並查看其動態更新。

自訂版面配置

遠端監視解決方案中的每個頁面都是由一元件所組成，稱為 原始程式碼中的面板 。 [儀錶板] 頁面由五個面板組成：概觀、地圖、警示、遙測和分析。 您可以在 pcs-remote-monitoring-webui GitHub 存放庫中找到定義每個頁面及其面板的原始程式碼。 例如，定義 儀錶板 頁面、其版面配置和頁面上面板的程式代碼位於 src/components/pages/dashboard 資料夾中。

由於面板會管理自己的版面配置和重設大小，因此您可以輕鬆地修改頁面的配置。 對檔案中的 src/components/pages/dashboard/dashboard.js PageContent元素進行下列變更：

• 交換地圖和遙測面板的位置。
• 變更地圖和分析面板的相對寬度。

<PageContent className="dashboard-container">
  <Grid>
    <Cell className="col-1 devices-overview-cell">
      <OverviewPanel
        activeDeviceGroup={activeDeviceGroup}
        openWarningCount={openWarningCount}
        openCriticalCount={openCriticalCount}
        onlineDeviceCount={onlineDeviceCount}
        offlineDeviceCount={offlineDeviceCount}
        isPending={analyticsIsPending || devicesIsPending}
        error={deviceGroupError || devicesError || analyticsError}
        t={t} />
    </Cell>
    <Cell className="col-6">
      <TelemetryPanel
        timeSeriesExplorerUrl={timeSeriesParamUrl}
        telemetry={telemetry}
        isPending={telemetryIsPending}
        lastRefreshed={lastRefreshed}
        error={deviceGroupError || telemetryError}
        theme={theme}
        colors={chartColorObjects}
        t={t} />
    </Cell>
    <Cell className="col-3">
      <AlertsPanel
        alerts={currentActiveAlertsWithName}
        isPending={analyticsIsPending || rulesIsPending}
        error={rulesError || analyticsError}
        t={t}
        deviceGroups={deviceGroups} />
    </Cell>
    <Cell className="col-4">
      <PanelErrorBoundary msg={t('dashboard.panels.map.runtimeError')}>
        <MapPanel
          analyticsVersion={analyticsVersion}
          azureMapsKey={azureMapsKey}
          devices={devices}
          devicesInAlert={devicesInAlert}
          mapKeyIsPending={azureMapsKeyIsPending}
          isPending={devicesIsPending || analyticsIsPending}
          error={azureMapsKeyError || devicesError || analyticsError}
          t={t} />
      </PanelErrorBoundary>
    </Cell>
    <Cell className="col-6">
      <AnalyticsPanel
        timeSeriesExplorerUrl={timeSeriesParamUrl}
        topAlerts={topAlertsWithName}
        alertsPerDeviceId={alertsPerDeviceType}
        criticalAlertsChange={criticalAlertsChange}
        isPending={analyticsIsPending || rulesIsPending || devicesIsPending}
        error={devicesError || rulesError || analyticsError}
        theme={theme}
        colors={chartColorObjects}
        t={t} />
    </Cell>
    {
      Config.showWalkthroughExamples &&
      <Cell className="col-4">
        <ExamplePanel t={t} />
      </Cell>
    }
  </Grid>
</PageContent>

如果您複製並自定義面板，您也可以新增數個相同面板的實例，或數個版本。 下列範例示範如何新增兩個遙測面板實例。 若要進行這些變更，請編輯 src/components/pages/dashboard/dashboard.js 檔案：

<PageContent className="dashboard-container">
  <Grid>
    <Cell className="col-1 devices-overview-cell">
      <OverviewPanel
        activeDeviceGroup={activeDeviceGroup}
        openWarningCount={openWarningCount}
        openCriticalCount={openCriticalCount}
        onlineDeviceCount={onlineDeviceCount}
        offlineDeviceCount={offlineDeviceCount}
        isPending={analyticsIsPending || devicesIsPending}
        error={deviceGroupError || devicesError || analyticsError}
        t={t} />
    </Cell>
    <Cell className="col-3">
      <TelemetryPanel
        timeSeriesExplorerUrl={timeSeriesParamUrl}
        telemetry={telemetry}
        isPending={telemetryIsPending}
        lastRefreshed={lastRefreshed}
        error={deviceGroupError || telemetryError}
        theme={theme}
        colors={chartColorObjects}
        t={t} />
    </Cell>
    <Cell className="col-3">
      <TelemetryPanel
        timeSeriesExplorerUrl={timeSeriesParamUrl}
        telemetry={telemetry}
        isPending={telemetryIsPending}
        lastRefreshed={lastRefreshed}
        error={deviceGroupError || telemetryError}
        theme={theme}
        colors={chartColorObjects}
        t={t} />
    </Cell>
    <Cell className="col-3">
      <AlertsPanel
        alerts={currentActiveAlertsWithName}
        isPending={analyticsIsPending || rulesIsPending}
        error={rulesError || analyticsError}
        t={t}
        deviceGroups={deviceGroups} />
    </Cell>
    <Cell className="col-4">
      <PanelErrorBoundary msg={t('dashboard.panels.map.runtimeError')}>
        <MapPanel
          analyticsVersion={analyticsVersion}
          azureMapsKey={azureMapsKey}
          devices={devices}
          devicesInAlert={devicesInAlert}
          mapKeyIsPending={azureMapsKeyIsPending}
          isPending={devicesIsPending || analyticsIsPending}
          error={azureMapsKeyError || devicesError || analyticsError}
          t={t} />
      </PanelErrorBoundary>
    </Cell>
    <Cell className="col-6">
      <AnalyticsPanel
        timeSeriesExplorerUrl={timeSeriesParamUrl}
        topAlerts={topAlertsWithName}
        alertsPerDeviceId={alertsPerDeviceType}
        criticalAlertsChange={criticalAlertsChange}
        isPending={analyticsIsPending || rulesIsPending || devicesIsPending}
        error={devicesError || rulesError || analyticsError}
        theme={theme}
        colors={chartColorObjects}
        t={t} />
    </Cell>
    {
      Config.showWalkthroughExamples &&
      <Cell className="col-4">
        <ExamplePanel t={t} />
      </Cell>
    }
  </Grid>
</PageContent>

然後，您可以在每個面板中檢視不同的遙測：

複製並自定義現有的控制件

下列步驟概述如何複製現有的面板、修改它，然後使用修改的版本。 這些步驟使用 警示 面板作為範例：

1. 在存放庫的本機複本中，製作資料夾中的alerts資料夾src/components/pages/dashboard/panels複本。 將新復本 命名為cust_alerts。

2. 在 cust_alerts 資料夾中的 alertsPanel.js 檔案中，編輯類別名稱為 CustAlertsPanel：

   export class CustAlertsPanel extends Component {
   

3. 將下列這一行新增至 src/components/pages/dashboard/panels/index.js 檔案：

   export * from './cust_alerts';
   

4. 取代為alertsPanelCustAlertsPanel檔案中的 src/components/pages/dashboard/dashboard.js ：

   import {
     OverviewPanel,
     CustAlertsPanel,
     TelemetryPanel,
     KpisPanel,
     MapPanel,
     transformTelemetryResponse,
     chartColors
   } from './panels';
   
   ...
   
   <Cell className="col-3">
     <CustAlertsPanel
       alerts={currentActivealertsWithName}
       isPending={kpisIsPending || rulesIsPending}
       error={rulesError || kpisError}
       t={t} />
   </Cell>
   

您現在已將原始 警示 面板取代為名為 CustAlerts 的複本。 此複本與原始復本相同。 您現在可以修改複本。 例如，若要變更警示面板中的數據行順序：

1. 開啟 src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js 檔案。

2. 修改資料行定義，如下列代碼段所示：

   this.columnDefs = [
     rulesColumnDefs.severity,
     {
       headerName: 'rules.grid.count',
       field: 'count'
     },
     {
       ...rulesColumnDefs.ruleName,
       minWidth: 200
     },
     rulesColumnDefs.explore
   ];
   

下列螢幕快照顯示新版的 警示 面板：

自定義遙測圖表

資料夾中的src/components/pages/dashboard/panels/telemtry檔案會定義 [儀錶板] 頁面上的遙測圖表。 UI 會從檔案中的 src/services/telemetryService.js 解決方案後端擷取遙測。 下列步驟說明如何將遙測圖表上顯示的時間週期從 15 分鐘變更為 5 分鐘：

1. 在 檔案中 src/services/telemetryService.js ，找出名為 getTelemetryByDeviceIdP15M 的函式。 製作此函式的複本，並修改複本，如下所示：

   static getTelemetryByDeviceIdP5M(devices = []) {
     return TelemetryService.getTelemetryByMessages({
       from: 'NOW-PT5M',
       to: 'NOW',
       order: 'desc',
       devices
     });
   }
   

2. 若要使用此新函式填入遙測圖表，請開啟 src/components/pages/dashboard/dashboard.js 檔案。 找出初始化遙測數據流並修改的行，如下所示：

   const getTelemetryStream = ({ deviceIds = [] }) => TelemetryService.getTelemetryByDeviceIdP5M(deviceIds)
   

遙測圖表現在會顯示五分鐘的遙測數據：

新增 KPI

[儀錶板] 頁面會在 [分析] 面板中顯示 KPI。 這些 KPI 會在檔案中 src/components/pages/dashboard/dashboard.js 計算。 KPI 是由 src/components/pages/dashboard/panels/analytics/analyticsPanel.js 檔案轉譯。 下列步驟說明如何在 [儀錶板] 頁面上計算和轉譯新的 KPI 值。 顯示的範例是在警告警示 KPI 中新增百分比變更：

1. 開啟 src/components/pages/dashboard/dashboard.js 檔案。 修改 initialState 物件以包含 warningAlertsChange 屬性，如下所示：

   const initialState = {
     ...
   
     // Analytics data
     analyticsVersion: 0,
     currentActiveAlerts: [],
     topAlerts: [],
     alertsPerDeviceId: {},
     criticalAlertsChange: 0,
     warningAlertsChange: 0,
     analyticsIsPending: true,
     analyticsError: null
   
     ...
   };
   

2. 修改 currentAlertsStats 物件，以包含 totalWarningCount 作為屬性：

   return {
     openWarningCount: (acc.openWarningCount || 0) + (isWarning && isOpen ? 1 : 0),
     openCriticalCount: (acc.openCriticalCount || 0) + (isCritical && isOpen ? 1 : 0),
     totalWarningCount: (acc.totalWarningCount || 0) + (isWarning ? 1 : 0),
     totalCriticalCount: (acc.totalCriticalCount || 0) + (isCritical ? 1 : 0),
     alertsPerDeviceId: updatedAlertsPerDeviceId
   };
   

3. 計算新的 KPI。 尋找重大警示計數的計算。 複製程式代碼並修改複本，如下所示：

   // ================== Warning Alerts Count - START
   const currentWarningAlerts = currentAlertsStats.totalWarningCount;
   const previousWarningAlerts = previousAlerts.reduce(
     (cnt, { severity }) => severity === Config.ruleSeverity.warning ? cnt + 1 : cnt,
     0
   );
   const warningAlertsChange = ((currentWarningAlerts - previousWarningAlerts) / currentWarningAlerts * 100).toFixed(2);
   // ================== Warning Alerts Count - END
   

4. 在 KPI 資料流中包含新的 warningAlertsChange KPI：

   return ({
     analyticsIsPending: false,
     analyticsVersion: this.state.analyticsVersion + 1,
   
     // Analytics data
     currentActiveAlerts,
     topAlerts,
     criticalAlertsChange,
     warningAlertsChange,
     alertsPerDeviceId: currentAlertsStats.alertsPerDeviceId,
   
     ...
   });
   

5. 在用來轉譯 UI 的狀態數據中包含新的 warningAlertsChange KPI：

   const {
     ...
   
     analyticsVersion,
     currentActiveAlerts,
     topAlerts,
     alertsPerDeviceId,
     criticalAlertsChange,
     warningAlertsChange,
     analyticsIsPending,
     analyticsError,
   
     ...
   } = this.state;
   

6. 更新傳遞至 KPI 面板的資料：

   <AnalyticsPanel
     timeSeriesExplorerUrl={timeSeriesParamUrl}
     topAlerts={topAlertsWithName}
     alertsPerDeviceId={alertsPerDeviceType}
     criticalAlertsChange={criticalAlertsChange}
     warningAlertsChange={warningAlertsChange}
     isPending={analyticsIsPending || rulesIsPending || devicesIsPending}
     error={devicesError || rulesError || analyticsError}
     theme={theme}
     colors={chartColorObjects}
     t={t} />
   

您現在已完成檔案中的 src/components/pages/dashboard/dashboard.js 變更。 下列步驟描述檔案中 src/components/pages/dashboard/panels/analytics/analyticsPanel.js 要進行的變更，以顯示新的 KPI：

1. 修改下列程式代碼行以擷取新的 KPI 值，如下所示：

   const { t, isPending, criticalAlertsChange, warningAlertsChange, alertsPerDeviceId, topAlerts, timeSeriesExplorerUrl, error } = this.props;
   

2. 變更標記以顯示新的 KPI 值，如下所示：

   <div className="analytics-cell">
     <div className="analytics-header">{t('dashboard.panels.analytics.criticalAlerts')}</div>
     <div className="critical-alerts">
       {
         !showOverlay &&
           <div className="analytics-percentage-container">
             <div className="analytics-value">{ !isNaN(criticalAlertsChange) ? criticalAlertsChange : 0 }</div>
             <div className="analytics-percentage-sign">%</div>
           </div>
       }
     </div>
     <div className="critical-alerts">
       {
         !showOverlay &&
           <div className="analytics-percentage-container">
             <div className="analytics-value">{ !isNaN(warningAlertsChange) ? warningAlertsChange : 0 }</div>
             <div className="analytics-percentage-sign">%</div>
           </div>
       }
     </div>
   </div>
   

[ 儀錶板 ] 頁面現在會顯示新的 KPI 值：

自定義地圖

如需解決方案中地圖元件的詳細數據，請參閱 GitHub 中的自定義地圖頁面。

其他自訂選項

若要進一步修改遠端監視解決方案中的呈現和視覺效果層，您可以編輯程式碼。 相關的 GitHub 存放庫如下：

• Azure IoT 解決方案的設定微服務 （.NET）
• Azure IoT 解決方案的設定微服務 （Java）
• Azure IoT PCS 遠端監視Web UI

下一步

在本文中，您已瞭解可用來協助您在遠端監視解決方案加速器中自定義 Web UI 的資源。 若要深入瞭解自定義UI，請參閱下列文章：

• 將自定義頁面新增至遠端監視解決方案加速器 Web UI
• 將自訂服務新增至遠端監視解決方案加速器 Web UI
• 將自定義方格新增至遠端監視解決方案加速器 Web UI
• 將自定義飛出視窗新增至遠端監視解決方案加速器 Web UI
• 將自定義面板新增至遠端監視解決方案加速器 Web UI 中的儀錶板

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

如需自定義遠端監視解決方案微服務的詳細資訊，請參閱 自定義和重新部署微服務。