Personalizar o acelerador da solução de Monitoramento RemotoCustomize the Remote Monitoring solution accelerator

Este artigo fornece informações sobre como acessar o código-fonte e personalizar a interface do usuário do acelerador da solução de Monitoramento Remoto.This article provides information about how you can access the source code and customize the Remote Monitoring solution accelerator UI.

Usar o Azure Cloud ShellUse Azure Cloud Shell

O Azure hospeda o Azure Cloud Shell, um ambiente de shell interativo que pode ser usado por meio do navegador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. É possível usar o bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. É possível usar os comandos pré-instalados do Cloud Shell para executar o código neste artigo sem precisar instalar nada no seu ambiente local.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Para iniciar o Azure Cloud Shell:To start Azure Cloud Shell:

OpçãoOption Exemplo/LinkExample/Link
Selecione Experimente no canto superior direito de um bloco de código.Select Try It in the upper-right corner of a code block. Selecionar Experimente não copia automaticamente o código para o Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemplo de “Experimente” no Azure Cloud Shell
Acesse https://shell.azure.com ou selecione o botão Iniciar o Cloud Shell para abri-lo no navegador.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Inicie o Cloud Shell em uma nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus no canto superior direito do portal do Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botão Cloud Shell no portal do Azure

Para executar o código neste artigo no Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie o Cloud Shell.Start Cloud Shell.

  2. Clique no botão Copiar no bloco de código para copiá-lo.Select the Copy button on a code block to copy the code.

  3. Cole o código na sessão do Cloud Shell ao pressionar Ctrl+Shift+V no Windows e no Linux ou Cmd+Shift+V no macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Pressione Enter para executar o código.Select Enter to run the code.

Preparar um ambiente de desenvolvimento local para a interface do usuárioPrepare a local development environment for the UI

O código da interface do usuário do acelerador de solução de Monitoramento Remoto é implementado usando a estrutura React.js.The Remote Monitoring solution accelerator UI code is implemented using the React.js framework. Você pode encontrar o código-fonte no repositório azure-iot-pcs-remote-monitoring-webui do GitHub.You can find the source code in the azure-iot-pcs-remote-monitoring-webui GitHub repository.

Para fazer alterações na interface do usuário, você pode executar uma cópia dela localmente.To make changes to the UI, you can run a copy of it locally. Para concluir ações, como recuperar a telemetria, a cópia local se conecta a uma instância implantada da solução.To complete actions such as retrieving telemetry, the local copy connects to a deployed instance of the solution.

As etapas a seguir descrevem o processo de configurar um ambiente local para o desenvolvimento da interface do usuário:The following steps outline the process to set up a local environment for UI development:

  1. Implante uma instância básica do acelerador de solução usando a CLI pcs.Deploy a basic instance of the solution accelerator using the pcs CLI. Anote o nome da sua implantação e as credenciais fornecidas para a máquina virtual.Make a note of the name of your deployment and the credentials you provided for the virtual machine. Para saber mais, veja Implantar usando a CLI.For more information, see Deploy using the CLI.

  2. Para habilitar o acesso SSH à máquina virtual que hospeda os micros serviços na sua solução, use o portal do Azure Cloud Shell.To enable SSH access to the virtual machine that hosts the microservices in your solution, use the Azure portal or the Azure Cloud Shell. Por exemplo:For example:

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

    Habilite somente o acesso de SSH durante o desenvolvimento e teste.Only enable SSH access during test and development. Se você ativar o SSH, você deve desativá-lo assim que terminar de usá-lo.If you enable SSH, you should disable it as soon as you're finished using it.

  3. Use o portal do Azure Cloud Shell para encontrar o nome e o endereço IP público da sua máquina virtual.Use the Azure portal or the Azure Cloud Shell to find the name and public IP address of your virtual machine. Por exemplo:For example:

    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. Use o SSH para se conectar à sua máquina virtual.Use SSH to connect to your virtual machine. Use o endereço IP da etapa anterior e as credenciais fornecidas quando você executou pcs para implementar a solução.Use the IP address from the previous step, and the credentials you provided when you ran pcs to deploy the solution. O ssh comando está disponível no Azure Cloud Shell.The ssh command is available in the Azure Cloud Shell.

  5. Para permitir que o UX local se conecta, execute os seguintes comandos no shell bash na máquina virtual:To allow the local UX to connect, run the following commands at the bash shell in the virtual machine:

    cd /app
    sudo ./start.sh --unsafe
    
  6. Depois de ver que o comando foi concluído e o site da Web for iniciado, você poderá se desconectar da máquina virtual.After you see the command completes and the web site starts, you can disconnect from the virtual machine.

  7. Em sua cópia local do repositório azure-iot-pcs-remote-monitoring-webui, edite o arquivo .env para adicionar a URL da sua solução implantada:In your local copy of the azure-iot-pcs-remote-monitoring-webui repository, edit the .env file to add the URL of your deployed solution:

    NODE_PATH = src/
    REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
    
  8. Em um prompt de comando, navegue até a cópia local da pasta azure-iot-pcs-remote-monitoring-webui.At a command prompt, navigate to your local copy of the azure-iot-pcs-remote-monitoring-webui folder.

  9. Para instalar as bibliotecas necessárias e executar a UI localmente, execute os seguintes comandos:To install the required libraries and run the UI locally, run the following commands:

    npm install
    npm start
    
  10. O comando anterior executa a interface do usuário localmente em/http:/localhost: 3000/Dashboard.The previous command runs the UI locally at http://localhost:3000/dashboard. Você pode editar o código enquanto o site está em execução e vê-lo ser atualizado dinamicamente.You can edit the code while the site is running and see it update dynamically.

Personalizar o layoutCustomize the layout

Cada página na solução de Monitoramento Remoto é composta de um conjunto de controles, conhecido como painéis no código-fonte.Each page in the Remote Monitoring solution is composed of a set of controls, referred to as panels in the source code. A página painel é composta de cinco painéis: visão geral, mapa, alertas, telemetria e análise.The Dashboard page is made up of five panels: Overview, Map, Alerts, Telemetry, and Analytics. Você pode encontrar o código-fonte que define cada página e seus painéis no repositório pcs-remote-monitoring-webui do GitHub.You can find the source code that defines each page and its panels in the pcs-remote-monitoring-webui GitHub repository. Por exemplo, o código que define a página Painel, seu layout e os painéis na página está localizado na pasta src/components/pages/dashboard.For example, the code that defines the Dashboard page, its layout, and the panels on the page is located in the src/components/pages/dashboard folder.

Como os painéis gerenciam seus próprios layout e dimensionamento, você pode modificar facilmente o layout de uma página.Because the panels manage their own layout and sizing, you can easily modify the layout of a page. Faça as seguintes alterações no elemento PageContent no arquivo src/components/pages/dashboard/dashboard.js para:Make the following changes to the PageContent element in the src/components/pages/dashboard/dashboard.js file to:

  • Troque as posições do mapa e dos painéis de telemetria.Swap the positions of the map and telemetry panels.
  • Altere as larguras relativas dos painéis de mapa e análise.Change the relative widths of the map and analytics panels.
<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>

Alterar layout do painel

Você também pode adicionar várias instâncias do mesmo painel, ou várias versões, se você duplicar e personalizar um painel.You can also add several instances of the same panel, or several versions if you duplicate and customize a panel. O exemplo a seguir mostra como adicionar duas instâncias do painel de telemetria.The following example shows you how to add two instances of the telemetry panel. Para fazer essas alterações, edite o arquivo src/components/pages/dashboard/dashboard.js:To make these changes, edit the src/components/pages/dashboard/dashboard.js file:

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

Você pode exibir telemetria diferente em cada painel:You can then view different telemetry in each panel:

Vários painéis de telemetria

Duplicar e personalizar um controle existenteDuplicate and customize an existing control

As etapas a seguir descrevem como duplicar um painel existente, modificá-lo e usar a versão modificada.The following steps outline how to duplicate an existing panel, modify it, and then use the modified version. As etapas usam o painel alertas como um exemplo:The steps use the alerts panel as an example:

  1. Na sua cópia local do repositório, faça uma cópia da pasta alertas na pasta src/components/pages/dashboard/panels.In your local copy of the repository, make a copy of the alerts folder in the src/components/pages/dashboard/panels folder. Nomeie a nova cópia cust_alerts.Name the new copy cust_alerts.

  2. No arquivo alertsPanel.js na pasta cust_alerts, edite o nome da classe como CustAlertsPanel:In the alertsPanel.js file in the cust_alerts folder, edit the name of the class to be CustAlertsPanel:

    export class CustAlertsPanel extends Component {
    
  3. Adicione a seguinte linha ao arquivo src/components/pages/dashboard/panels/index.js :Add the following line to the src/components/pages/dashboard/panels/index.js file:

    export * from './cust_alerts';
    
  4. Substituir alertsPanel por CustAlertsPanel no arquivo src/components/pages/dashboard/dashboard.js:Replace alertsPanel with CustAlertsPanel in the src/components/pages/dashboard/dashboard.js file:

    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 você substituiu o painel de alertas original por uma cópia chamada CustAlerts.You've now replaced the original alerts panel with a copy called CustAlerts. Esta cópia é igual à original.This copy is the same as the original. Agora você pode modificar a cópia.You can now modify the copy. Por exemplo, para alterar a ordenação das colunas no painel alertas:For example, to change the column ordering in the alerts panel:

  1. Abra o arquivo src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js .Open the src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js file.

  2. Modifique as definições de coluna conforme mostrado no seguinte snippet de código:Modify the column definitions as shown in the following code snippet:

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

A captura de tela a seguir mostra a nova versão do painel alertas:The following screenshot shows the new version of the alerts panel:

Painel de alertas atualizado

Personalizar o gráfico de telemetriaCustomize the telemetry chart

Os arquivos na pasta src/components/pages/dashboard/panels/telemtry definem o gráfico de telemetria na página Dashboard.The files in the src/components/pages/dashboard/panels/telemtry folder define the telemetry chart on the Dashboard page. A interface do usuário recupera a telemetria de back-end da solução no arquivo src/services/telemetryService.js.The UI retrieves the telemetry from the solution back end in the src/services/telemetryService.js file. As etapas a seguir mostram como alterar o período de tempo exibido no gráfico de telemetria de 15 a 5 minutos:The following steps show you how to change the time period displayed on the telemetry chart from 15 to 5 minutes:

  1. No arquivo src/services/telemetryService.js, localize a função chamada getTelemetryByDeviceIdP15M.In the src/services/telemetryService.js file, locate the function called getTelemetryByDeviceIdP15M. Faça uma cópia dessa função e modifique a cópia da seguinte maneira:Make a copy of this function and modify the copy as follows:

    static getTelemetryByDeviceIdP5M(devices = []) {
      return TelemetryService.getTelemetryByMessages({
        from: 'NOW-PT5M',
        to: 'NOW',
        order: 'desc',
        devices
      });
    }
    
  2. Para usar essa nova função para popular o gráfico de telemetria, abra o arquivo src/components/pages/dashboard/dashboard.js.To use this new function to populate the telemetry chart, open the src/components/pages/dashboard/dashboard.js file. Localize a linha que inicia o fluxo de telemetria e modifique-o da seguinte maneira:Locate the line that initializes the telemetry stream and modify it as follows:

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

O gráfico de telemetria agora mostra os cinco minutos de dados de telemetria:The telemetry chart now shows the five minutes of telemetry data:

Gráfico de telemetria mostrando um dia

Adicionar um novo KPIAdd a new KPI

A página Painel exibe KPIs no painel Analytics.The Dashboard page displays KPIs in the Analytics panel. Esses KPIs são calculados no arquivo src/components/pages/dashboard/dashboard.js.These KPIs are calculated in the src/components/pages/dashboard/dashboard.js file. Os KPIs são renderizados pelo arquivo src/components/pages/dashboard/panels/analytics/analyticsPanel.js.The KPIs are rendered by the src/components/pages/dashboard/panels/analytics/analyticsPanel.js file. As etapas a seguir descrevem como calcular e processar um novo valor de KPI na página Painel.The following steps describe how to calculate and render a new KPI value on the Dashboard page. O exemplo mostrado é para adicionar uma nova alteração percentual ao KPI de alarmes de aviso:The example shown is to add a new percentage change in warning alerts KPI:

  1. Abra o arquivo src/components/pages/dashboard/dashboard.js .Open the src/components/pages/dashboard/dashboard.js file. Modifique o objeto initialState para incluir uma propriedade warningAlertsChange da seguinte forma:Modify the initialState object to include a warningAlertsChange property as follows:

    const initialState = {
      ...
    
      // Analytics data
      analyticsVersion: 0,
      currentActiveAlerts: [],
      topAlerts: [],
      alertsPerDeviceId: {},
      criticalAlertsChange: 0,
      warningAlertsChange: 0,
      analyticsIsPending: true,
      analyticsError: null
    
      ...
    };
    
  2. Modifique o objeto currentAlertsStats para incluir totalWarningCount como uma propriedade:Modify the currentAlertsStats object to include totalWarningCount as a property:

    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.Calculate the new KPI. Encontre o cálculo da contagem de alertas críticos.Find the calculation for the critical alerts count. Duplique o código e modifique a cópia da seguinte maneira:Duplicate the code and modify the copy as follows:

    // ================== 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. Inclua o novo KPI warningAlertsChange no fluxo do KPI:Include the new warningAlertsChange KPI in the KPI stream:

    return ({
      analyticsIsPending: false,
      analyticsVersion: this.state.analyticsVersion + 1,
    
      // Analytics data
      currentActiveAlerts,
      topAlerts,
      criticalAlertsChange,
      warningAlertsChange,
      alertsPerDeviceId: currentAlertsStats.alertsPerDeviceId,
    
      ...
    });
    
  5. Incluir as novas warningAlertsChange KPI nos dados de estado usados para renderizar a interface do usuário:Include the new warningAlertsChange KPI in the state data used to render the UI:

    const {
      ...
    
      analyticsVersion,
      currentActiveAlerts,
      topAlerts,
      alertsPerDeviceId,
      criticalAlertsChange,
      warningAlertsChange,
      analyticsIsPending,
      analyticsError,
    
      ...
    } = this.state;
    
  6. Atualize os dados passados para o painel de KPIs:Update the data passed to the KPIs panel:

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

Agora você terminou as alterações no arquivo src/components/pages/dashboard/dashboard.js.You've now finished the changes in the src/components/pages/dashboard/dashboard.js file. As etapas a seguir descrevem as alterações a fazer no arquivo src/components/pages/dashboard/panels/analytics/analyticsPanel.js para exibir o novo KPI:The following steps describe the changes to make in the src/components/pages/dashboard/panels/analytics/analyticsPanel.js file to display the new KPI:

  1. Modifique a linha de código a seguir para recuperar o novo valor de KPI da seguinte maneira:Modify the following line of code to retrieve the new KPI value as follows:

    const { t, isPending, criticalAlertsChange, warningAlertsChange, alertsPerDeviceId, topAlerts, timeSeriesExplorerUrl, error } = this.props;
    
  2. Modifique a marcação para exibir o novo valor do KPI da seguinte maneira:Modify the markup to display the new KPI value as follows:

    <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 Painel agora exibe o novo valor de KPI:The Dashboard page now displays the new KPI value:

KPI de aviso

Personalizar o mapaCustomize the map

Consulte a página Personalizar mapa no GitHub para obter detalhes sobre os componentes de mapa na solução.See the Customize map page in GitHub for details of the map components in the solution.

Outras opções de personalizaçãoOther customization options

Para modificar ainda mais a camada de apresentação e de visualizações na solução de Monitoramento Remoto, você pode editar o código.To further modify the presentation and visualizations layer in the Remote Monitoring solution, you can edit the code. Os repositórios do GitHub relevantes são:The relevant GitHub repositories are:

Próximas etapasNext steps

Neste artigo, você aprendeu sobre os recursos disponíveis para ajudá-lo a personalizar a interface do usuário da Web no acelerador de solução de Monitoramento Remoto.In this article, you learned about the resources available to help you customize the web UI in the Remote Monitoring solution accelerator. Para saber mais sobre como personalizar a interface do usuário, consulte os seguintes artigos:To learn more about customizing the UI, see the following articles:

Para obter mais informações conceituais sobre o acelerador de solução de monitoramento remoto, consulte arquitetura de monitoramento remotoFor more conceptual information about the Remote Monitoring solution accelerator, see Remote Monitoring architecture

Para obter mais informações sobre como personalizar os microsserviços de solução de monitoramento remoto, consulte Personalizar e reimplantar um microsserviço.For more information about customizing the Remote Monitoring solution microservices, see Customize and redeploy a microservice.