Uzaktan İzleme çözüm hızlandırıcısını özelleştirme

  • Makale

Bu makalede, kaynak koda nasıl erişebileceğiniz ve Uzaktan İzleme çözümü hızlandırıcı kullanıcı arabirimini nasıl özelleştirebileceğiniz hakkında bilgi sağlanır.

Azure Cloud Shell kullanma

Azure, tarayıcınız aracılığıyla kullanabileceğiniz etkileşimli bir kabuk ortamı olan Azure Cloud Shell’i barındırır. Azure hizmetleriyle çalışmak için Cloud Shell ile Bash veya PowerShell kullanabilirsiniz. Bu makaledeki kodu, yerel ortamınıza herhangi bir şey yüklemeye gerek kalmadan çalıştırmak için Cloud Shell’in önceden yüklenmiş komutlarını kullanabilirsiniz.

Azure Cloud Shell’i başlatmak için:

Seçenek Örnek/Bağlantı
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin. Deneyin seçeneği belirlendiğinde, kod otomatik olarak Cloud Shell’e kopyalanmaz. Azure Cloud Shell için Deneyin örneği
Cloud Shell’i tarayıcınızda açmak için https://shell.azure.com bölümüne gidin veya Cloud Shell’i Başlat düğmesini seçin. Cloud Shell’i yeni bir pencerede başlatma
Azure portalın sağ üst köşesindeki menü çubuğunda yer alan Cloud Shell düğmesini seçin. Azure portaldaki Cloud Shell düğmesi

Azure Cloud Shell’de bu makaledeki kodu çalıştırmak için:

  1. Cloud Shell’i başlatın.

  2. Kodu kopyalamak için kod bloğunda Kopyala düğmesini seçin.

  3. Windows ve Linux sisteminde Ctrl+Shift+V tuşlarını kullanarak veya macOS’de Cmd+Shift+V tuşlarını kullanarak kodu Cloud Shell oturumuna yapıştırın.

  4. Kodu çalıştırmak için Enter tuşuna basın.

Kullanıcı arabirimi için yerel bir geliştirme ortamı hazırlama

Uzaktan İzleme çözümü hızlandırıcısı kullanıcı arabirimi kodu, React.js çerçevesi kullanılarak uygulanır. Kaynak kodu azure-iot-pcs-remote-monitoring-webui GitHub deposunda bulabilirsiniz.

Kullanıcı arabiriminde değişiklik yapmak için bir kopyasını yerel olarak çalıştırabilirsiniz. Telemetriyi alma gibi eylemleri tamamlamak için yerel kopya çözümün dağıtılmış bir örneğine bağlanır.

Aşağıdaki adımlarda kullanıcı arabirimi geliştirme için yerel bir ortam ayarlama işlemi özetlenmiştir:

  1. Pcs CLI kullanarak çözüm hızlandırıcısının temel bir örneğini dağıtın. Dağıtımınızın adını ve sanal makine için sağladığınız kimlik bilgilerini not edin. Daha fazla bilgi için bkz. CLI kullanarak dağıtma.

  2. Çözümünüzde mikro hizmetleri barındıran sanal makineye SSH erişimini etkinleştirmek için Azure portal veya Azure Cloud Shell kullanın. Örnek:

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

    Yalnızca test ve geliştirme sırasında SSH erişimini etkinleştirin. SSH'yi etkinleştirirseniz, kullanmayı tamamladıktan hemen sonra devre dışı bırakmanız gerekir.

  3. Sanal makinenizin adını ve genel IP adresini bulmak için Azure portal veya Azure Cloud Shell kullanın. Örnek:

    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. Sanal makinenize bağlanmak için SSH kullanın. Önceki adımdaki IP adresini ve çözümü dağıtmak için bilgisayar çalıştırdığınızda sağladığınız kimlik bilgilerini kullanın. ssh komutu Azure Cloud Shell kullanılabilir.

  5. Yerel UX'nin bağlanmasına izin vermek için sanal makinedeki bash kabuğunda aşağıdaki komutları çalıştırın:

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

  6. Komutun tamamlanıp web sitesi başlatıldıktan sonra sanal makineyle bağlantınızı kesebilirsiniz.

  7. azure-iot-pcs-remote-monitoring-webui deposunun yerel kopyasında dağıtılan çözümünüzün URL'sini eklemek için .env dosyasını düzenleyin:

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

  8. Komut isteminde klasörün yerel kopyasına azure-iot-pcs-remote-monitoring-webui gidin.

  9. Gerekli kitaplıkları yüklemek ve kullanıcı arabirimini yerel olarak çalıştırmak için aşağıdaki komutları çalıştırın:

    npm install
npm start

  10. Önceki komut kullanıcı arabirimini yerel olarak şu konumda çalıştırır: http://localhost:3000/dashboard. Site çalışırken kodu düzenleyebilir ve dinamik olarak güncelleştirildiğini görebilirsiniz.

Düzeni özelleştirme

Uzaktan İzleme çözümündeki her sayfa, kaynak kodda paneller olarak adlandırılan bir dizi denetimden oluşur. Pano sayfası beş panelden oluşur: Genel Bakış, Harita, Uyarılar, Telemetri ve Analiz. Her sayfayı ve panellerini tanımlayan kaynak kodunu pcs-remote-monitoring-webui GitHub deposunda bulabilirsiniz. Örneğin, Pano sayfasını, düzenini ve sayfadaki panelleri tanımlayan kod src/components/pages/dashboard klasöründe bulunur.

Paneller kendi düzenlerini ve boyutlandırmalarını yönettiğinden, bir sayfanın düzenini kolayca değiştirebilirsiniz. Dosyasındaki PageContent öğesinde src/components/pages/dashboard/dashboard.js aşağıdaki değişiklikleri yapın:

  • Harita ve telemetri panellerinin konumlarını değiştirin.
  • Harita ve analiz panellerinin göreli genişliklerini değiştirin.
<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>

Panel düzenini değiştirme

Ayrıca aynı panelin birkaç örneğini veya bir paneli çoğaltıp özelleştirdiğinizde birkaç sürüm ekleyebilirsiniz. Aşağıdaki örnekte telemetri panelinin iki örneğinin nasıl ekleneceği gösterilmektedir. Bu değişiklikleri yapmak için dosyayı düzenleyin src/components/pages/dashboard/dashboard.js :

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

Ardından her panelde farklı telemetri verilerini görüntüleyebilirsiniz:

Birden çok telemetri paneli

Mevcut denetimi yineleme ve özelleştirme

Aşağıdaki adımlarda mevcut bir paneli yineleme, değiştirme ve ardından değiştirilmiş sürümü kullanma adımları özetlenmiştir. Bu adımlarda uyarılar paneli örnek olarak kullanılır:

  1. Deponun yerel kopyasında, klasördeki uyarılar klasörünün src/components/pages/dashboard/panels bir kopyasını oluşturun. Yeni kopyayı cust_alerts adlandırın.

  2. cust_alerts klasöründeki alertsPanel.js dosyasında, sınıfın adını CustAlertsPanel olarak düzenleyin:

    export class CustAlertsPanel extends Component {

  3. Dosyaya src/components/pages/dashboard/panels/index.js aşağıdaki satırı ekleyin:

    export * from './cust_alerts';

  4. dosyasında şununla CustAlertsPanelsrc/components/pages/dashboard/dashboard.js değiştirinalertsPanel:

    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>

Şimdi özgün uyarılar panelini CustAlerts adlı bir kopyayla değiştirdiniz. Bu kopya özgün kopyayla aynıdır. Artık kopyayı değiştirebilirsiniz. Örneğin, uyarılar panelinde sütun sıralamasını değiştirmek için:

  1. src/components/pages/dashboard/panels/cust_alerts/alertsPanel.js dosyasını açın.

  2. Sütun tanımlarını aşağıdaki kod parçacığında gösterildiği gibi değiştirin:

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

Aşağıdaki ekran görüntüsünde uyarılar panelinin yeni sürümü gösterilmektedir :

uyarılar paneli güncelleştirildi

Telemetri grafiğini özelleştirme

Klasördeki src/components/pages/dashboard/panels/telemtry dosyalar , Pano sayfasındaki telemetri grafiğini tanımlar. Kullanıcı arabirimi, telemetriyi dosyadaki çözüm arka ucundan src/services/telemetryService.js alır. Aşağıdaki adımlar, telemetri grafiğinde görüntülenen süreyi 15 dakika ile 5 dakika olarak değiştirme işlemini gösterir:

  1. src/services/telemetryService.js dosyasında getTelemetryByDeviceIdP15M adlı işlevi bulun. Bu işlevin bir kopyasını oluşturun ve kopyayı aşağıdaki gibi değiştirin:

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

  2. Telemetri grafiğini doldurmak üzere bu yeni işlevi kullanmak için dosyayı açın src/components/pages/dashboard/dashboard.js . Telemetri akışını başlatan satırı bulun ve aşağıdaki gibi değiştirin:

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

Telemetri grafiği şimdi telemetri verilerinin beş dakikasını gösterir:

Bir gün gösteren telemetri grafiği

Yeni KPI ekleme

Pano sayfasında Analiz panelinde KPI'ler görüntülenir. Bu KPI'ler dosyada src/components/pages/dashboard/dashboard.js hesaplanır. KPI'ler dosya tarafından src/components/pages/dashboard/panels/analytics/analyticsPanel.js işlenir. Aşağıdaki adımlarda Pano sayfasında yeni bir KPI değerinin nasıl hesaplandığı ve işlenme adımları açıklanmaktadır. Gösterilen örnek, uyarı uyarılarına yeni bir yüzde değişikliği eklemektir KPI:

  1. src/components/pages/dashboard/dashboard.js dosyasını açın. initialState nesnesini aşağıdaki gibi bir warningAlertsChange özelliği içerecek şekilde değiştirin:

    const initialState = {
  ...

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

  ...
};

  2. currentAlertsStats nesnesini totalWarningCount değerini özellik olarak içerecek şekilde değiştirin:

    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. Yeni KPI'yi hesaplayın. Kritik uyarı sayısı için hesaplamayı bulun. Kodu çoğaltın ve kopyayı aşağıdaki gibi değiştirin:

    // ================== 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. Yeni warningAlertsChange KPI değerini KPI akışına ekleyin:

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

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

  ...
});

  5. Kullanıcı arabirimini işlemek için kullanılan durum verilerine yeni warningAlertsChange KPI değerini ekleyin:

    const {
  ...

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

  ...
} = this.state;

  6. KPI'ler paneline geçirilen verileri güncelleştirin:

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

Dosyadaki src/components/pages/dashboard/dashboard.js değişiklikleri tamamladınız. Aşağıdaki adımlarda, yeni KPI'yi src/components/pages/dashboard/panels/analytics/analyticsPanel.js görüntülemek için dosyada yapılması gereken değişiklikler açıklanmaktadır:

  1. Yeni KPI değerini almak için aşağıdaki kod satırını aşağıdaki gibi değiştirin:

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

  2. İşaretlemeyi değiştirerek yeni KPI değerini aşağıdaki gibi görüntüleyin:

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

Pano sayfasında artık yeni KPI değeri görüntülenir:

Uyarı KPI'sı

Haritayı özelleştirme

Çözümdeki harita bileşenlerinin ayrıntıları için GitHub'daki Haritayı özelleştirme sayfasına bakın.

Diğer özelleştirme seçenekleri

Uzaktan İzleme çözümündeki sunu ve görselleştirme katmanını daha fazla değiştirmek için kodu düzenleyebilirsiniz. İlgili GitHub depoları şunlardır:

Sonraki adımlar

Bu makalede, Uzaktan İzleme çözüm hızlandırıcısında web kullanıcı arabirimini özelleştirmenize yardımcı olacak kullanılabilir kaynaklar hakkında bilgi edindiyseniz. Kullanıcı arabirimini özelleştirme hakkında daha fazla bilgi edinmek için aşağıdaki makalelere bakın:

Uzaktan İzleme çözümü hızlandırıcısı hakkında daha fazla kavramsal bilgi için bkz. Uzaktan İzleme mimarisi

Uzaktan İzleme çözümü mikro hizmetlerini özelleştirme hakkında daha fazla bilgi için bkz. Mikro hizmeti özelleştirme ve yeniden dağıtma.