De oplossingsversneller voor externe bewaking aanpassen

Dit artikel bevat informatie over hoe u toegang hebt tot de broncode en hoe u de gebruikersinterface van de oplossingsversneller voor externe bewaking kunt aanpassen.

Azure Cloud Shell gebruiken

Azure host Azure Cloud Shell, een interactieve shell-omgeving die u via uw browser kunt gebruiken. U kunt Bash of PowerShell gebruiken met Cloud Shell om met Azure-services te werken. U kunt de vooraf geïnstalleerde opdrachten van Cloud Shell gebruiken om de code in dit artikel uit te voeren zonder dat u iets hoeft te installeren in uw lokale omgeving.

Om Azure Cloud Shell op te starten:

Optie	Voorbeeld/koppeling
Selecteer Nu proberen in de rechterbovenhoek van een codeblok. Als u Uitproberen selecteert, wordt de code niet automatisch gekopieerd naar Cloud Shell.
Ga naar https://shell.azure.com, of selecteer de knop Cloud Shell starten om Cloud Shell in uw browser te openen.
Klik op de knop Cloud Shell in het menu in de balk rechtsboven in de Azure-portal.

Om de code in dit artikel in Azure Cloud Shell uit te voeren:

1. Start Cloud Shell.

2. Selecteer de knop Kopiëren op een codeblok om de code te kopiëren.

3. Plak de code in de Cloud Shell-sessie door CTRL+Shift+V te selecteren in Windows en Linux of door Cmd+Shift+V op macOS te selecteren.

4. Selecteer Invoeren om de code uit te voeren.

Een lokale ontwikkelomgeving voorbereiden voor de gebruikersinterface

De UI-code voor de externe bewakingsoplossingsversneller wordt geïmplementeerd met behulp van het React.js framework. U vindt de broncode in de GitHub-opslagplaats azure-iot-pcs-remote-monitoring-webui .

Als u wijzigingen wilt aanbrengen in de gebruikersinterface, kunt u een kopie lokaal uitvoeren. Als u acties wilt voltooien, zoals het ophalen van telemetrie, maakt de lokale kopie verbinding met een geïmplementeerd exemplaar van de oplossing.

In de volgende stappen wordt het proces beschreven voor het instellen van een lokale omgeving voor ui-ontwikkeling:

1. Implementeer een basisexemplaren van de oplossingsversneller met behulp van de PCS CLI. Noteer de naam van uw implementatie en de referenties die u hebt opgegeven voor de virtuele machine. Zie Implementeren met behulp van de CLI voor meer informatie.

2. Als u SSH-toegang wilt inschakelen tot de virtuele machine waarop de microservices in uw oplossing worden gehost, gebruikt u de Azure Portal of de Azure-Cloud Shell. Bijvoorbeeld:

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

   Schakel alleen SSH-toegang in tijdens de test en ontwikkeling. Als u SSH inschakelt, moet u deze uitschakelen zodra u klaar bent met het gebruik ervan.

3. Gebruik de Azure Portal of de Azure-Cloud Shell om de naam en het openbare IP-adres van uw virtuele machine te vinden. Bijvoorbeeld:

   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. Gebruik SSH om verbinding te maken met uw virtuele machine. Gebruik het IP-adres uit de vorige stap en de referenties die u hebt opgegeven toen u pc's hebt uitgevoerd om de oplossing te implementeren. De ssh opdracht is beschikbaar in de Azure Cloud Shell.

5. Als u wilt toestaan dat de lokale UX verbinding maakt, voert u de volgende opdrachten uit in de bash-shell op de virtuele machine:

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

6. Nadat u de opdracht hebt voltooid en de website wordt gestart, kunt u de verbinding met de virtuele machine verbreken.

7. Bewerk in uw lokale kopie van de opslagplaats azure-iot-pcs-remote-monitoring-webui het .env-bestand om de URL van uw geïmplementeerde oplossing toe te voegen:

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

8. Navigeer bij een opdrachtprompt naar uw lokale kopie van de azure-iot-pcs-remote-monitoring-webui map.

9. Voer de volgende opdrachten uit om de vereiste bibliotheken te installeren en de gebruikersinterface lokaal uit te voeren:

   npm install
   npm start
   

10. Met de vorige opdracht wordt de gebruikersinterface lokaal uitgevoerd op http://localhost:3000/dashboard. U kunt de code bewerken terwijl de site wordt uitgevoerd en deze dynamisch bijwerken.

De indeling aanpassen

Elke pagina in de externe bewakingsoplossing bestaat uit een set besturingselementen, ook wel deelvensters genoemd in de broncode. De dashboardpagina bestaat uit vijf deelvensters: Overzicht, Kaart, Waarschuwingen, Telemetrie en Analyse. U vindt de broncode die elke pagina en de bijbehorende panelen definieert in de GitHub-opslagplaats pcs-remote-monitoring-webui . De code die bijvoorbeeld de dashboardpagina , de indeling en de deelvensters op de pagina definieert, bevindt zich in de map src/components/pages/dashboard .

Omdat de panelen hun eigen indeling en grootte beheren, kunt u eenvoudig de indeling van een pagina wijzigen. Breng de volgende wijzigingen aan in het element PageContent in het src/components/pages/dashboard/dashboard.js bestand in:

• Wissel de posities van de kaart- en telemetriepanelen.
• Wijzig de relatieve breedte van de kaart- en analysepanelen.

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

U kunt ook verschillende exemplaren van hetzelfde deelvenster of verschillende versies toevoegen als u een deelvenster dupliceert en aanpast. In het volgende voorbeeld ziet u hoe u twee exemplaren van het telemetriepaneel toevoegt. Als u deze wijzigingen wilt aanbrengen, bewerkt u het src/components/pages/dashboard/dashboard.js bestand:

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

Vervolgens kunt u in elk deelvenster verschillende telemetriegegevens weergeven:

Een bestaand besturingselement dupliceren en aanpassen

In de volgende stappen wordt beschreven hoe u een bestaand deelvenster dupliceerd, wijzigt en vervolgens de gewijzigde versie gebruikt. In de stappen wordt het deelvenster Waarschuwingen als voorbeeld gebruikt:

1. Maak in uw lokale kopie van de opslagplaats een kopie van de map waarschuwingen in de src/components/pages/dashboard/panels map. Geef de nieuwe kopie de naam cust_alerts.

2. Bewerk in het bestandalertsPanel.js in de map cust_alerts de naam van de klasse als CustAlertsPanel:

   export class CustAlertsPanel extends Component {
   

3. Voeg de volgende regel toe aan het src/components/pages/dashboard/panels/index.js bestand:

   export * from './cust_alerts';
   

4. Vervang alertsPanel door CustAlertsPanel in het src/components/pages/dashboard/dashboard.js bestand:

   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>
   

U hebt nu het oorspronkelijke waarschuwingenvenster vervangen door een kopie met de naam CustAlerts. Deze kopie is hetzelfde als het origineel. U kunt nu de kopie wijzigen. Als u bijvoorbeeld de kolomvolgorde in het deelvenster Waarschuwingen wilt wijzigen:

1. Open het bestand src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js.

2. Wijzig de kolomdefinities zoals wordt weergegeven in het volgende codefragment:

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

In de volgende schermopname ziet u de nieuwe versie van het deelvenster Waarschuwingen :

Het telemetriediagram aanpassen

De bestanden in de src/components/pages/dashboard/panels/telemtry map definiëren het telemetriediagram op de dashboardpagina. De gebruikersinterface haalt de telemetrie op uit de back-end van de oplossing in het src/services/telemetryService.js bestand. In de volgende stappen ziet u hoe u de periode wijzigt die wordt weergegeven in het telemetriediagram van 15 tot 5 minuten:

1. Zoek in het src/services/telemetryService.js bestand de functie getTelemetryByDeviceIdP15M. Maak een kopie van deze functie en wijzig de kopie als volgt:

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

2. Als u deze nieuwe functie wilt gebruiken om het telemetriediagram te vullen, opent u het src/components/pages/dashboard/dashboard.js bestand. Zoek de regel die de telemetriestroom initialiseert en wijzig deze als volgt:

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

In het telemetriediagram ziet u nu de vijf minuten telemetriegegevens:

Een nieuwe KPI toevoegen

Op de dashboardpagina worden KPI's weergegeven in het deelvenster Analytics. Deze KPI's worden berekend in het src/components/pages/dashboard/dashboard.js bestand. De KPI's worden weergegeven door het src/components/pages/dashboard/panels/analytics/analyticsPanel.js bestand. In de volgende stappen wordt beschreven hoe u een nieuwe KPI-waarde op de dashboardpagina berekent en weergeeft. Het voorbeeld dat wordt weergegeven, is het toevoegen van een nieuwe percentagewijziging in waarschuwingswaarschuwingen KPI:

1. Open het bestand src/components/pages/dashboard/dashboard.js. Wijzig als volgt het initialState-object om een warningAlertsChange-eigenschap op te nemen:

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

2. Wijzig het object currentAlertsStats zodat totalWarningCount als eigenschap wordt opgenomen:

   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. De nieuwe KPI berekenen. Zoek de berekening voor het aantal kritieke waarschuwingen. Dupliceer de code en wijzig de kopie als volgt:

   // ================== 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. Neem de nieuwe warningAlertsChange KPI op in de KPI-stream:

   return ({
     analyticsIsPending: false,
     analyticsVersion: this.state.analyticsVersion + 1,
   
     // Analytics data
     currentActiveAlerts,
     topAlerts,
     criticalAlertsChange,
     warningAlertsChange,
     alertsPerDeviceId: currentAlertsStats.alertsPerDeviceId,
   
     ...
   });
   

5. Neem de nieuwe warningAlertsChange KPI op in de statusgegevens die worden gebruikt om de gebruikersinterface weer te geven:

   const {
     ...
   
     analyticsVersion,
     currentActiveAlerts,
     topAlerts,
     alertsPerDeviceId,
     criticalAlertsChange,
     warningAlertsChange,
     analyticsIsPending,
     analyticsError,
   
     ...
   } = this.state;
   

6. Werk de gegevens bij die worden doorgegeven aan het deelvenster KPI's:

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

U hebt nu de wijzigingen in het src/components/pages/dashboard/dashboard.js bestand voltooid. In de volgende stappen worden de wijzigingen beschreven die u in het src/components/pages/dashboard/panels/analytics/analyticsPanel.js bestand moet aanbrengen om de nieuwe KPI weer te geven:

1. Wijzig de volgende coderegel om de nieuwe KPI-waarde als volgt op te halen:

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

2. Wijzig de markering om de nieuwe KPI-waarde als volgt weer te geven:

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

Op de dashboardpagina wordt nu de nieuwe KPI-waarde weergegeven:

De kaart aanpassen

Zie de pagina Kaart aanpassen in GitHub voor meer informatie over de kaartonderdelen in de oplossing.

Andere aanpassingsopties

Als u de presentatie- en visualisatielaag verder wilt wijzigen in de externe bewakingsoplossing, kunt u de code bewerken. De relevante GitHub-opslagplaatsen zijn:

• De configuratiemicroservice voor Azure IoT Solutions (.NET)
• De configuratiemicroservice voor Azure IoT Solutions (Java)
• Webgebruikersinterface voor externe bewaking van Azure IoT PCS

Volgende stappen

In dit artikel hebt u geleerd over de resources die beschikbaar zijn om u te helpen de webgebruikersinterface aan te passen in de oplossingsversneller Voor externe bewaking. Zie de volgende artikelen voor meer informatie over het aanpassen van de gebruikersinterface:

• Een aangepaste pagina toevoegen aan de webgebruikersinterface van de externe bewakingsoplossingsversneller
• Een aangepaste service toevoegen aan de webgebruikersinterface van de externe bewakingsoplossingsversneller
• Een aangepast raster toevoegen aan de webgebruikersinterface van de externe bewakingsoplossingsversneller
• Een aangepaste flyout toevoegen aan de webgebruikersinterface van de externe bewakingsoplossingsversneller
• Een aangepast deelvenster toevoegen aan het dashboard in de webgebruikersinterface van de externe bewakingsoplossingsversneller

Zie de architectuur voor externe bewaking voor meer conceptuele informatie over de oplossingsversneller voor externe bewaking

Zie Een microservice aanpassen en opnieuw implementeren voor meer informatie over het aanpassen van de microservices van de externe bewakingsoplossing.