Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabiriminde panoya özel panel ekleme

Makale
10/05/2018

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimindeki bir pano sayfasına nasıl yeni panel ekleneceği gösterilmektedir. Makalede şunlar açıklanmaktadır:

Yerel geliştirme ortamını hazırlama.
Web kullanıcı arabirimindeki bir pano sayfasına yeni panel ekleme.

Bu makaledeki örnek panel mevcut pano sayfasında görüntülenir.

Önkoşullar

Bu nasıl yapılır kılavuzundaki adımları tamamlamak için yerel geliştirme makinenizde aşağıdaki yazılımların yüklü olması gerekir:

Git
Node.js

Başlamadan önce

Devam etmeden önce Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir sayfa ekleme makalesindeki adımları tamamlamanız gerekir.

Panel ekleme

Web kullanıcı arabirimine panel eklemek için paneli tanımlayan kaynak dosyaları eklemeniz ve ardından panoyu paneli görüntüleyecek şekilde değiştirmeniz gerekir.

Paneli tanımlayan yeni dosyaları ekleme

Başlamak için src/walkthrough/components/pages/dashboard/panel/examplePanel klasörü, aşağıdakiler dahil olmak üzere bir panel tanımlayan dosyaları içerir:

examplePanel.js

import React, { Component } from 'react';

import {
  Panel,
  PanelHeader,
  PanelHeaderLabel,
  PanelContent,
} from 'components/pages/dashboard/panel';

import './examplePanel.scss';

export class ExamplePanel extends Component {
  constructor(props) {
    super(props);

    this.state = { isPending: true };
  }

  render() {
    const { t } = this.props;

    return (
      <Panel>
        <PanelHeader>
          <PanelHeaderLabel>{t('walkthrough.dashboard.panels.example.header')}</PanelHeaderLabel>
        </PanelHeader>
        <PanelContent className="example-panel-container">
          {t('walkthrough.dashboard.panels.example.panelBody')}
        </PanelContent>
      </Panel>
    );
  }
}

src/walkthrough/components/pages/dashboard/panel/examplePanel klasörünü src/components/pages/dashboard/panel klasörüne kopyalayın.

Src/walkthrough/components/pages/dashboard/panel/index.js dosyasına aşağıdaki dışarı aktarmayı ekleyin:

export * from './examplePanel';

Paneli panoya ekleme

Paneli eklemek için src/components/pages/dashboard/dashboard.js değiştirin.

Örnek paneli panellerden içeri aktarmalar listesine ekleyin:

import {
  OverviewPanel,
  AlertsPanel,
  TelemetryPanel,
  AnalyticsPanel,
  MapPanel,
  transformTelemetryResponse,
  chartColorObjects,
  ExamplePanel
} from './panels';

Sayfa içeriğindeki kılavuza aşağıdaki hücre tanımını ekleyin:

          <Cell className="col-2">
            <ExamplePanel t={t} />
          </Cell>

Web kullanıcı arabirimi yerel olarak çalışmıyorsa, deponuzun yerel kopyasının kökünde aşağıdaki komutu çalıştırın:

npm start

Önceki komut kullanıcı arabirimini konumunda https://localhost:3000/dashboardyerel olarak çalıştırır. Yeni paneli görüntülemek için Pano sayfasına gidin.

Sonraki adımlar

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısında web kullanıcı arabiriminde pano eklemenize veya özelleştirmenize yardımcı olacak kaynaklar hakkında bilgi edindi.

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

Aracılığıyla paylaş