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

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

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

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

先决条件

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

准备 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,请对现有文件进行以下更改:

  1. 将新页容器添加到 src/components/pages/index.js 文件中:

    export * from './example/basicPage.container';
    
  2. (可选)为新页添加 SVG 图标。 有关详细信息,请参阅 webui/src/utilities/README.md。 可使用现有 SVG 文件。

  3. 将页名添加到翻译文件 public/locales/en/translations.json 中。 Web UI 使用 i18next 支持国际化。

    "tabs": {
      "basicPage": "Example",
    },
    
  4. 打开定义顶级应用程序页的 src/components/app.js 文件。 将新页添加到导入列表:

    // Page Components
    import  {
      //...
      BasicPageContainer
    } from './pages';
    
  5. 在同一文件中,将新页添加到 pagesConfig 数组。 设置路由的 to 地址,引用之前添加的 SVG 图标和翻译,并将 component 设置为页的容器:

    const pagesConfig = [
      //...
      {
        to: '/basicpage',
        exact: true,
        svg: svgs.tabs.example,
        labelId: 'tabs.basicPage',
        component: BasicPageContainer
      },
      //...
    ];
    
  6. 将任何新的痕迹导航添加到 crumbsConfig 数组:

    const crumbsConfig = [
      //...
      {
        path: '/basicpage', crumbs: [
          { to: '/basicpage', labelId: 'tabs.basicPage' }
        ]
      },
      //...
    ];
    

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

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

测试新页

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

npm install
npm start

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

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

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

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

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

  1. 使用 pcs CLI 部署解决方案加速器的 基本 实例。 记下部署名称以及为虚拟机提供的凭据。 有关详细信息,请参阅使用 CLI 部署

  2. 使用 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, 应尽快禁用它

  3. 使用 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
    
  4. 使用前一步骤中的 IP 地址以及运行 pcs 部署解决方案时提供的凭据,通过 SSH 连接到虚拟机。

  5. 若要允许本地 UX 建立连接,请在虚拟机上的 bash shell 中运行以下命令:

    cd /app
    sudo ./start.sh --unsafe
    
  6. 看到命令完成并且网站启动后,可从虚拟机断开连接。

  7. 远程监视 WebUI 存储库的本地副本中,编辑 .env 文件以添加部署的解决方案的 URL:

    NODE_PATH = src/
    REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
    

后续步骤

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

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

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