Personalize o acelerador de solução de monitorização remota

Este artigo fornece informações sobre como pode aceder ao código fonte e personalizar a UI do acelerador de solução de Monitorização Remota.

Utilizar o Azure Cloud Shell

O Azure aloja o Azure Cloud Shell, um ambiente de shell interativo que pode utilizar através do seu browser. Pode utilizar o Bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure. Pode utilizar os comandos pré-instalados do Cloud Shell para executar o código neste artigo sem ter de instalar nada no ambiente local.

Para iniciar o Azure Cloud Shell:

Opção	Exemplo/Ligação
Selecione Experimentar no canto superior direito de um bloco de código. A seleção de Experimente não copia automaticamente o código para o Cloud Shell.
Aceda a https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir o Cloud Shell no browser.
Selecione o botão Cloud Shell na barra de menus, na parte direita do portal do Azure.

Para executar o código neste artigo no Azure Cloud Shell:

1. Inicie o Cloud Shell.

2. Selecione o botão Copiar num bloco de código para copiar o código.

3. Cole o código na sessão do Cloud Shell ao selecionar Ctrl+Shift+V no Windows e Linux ou Cmd+Shift+V no macOS.

4. Selecione Introduzir para executar o código.

Preparar um ambiente de desenvolvimento local para a UI

O código UI do acelerador de solução de monitorização remota é implementado utilizando a estrutura React.js. Pode encontrar o código fonte no repositório azure-iot-pcs-monitor-remote-webui GitHub.

Para fazer alterações na UI, pode executar uma cópia localmente. Para completar ações como a recuperação da telemetria, a cópia local conecta-se a uma instância implementada da solução.

Os seguintes passos descrevem o processo de criação de um ambiente local para o desenvolvimento da UI:

1. Implementar uma instância básica do acelerador de solução utilizando o CLI dos computadores . Tome nota do nome da sua implantação e das credenciais que forneceu para a máquina virtual. Para obter mais informações, consulte Implementar utilizando o CLI.

2. Para permitir o acesso do SSH à máquina virtual que hospeda os microserviços na sua solução, utilize o portal do Azure ou o Azure Cloud Shell. Por exemplo:

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

   Apenas permitir o acesso ao SSH durante o teste e o desenvolvimento. Se ativar o SSH, deve desativá-lo assim que terminar de o utilizar.

3. Utilize o portal do Azure ou o Cloud Shell Azure para encontrar o nome e o endereço IP público da sua máquina virtual. Por exemplo:

   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. Utilize o SSH para ligar à sua máquina virtual. Utilize o endereço IP a partir do passo anterior e as credenciais que forneceu quando executou computadores para implementar a solução. O ssh comando está disponível no Cloud Shell Azure.

5. Para permitir a ligação do UX local, executar os seguintes comandos na casca de choque na máquina virtual:

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

6. Depois de ver o comando completo e o web site começar, pode desligar-se da máquina virtual.

7. Na sua cópia local do repositório azure-iot-pcs-remote-monitoring-webui , edite o ficheiro .env para adicionar o URL da sua solução implementada:

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

8. A um pedido de comando, navegue para a sua cópia local da azure-iot-pcs-remote-monitoring-webui pasta.

9. Para instalar as bibliotecas necessárias e executar a UI localmente, executar os seguintes comandos:

   npm install
   npm start
   

10. O comando anterior dirige a UI localmente em http://localhost:3000/dashboard. Pode editar o código enquanto o site está em execução e vê-lo atualizado dinamicamente.

Personalize o layout

Cada página na solução de Monitorização Remota é composta por um conjunto de controlos, referidos como painéis no código fonte. A página dashboard é composta por cinco painéis: Visão geral, Mapa, Alertas, Telemetria e Analytics. Pode encontrar o código fonte que define cada página e os seus painéis no repositório webui GitHub de monitorização remota do pcs . Por exemplo, o código que define a página do Dashboard , o seu layout e os painéis na página estão localizados na pasta src/componentes/páginas/dashboard .

Como os painéis gerem o seu próprio layout e dimensionamento, você pode facilmente modificar o layout de uma página. Faça as seguintes alterações ao elemento PageContent no src/components/pages/dashboard/dashboard.js ficheiro para:

• Troque as posições dos painéis de mapa e telemetria.
• Altere as larguras relativas do mapa e dos painéis de análise.

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

Também pode adicionar várias instâncias do mesmo painel, ou várias versões se duplicar e personalizar um painel. O exemplo a seguir mostra como adicionar duas instâncias do painel de telemetria. Para esporar estas alterações, edite o src/components/pages/dashboard/dashboard.js ficheiro:

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

Em seguida, pode ver diferentes telemetrias em cada painel:

Duplicar e personalizar um controlo existente

Os passos a seguir descrevem como duplicar um painel existente, modificá-lo e, em seguida, utilizar a versão modificada. Os passos utilizam o painel de alertas como exemplo:

1. Na sua cópia local do repositório, faça uma cópia da pasta de alertas na src/components/pages/dashboard/panels pasta. Diga o nome da nova cópia cust_alerts.

2. No ficheiro alertsPanel.js na pasta cust_alerts , edite o nome da classe para ser CustAlertsPanel:

   export class CustAlertsPanel extends Component {
   

3. Adicione a seguinte linha ao src/components/pages/dashboard/panels/index.js ficheiro:

   export * from './cust_alerts';
   

4. CustAlertsPanel Substitua-o alertsPanel no src/components/pages/dashboard/dashboard.js ficheiro:

   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>
   

Agora substituiu o painel de alertas originais por uma cópia chamada CustAlerts. Esta cópia é a mesma que a original. Agora pode modificar a cópia. Por exemplo, para alterar a ordem da coluna no painel de alertas :

1. Abra o ficheiro src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js.

2. Modificar as definições da coluna como mostrado no seguinte corte de código:

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

A imagem que se segue mostra a nova versão do painel de alertas :

Personalize o gráfico de telemetria

Os ficheiros da src/components/pages/dashboard/panels/telemtry pasta definem o gráfico de telemetria na página dashboard . A UI recupera a telemetria a partir da extremidade traseira da solução no src/services/telemetryService.js ficheiro. Os seguintes passos mostram como alterar o período de tempo exibido na tabela de telemetria de 15 para 5 minutos:

1. src/services/telemetryService.js No ficheiro, localize a função chamada getTelemetryByDeviceIdP15M. Faça uma cópia desta função e modifique a cópia da seguinte forma:

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

2. Para utilizar esta nova função para povoar o gráfico de telemetria, abra o src/components/pages/dashboard/dashboard.js ficheiro. Localize a linha que inicializa o fluxo de telemetria e modifique-a da seguinte forma:

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

O gráfico de telemetria mostra agora os cinco minutos de dados de telemetria:

Adicione um novo KPI

A página dashboard apresenta KPI's no painel Analytics . Estes KPI's são calculados no src/components/pages/dashboard/dashboard.js ficheiro. Os KPI's são renderizados pelo src/components/pages/dashboard/panels/analytics/analyticsPanel.js ficheiro. Os seguintes passos descrevem como calcular e renderizar um novo valor KPI na página dashboard . O exemplo mostrado é adicionar uma nova variação percentual nos alertas de aviso KPI:

1. Abra o ficheiro src/components/pages/dashboard/dashboard.js. Modifique o objeto InicialState para incluir uma propriedade de AdvertênciaAlertsChange da seguinte forma:

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

2. Modifique o objeto actualAlertsStats para incluir o TotalWarningCount como uma propriedade:

   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. Calcule o novo KPI. Encontre o cálculo para a contagem de alertas críticos. Duplicar o código e modificar a cópia da seguinte forma:

   // ================== 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. Incluir o novo avisoAlertsChange KPI no fluxo KPI:

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

5. Incluir o novo avisoAlertsChange KPI nos dados estatais utilizados para tornar a UI:

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

6. Atualizar os dados transmitidos ao painel KPI's:

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

Já terminou as alterações no src/components/pages/dashboard/dashboard.js ficheiro. Os seguintes passos descrevem as alterações a fazer no src/components/pages/dashboard/panels/analytics/analyticsPanel.js ficheiro para exibir o novo KPI:

1. Modificar a seguinte linha de código para recuperar o novo valor KPI da seguinte forma:

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

2. Modificar a marcação para visualizar o novo valor KPI da seguinte forma:

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

A página dashboard apresenta agora o novo valor KPI:

Personalize o mapa

Consulte a página do mapa Personalizar no GitHub para obter detalhes sobre os componentes do mapa na solução.

Outras opções de personalização

Para modificar ainda mais a camada de apresentação e visualização na solução de Monitorização Remota, pode editar o código. Os repositórios gitHub relevantes são:

• O microserviço de configuração para Azure IoT Solutions (.NET)
• O microserviço de configuração para Azure IoT Solutions (Java)
• Azure IoT PCS Monitorização Remota Web UI

Passos seguintes

Neste artigo, aprendeu sobre os recursos disponíveis para ajudá-lo a personalizar a UI web no acelerador de solução de Monitorização Remota. Para saber mais sobre a personalização da UI, consulte os seguintes artigos:

• Adicione uma página personalizada à UI do acelerador de solução de monitorização remota
• Adicione um serviço personalizado à UI do acelerador de solução de monitorização remota
• Adicione uma grelha personalizada à UI do acelerador de solução de monitorização remota
• Adicione um flyout personalizado à UI do acelerador de solução de monitorização remota
• Adicione um painel personalizado ao painel no painel de instrumentos na UI do acelerador de solução de monitorização remota

Para obter mais informações conceptuais sobre o acelerador de solução de monitorização remota, consulte a arquitetura de monitorização remota

Para obter mais informações sobre a personalização dos microserviços de solução de Monitorização Remota, consulte Personalizar e reimplantar um microserviço.