Dodawanie niestandardowego panelu do pulpitu nawigacyjnego w internetowym interfejsie użytkownika akceleratora rozwiązania do monitorowania zdalnego

Artykuł
10/05/2018

W tym artykule pokazano, jak dodać nowy panel do strony pulpitu nawigacyjnego w internetowym interfejsie użytkownika akceleratora rozwiązania do monitorowania zdalnego. W tym artykule opisano:

Jak przygotować lokalne środowisko programistyczne.
Jak dodać nowy panel do strony pulpitu nawigacyjnego w internetowym interfejsie użytkownika.

Przykładowy panel w tym artykule jest wyświetlany na istniejącej stronie pulpitu nawigacyjnego.

Wymagania wstępne

Aby wykonać kroki opisane w tym przewodniku z instrukcjami, potrzebne jest następujące oprogramowanie zainstalowane na lokalnym komputerze deweloperskim:

Przed rozpoczęciem

Przed kontynuowaniem wykonaj kroki opisane w artykule Dodawanie niestandardowego interfejsu użytkownika do akceleratora rozwiązania do monitorowania zdalnego .

Dodawanie panelu

Aby dodać panel do internetowego interfejsu użytkownika, należy dodać pliki źródłowe definiujące panel, a następnie zmodyfikować pulpit nawigacyjny, aby wyświetlić panel.

Dodaj nowe pliki definiujące panel

Aby rozpocząć pracę, folder src/walkthrough/components/pages/dashboard/panels/examplePanel zawiera pliki definiujące panel, w tym:

examplePanel.js

import React, { Component } from 'react';

import {
  Panel,
  PanelHeader,
  PanelHeaderLabel,
  PanelContent,
} from 'components/pages/dashboard/panel';

import './examplePanel.scss';

export class ExamplePanel extends Component {
  constructor(props) {
    super(props);

    this.state = { isPending: true };
  }

  render() {
    const { t } = this.props;

    return (
      <Panel>
        <PanelHeader>
          <PanelHeaderLabel>{t('walkthrough.dashboard.panels.example.header')}</PanelHeaderLabel>
        </PanelHeader>
        <PanelContent className="example-panel-container">
          {t('walkthrough.dashboard.panels.example.panelBody')}
        </PanelContent>
      </Panel>
    );
  }
}

Skopiuj folder src/walkthrough/components/pages/dashboard/panels/examplePanel do folderu src/components/pages/dashboard/panele .

Dodaj następujący eksport do pliku src/walkthrough/components/pages/dashboard/paneli/index.js :

export * from './examplePanel';

Dodawanie panelu do pulpitu nawigacyjnego

Zmodyfikuj element src/components/pages/dashboard/dashboard.js , aby dodać panel.

Dodaj przykładowy panel do listy importów z paneli:

import {
  OverviewPanel,
  AlertsPanel,
  TelemetryPanel,
  AnalyticsPanel,
  MapPanel,
  transformTelemetryResponse,
  chartColorObjects,
  ExamplePanel
} from './panels';

Dodaj następującą definicję komórki do siatki w zawartości strony:

          <Cell className="col-2">
            <ExamplePanel t={t} />
          </Cell>

Jeśli internetowy interfejs użytkownika nie jest jeszcze uruchomiony lokalnie, uruchom następujące polecenie w katalogu głównym lokalnej kopii repozytorium:

npm start

Poprzednie polecenie uruchamia interfejs użytkownika lokalnie pod adresem https://localhost:3000/dashboard. Przejdź do strony Pulpit nawigacyjny , aby wyświetlić nowy panel.

Następne kroki

W tym artykule przedstawiono zasoby dostępne w celu ułatwienia dodawania lub dostosowywania pulpitów nawigacyjnych w internetowym interfejsie użytkownika w akceleratorze rozwiązania do monitorowania zdalnego.

Aby uzyskać więcej informacji koncepcyjnych na temat akceleratora rozwiązania do monitorowania zdalnego, zobacz Architektura monitorowania zdalnego.

Udostępnij za pośrednictwem