Lägga till en anpassad sida i webbgränssnittet för fjärrövervakningslösningsacceleratorn

Artikel
10/02/2018

Den här artikeln visar hur du lägger till en ny sida i webbgränssnittet för fjärrövervakningslösningsacceleratorn. Artikeln beskriver:

Förbereda en lokal utvecklingsmiljö.
Så här lägger du till en ny sida i webbgränssnittet.

Andra instruktioner utökar det här scenariot för att lägga till fler funktioner på sidan som du lägger till.

Förutsättningar

För att slutföra stegen i den här instruktionsguiden behöver du följande programvara installerad på din lokala utvecklingsdator:

Git
Node.js

Förbereda en lokal utvecklingsmiljö för användargränssnittet

UI-koden för fjärrövervakningslösningen implementeras med hjälp av React JavaScript-ramverket. Du hittar källkoden i webbgränssnittet för fjärrövervakning GitHub lagringsplats.

Om du vill göra och testa ändringar i användargränssnittet kan du köra det på din lokala utvecklingsdator. Du kan också ansluta den lokala kopian till en distribuerad instans av lösningsacceleratorn så att den kan interagera med dina verkliga eller simulerade enheter.

Om du vill förbereda din lokala utvecklingsmiljö använder du Git för att klona webui-lagringsplatsen för fjärrövervakning till din lokala dator:

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

Lägg till en sida

Om du vill lägga till en sida i webbgränssnittet måste du lägga till källfilerna som definierar sidan och ändra vissa befintliga filer för att göra webbgränssnittet medvetet om den nya sidan.

Lägg till de nya filerna som definierar sidan

För att komma igång innehåller mappen src/walkthrough/components/pages/basicPage fyra filer som definierar en enkel sida:

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

Skapa en ny mapp src/components/pages/example och kopiera dessa fyra filer till den.

Lägg till den nya sidan i webbgränssnittet

Om du vill lägga till den nya sidan i webbgränssnittet gör du följande ändringar i befintliga filer:

Lägg till den nya sidcontainern i filen src/components/pages/index.js :
```
export * from './example/basicPage.container';
```
(Valfritt) Lägg till en SVG-ikon för den nya sidan. Mer information finns i webui/src/utilities/README.md. Du kan använda en befintlig SVG-fil.
Lägg till sidnamnet i översättningsfilen , public/locales/en/translations.json. Webbgränssnittet använder i18next för internationalisering.
```
"tabs": {
  "basicPage": "Example",
},
```
Öppna filen src/components/app.js som definierar programsidan på den översta nivån. Lägg till den nya sidan i listan över importer:
```
// Page Components
import  {
  //...
  BasicPageContainer
} from './pages';
```
Lägg till den nya sidan i matrisen pagesConfig i samma fil. to Ange adressen för vägen, referera till SVG-ikonen och översättningar som lagts till tidigare och ange component till sidans container:
```
const pagesConfig = [
  //...
  {
    to: '/basicpage',
    exact: true,
    svg: svgs.tabs.example,
    labelId: 'tabs.basicPage',
    component: BasicPageContainer
  },
  //...
];
```

Lägg till eventuella nya sökvägar i matrisen crumbsConfig :

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

Den här exempelsidan har bara en sökväg, men vissa sidor kan ha fler.

Spara alla ändringar. Du är redo att köra webbgränssnittet med den nya sidan tillagd.

Testa den nya sidan

I en kommandotolk navigerar du till roten för din lokala kopia av lagringsplatsen och kör följande kommandon för att installera de bibliotek som krävs och köra webbgränssnittet lokalt:

npm install
npm start

Föregående kommando kör användargränssnittet lokalt på https://localhost:3000/dashboard.

Utan att ansluta din lokala instans av webbgränssnittet till en distribuerad instans av lösningsacceleratorn visas fel på instrumentpanelen. De här felen påverkar inte din möjlighet att testa din nya sida.

Nu kan du redigera koden medan webbplatsen körs lokalt och se webbgränssnittsuppdateringen dynamiskt.

[Valfritt] Anslut till distribuerad instans

Du kan också ansluta din lokala kopia av webbgränssnittet till acceleratorn Fjärrövervakningslösning i molnet:

Distribuera en grundläggande instans av lösningsacceleratorn med pcs CLI. Anteckna namnet på distributionen och de autentiseringsuppgifter som du angav för den virtuella datorn. Mer information finns i Distribuera med HJÄLP av CLI.
Använd Azure Portal eller az CLI för att aktivera SSH-åtkomst till den virtuella dator som är värd för mikrotjänsterna i din lösning. Ett exempel:
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
Du bör bara aktivera SSH-åtkomst under test och utveckling. Om du aktiverar SSH bör du inaktivera det igen så snart som möjligt.

Använd Azure Portal eller az CLI för att hitta namnet och den offentliga IP-adressen för den virtuella datorn. Ett exempel:

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

Använd SSH för att ansluta till den virtuella datorn med hjälp av IP-adressen från föregående steg och de autentiseringsuppgifter som du angav när du körde datorer för att distribuera lösningen.
Om du vill tillåta att det lokala användargränssnittet ansluter kör du följande kommandon i bash-gränssnittet på den virtuella datorn:
```
cd /app
sudo ./start.sh --unsafe
```
När kommandot har slutförts och webbplatsen startar kan du koppla från den virtuella datorn.
I din lokala kopia av WebUI-lagringsplatsen för fjärrövervakning redigerar du .env-filen för att lägga till URL:en för den distribuerade lösningen:
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

Nästa steg

I den här artikeln har du lärt dig om de resurser som är tillgängliga för att hjälpa dig att anpassa webbgränssnittet i acceleratorn fjärrövervakningslösning.

Nu när du har definierat en sida är nästa steg att lägga till en anpassad tjänst i webbgränssnittet för fjärrövervakningslösningsacceleratorn som hämtar data som ska visas i användargränssnittet.

Mer konceptuell information om acceleratorn fjärrövervakningslösning finns i Arkitektur för fjärrövervakning.

Share via