Aracılığıyla paylaş

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ısı kullanıcı arabirimini nasıl özelleştirebileceğiniz hakkında bilgi sağlanır.

Azure Cloud Shell

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

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

Seçenek Örnek/Bağlantı
Kodun veya komut bloğunun sağ üst köşesindeki Deneyin'i seçin. Deneyin seçildiğinde kod veya komut otomatik olarak Cloud Shell'e kopyalanmaz. Azure Cloud Shell için Deneyin örneğini gösteren ekran görüntüsü.
https://shell.azure.comadresine gidin veya Cloud Shell'i tarayıcınızda açmak için Cloud Shell'i Başlat düğmesini seçin. Azure Cloud Shell'i başlatma düğmesi.
Azure portalının sağ üst kısmındaki menü çubuğunda Cloud Shell düğmesini seçin. Azure portalında Cloud Shell düğmesini gösteren ekran görüntüsü

Azure Cloud Shell'i kullanmak için:

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

  2. Kodu veya komutu kopyalamak için kod bloğundaki (veya komut bloğundaki) Kopyala düğmesini seçin.

  3. Windows ve Linux'ta Ctrl+Shift V'yi seçerek veya macOS üzerinde Cmd+Shift++V'yi seçerek kodu veya komutu Cloud Shell oturumuna yapıştırın.

  4. Kodu veya komutu çalıştırmak için Enter'ı seçin.

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 yerel olarak bir kopyasını çalıştırabilirsiniz. Telemetri alma gibi eylemleri tamamlamak için yerel kopya çözümün dağıtılan 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ını veya Azure Cloud Shell'i kullanın. Örneğin:

    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ını veya Azure Cloud Shell'i kullanın. Örneğin:

    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'de 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 makine bağlantısını 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ştirin

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, 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ı telemetrileri 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. Adımlarda uyarı paneli örnek olarak kullanılır:

  1. Deponun yerel kopyasında, klasöründeki 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 CustAlertsPanel src/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, dosyanın çözüm arka ucundan telemetriyi src/services/telemetryService.js alır. Aşağıdaki adımlar, telemetri grafiğinde görüntülenen süreyi 15 dakikadan 5 dakikaya nasıl değiştireceğini 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ğinde artık beş dakikalık telemetri verileri gösterilir:

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 şekli açıklanmaktadır. Gösterilen örnek, uyarı uyarıları KPI'sine yeni bir yüzde değişikliği eklemektir:

  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'yı 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'yi 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 görüntülemek için dosyada src/components/pages/dashboard/panels/analytics/analyticsPanel.js yapılması gereken değişiklikler açıklanmaktadır:

  1. Aşağıdaki kod satırını değiştirerek yeni KPI değerini aşağıdaki gibi alın:

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