Настройка акселератора решения для удаленного мониторинга

Статья содержит сведения о способе доступа к исходному коду и настройке пользовательского интерфейса акселератора решения для удаленного мониторинга.

Использование Azure Cloud Shell

В Azure есть Azure Cloud Shell, интерактивная оболочка среды, с которой можно работать в браузере. Для работы со службами Azure можно использовать Bash или PowerShell с Cloud Shell. Для запуска кода из этой статьи можно использовать предварительно установленные команды Cloud Shell. Ничего дополнительного в локальной среде устанавливать не нужно.

Начало работы с Azure Cloud Shell

Параметр	Пример и ссылка
Нажмите кнопку Попробовать в правом верхнем углу блока с кодом. При нажатии кнопки Попробовать код не копируется в Cloud Shell автоматически.
Чтобы открыть Cloud Shell в браузере, перейдите по адресу https://shell.azure.com или нажмите кнопку Запуск Cloud Shell.
Нажмите кнопку Cloud Shell в строке меню в правом верхнем углу окна портала Azure.

Чтобы выполнить код из этой статьи в Azure Cloud Shell, выполните следующие действия:

1. Запустите Cloud Shell.

2. В блоке кода нажмите кнопку Копировать, чтобы скопировать код.

3. Вставьте код в окно сеанса Cloud Shell, нажав клавиши CTRLSHIFTV в Windows и Linux или CMDSHIFTV в macOS.

4. Нажмите клавишу ВВОД, чтобы выполнить код.

Подготовка локальной среды разработки для пользовательского интерфейса

Код пользовательского интерфейса акселератора решения для удаленного мониторинга реализуется с помощью платформы React.js. Исходный код можно найти в репозитории GitHub azure-iot-pcs-remote-monitoring-webui.

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

Ниже описан процесс настройки локальной среды для развертывания пользовательского интерфейса.

1. Разверните базовый экземпляр акселератора решений с помощью CLI PCS. Запишите имя развертывания и учетные данные, указанные для виртуальной машины. Дополнительные сведения см. в статье Развертывание предварительно настроенного решения для удаленного мониторинга с помощью интерфейса командной строки.

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 включен, его нужно отключить после использования.

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-адрес из предыдущего шага и учетные данные, указанные при запуске PCS для развертывания решения. В Azure Cloud Shell доступна команда ssh.

5. Чтобы разрешить локальному пользовательскому интерфейсу установить подключение, выполните следующие команды в оболочке 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. Чтобы установить требуемые библиотеки и запустить пользовательский интерфейс локально, выполните следующие команды.

   npm install
   npm start
   

10. Предыдущая команда выполняет пользовательский интерфейс локально в http://localhost:3000/dashboard. Вы можете изменить код во время работы сайта.Он будет обновляться динамически.

Настройка макета

Каждая страница в решении для удаленного мониторинга состоит из набора элементов управления, которые называются панелями в исходном коде. Страница "Панель мониторинга" состоит из пяти панелей: "Обзор", "Карта", "Оповещения", "Телеметрия" и "Аналитика". Исходный код, определяющий каждую страницу и ее панели, находится в репозитории GitHub pcs-remote-monitoring-webui. Например, код, определяющий страницу Панель мониторинга, ее макет и панели на странице, расположен в папке src/components/pages/dashboard.

Так как панели управляют собственным макетом и размером, вы можете без труда изменить макет страницы. Внесите следующие изменения в элемент 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-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. В файле alertsPanel.js папки cust_alerts измените имя класса на CustAlertsPanel:

   export class CustAlertsPanel extends Component {
   

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

   export * from './cust_alerts';
   

4. Замените alertsPanel на CustAlertsPanel в файле 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 определяют диаграмму телеметрии на странице Панель мониторинга. Пользовательский интерфейс извлекает данные телеметрии из серверной части решения в файле 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)
   

Диаграмма телеметрии отображает данные телеметрии за 5 минут:

Добавление нового ключевого показателя эффективности

Страница Панель мониторинга отображает ключевые показатели эффективности на панели аналитики. Эти показатели вычисляются в файле src/components/pages/dashboard/dashboard.js. Они преобразовываются для просмотра с помощью файла src/components/pages/dashboard/panels/analytics/analyticsPanel.js. Ниже показано, как рассчитать и преобразовать для просмотра новое значение ключевого показателя эффективности на странице Панель мониторинга. Ниже приведен пример того, как добавить новое процентное изменение в ключевом показателе эффективности предупреждающего оповещения.

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. Вычислите новый ключевой показатель эффективности. Найти вычисления по количеству критических оповещений. Дублируйте код и измените копию следующим образом:

   // ================== 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. Добавьте ключевой показатель эффективности warningAlertsChange в поток данных КПЭ.

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

5. Добавьте ключевой показатель эффективности warningAlertsChange в данные о состоянии, используемые для визуализации пользовательского интерфейса:

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

6. Обновите данные, передаваемые на панель ключевых показателей эффективности:

   <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, для отображения нового ключевого показателя эффективности.

1. Измените следующую строку кода для получения нового значения ключевого показателя эффективности следующим образом:

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

2. Измените разметку для отображения нового значения ключевого показателя эффективности следующим образом:

   <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>
   

На странице Панель мониторинга теперь отображается новое значение ключевого показателя эффективности.

Настройка карты

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

Другие возможности настройки

Для дополнительного изменения уровня представления и визуализации в решении для удаленного мониторинга можно изменить код. Соответствующие репозитории GitHub:

• Микрослужба конфигурации для решений Интернета вещей Azure (.NET)
• Микрослужба конфигурации для решений Интернета вещей Azure (Java)
• Веб-интерфейс для удаленного мониторинга Интернета вещей Azure PCS

Дальнейшие действия

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

• Добавление пользовательской страницы в веб-интерфейс акселератора решения для удаленного мониторинга
• Добавление пользовательской службы в веб-интерфейс акселератора решения для удаленного мониторинга
• Добавление пользовательской сетки в веб-интерфейс акселератора решения для удаленного мониторинга
• Добавление пользовательского всплывающего элемента в веб-интерфейс акселератора решения для удаленного мониторинга
• Добавление пользовательской панели на панель мониторинга в веб-интерфейсе акселератора решения для удаленного мониторинга

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

Дополнительные сведения о настройке решения для удаленного мониторинга микрослужб см. в статье Настройка и повторное развертывание микрослужбы.