Adición de una página personalizada a la interfaz de usuario web del acelerador de soluciones de supervisión remota

Artículo
10/02/2018

En este artículo se muestra cómo agregar una nueva página a la interfaz de usuario web del acelerador de soluciones de supervisión remota. El artículo describe:

Cómo preparar un entorno de desarrollo local.
Cómo agregar una nueva página a la interfaz de usuario web.

Otras guías paso a paso amplían este escenario para añadir más características a la página que se agrega.

Requisitos previos

Para completar los pasos de esta guía, necesita que el software siguiente esté instalado en la máquina de desarrollo local:

Git
Node.js

Preparación de un entorno de desarrollo local para la interfaz de usuario

El código de la interfaz de usuario del acelerador de soluciones de supervisión remota se implementa mediante el marco de trabajo de JavaScript React. Puede encontrar el código fuente en el repositorio de GitHub WebUI de supervisión remota.

Para realizar cambios en la interfaz de usuario y probarlos, puede ejecutarla en el equipo de desarrollo local. Opcionalmente, la copia local puede conectarse a una instancia implementada del acelerador de soluciones para poder interactuar con dispositivos reales o simulados.

Para preparar el entorno de desarrollo local, use Git para clonar el repositorio WebUI de supervisión remota en el equipo local:

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

Agregar una página

Para agregar una página a la interfaz de usuario web, deberá agregar los archivos de origen que definen la página y modificar algunos archivos existentes para hacer que la interfaz de usuario web sea consciente de la nueva página.

Adición de nuevos archivos que definen la página

Para comenzar, la carpeta src/walkthrough/components/pages/basicPage contiene cuatro archivos que definen una página sencilla:

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

Cree una nueva carpeta src/components/pages/example y copie estos cuatro archivos en ella.

Adición de una nueva página a la interfaz de usuario web

Para agregar la nueva página a la interfaz de usuario web, realice los siguientes cambios a los archivos existentes:

Agregue el contenedor de la nueva página al archivo src/components/pages/index.js:
```
export * from './example/basicPage.container';
```
(Opcional) Agregue un icono SVG para la nueva página. Para obtener más información, consulte webui/src/utilities/README.md. Puede usar un archivo SVG existente.
Agregue el nombre de página al archivo de traducciones public/locales/en/translations.json. La interfaz de usuario web usa i18next para la internacionalización.
```
"tabs": {
  "basicPage": "Example",
},
```
Abra el archivo src/components/app.js que define la página de aplicación de nivel superior. Agregue la nueva página a la lista de importaciones:
```
// Page Components
import  {
  //...
  BasicPageContainer
} from './pages';
```
En el mismo archivo, agregue la nueva página a la matriz pagesConfig. Establezca la dirección to para la ruta, haga referencia al icono SVG y a las traducciones que se agregaron anteriormente y establezca component en el contenedor de la página:
```
const pagesConfig = [
  //...
  {
    to: '/basicpage',
    exact: true,
    svg: svgs.tabs.example,
    labelId: 'tabs.basicPage',
    component: BasicPageContainer
  },
  //...
];
```
Agregue rutas de navegación nuevas para la matriz crumbsConfig:
```
const crumbsConfig = [
  //...
  {
    path: '/basicpage', crumbs: [
      { to: '/basicpage', labelId: 'tabs.basicPage' }
    ]
  },
  //...
];
```
Esta página de ejemplo solo tiene una ruta de navegación, pero algunas páginas pueden tener más.

Guarde todos los cambios. Ya está todo listo para ejecutar la interfaz de usuario web con la nueva página agregada.

Probar la nueva página

En un símbolo del sistema, navegue a la raíz de la copia local del repositorio y, después, ejecute los siguientes comandos para instalar las bibliotecas necesarias y ejecute la interfaz de usuario web localmente:

npm install
npm start

El comando anterior ejecuta la interfaz de usuario localmente en https://localhost:3000/dashboard.

Sin conectar su instancia local de la interfaz de usuario web a una instancia implementada del acelerador de soluciones, verá errores en el panel. Estos errores no afectan a su capacidad para probar la nueva página.

Puede modificar el código mientras el sitio se ejecuta localmente y ve como la interfaz de usuario web se actualiza dinámicamente.

[Opcional] Conectarse a la instancia implementada

Si lo desea, puede conectar su copia local de ejecución de la interfaz de usuario web al acelerador de soluciones de supervisión remota en la nube:

Implemente una instancia básica del acelerador de la solución con la CLI pcs. Tome nota del nombre de la implementación y las credenciales proporcionadas para la máquina virtual. Para más información, vea Implementación mediante la CLI.
Use el Azure Portal o la CLI de az para habilitar el acceso SSH a la máquina virtual que hospeda los microservicios de la solución. Por ejemplo:
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
Sólo se debe habilitar el acceso SSH durante el desarrollo y pruebas. Si habilita SSH, debe deshabilitarlo de nuevo lo antes posible.

Use Azure Portal o la CLI az para encontrar el nombre y la dirección IP pública de la máquina virtual. Por ejemplo:

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 SSH para conectarse a la máquina virtual con la dirección IP del paso anterior y las credenciales proporcionadas cuando ejecutó pcs para implementar la solución.
Para permitir la conexión de la UX local, ejecute los siguientes comandos en el shell de bash en la máquina virtual:
```
cd /app
sudo ./start.sh --unsafe
```
Una vez completado el comando e iniciado el sitio web, puede desconectarse de la máquina virtual.
En la copia local del repositorio WebUI de supervisión remota, edite el archivo .env para agregar la dirección URL de la solución implementada:
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

Pasos siguientes

En este artículo, aprendió sobre los recursos que tiene a su disposición para ayudarlo a personalizar la interfaz de usuario web en el acelerador de la solución de supervisión remota.

Ya ha definido una página, el paso siguiente consiste en agregar un servicio personalizado a la interfaz de usuario web del acelerador de soluciones de supervisión remota que recupera los datos que se muestran en la interfaz de usuario.

Para obtener más información conceptual sobre el acelerador de soluciones de supervisión remota, consulte Arquitectura de supervisión remota.

Compartir a través de