Personalización del acelerador de soluciones de supervisión remota

2018-11-09

En este artículo se proporciona información sobre cómo puede acceder al código fuente y personalizar la interfaz de usuario del acelerador de soluciones de supervisión remota.

Azure Cloud Shell

Azure hospeda Azure Cloud Shell, un entorno de shell interactivo que puede usar a través del explorador. Puede usar Bash o PowerShell con Cloud Shell para trabajar con servicios de Azure. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo, sin tener que instalar nada en el entorno local.

Para iniciar Azure Cloud Shell:

Opción	Ejemplo o vínculo
Seleccione Pruébelo en la esquina superior derecha de un bloque de código o de comandos. Solo con seleccionar Pruébelo no se copia automáticamente el código o comando en Cloud Shell.
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.

Para usar Azure Cloud Shell:

Inicie Cloud Shell.
Seleccione el botón Copiar en un bloque de código (o bloque de comandos) para copiar el código o comando.
Pegue el código o comando en la sesión de Cloud Shell seleccionando Ctrl+Mayús+V en Windows y Linux o seleccionando Cmd+Mayús+V en macOS.
Seleccione Escriba para ejecutar el código o comando.

Preparación de un entorno de desarrollo local para la interfaz de usuario

El código de la interfaz de usuario del acelerador de soluciones de supervisión remota se implementa mediante el marco de React.js. Puede encontrar el código fuente en el repositorio azure-iot-pcs-remote-monitoring-webui de GitHub.

Para realizar cambios en la interfaz de usuario, puede ejecutar una copia de ella localmente. Para completar acciones como recuperar telemetría, la copia local se conecta a una instancia implementada de la solución.

En los pasos siguientes se describe el proceso para configurar un entorno local para el desarrollo de la interfaz de usuario:

Implemente una básica instancia del acelerador de soluciones mediante la CLI pcs. Registre el nombre de su implementación y las credenciales que proporcionó para la máquina virtual. Para obtener más información, consulte Implementación mediante la CLI.
Para habilitar el acceso SSH a la máquina virtual que hospeda los microservicios de la solución, use Azure Portal o Azure Cloud Shell. Por ejemplo:
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
Habilitar solo el acceso SSH durante la prueba y el desarrollo. Si habilita SSH, debe deshabilitarlo tan pronto como haya terminado de usarlo.

Use Azure Portal o Azure Cloud Shell para buscar el nombre y la dirección IP pública de la máquina virtual. Por ejemplo:

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

Use SSH para conectarse a la máquina virtual. Use la dirección IP del paso anterior y las credenciales que proporcionó al ejecutar pcs para implementar la solución. El ssh comando está disponible en Azure Cloud Shell.
Para permitir que la experiencia de usuario local se conecte, ejecute los siguientes comandos en el shell de Bash en la máquina virtual:
```
cd /app
sudo ./start.sh --unsafe
```
Una vez completado el comando y se inicia el sitio web, puede desconectar de la máquina virtual.
En la copia local del repositorio azure-iot-pcs-remote-monitoring-webui , edite el archivo .env para agregar la dirección URL de la solución implementada:
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```
En una línea de comandos, vaya a la copia local de la carpeta azure-iot-pcs-remote-monitoring-webui.
Para instalar las bibliotecas necesarias y ejecutar la interfaz de usuario localmente, ejecute los siguientes comandos:
```
npm install
npm start
```
El comando anterior ejecuta la interfaz de usuario localmente en http://localhost:3000/dashboard. Puede editar el código mientras se ejecuta el sitio y verlo actualizar dinámicamente.

Personalizar el diseño

Cada página de la solución de supervisión remota se compone de un conjunto de controles, denominados paneles en el código fuente. La página Panel se compone de cinco paneles: Información general, Mapa, Alertas, Telemetría y Análisis. Puede encontrar el código fuente que define cada página y sus paneles en el repositorio pcs-remote-monitoring-webui de GitHub. Por ejemplo, el código que define la página Panel , su diseño y los paneles de la página se encuentran en la carpeta src/components/pages/dashboard .

Dado que los paneles administran su propio diseño y ajuste de tamaño, puede modificar fácilmente el diseño de una página. Realice los siguientes cambios en el elemento PageContent del src/components/pages/dashboard/dashboard.js archivo en:

Cambie las posiciones de los paneles de mapa y telemetría.
Cambie los anchos relativos de los paneles de mapa y análisis.

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

Cambio del diseño del panel

También puede agregar varias instancias del mismo panel o varias versiones si duplica y personaliza un panel. En el ejemplo siguiente se muestra cómo agregar dos instancias del panel de telemetría. Para realizar estos cambios, edite el src/components/pages/dashboard/dashboard.js archivo:

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

A continuación, puede ver datos de telemetría diferentes en cada panel:

Varios paneles de telemetría

Duplicar y personalizar un control existente

En los pasos siguientes se describe cómo duplicar un panel existente, modificarlo y, a continuación, usar la versión modificada. Los pasos usan el panel de alertas como ejemplo:

En la copia local del repositorio, realice una copia de la carpeta alerts en la src/components/pages/dashboard/panels carpeta . Nombre al nuevo documento de copia cust_alerts.
En el archivo alertsPanel.js de la carpeta cust_alerts , edite el nombre de la clase para que sea CustAlertsPanel:
```
export class CustAlertsPanel extends Component {
```
Agregue la siguiente línea al src/components/pages/dashboard/panels/index.js archivo:
```
export * from './cust_alerts';
```

Reemplace alertsPanel con CustAlertsPanel en el archivo src/components/pages/dashboard/dashboard.js.

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>

Ahora ha reemplazado el panel de alertas original por una copia denominada CustAlerts. Esta copia es la misma que la original. Ahora puede modificar la copia. Por ejemplo, para cambiar el orden de columnas en el panel de alertas :

Abra el archivo src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js.

Modifique las definiciones de columna como se muestra en el siguiente fragmento de código:

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

En la captura de pantalla siguiente se muestra la nueva versión del panel de alertas :

Panel de alertas actualizado

Personalización del gráfico de telemetría

Los archivos de la src/components/pages/dashboard/panels/telemtry carpeta definen el gráfico de telemetría en la página Panel . La interfaz de usuario recupera la telemetría del backend de la solución en el archivo src/services/telemetryService.js. Los pasos siguientes muestran cómo cambiar el período de tiempo que se muestra en el gráfico de telemetría de 15 a 5 minutos:

En el src/services/telemetryService.js archivo, busque la función llamada getTelemetryByDeviceIdP15M. Realice una copia de esta función y modifique la copia de la siguiente manera:
```
static getTelemetryByDeviceIdP5M(devices = []) {
  return TelemetryService.getTelemetryByMessages({
    from: 'NOW-PT5M',
    to: 'NOW',
    order: 'desc',
    devices
  });
}
```
Para usar esta nueva función para rellenar el gráfico de telemetría, abra el src/components/pages/dashboard/dashboard.js archivo. Busque la línea que inicializa el flujo de telemetría y modifíquela de la siguiente manera:
```
const getTelemetryStream = ({ deviceIds = [] }) => TelemetryService.getTelemetryByDeviceIdP5M(deviceIds)
```

El gráfico de telemetría muestra ahora los cinco minutos de datos de telemetría:

Gráfico de telemetría que muestra un día

Adición de un nuevo KPI

En la página Dashboard, se muestran los KPI en el panel de Análisis. Estos KPI se calculan en el src/components/pages/dashboard/dashboard.js archivo. Los KPI son procesados por el archivo src/components/pages/dashboard/panels/analytics/analyticsPanel.js. En los pasos siguientes se describe cómo calcular y representar un nuevo valor de KPI en la página Panel . El ejemplo que se muestra es agregar un nuevo cambio porcentual en el KPI de alertas de advertencia:

Abra el archivo src/components/pages/dashboard/dashboard.js. Modifique el objeto initialState para incluir una propiedad warningAlertsChange de la siguiente manera:

const initialState = {
  ...

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

  ...
};

Modifique el objeto currentAlertsStats para incluir totalWarningCount como propiedad:

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

Calcule el nuevo KPI. Busque el cálculo del recuento de alertas críticas. Duplique el código y modifique la copia de la siguiente manera:

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

Incluye el nuevo indicador clave de rendimiento warningAlertsChange en el flujo de KPI:

return ({
  analyticsIsPending: false,
  analyticsVersion: this.state.analyticsVersion + 1,

  // Analytics data
  currentActiveAlerts,
  topAlerts,
  criticalAlertsChange,
  warningAlertsChange,
  alertsPerDeviceId: currentAlertsStats.alertsPerDeviceId,

  ...
});

Incluya el nuevo KPI warningAlertsChange en los datos de estado usados para representar la interfaz de usuario:

const {
  ...

  analyticsVersion,
  currentActiveAlerts,
  topAlerts,
  alertsPerDeviceId,
  criticalAlertsChange,
  warningAlertsChange,
  analyticsIsPending,
  analyticsError,

  ...
} = this.state;

Actualice los datos enviados al panel de KPIs.

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

Ya ha terminado los cambios en el src/components/pages/dashboard/dashboard.js archivo. En los pasos siguientes se describen los cambios realizados en el src/components/pages/dashboard/panels/analytics/analyticsPanel.js archivo para mostrar el nuevo KPI:

Modifique la siguiente línea de código para recuperar el nuevo valor de KPI de la siguiente manera:

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

Modifique el marcado para mostrar el nuevo valor de KPI de la siguiente manera:

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

La página Panel muestra ahora el nuevo valor de KPI:

KPI de alerta

Personalización del mapa

Consulte la página Personalizar mapa en GitHub para obtener más información sobre los componentes de mapa de la solución.

Otras opciones de personalización

Para modificar aún más la capa de presentación y visualizaciones en la solución de supervisión remota, puede editar el código. Los repositorios de GitHub pertinentes son:

Pasos siguientes

En este artículo, ha obtenido información sobre los recursos disponibles para ayudarle a personalizar la interfaz de usuario web en el acelerador de soluciones de supervisión remota. Para más información sobre cómo personalizar la interfaz de usuario, consulte los artículos siguientes:

Adición de una página personalizada a la interfaz de usuario web del acelerador de soluciones de supervisión remota
Agregar un servicio personalizado a la interfaz web del acelerador de solución de supervisión remota
Agregar una cuadrícula personalizada a la interfaz de usuario web del acelerador de soluciones de monitoreo remoto
Añadir un flyout personalizado a la interfaz de usuario web del acelerador de solución de supervisión remota
Agrega un panel personalizado al tablero de mandos en la interfaz web del acelerador de solución de monitoreo remoto

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

Para obtener más información sobre cómo personalizar los microservicios de la solución de supervisión remota, consulte Personalización y reimplementación de un microservicio.

Compartir a través de