Добавление пользовательской страницы в веб-интерфейс акселератора решения для удаленного мониторинга

Статья
10/02/2018

В этой статье показано, как добавить новую страницу в веб-интерфейс акселератора решения для удаленного мониторинга. Содержание статьи:

Подготовка локальной среды разработки.
Добавление новой страницы в веб-интерфейс.

Другие руководства расширяют этот сценарий и позволяют добавить дополнительные функции к новой странице.

Предварительные требования

Чтобы выполнить действия, описанные в этом руководстве, необходимо установить следующее ПО на локальный компьютер разработки:

Git
Node.js

Подготовка локальной среды разработки для пользовательского интерфейса

Код пользовательского интерфейса акселератора решения для удаленного мониторинга реализуется с помощью платформы JavaScript React. Исходный код можно найти в репозитории GitHub веб-интерфейса для удаленного мониторинга.

Чтобы внести и протестировать изменения в пользовательском интерфейсе, можно запустить их на локальном компьютере разработки. При необходимости локальную копию можно подключить к развернутому экземпляру акселератора решений, чтобы он мог взаимодействовать с реальными или имитированными устройствами.

Чтобы подготовить локальную среду разработки, клонируйте на локальный компьютер репозиторий веб-интерфейса для удаленного мониторинга с помощью Git:

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

Добавление страницы

Чтобы добавить страницу в веб-интерфейс, необходимо добавить исходные файлы, которые определяют эту страницу. Необходимо также изменить некоторые имеющиеся файлы, чтобы веб-интерфейс учитывал новую страницу.

Добавление новых файлов, которые определяют страницу

Чтобы приступить к работе, перейдите к папке 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 и скопируйте в нее эти четыре файла.

Добавление новой страницы в веб-интерфейс

Чтобы добавить новую страницу в веб-интерфейс, внесите в имеющиеся файлы описанные ниже изменения.

Добавьте новый контейнер страниц в файл src/components/pages/index.js:
```
export * from './example/basicPage.container';
```
(Необязательно) Добавьте значок SVG для новой страницы. Дополнительные сведения см. в репозитории webui/src/utilities/README.md. Вы можете использовать имеющийся SVG-файл.
Добавьте название страницы public/locales/en/translations.json в файл переводов. Веб-интерфейс использует 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' }
    ]
  },
  //...
];
```
В этом примере страницы есть только один элемент навигации, но на других страницах может быть больше таких элементов.

Сохраните изменения. Веб-интерфейс с новой страницей готов к запуску.

Тестирование новой страницы

В командной строке перейдите к корню локальной копии репозитория и выполните следующие команды, чтобы установить необходимые библиотеки и локально запустить веб-интерфейс:

npm install
npm start

Предыдущая команда запускает пользовательский интерфейс локально по адресу https://localhost:3000/dashboard.

На панели мониторинга появятся сообщения об ошибках, если локальный экземпляр веб-интерфейса не будет подключен к развернутому экземпляру акселератора решений. Эти ошибки не влияют на возможность тестирования новой страницы.

Теперь можно изменить код во время локальной работы сайта. Веб-интерфейс будет обновляться динамически.

[Необязательно] Подключение к развернутому экземпляру

При необходимости в облаке можно подключить локальную копию веб-интерфейса к акселератору решения для удаленного мониторинга:

Разверните базовый экземпляр акселератора решений с помощью CLI PCS. Запишите имя развертывания и учетные данные, указанные для виртуальной машины. Дополнительные сведения см. в статье Развертывание предварительно настроенного решения для удаленного мониторинга с помощью интерфейса командной строки.
Используйте портал 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 или командную строку Azure, найдите имя и общедоступный 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 для развертывания решения.
Чтобы разрешить локальному пользовательскому интерфейсу установить подключение, выполните следующие команды в оболочке Bash на виртуальной машине.
```
cd /app
sudo ./start.sh --unsafe
```
После завершения команды и запуска веб-сайта можно отключиться от виртуальной машины.
В локальной копии репозитория веб-интерфейса для удаленного мониторинга измените ENV-файл, добавив URL-адрес развернутого решения.
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

Дополнительная информация

Из статьи вы узнали о ресурсах, которые могут помочь вам при настройке пользовательского веб-интерфейса в акселераторе решения для удаленного мониторинга.

Вы определили страницу. Теперь необходимо добавить пользовательскую службу в веб-интерфейс акселератора решения для удаленного мониторинга, которая извлекает данные для отображения в пользовательском интерфейсе.

Дополнительные концептуальные сведения об акселераторе решения для удаленного мониторинга см. в статье об архитектуре удаленного мониторинга.

Share via