Adicionar um painel personalizado ao dashboard na interface do usuário da Web do acelerador de solução de Monitoramento Remoto

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. O artigo descreve:

• Como preparar um ambiente de desenvolvimento local.
• Como adicionar um novo painel para uma página de dashboard na interface do usuário da Web.

O painel de exemplo neste artigo é exibido na página do dashboard existente.

Pré-requisitos

Para concluir as etapas neste guia de instruções, você precisa ter o seguinte software instalado em seu computador de desenvolvimento local:

• Git
• Node.js

Antes de começar

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.

Adicionar um painel

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.

Adicionar os novos arquivos que definem o painel

Para começar, a pasta src/walkthrough/components/pages/dashboard/panels/examplePanel pasta contém os arquivos que definem um painel, incluindo:

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

Adicione a exportação a seguir ao arquivo src/walkthrough/components/pages/dashboard/panels/index.js:

export * from './examplePanel';

Adicionar o painel ao dashboard

Modifique o src/components/pages/dashboard/dashboard.js para adicioná-lo ao painel.

Adicione o painel de exemplo à lista de importações de painéis:

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:

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

Testar o submenu

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:

npm start

O comando anterior é executado localmente na interface do usuário em https://localhost:3000/dashboard. Navegue até a página Dashboard para exibir o novo painel.

Próximas etapas

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.

Para obter mais informações conceituais sobre o acelerador de solução de Monitoramento Remoto, consulte a arquitetura de Monitoramento Remoto.