Dostosowywanie akceleratora rozwiązania do monitorowania zdalnego

Ten artykuł zawiera informacje na temat sposobu uzyskiwania dostępu do kodu źródłowego i dostosowywania interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego.

Używanie usługi Azure Cloud Shell

Na platforma Azure hostowane jest Azure Cloud Shell, interaktywne środowisko powłoki, z którego można korzystać w przeglądarce. Do pracy z usługami platformy Azure można używać programu Bash lub PowerShell w środowisku Cloud Shell. Aby uruchomić kod z tego artykułu bez konieczności instalowania narzędzi w środowisku lokalnym, można użyć wstępnie zainstalowanych poleceń środowiska Cloud Shell.

Aby uruchomić środowisko Azure Cloud Shell:

Opcja	Przykład/link
Wybierz pozycję Wypróbuj w prawym górnym rogu bloku kodu. Wybranie pozycji Wypróbuj nie spowoduje automatycznego skopiowania kodu do środowiska Cloud Shell.
Przejdź do witryny https://shell.azure.com lub wybierz przycisk Uruchom Cloud Shell, aby otworzyć środowisko Cloud Shell w przeglądarce.
Wybierz przycisk Cloud Shell na pasku menu w prawym górnym rogu witryny Azure Portal.

Aby uruchomić kod z tego artykułu w środowisku Azure Cloud Shell:

1. Uruchom usługę Cloud Shell.

2. Wybierz przycisk Kopiuj w bloku kodu, aby skopiować kod.

3. Wklej kod w sesji Cloud Shell, naciskając klawisze Ctrl+Shift+V w systemach Windows i Linux lub klawisze Cmd+Shift+V w systemie macOS.

4. Naciśnij klawisz Enter, aby uruchomić kod.

Przygotowywanie lokalnego środowiska deweloperskiego dla interfejsu użytkownika

Kod interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego jest implementowany przy użyciu platformy React.js. Kod źródłowy można znaleźć w repozytorium GitHub azure-iot-pcs-remote-monitoring-webui .

Aby wprowadzić zmiany w interfejsie użytkownika, możesz uruchomić jego kopię lokalnie. Aby wykonać akcje, takie jak pobieranie danych telemetrycznych, kopia lokalna łączy się z wdrożonym wystąpieniem rozwiązania.

W poniższych krokach opisano proces konfigurowania środowiska lokalnego na potrzeby tworzenia interfejsu użytkownika:

1. Wdróż podstawowe wystąpienie akceleratora rozwiązań przy użyciu interfejsu wiersza polecenia pcs . Zanotuj nazwę wdrożenia i poświadczenia podane dla maszyny wirtualnej. Aby uzyskać więcej informacji, zobacz Wdrażanie przy użyciu interfejsu wiersza polecenia.

2. Aby włączyć dostęp za pomocą protokołu SSH do maszyny wirtualnej, która hostuje mikrousługi w rozwiązaniu, użyj Azure Portal lub usługi Azure Cloud Shell. Przykład:

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

   Włącz dostęp za pomocą protokołu SSH tylko podczas testowania i programowania. Jeśli włączysz protokół SSH, należy go wyłączyć natychmiast po zakończeniu korzystania z niego.

3. Użyj Azure Portal lub usługi Azure Cloud Shell, aby znaleźć nazwę i publiczny adres IP maszyny wirtualnej. Przykład:

   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. Użyj protokołu SSH, aby nawiązać połączenie z maszyną wirtualną. Użyj adresu IP z poprzedniego kroku oraz poświadczeń podanych podczas uruchamiania komputerów w celu wdrożenia rozwiązania. Polecenie ssh jest dostępne w usłudze Azure Cloud Shell.

5. Aby umożliwić lokalnemu środowisku użytkownika nawiązywanie połączenia, uruchom następujące polecenia w powłoce bash na maszynie wirtualnej:

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

6. Po zakończeniu wykonywania polecenia i uruchomieniu witryny internetowej możesz odłączyć się od maszyny wirtualnej.

7. W lokalnej kopii repozytorium azure-iot-pcs-remote-monitoring-webui zmodyfikuj plik env , aby dodać adres URL wdrożonego rozwiązania:

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

8. W wierszu polecenia przejdź do lokalnej kopii azure-iot-pcs-remote-monitoring-webui folderu.

9. Aby zainstalować wymagane biblioteki i uruchomić interfejs użytkownika lokalnie, uruchom następujące polecenia:

   npm install
   npm start
   

10. Poprzednie polecenie uruchamia interfejs użytkownika lokalnie pod adresem http://localhost:3000/dashboard. Kod można edytować, gdy witryna jest uruchomiona, i zobaczyć ją dynamicznie.

Dostosowywanie układu

Każda strona w rozwiązaniu do monitorowania zdalnego składa się z zestawu kontrolek, nazywanych panelami w kodzie źródłowym. Strona Pulpit nawigacyjny składa się z pięciu paneli: Przegląd, Mapa, Alerty, Telemetria i Analiza. Kod źródłowy definiujący każdą stronę i jej panele można znaleźć w repozytorium github pcs-remote-monitoring-webui . Na przykład kod definiujący stronę pulpitu nawigacyjnego , jego układ i panele na stronie znajduje się w folderze src/components/pages/dashboard .

Panele zarządzają własnym układem i rozmiarem, dlatego można łatwo zmodyfikować układ strony. Wprowadź następujące zmiany w elemencie PageContent w pliku w następujący sposób src/components/pages/dashboard/dashboard.js :

• Zamień pozycje paneli mapy i telemetrii.
• Zmień względne szerokości paneli mapy i analiz.

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

Możesz również dodać kilka wystąpień tego samego panelu lub kilka wersji, jeśli zduplikujesz i dostosujesz panel. W poniższym przykładzie pokazano, jak dodać dwa wystąpienia panelu telemetrii. Aby wprowadzić te zmiany, edytuj src/components/pages/dashboard/dashboard.js plik:

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

Następnie można wyświetlić różne dane telemetryczne na każdym panelu:

Duplikowanie i dostosowywanie istniejącej kontrolki

W poniższych krokach opisano sposób duplikowania istniejącego panelu, modyfikowania go, a następnie używania zmodyfikowanej wersji. W krokach użyto panelu alertów jako przykładu:

1. W lokalnej kopii repozytorium utwórz kopię folderu alertów w folderze src/components/pages/dashboard/panels . Nadaj nowej kopii nazwę cust_alerts.

2. W pliku alertsPanel.js w folderze cust_alerts edytuj nazwę klasy CustAlertsPanel:

   export class CustAlertsPanel extends Component {
   

3. Dodaj następujący wiersz do src/components/pages/dashboard/panels/index.js pliku:

   export * from './cust_alerts';
   

4. Zastąp alertsPanel ciąg ciągiem CustAlertsPanelsrc/components/pages/dashboard/dashboard.js w pliku :

   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>
   

Oryginalny panel alertów został zastąpiony kopią o nazwie CustAlerts. Ta kopia jest taka sama jak oryginalna. Teraz możesz zmodyfikować kopię. Aby na przykład zmienić kolejność kolumn w panelu alertów :

1. Otwórz plik src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js.

2. Zmodyfikuj definicje kolumn, jak pokazano w poniższym fragmencie kodu:

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

Poniższy zrzut ekranu przedstawia nową wersję panelu alertów :

Dostosowywanie wykresu telemetrii

Pliki w folderze src/components/pages/dashboard/panels/telemtry definiują wykres telemetryczny na stronie Pulpit nawigacyjny . Interfejs użytkownika pobiera dane telemetryczne z zaplecza rozwiązania w src/services/telemetryService.js pliku . W poniższych krokach pokazano, jak zmienić okres wyświetlany na wykresie telemetrii z 15 do 5 minut:

1. src/services/telemetryService.js W pliku znajdź funkcję o nazwie getTelemetryByDeviceIdP15M. Utwórz kopię tej funkcji i zmodyfikuj kopię w następujący sposób:

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

2. Aby użyć tej nowej funkcji do wypełnienia wykresu telemetrii, otwórz src/components/pages/dashboard/dashboard.js plik. Znajdź wiersz, który inicjuje strumień telemetrii i zmodyfikuj go w następujący sposób:

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

Wykres telemetryczny przedstawia teraz pięć minut danych telemetrycznych:

Dodawanie nowego kluczowego wskaźnika wydajności

Na stronie Pulpit nawigacyjny są wyświetlane kluczowe wskaźniki wydajności na panelu Analiza . Te kluczowe wskaźniki wydajności są obliczane w src/components/pages/dashboard/dashboard.js pliku . Wskaźniki KPI są renderowane przez src/components/pages/dashboard/panels/analytics/analyticsPanel.js plik . W poniższych krokach opisano sposób obliczania i renderowania nowej wartości kluczowego wskaźnika wydajności na stronie Pulpit nawigacyjny . Pokazany przykład polega na dodaniu nowej zmiany procentowej w wskaźnikach KPI alertów ostrzegawczych:

1. Otwórz plik src/components/pages/dashboard/dashboard.js. Zmodyfikuj obiekt initialState , aby uwzględnić właściwość warningAlertsChange w następujący sposób:

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

2. Zmodyfikuj obiekt currentAlertsStats , aby uwzględnić parametr totalWarningCount jako właściwość:

   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. Oblicz nowy kluczowy wskaźnik wydajności. Znajdź obliczenie liczby alertów krytycznych. Zduplikuj kod i zmodyfikuj kopię w następujący sposób:

   // ================== 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. Uwzględnij nowe ostrzeżenieAlertsChange KPI w strumieniu kluczowego wskaźnika wydajności:

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

5. Uwzględnij nowe ostrzeżenieAlertsChange KPI w danych stanu używanych do renderowania interfejsu użytkownika:

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

6. Zaktualizuj dane przekazane do panelu kluczowych wskaźników wydajności:

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

Zmiany w src/components/pages/dashboard/dashboard.js pliku zostały ukończone. W poniższych krokach opisano zmiany wprowadzone w pliku w src/components/pages/dashboard/panels/analytics/analyticsPanel.js celu wyświetlenia nowego wskaźnika KPI:

1. Zmodyfikuj następujący wiersz kodu, aby pobrać nową wartość kluczowego wskaźnika wydajności w następujący sposób:

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

2. Zmodyfikuj znacznik, aby wyświetlić nową wartość kluczowego wskaźnika wydajności w następujący sposób:

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

Strona Pulpit nawigacyjny wyświetla teraz nową wartość kluczowego wskaźnika wydajności:

Dostosowywanie mapy

Aby uzyskać szczegółowe informacje o składnikach mapy w rozwiązaniu, zobacz stronę Dostosowywanie mapy w usłudze GitHub.

Inne opcje dostosowywania

Aby dodatkowo zmodyfikować warstwę prezentacji i wizualizacji w rozwiązaniu do monitorowania zdalnego, możesz edytować kod. Odpowiednie repozytoria GitHub to:

• Mikrousługa konfiguracji dla rozwiązań Azure IoT (.NET)
• Mikrousługę konfiguracji dla rozwiązań Azure IoT (Java)
• Interfejs użytkownika sieci Web monitorowania zdalnego monitorowania usługi Azure IoT PCS

Następne kroki

W tym artykule przedstawiono zasoby dostępne w celu dostosowania internetowego interfejsu użytkownika w akceleratorze rozwiązania do monitorowania zdalnego. Aby dowiedzieć się więcej na temat dostosowywania interfejsu użytkownika, zobacz następujące artykuły:

• Dodawanie strony niestandardowej do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego
• Dodawanie usługi niestandardowej do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego
• Dodawanie siatki niestandardowej do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego
• Dodawanie niestandardowego wysuwanego do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego
• Dodawanie panelu niestandardowego do pulpitu nawigacyjnego w internetowym interfejsie użytkownika akceleratora rozwiązania do monitorowania zdalnego

Aby uzyskać więcej informacji koncepcyjnych na temat akceleratora rozwiązania do monitorowania zdalnego, zobacz Architektura monitorowania zdalnego

Aby uzyskać więcej informacji na temat dostosowywania mikrousług rozwiązania do monitorowania zdalnego, zobacz Dostosowywanie i ponowne wdrażanie mikrousługi.