Adición de un panel personalizado al panel de la interfaz de usuario web del acelerador de soluciones de supervisión remota

Artículo
10/05/2018

En este artículo se muestra cómo agregar un nuevo panel en la página de panel de la interfaz de usuario web del acelerador de soluciones de supervisión remota. El artículo describe:

Cómo preparar un entorno de desarrollo local.
Cómo agregar un nuevo panel a una página de panel de la interfaz de usuario web.

El panel de ejemplo de este artículo se muestra en la página de panel existente.

Requisitos previos

Para completar los pasos de esta guía, necesita que el software siguiente esté instalado en la máquina de desarrollo local:

Git
Node.js

Antes de comenzar

Debe completar los pasos descritos en el artículo Adición de una página personalizada a la interfaz de usuario web del acelerador de soluciones de supervisión remota antes de continuar.

Agregar un panel

Para agregar un panel a la interfaz de usuario web, deberá agregar los archivos de origen que definen el panel y, a continuación, modificar la página de panel para mostrar el panel.

Adición de los nuevos archivos que definen el panel

Para comenzar, la carpeta src/walkthrough/components/pages/dashboard/panels/examplePanel contiene los archivos que definen un panel, incluyendo:

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 la carpeta src/walkthrough/components/pages/dashboard/panels/examplePanel en la carpeta src/components/pages/dashboard/panels.

Agregue la siguiente exportación al archivo src/walkthrough/components/pages/dashboard/panels/index.js:

export * from './examplePanel';

Adición del panel a la página de panel

Modifique el archivo src/components/pages/dashboard/dashboard.js para agregar el panel.

Agregue el panel de ejemplo a la lista de importaciones de paneles:

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

Agregue la siguiente definición de celda a la cuadrícula en el contenido de la página:

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

Si la interfaz de usuario web no se está ejecutando localmente, ejecute el siguiente comando en la raíz de la copia local del repositorio:

npm start

El comando anterior ejecuta la interfaz de usuario localmente en https://localhost:3000/dashboard. Para ver el nuevo panel, vaya a la página Panel.

Pasos siguientes

En este artículo, aprendió sobre los recursos que tiene a su disposición para ayudarle a agregar o personalizar paneles en la interfaz de usuario web del acelerador de la solución de supervisión remota.

Para obtener más información conceptual sobre el acelerador de soluciones de supervisión remota, consulte Arquitectura de supervisión remota.

Compartir a través de