Adicionar um painel personalizado ao dashboard na interface do usuário da Web do acelerador de solução de Monitoramento RemotoAdd a custom panel to the dashboard in the Remote Monitoring solution accelerator web UI

Este artigo mostra como adicionar um novo painel a uma página de dashboard na interface do usuário da Web do acelerador de solução de Monitoramento Remoto.This article shows you how to add a new panel onto a dashboard page in the Remote Monitoring solution accelerator web UI. O artigo descreve:The article describes:

  • Como preparar um ambiente de desenvolvimento local.How to prepare a local development environment.
  • Como adicionar um novo painel para uma página de dashboard na interface do usuário da Web.How to add a new panel to a dashboard page in the web UI.

O painel de exemplo neste artigo é exibido na página do dashboard existente.The example panel in this article displays on the existing dashboard page.

Pré-requisitosPrerequisites

Para concluir as etapas neste guia de instruções, você precisa ter o seguinte software instalado em seu computador de desenvolvimento local:To complete the steps in this how-to guide, you need the following software installed on your local development machine:

Antes de começarBefore you start

Conclua as etapas no artigo Adicionar uma página personalizada à interface do usuário da Web do acelerador de solução de Monitoramento Remoto antes de continuar.You should complete the steps in the Add a custom page to the Remote Monitoring solution accelerator web UI article before continuing.

Adicionar um painelAdd a panel

Para adicionar um painel à interface do usuário da Web, é preciso adicionar os arquivos de origem que definem o painel e, em seguida, modificar o dashboard para exibir o painel.To add a panel to the web UI, you need to add the source files that define the panel, and then modify the dashboard to display the panel.

Adicionar os novos arquivos que definem o painelAdd the new files that define the panel

Para começar, a pasta src/walkthrough/components/pages/dashboard/panels/examplePanel pasta contém os arquivos que definem um painel, incluindo:To get you started, the src/walkthrough/components/pages/dashboard/panels/examplePanel folder contains the files that define a panel, including:

examplePanel.jsexamplePanel.js

import React, { Component } from 'react';

import {
  Panel,
  PanelHeader,
  PanelHeaderLabel,
  PanelContent,
} from 'components/pages/dashboard/panel';

import './examplePanel.scss';

export class ExamplePanel extends Component {
  constructor(props) {
    super(props);

    this.state = { isPending: true };
  }

  render() {
    const { t } = this.props;

    return (
      <Panel>
        <PanelHeader>
          <PanelHeaderLabel>{t('walkthrough.dashboard.panels.example.header')}</PanelHeaderLabel>
        </PanelHeader>
        <PanelContent className="example-panel-container">
          {t('walkthrough.dashboard.panels.example.panelBody')}
        </PanelContent>
      </Panel>
    );
  }
}

Copie a pasta src/walkthrough/components/pages/dashboard/panels/examplePanel para a pasta src/components/pages/dashboard/panels.Copy the src/walkthrough/components/pages/dashboard/panels/examplePanel folder to the src/components/pages/dashboard/panels folder.

Adicione a exportação a seguir ao arquivo src/walkthrough/components/pages/dashboard/panels/index.js:Add the following export to the src/walkthrough/components/pages/dashboard/panels/index.js file:

export * from './examplePanel';

Adicionar o painel ao dashboardAdd the panel to the dashboard

Modifique o src/components/pages/dashboard/dashboard.js para adicioná-lo ao painel.Modify the src/components/pages/dashboard/dashboard.js to add the panel.

Adicione o painel de exemplo à lista de importações de painéis:Add the example panel to the list of imports from panels:

import {
  OverviewPanel,
  AlertsPanel,
  TelemetryPanel,
  AnalyticsPanel,
  MapPanel,
  transformTelemetryResponse,
  chartColorObjects,
  ExamplePanel
} from './panels';

Adicione a seguinte definição de célula para a grade no conteúdo da página:Add the following cell definition to the grid in the page content:

          <Cell className="col-2">
            <ExamplePanel t={t} />
          </Cell>

Testar o submenuTest the flyout

Se a interface do usuário da web ainda não estiver em execução localmente, execute o seguinte comando na raiz da sua cópia local do repositório:If the web UI is not already running locally, run the following command in the root of your local copy of the repository:

npm start

O comando anterior é executado localmente na interface do usuário em http://localhost:3000/dashboard.The previous command runs the UI locally at http://localhost:3000/dashboard. Navegue até a página Dashboard para exibir o novo painel.Navigate to the Dashboard page to view the new panel.

Próximas etapasNext steps

Neste artigo, você aprendeu sobre os recursos disponíveis para ajudar você a adicionar ou personalizar dashboards na 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 add or customize dashboards in the web UI in the Remote Monitoring solution accelerator.

Para obter mais informações conceituais sobre o acelerador da solução de Monitoramento Remoto, veja Arquitetura de Monitoramento Remoto.For more conceptual information about the Remote Monitoring solution accelerator, see Remote Monitoring architecture.