次の方法で共有

リモート監視ソリューション アクセラレータの Web UI のダッシュボードにカスタム パネルを追加する

  • [アーティクル]

この記事では、リモート監視ソリューション アクセラレータの Web UI のダッシュボード ページに新しいパネルを追加する方法について示します。 この記事では、次の内容について説明します。

  • ローカルの開発環境を準備する方法。
  • Web UI のダッシュボード ページに新しいパネルを追加する方法。

この記事のパネルの例は、既存のダッシュボード ページに表示されます。

前提条件

このハウツー ガイドの手順を最後まで行うには、ローカル開発マシンに次のソフトウェアがインストールされている必要があります。

開始する前に

続行する前に、「リモート監視ソリューション アクセラレータの Web UI にカスタム ページを追加する」の記事に記載されている手順を完了する必要があります。

パネルの追加

Web UI にパネルを追加するには、パネルが定義されているソース ファイルを追加し、パネルを表示するようにダッシュボードを変更する必要があります。

パネルが定義されている新しいファイルを追加する

作業を始められるよう、src/walkthrough/components/pages/dashboard/panels/examplePanel フォルダーにパネルを定義した次のようなファイルが含まれています。

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/panels/examplePanel フォルダーを src/components/pages/dashboard/panels フォルダーにコピーします。

次のエクスポートを src/walkthrough/components/pages/dashboard/panels/index.js ファイルに追加します。

export * from './examplePanel';

パネルをダッシュボードに追加する

src/components/pages/dashboard/dashboard.js を変更してパネルを追加します。

パネルからのインポートの一覧にパネルの例を追加します。

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

次のセルの定義をページ コンテンツのグリッドに追加します。

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

ポップアップをテストする

まだ Web UI をローカルに実行していない場合は、リポジトリのローカル コピーのルートで次のコマンドを実行します。

npm start

前のコマンドは、https://localhost:3000/dashboard のローカルで UI を実行します。 新しいパネルを表示するには、[ダッシュボード] ページに移動します。

次の手順

この記事では、リモート監視ソリューション アクセラレータの Web UI のダッシュボードの追加またはカスタマイズに使用できるリソースについて説明しました。

リモート監視ソリューション アクセラレータの概念の詳細については、「 リモート監視アーキテクチャ」を参照してください。