リモート監視ソリューションアクセラレータの Web UI にカスタムページを追加する

[アーティクル]
10/02/2018

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

ローカルの開発環境を準備する方法。
Web UI に新しいページを追加する方法。

その他のハウツーガイドでこのシナリオを拡張し、追加するページにさらに機能を追加します。

前提条件

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

Git
Node.js

UI のローカル開発環境を準備する

リモート監視ソリューションアクセラレータ UI のコードは、React JavaScript フレームワークを使用して実装されます。 Remote Monitoring WebUI GitHub リポジトリでソースコードを見つけることができます。

UI を変更してテストするには、ローカルの開発マシンで実行することができます。必要に応じて、ローカルコピーをソリューションアクセラレータのデプロイ済みインスタンスに接続して、実際のデバイスまたはシミュレートされたデバイスと対話することができます。

ローカル開発環境を準備するには、Git を使用して Remote Monitoring WebUI リポジトリをローカルマシンに複製します。

git clone https://github.com/Azure/pcs-remote-monitoring-webui.git

ページの追加

Web UI にページを追加するには、ページが定義されているソースファイルを追加し、既存のファイルをいくつか変更して、Web UI で新しいページが認識されるようにする必要があります。

ページが定義されている新しいファイルを追加する

src/walkthrough/components/pages/basicPage 内にある単純なページを定義する 4 つのファイルから始めます。

basicPage.container.js


import { withNamespaces } from 'react-i18next';

import { BasicPage } from './basicPage';

export const BasicPageContainer = withNamespaces()(BasicPage);

basicPage.js

import React, { Component } from 'react';

import { PageContent } from 'components/shared';

import './basicPage.scss';

export class BasicPage extends Component {
  render() {
    const { t } = this.props;
    return (
      <PageContent className="basic-page-container">
        { t('walkthrough.basicPage.pagePlaceholder') }
      </PageContent>
    );
  }
}

basicPage.scss

@import 'src/styles/variables';
@import 'src/styles/mixins';
@import 'src/styles/themes';

.basic-page-container { padding: $baseContentPadding; }

basicPage.test.js

import React from 'react';
import { shallow } from 'enzyme';
import 'polyfills';

import { BasicPage } from './basicPage';

describe('BasicPage Component', () => {
  it('Renders without crashing', () => {

    const fakeProps = {
      t: () => {},
    };

    const wrapper = shallow(
      <BasicPage {...fakeProps} />
    );
  });
});

新しいフォルダー src/components/pages/example を作成し、これら 4 つのファイルをコピーします。

Web UI に新しいページを追加する

新しいページを Web UI に追加するには、既存のファイルを次のように変更します。

新しいページコンテナーを src/components/pages/index.js ファイルに追加します。
```
export * from './example/basicPage.container';
```
(省略可能)新しいページの SVG アイコンを追加します。詳細については、webui/src/utilities/README.md を参照してください。既存の SVG ファイルを使用できます。
ページ名を翻訳ファイル public/locales/en/translations.json に追加します。 Web UI の国際化には i18next が使用されます。
```
"tabs": {
  "basicPage": "Example",
},
```
最上位のアプリケーションページを定義する src/components/app.js ファイルを開きます。インポートの一覧に新しいページを追加します。
```
// Page Components
import  {
  //...
  BasicPageContainer
} from './pages';
```
同じファイル内で、新しいページを pagesConfig 配列に追加します。ルートの to アドレスを設定し、以前に追加した SVG アイコンと翻訳を参照し、component をページのコンテナーに設定します。
```
const pagesConfig = [
  //...
  {
    to: '/basicpage',
    exact: true,
    svg: svgs.tabs.example,
    labelId: 'tabs.basicPage',
    component: BasicPageContainer
  },
  //...
];
```
すべての新しい階層リンクを crumbsConfig 配列に追加します。
```
const crumbsConfig = [
  //...
  {
    path: '/basicpage', crumbs: [
      { to: '/basicpage', labelId: 'tabs.basicPage' }
    ]
  },
  //...
];
```
この例のページには階層リンクが 1 つしかありませんが、ページによっては複数存在する場合があります。

すべての変更を保存します。新しいページが追加された Web UI を実行する準備が整いました。

新しいページをテストする

コマンドプロンプトでリポジトリのローカルコピーのルートに移動し、次のコマンドを実行して必要なライブラリをインストールし、Web UI をローカルで実行します。

npm install
npm start

前のコマンドは、https://localhost:3000/dashboard のローカルで UI を実行します。

Web UI のローカルインスタンスをソリューションアクセラレータのデプロイ済みインスタンスに接続していない場合、ダッシュボードにエラーが表示されます。このようなエラーは、新しいページをテストする機能に影響しません。

サイトがローカルで実行されている間にコードを編集し、Web UI の更新を動的に表示できるようになりました。

[省略可能] デプロイ済みインスタンスに接続する

必要に応じて、Web UI のローカルで実行されているコピーをクラウドの Remote Monitoring ソリューションアクセラレータに接続することができます。

pcs CLI を使用して、ソリューションアクセラレータの基本インスタンスをデプロイします。デプロイの名前と仮想マシンに提供した資格情報をメモしておきます。詳しくは、CLI を使用したデプロイに関するページをご覧ください。
Azure portalまたは az CLI を使用して、ソリューション内のマイクロサービスをホストする仮想マシンへの SSH アクセスを有効にします。例を以下に示します。
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
テストと開発時にのみ、SSH アクセスを有効にします。 SSH を有効にした場合は、できるだけ早くもう一度無効にする必要があります。

Azure Portal または az CLI を使用して、仮想マシンの名前とパブリック IP アドレスを検索します。例を以下に示します。

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

SSH を使用して、前の手順で取得した IP アドレスと、ソリューションをデプロイするために、pcs を実行したときに提供した資格情報を使用して、仮想マシンに接続します。
ローカル UX で接続できるようにするには、仮想マシンの bash シェルで、次のコマンドを実行します。
```
cd /app
sudo ./start.sh --unsafe
```
コマンドが完了し、Web サイトが起動したことを確認したら、仮想マシンから切断できます。
Remote Monitoring WebUI リポジトリのローカルコピーで、.env ファイルを編集し、デプロイ済みのソリューションの URL を追加します。
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

次の手順

この記事では、リモート監視ソリューションアクセラレータの Web UI のカスタマイズに役立つように使用できるリソースについて説明します。

ページを定義した後の次の手順は、UI に表示するデータを取得するリモート監視ソリューションアクセラレータ Web UI にカスタムサービスを追加することです。

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

次の方法で共有

リモート監視ソリューションアクセラレータの Web UI にカスタムページを追加する

前提条件

UI のローカル開発環境を準備する

ページの追加

ページが定義されている新しいファイルを追加する

Web UI に新しいページを追加する

新しいページをテストする

[省略可能] デプロイ済みインスタンスに接続する

次の手順

その他のリソース

次の方法で共有

リモート監視ソリューション アクセラレータの Web UI にカスタム ページを追加する

前提条件

UI のローカル開発環境を準備する

ページの追加

ページが定義されている新しいファイルを追加する

Web UI に新しいページを追加する

新しいページをテストする

[省略可能] デプロイ済みインスタンスに接続する

次の手順

その他のリソース

リモート監視ソリューションアクセラレータの Web UI にカスタムページを追加する