Настройка акселератора решения для удаленного мониторинга
Статья содержит сведения о способе доступа к исходному коду и настройке пользовательского интерфейса акселератора решения для удаленного мониторинга.
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, выполните следующие действия:
Запустите Cloud Shell.
Нажмите кнопку Копировать в блоке кода (или блоке команд), чтобы скопировать код или команду.
Вставьте код или команду в окно сеанса Cloud Shell, нажав клавиши CTRL+SHIFT+V в Windows и Linux или CMD+SHIFT+V в macOS.
Нажмите клавишу ВВОД, чтобы запустить код или команду.
Подготовка локальной среды разработки для пользовательского интерфейса
Код пользовательского интерфейса акселератора решения для удаленного мониторинга реализуется с помощью платформы React.js. Исходный код можно найти в репозитории GitHub azure-iot-pcs-remote-monitoring-webui.
Чтобы внести изменения в пользовательский интерфейс, его копию можно запустить локально. Чтобы выполнить действия, например, чтобы извлечь данные телеметрии, локальную копию необходимо подключить к развернутому экземпляру решения.
Ниже описан процесс настройки локальной среды для развертывания пользовательского интерфейса.
Разверните базовый экземпляр акселератора решений с помощью CLI PCS. Запишите имя развертывания и учетные данные, указанные для виртуальной машины. Дополнительные сведения см. в статье Развертывание предварительно настроенного решения для удаленного мониторинга с помощью интерфейса командной строки.
Включите доступ по протоколу 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 включен, его нужно отключить после использования.
Используя портал 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
Используйте SSH для подключения к виртуальной машине. Используйте IP-адрес из предыдущего шага и учетные данные, указанные при запуске PCS для развертывания решения. В Azure Cloud Shell доступна команда
ssh
.Чтобы разрешить локальному пользовательскому интерфейсу установить подключение, выполните следующие команды в оболочке Bash на виртуальной машине.
cd /app sudo ./start.sh --unsafe
После завершения команды и запуска веб-сайта можно отключиться от виртуальной машины.
В локальной копии репозитория azure-iot-pcs-remote-monitoring-webui измените .ENV-файл, добавив URL-адрес развернутого решения.
NODE_PATH = src/ REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
В командной строке перейдите к локальной копии папки
azure-iot-pcs-remote-monitoring-webui
.Чтобы установить требуемые библиотеки и запустить пользовательский интерфейс локально, выполните следующие команды.
npm install npm start
Предыдущая команда выполняет пользовательский интерфейс локально в 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>
Затем вы можете просмотреть разные данные телеметрии на каждой панели.
Дублирование и настройка имеющихся элементов управления
Ниже показано, как дублировать имеющуюся панель, изменить ее, а затем использовать измененную версию. В качестве примера в инструкции используется панель оповещений.
В локальной копии репозитория создайте копию папки alerts в папке
src/components/pages/dashboard/panels
. Присвойте новой копии имя cust_alerts.В файле alertsPanel.js папки cust_alerts измените имя класса на CustAlertsPanel:
export class CustAlertsPanel extends Component {
Добавьте следующую строку в файл
src/components/pages/dashboard/panels/index.js
:export * from './cust_alerts';
Замените
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. Эта копия идентична оригиналу. Теперь можно изменить копию. Например, чтобы изменить порядок столбцов в панели оповещений, сделайте следующее:
Откройте файл
src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js
.Измените определения столбцов, как показано в следующем фрагменте кода:
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 минут:
В файле
src/services/telemetryService.js
найдите функцию getTelemetryByDeviceIdP15M. Скопируйте функцию и измените ее копию следующим образом:static getTelemetryByDeviceIdP5M(devices = []) { return TelemetryService.getTelemetryByMessages({ from: 'NOW-PT5M', to: 'NOW', order: 'desc', devices }); }
Чтобы использовать эту функцию для заполнения диаграммы телеметрии, откройте файл
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
. Ниже показано, как рассчитать и преобразовать для просмотра новое значение ключевого показателя эффективности на странице Панель мониторинга. Ниже приведен пример того, как добавить новое процентное изменение в ключевом показателе эффективности предупреждающего оповещения.
Откройте файл
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 ... };
Измените объект 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 };
Вычислите новый ключевой показатель эффективности. Найти вычисления по количеству критических оповещений. Дублируйте код и измените копию следующим образом:
// ================== 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
Добавьте ключевой показатель эффективности warningAlertsChange в поток данных КПЭ.
return ({ analyticsIsPending: false, analyticsVersion: this.state.analyticsVersion + 1, // Analytics data currentActiveAlerts, topAlerts, criticalAlertsChange, warningAlertsChange, alertsPerDeviceId: currentAlertsStats.alertsPerDeviceId, ... });
Добавьте ключевой показатель эффективности warningAlertsChange в данные о состоянии, используемые для визуализации пользовательского интерфейса:
const { ... analyticsVersion, currentActiveAlerts, topAlerts, alertsPerDeviceId, criticalAlertsChange, warningAlertsChange, analyticsIsPending, analyticsError, ... } = this.state;
Обновите данные, передаваемые на панель ключевых показателей эффективности:
<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
, для отображения нового ключевого показателя эффективности.
Измените следующую строку кода для получения нового значения ключевого показателя эффективности следующим образом:
const { t, isPending, criticalAlertsChange, warningAlertsChange, alertsPerDeviceId, topAlerts, timeSeriesExplorerUrl, error } = this.props;
Измените разметку для отображения нового значения ключевого показателя эффективности следующим образом:
<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
Следующие шаги
Из статьи вы узнали о ресурсах, которые могут помочь вам при настройке пользовательского веб-интерфейса в акселераторе решения для удаленного мониторинга. Чтобы узнать больше о настройке пользовательского интерфейса, обратитесь к следующим статьям:
- Добавление пользовательской страницы в веб-интерфейс акселератора решения для удаленного мониторинга
- Добавление пользовательской службы в веб-интерфейс акселератора решения для удаленного мониторинга
- Добавление пользовательской сетки в веб-интерфейс акселератора решения для удаленного мониторинга
- Добавление пользовательского всплывающего элемента в веб-интерфейс акселератора решения для удаленного мониторинга
- Добавление пользовательской панели на панель мониторинга в веб-интерфейсе акселератора решения для удаленного мониторинга
Более подробные сведения об акселераторе решения для удаленного мониторинга см. в статье Архитектура предварительно настроенного решения для удаленного мониторинга.
Дополнительные сведения о настройке решения для удаленного мониторинга микрослужб см. в статье Настройка и повторное развертывание микрослужбы.