Adicione uma página personalizada à interface da Web da web do acelerador de solução de monitoramento remoto

Artigo
10/02/2018

Este artigo mostra como adicionar uma nova página na interface do usuário web do acelerador de solução de Monitoramento Remoto. O artigo descreve:

Como preparar um ambiente de desenvolvimento local.
Como adicionar uma nova página para o interface do usuário da web.

Outros guias de instruções ampliam esse cenário para adicionar mais recursos para a página que você adicionar.

Pré-requisitos

Para concluir as etapas neste guia de instruções, você precisa ter o seguinte software instalado em seu computador de desenvolvimento local:

Git
Node.js

Preparar um ambiente de desenvolvimento local para a interface do usuário

O código da interface do usuário do acelerador de solução de Monitoramento Remoto é implementado usando a estrutura JavaScript Reagir. Você pode encontrar o código-fonte na WebUI de Monitoramento Remoto repositório do GitHub.

Para fazer e testar as alterações na interface do usuário, você pode executá-la em seu computador de desenvolvimento local. Opcionalmente, a cópia local pode se conectar a uma instância implantada do acelerador de solução para habilitá-lo para interagir com os dispositivos simulados ou reais.

Para preparar o ambiente de desenvolvimento local, use o Git para clonar o repositório do WebUI de monitoramento remoto em seu computador local:

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

Adicionar uma página

Para adicionar uma página para a interface do usuário da web, você precisa adicionar os arquivos de origem que definem a página e modificar alguns arquivos existentes para criar a IU da web com suporte da nova página.

Adicione os novos arquivos que definem a página

Para começar, a pasta src/walkthrough/components/pages/basicPage contém seus arquivos que definem uma página simples:

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} />
    );
  });
});

Crie uma nova pasta src/components/pages/example e copie esses arquivos nela.

Adicione a nova página para a interface do usuário da web

Para adicionar a nova página para a interface da web, faça as seguintes alterações em arquivos existentes:

Adicione o novo contêiner de página para o arquivo src/components/pages/index.js:
```
export * from './example/basicPage.container';
```
(Opcional) Adicione um ícone SVG para a nova página. Para obter mais informações, consulte webui/src/utilities/README.md. Você pode usar um arquivo SVG existente.
Adicione o nome da página para o arquivo de traduções public/locales/en/translations.json. A interface do usuário usa i18next para internacionalização.
```
"tabs": {
  "basicPage": "Example",
},
```
Abra o arquivo src/components/app.js que define a página de aplicativo de nível superior. Adicione a nova página à lista de importações:
```
// Page Components
import  {
  //...
  BasicPageContainer
} from './pages';
```
No mesmo arquivo, adicione a nova página para a matriz pagesConfig. Defina o endereço to para a rota, referencie o ícone SVG e as traduções adicionadas anteriormente e defina o component ao contêiner da página:
```
const pagesConfig = [
  //...
  {
    to: '/basicpage',
    exact: true,
    svg: svgs.tabs.example,
    labelId: 'tabs.basicPage',
    component: BasicPageContainer
  },
  //...
];
```
Adicione quaisquer barras de trilha para a crumbsConfig matriz:
```
const crumbsConfig = [
  //...
  {
    path: '/basicpage', crumbs: [
      { to: '/basicpage', labelId: 'tabs.basicPage' }
    ]
  },
  //...
];
```
Esta página de exemplo tem apenas uma barra de trilha, mas algumas páginas podem ter muito mais.

Salve todas as alterações. Você está pronto para executar a interface da web com a nova página adicionada.

Testar o a nova página

Em um prompt de comando, navegue até a raiz da sua cópia local do repositório e execute os seguintes comandos para instalar as bibliotecas necessárias e executar a IU da web localmente:

npm install
npm start

O comando anterior é executado localmente na interface do usuário em https://localhost:3000/dashboard.

Sem se conectar a sua instância local da web da interface do usuário para uma instância implantada do acelerador da solução, você verá erros no painel. Esses erros não afetam sua capacidade de testar sua nova página.

Agora você pode editar o código enquanto o site estiver em execução localmente e verá atualização da interface do usuário web dinamicamente.

[Opcional] Conectar-se à instância implantada

Opcionalmente, você pode conectar sua cópia local de execução da web da interface do usuário para o acelerador de solução de monitoramento remoto na nuvem:

Implante uma instância básica do acelerador de solução usando a CLI pcs. Anote o nome da sua implantação e as credenciais fornecidas para a máquina virtual. Para saber mais, veja Implantar usando a CLI.
Use o portal do Azure ou a CLI az para habilitar o acesso SSH à máquina virtual que hospeda os microsserviços em sua solução. Por exemplo:
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
Você só deve habilitar o acesso SSH durante o desenvolvimento e teste. Se você habilitar o SSH, desabilite-o novamente assim que possível.

Use o portal do Azure ou a CLI az para localizar o nome e o endereço IP público de sua máquina virtual. Por exemplo:

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

Use o SSH para se conectar à sua máquina virtual usando o endereço IP da etapa anterior e as credenciais fornecidas ao executar pcs para implantar a solução.
Para permitir que o UX local se conecta, execute os seguintes comandos no shell bash na máquina virtual:
```
cd /app
sudo ./start.sh --unsafe
```
Depois de ver que o comando foi concluído e o site da Web for iniciado, você poderá se desconectar da máquina virtual.
Em sua cópia local do repositório WebUI de Monitoramento remoto, edite o arquivo env para adicionar a URL da sua implantação da solução:
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

Próximas etapas

Neste artigo, você aprendeu sobre os recursos disponíveis para ajudá-lo a personalizar a interface do usuário da Web no acelerador de solução de Monitoramento Remoto.

Agora que definiu uma página, a próxima etapa é Adicionar um serviço personalizado para a interface do usuário web do acelerador de solução de Monitoramento Remoto que recupera dados a serem exibidos na interface do usuário.

Para obter mais informações conceituais sobre o acelerador de solução de Monitoramento Remoto, consulte a arquitetura de Monitoramento Remoto.