Anpassa acceleratorn fjärrövervakningslösning

  • Artikel

Den här artikeln innehåller information om hur du kan komma åt källkoden och anpassa acceleratorns gränssnitt för fjärrövervakningslösningen.

Använda Azure Cloud Shell

Azure är värd för Azure Cloud Shell, en interaktiv gränssnittsmiljö som du kan använda via webbläsaren. Du kan använda antingen Bash eller PowerShell med Cloud Shell för att arbeta med Azure-tjänster. Du kan använda förinstallerade Cloud Shell-kommandon för att köra koden i den här artikeln utan att behöva installera något i din lokala miljö.

Så här startar du Azure Cloud Shell:

Alternativ Exempel/länk
Välj Prova i det övre högra hörnet av ett kodblock. Om du väljer Prova kopieras koden inte automatiskt till Cloud Shell. Exempel på Prova för Azure Cloud Shell
Gå till https://shell.azure.com eller Välj knappen Starta Cloud Shell för att öppna Cloud Shell i webbläsaren. Starta Cloud Shell i ett nytt fönster
Välj knappen Cloud Shell på menyn längst upp till höger i Azure-portalen. Cloud Shell-knappen i Azure Portal

Så här kör du koden i den här artikeln i Azure Cloud Shell:

  1. Starta Cloud Shell.

  2. Kopiera koden genom att klicka på knappen Kopiera på ett kodblock.

  3. Klistra in koden i Cloud Shell-sessionen genom att välja Ctrl+Skift+V på Windows och Linux eller genom att välja Cmd+Skift+V på macOS.

  4. Välj Retur för att köra koden.

Förbereda en lokal utvecklingsmiljö för användargränssnittet

UI-koden för acceleratorn fjärrövervakningslösning implementeras med hjälp av React.js-ramverket. Källkoden finns på GitHub-lagringsplatsen azure-iot-pcs-remote-monitoring-webui .

Om du vill göra ändringar i användargränssnittet kan du köra en kopia av det lokalt. För att slutföra åtgärder som att hämta telemetri ansluter den lokala kopian till en distribuerad instans av lösningen.

Följande steg beskriver processen för att konfigurera en lokal miljö för utveckling av användargränssnittet:

  1. Distribuera en grundläggande instans av lösningsacceleratorn med pcs CLI. Anteckna namnet på distributionen och de autentiseringsuppgifter som du angav för den virtuella datorn. Mer information finns i Distribuera med hjälp av CLI.

  2. Om du vill aktivera SSH-åtkomst till den virtuella dator som är värd för mikrotjänsterna i din lösning använder du Azure Portal eller Azure Cloud Shell. Ett exempel:

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

    Aktivera endast SSH-åtkomst under testning och utveckling. Om du aktiverar SSH bör du inaktivera det så snart du är klar med att använda det.

  3. Använd Azure Portal eller Azure Cloud Shell för att hitta namnet och den offentliga IP-adressen för den virtuella datorn. Ett exempel:

    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. Använd SSH för att ansluta till den virtuella datorn. Använd IP-adressen från föregående steg och de autentiseringsuppgifter som du angav när du körde datorer för att distribuera lösningen. Kommandot ssh är tillgängligt i Azure Cloud Shell.

  5. Om du vill tillåta att det lokala UX:et ansluter kör du följande kommandon i bash-gränssnittet på den virtuella datorn:

    cd /app
sudo ./start.sh --unsafe

  6. När kommandot har slutförts och webbplatsen startar kan du koppla från den virtuella datorn.

  7. I din lokala kopia av lagringsplatsen azure-iot-pcs-remote-monitoring-webui redigerar du .env-filen för att lägga till URL:en för den distribuerade lösningen:

    NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/

  8. I en kommandotolk navigerar du till din lokala kopia av azure-iot-pcs-remote-monitoring-webui mappen.

  9. Om du vill installera de bibliotek som krävs och köra användargränssnittet lokalt kör du följande kommandon:

    npm install
npm start

  10. Föregående kommando kör användargränssnittet lokalt på http://localhost:3000/dashboard. Du kan redigera koden medan webbplatsen körs och se den uppdateras dynamiskt.

Anpassa layouten

Varje sida i fjärrövervakningslösningen består av en uppsättning kontroller, som kallas paneler i källkoden. Sidan Instrumentpanel består av fem paneler: Översikt, Karta, Aviseringar, Telemetri och Analys. Du hittar källkoden som definierar varje sida och dess paneler på GitHub-lagringsplatsen pcs-remote-monitoring-webui . Till exempel finns koden som definierar sidan Instrumentpanel , dess layout och panelerna på sidan i mappen src/components/pages/dashboard .

Eftersom panelerna hanterar sin egen layout och storlek kan du enkelt ändra layouten för en sida. Gör följande ändringar i PageContent-elementet i src/components/pages/dashboard/dashboard.js filen för att:

  • Växla positionerna för kart- och telemetripanelerna.
  • Ändra de relativa bredderna för kart- och analyspanelerna.
<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>

Ändra panellayout

Du kan också lägga till flera instanser av samma panel eller flera versioner om du duplicerar och anpassar en panel. I följande exempel visas hur du lägger till två instanser av telemetripanelen. Redigera filen för att göra dessa src/components/pages/dashboard/dashboard.js ändringar:

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

Du kan sedan visa olika telemetri i varje panel:

Flera telemetripaneler

Duplicera och anpassa en befintlig kontroll

Följande steg beskriver hur du duplicerar en befintlig panel, ändrar den och sedan använder den ändrade versionen. Stegen använder aviseringspanelen som exempel:

  1. I din lokala kopia av lagringsplatsen gör du en kopia av aviseringsmappensrc/components/pages/dashboard/panels i mappen . Ge den nya kopian namnet cust_alerts.

  2. I filenalertsPanel.js i mappen cust_alerts redigerar du namnet på klassen till CustAlertsPanel:

    export class CustAlertsPanel extends Component {

  3. Lägg till följande rad i src/components/pages/dashboard/panels/index.js filen:

    export * from './cust_alerts';

  4. Ersätt alertsPanel med CustAlertsPanel i src/components/pages/dashboard/dashboard.js filen:

    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>

Nu har du ersatt den ursprungliga aviseringspanelen med en kopia med namnet CustAlerts. Den här kopian är samma som originalet. Nu kan du ändra kopian. Om du till exempel vill ändra kolumnordningen i aviseringspanelen :

  1. Öppna filen src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js.

  2. Ändra kolumndefinitionerna enligt följande kodfragment:

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

Följande skärmbild visar den nya versionen av aviseringspanelen :

aviseringspanelen har uppdaterats

Anpassa telemetridiagrammet

Filerna i src/components/pages/dashboard/panels/telemtry mappen definierar telemetridiagrammet på sidan Instrumentpanel . Användargränssnittet hämtar telemetrin från lösningens serverdel i src/services/telemetryService.js filen. Följande steg visar hur du ändrar tidsperioden som visas i telemetridiagrammet från 15 till 5 minuter:

  1. src/services/telemetryService.js Leta upp funktionen getTelemetryByDeviceIdP15M i filen. Gör en kopia av den här funktionen och ändra kopian på följande sätt:

    static getTelemetryByDeviceIdP5M(devices = []) {
  return TelemetryService.getTelemetryByMessages({
    from: 'NOW-PT5M',
    to: 'NOW',
    order: 'desc',
    devices
  });
}

  2. Om du vill använda den här nya funktionen för att fylla i telemetridiagrammet öppnar du src/components/pages/dashboard/dashboard.js filen. Leta upp den rad som initierar telemetriströmmen och ändra den på följande sätt:

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

Telemetridiagrammet visar nu de fem minuterna av telemetridata:

Telemetridiagram som visar en dag

Lägga till en ny KPI

På sidan Instrumentpanel visas KPI:er på panelen Analys . Dessa KPI:er beräknas i src/components/pages/dashboard/dashboard.js filen . KPI:erna återges av src/components/pages/dashboard/panels/analytics/analyticsPanel.js filen. Följande steg beskriver hur du beräknar och renderar ett nytt KPI-värde på sidan Instrumentpanel . Exemplet som visas är att lägga till en ny procentuell ändring i KPI för varningsaviseringar:

  1. Öppna filen src/components/pages/dashboard/dashboard.js. Ändra initialState-objektet så att det innehåller egenskapen warningAlertsChange på följande sätt:

    const initialState = {
  ...

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

  ...
};

  2. Ändra objektet currentAlertsStats så att totalWarningCount inkluderas som en egenskap:

    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. Beräkna den nya KPI:n. Hitta beräkningen för antalet kritiska aviseringar. Duplicera koden och ändra kopian på följande sätt:

    // ================== 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. Ta med den nya varningenAlertsChange KPI i KPI-strömmen:

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

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

  ...
});

  5. Inkludera den nya warningAlertsChange KPI i tillståndsdata som används för att återge användargränssnittet:

    const {
  ...

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

  ...
} = this.state;

  6. Uppdatera de data som skickas till KPI:er-panelen:

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

Nu har du slutfört ändringarna i src/components/pages/dashboard/dashboard.js filen. Följande steg beskriver de ändringar som ska utföras src/components/pages/dashboard/panels/analytics/analyticsPanel.js i filen för att visa den nya KPI:n:

  1. Ändra följande kodrad för att hämta det nya KPI-värdet på följande sätt:

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

  2. Ändra pålägget så att det nya KPI-värdet visas på följande sätt:

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

Sidan Instrumentpanel visar nu det nya KPI-värdet:

Varnings-KPI

Anpassa kartan

Mer information om kartkomponenterna i lösningen finns på sidan Anpassa karta i GitHub.

Andra anpassningsalternativ

Om du vill ändra presentations- och visualiseringsskiktet ytterligare i fjärrövervakningslösningen kan du redigera koden. Relevanta GitHub-lagringsplatser är:

Nästa steg

I den här artikeln har du lärt dig om de resurser som är tillgängliga för att anpassa webbgränssnittet i acceleratorn Fjärrövervakningslösning. Mer information om hur du anpassar användargränssnittet finns i följande artiklar:

Mer konceptuell information om acceleratorn fjärrövervakningslösning finns i Arkitektur för fjärrövervakning

Mer information om hur du anpassar mikrotjänster för fjärrövervakningslösningen finns i Anpassa och distribuera om en mikrotjänst.