向远程监视解决方案加速器 Web UI 添加自定义页面

项目
10/02/2018

本文介绍如何向远程监视解决方案加速器 Web UI 中添加新页。本文介绍：

如何准备本地开发环境。
如何向 Web UI 添加新页。

其他操作指南扩展此方案以向添加的页添加更多功能。

先决条件

要完成本操作指南中的步骤，需要在本地开发计算机上安装以下软件：

Git
Node.js

准备 UI 的本地开发环境

远程监视解决方案加速器 UI 代码是使用 React JavaScript 框架实现的。可在远程监视 WebUI GitHub 存储库中找到源代码。

若要对 UI 进行更改并测试，可在本地开发计算机上运行它。（可选）本地副本可以连接到解决方案加速器的已部署实例，使其能够与真实或模拟设备进行交互。

若要准备本地开发环境，请使用 Git 将远程监视 WebUI 存储库克隆到本地计算机：

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

添加页面

要向 Web UI 添加页，需要添加定义页的源文件，然后修改部分现有文件，以使 Web UI 感知新页。

添加定义页的新文件

首先，src/walkthrough/components/pages/basicPage 文件夹包含定义简单页的四个文件：

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 并将此四个文件复制到其中。

将新页添加到 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' }
    ]
  },
  //...
];

此示例页只有一个痕迹导航，但有些页可能有更多痕迹导航。

保存所有更改。现在即可使用添加的新页运行 Web UI。

测试新页

在命令提示符处，导航到存储库本地副本的根目录，然后运行以下命令以安装所需的库并在本地运行 Web UI：

npm install
npm start

上述命令在本地 (https://localhost:3000/dashboard) 运行 UI。

如果不将 Web UI 的本地实例连接到解决方案加速器的已部署实例，仪表板上会出现错误。这些错误不会影响测试新页的能力。

现在可在站点本地运行时编辑代码，并动态地查看 Web UI 更新。

[可选] 连接已部署的实例

（可选）可将 Web UI 的本地运行副本连接到云中的远程监视解决方案加速器：

使用 pcs CLI 部署解决方案加速器的基本实例。记下部署名称以及为虚拟机提供的凭据。有关详细信息，请参阅使用 CLI 部署。
使用 Azure 门户或 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 门户或 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

使用前一步骤中的 IP 地址以及运行 pcs 部署解决方案时提供的凭据，通过 SSH 连接到虚拟机。
若要允许本地 UX 建立连接，请在虚拟机上的 bash shell 中运行以下命令：
```
cd /app
sudo ./start.sh --unsafe
```
看到命令完成并且网站启动后，可从虚拟机断开连接。
在远程监视 WebUI 存储库的本地副本中，编辑 .env 文件以添加部署的解决方案的 URL：
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

后续步骤

本文已介绍可用来帮助自定义远程监视解决方案加速器中 Web UI 的资源。

现在已定义了页，下一步是向远程监视解决方案加速器 Web UI 添加自定义服务，该服务检索要在 UI 中显示的数据。

有关远程监视解决方案加速器的更多概念信息，请参阅远程监视体系结构。

通过