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

2018-10-02

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

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

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

前提条件

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

Git
Node.js

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

リモート監視ソリューションアクセラレータ UI コードは、React JavaScript フレームワークを使用して実装されます。ソースコードは、リモート監視 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

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

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

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

[省略可能]デプロイされたインスタンスに接続する

必要に応じて、Web UI のローカル実行コピーをクラウドのリモート監視ソリューションアクセラレータに接続できます。

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 サイトが起動したら、仮想マシンから切断できます。
リモート監視 WebUI リポジトリのローカルコピーで、.env ファイルを編集して、デプロイされたソリューションの URL を追加します。
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

次のステップ

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

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

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