Adicione uma página personalizada à interface da Web da web do acelerador de solução de monitoramento remotoAdd a custom page to the Remote Monitoring solution accelerator web UI

Este artigo mostra como adicionar uma nova página na interface do usuário web do acelerador de solução de Monitoramento Remoto.This article shows you how to add a new page into the Remote Monitoring solution accelerator web UI. O artigo descreve:The article describes:

  • Como preparar um ambiente de desenvolvimento local.How to prepare a local development environment.
  • Como adicionar uma nova página para o interface do usuário da web.How to add a new page to the web UI.

Outros guias de instruções ampliam esse cenário para adicionar mais recursos para a página que você adicionar.Other how-to guides extend this scenario to add more features to the page you add.

Pré-requisitosPrerequisites

Para concluir as etapas neste guia de instruções, você precisa ter o seguinte software instalado em seu computador de desenvolvimento local:To complete the steps in this how-to guide, you need the following software installed on your local development machine:

Preparar um ambiente de desenvolvimento local para a interface do usuárioPrepare a local development environment for the UI

O código da interface do usuário do acelerador de solução de Monitoramento Remoto é implementado usando a estrutura JavaScript Reagir.The Remote Monitoring solution accelerator UI code is implemented using the React JavaScript framework. Você pode encontrar o código-fonte na WebUI de Monitoramento Remoto repositório do GitHub.You can find the source code in the Remote Monitoring WebUI GitHub repository.

Para fazer e testar as alterações na interface do usuário, você pode executá-la em seu computador de desenvolvimento local.To make and test changes to the UI, you can run it on your local development machine. 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.Optionally, the local copy can connect to a deployed instance of the solution accelerator to enable it to interact with your real or simulated devices.

Para preparar o ambiente de desenvolvimento local, use o Git para clonar o repositório do WebUI de monitoramento remoto em seu computador local:To prepare your local development environment, use Git to clone the Remote Monitoring WebUI repository to your local machine:

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

Adicionar uma páginaAdd a page

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.To add a page to the web UI, you need to add the source files that define the page, and modify some existing files to make the web UI aware of the new page.

Adicione os novos arquivos que definem a páginaAdd the new files that define the page

Para começar, a pasta src/walkthrough/components/pages/basicPage contém seus arquivos que definem uma página simples:To get you started, the src/walkthrough/components/pages/basicPage folder contains four files that define a simple page:

basicPage.container.jsbasicPage.container.js


import { withNamespaces } from 'react-i18next';

import { BasicPage } from './basicPage';

export const BasicPageContainer = withNamespaces()(BasicPage);

basicPage.jsbasicPage.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.scssbasicPage.scss

@import 'src/styles/variables';
@import 'src/styles/mixins';
@import 'src/styles/themes';

.basic-page-container { padding: $baseContentPadding; }

basicPage.test.jsbasicPage.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.Create a new folder src/components/pages/example and copy these four files into it.

Adicione a nova página para a interface do usuário da webAdd the new page to the web UI

Para adicionar a nova página para a interface da web, faça as seguintes alterações em arquivos existentes:To add the new page into the web UI, make the following changes to existing files:

  1. Adicione o novo contêiner de página para o arquivo src/components/pages/index.js:Add the new page container to the src/components/pages/index.js file:

    export * from './example/basicPage.container';
    
  2. (Opcional) Adicione um ícone SVG para a nova página.(Optional) Add an SVG icon for the new page. Para obter mais informações, consulte webui/src/utilities/README.md.For more information, see webui/src/utilities/README.md. Você pode usar um arquivo SVG existente.You can use an existing SVG file.

  3. Adicione o nome da página para o arquivo de traduções public/locales/en/translations.json.Add the page name to the translations file, public/locales/en/translations.json. A interface do usuário usa i18next para internacionalização.The web UI uses i18next for internationalization.

    "tabs": {
      "basicPage": "Example",
    },
    
  4. Abra o arquivo src/components/app.js que define a página de aplicativo de nível superior.Open the src/components/app.js file that defines the top-level application page. Adicione a nova página à lista de importações:Add the new page to the list of imports:

    // Page Components
    import  {
      //...
      BasicPageContainer
    } from './pages';
    
  5. No mesmo arquivo, adicione a nova página para a matriz pagesConfig.In the same file, add the new page to the pagesConfig array. 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:Set the to address for the route, reference the SVG icon and translations added previously, and set the component to the page's container:

    const pagesConfig = [
      //...
      {
        to: '/basicpage',
        exact: true,
        svg: svgs.tabs.example,
        labelId: 'tabs.basicPage',
        component: BasicPageContainer
      },
      //...
    ];
    
  6. Adicione quaisquer barras de trilha para a crumbsConfig matriz:Add any new breadcrumbs to the crumbsConfig array:

    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.This example page only has one breadcrumb, but some pages may have more.

Salve todas as alterações.Save all your changes. Você está pronto para executar a interface da web com a nova página adicionada.You're ready to run the web UI with your new page added.

Testar o a nova páginaTest the new page

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:At a command prompt navigate to the root of your local copy of the repository, and run the following commands to install the required libraries and run the web UI locally:

npm install
npm start

O comando anterior é executado localmente na interface do usuário em http://localhost:3000/dashboard.The previous command runs the UI locally at http://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.Without connecting your local instance of the web UI to a deployed instance of the solution accelerator, you see errors on the dashboard. Esses erros não afetam sua capacidade de testar sua nova página.These errors don't affect your ability to test your new page.

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.You can now edit the code while the site is running locally and see the web UI update dynamically.

[Opcional] Conectar-se à instância implantada[Optional] Connect to deployed instance

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:Optionally, you can connect your local running copy of the web UI to the Remote Monitoring solution accelerator in the cloud:

  1. Implante uma instância básica do acelerador de solução usando a CLI pcs.Deploy a basic instance of the solution accelerator using the pcs CLI. Anote o nome da sua implantação e as credenciais fornecidas para a máquina virtual.Make a note of the name of your deployment and the credentials you provided for the virtual machine. Para saber mais, veja Implantar usando a CLI.For more information, see Deploy using the CLI.

  2. Use o portal do Azure ou a CLI do AZ para habilitar o acesso SSH à máquina virtual que hospeda os microserviços em sua solução.Use the Azure portal or the az CLI to enable SSH access to the virtual machine that hosts the microservices in your solution. Por exemplo:For example:

    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.You should only enable SSH access during test and development. Se você habilitar o SSH, deverá desabilitá-lo novamenteassim que possível.If you enable SSH, you should disable it again as soon as possible.

  3. 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.Use the Azure portal or the az CLI to find the name and public IP address of your virtual machine. Por exemplo:For example:

    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. 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.Use SSH to connect to your virtual machine using the IP address from the previous step, and the credentials you provided when you ran pcs to deploy the solution.

  5. Para permitir que o UX local se conecta, execute os seguintes comandos no shell bash na máquina virtual:To allow the local UX to connect, run the following commands at the bash shell in the virtual machine:

    cd /app
    sudo ./start.sh --unsafe
    
  6. Depois de ver que o comando foi concluído e o site da Web for iniciado, você poderá se desconectar da máquina virtual.After you see the command completes and the web site starts, you can disconnect from the virtual machine.

  7. 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:In your local copy of the Remote Monitoring WebUI repository, edit the .env file to add the URL of your deployed solution:

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

Próximas etapasNext steps

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.In this article, you learned about the resources available to help you customize the web UI in the Remote Monitoring solution accelerator.

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.Now you have defined a page, the next step is to Add a custom service to the Remote Monitoring solution accelerator web UI that retrieves data to display in the UI.

Para obter mais informações conceituais sobre o acelerador de solução de monitoramento remoto, consulte arquitetura de monitoramento remoto.For more conceptual information about the Remote Monitoring solution accelerator, see Remote Monitoring architecture.