Dodawanie wysuwanego do interfejsu użytkownika rozwiązania do monitorowania zdalnego — Azure

Artykuł
10/05/2018

W tym artykule pokazano, jak dodać nowe okno wysuwane na stronę w internetowym interfejsie użytkownika akceleratora rozwiązania do monitorowania zdalnego. W tym artykule opisano:

Jak przygotować lokalne środowisko programistyczne.
Jak dodać nowe okno wysuwane do strony w internetowym interfejsie użytkownika.

Przykładowe okno wysuwane w tym artykule jest wyświetlane na stronie z siatką, w której pokazano, jak dodać siatkę niestandardową do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego .

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 następujących artykułach:

Aby dodać okno wysuwane do internetowego interfejsu użytkownika, należy dodać pliki źródłowe definiujące okno wysuwane i zmodyfikować niektóre istniejące pliki, aby interfejs użytkownika sieci Web był świadomy nowego składnika.

Aby rozpocząć pracę, folder src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout zawiera pliki definiujące okno wysuwane:

exampleFlyout.container.js

import { withNamespaces } from 'react-i18next';

import { ExampleFlyout } from './exampleFlyout';

export const ExampleFlyoutContainer = withNamespaces()(ExampleFlyout);

exampleFlyout.js

import React, { Component } from 'react';

import { ExampleService } from 'walkthrough/services';
import { svgs } from 'utilities';
import {
  AjaxError,
  Btn,
  BtnToolbar,
  Flyout,
  Indicator,
  SectionDesc,
  SectionHeader,
  SummaryBody,
  SummaryCount,
  SummarySection,
  Svg
} from 'components/shared';

import './exampleFlyout.scss';

export class ExampleFlyout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemCount: 3, //just a fake count; this would often be a list of items that are being acted on
      isPending: false,
      error: undefined,
      successCount: 0,
      changesApplied: false
    };
  }

  componentWillUnmount() {
    if (this.subscription) this.subscription.unsubscribe();
  }

  apply = (event) => {
    event.preventDefault();
    this.setState({ isPending: true, successCount: 0, error: null });

    this.subscription = ExampleService.updateExampleItems()
      .subscribe(
        _ => {
          this.setState({ successCount: this.state.successCount + this.state.itemCount });
          // Update any global state in the redux store by calling any
          // dispatch methods that were mapped in this flyout's container.
        },
        error => this.setState({ error, isPending: false, changesApplied: true }),
        () => this.setState({ isPending: false, changesApplied: true, confirmStatus: false })
      );
  }

  getSummaryMessage() {
    const { t } = this.props;
    const { isPending, changesApplied } = this.state;

    if (isPending) {
      return t('walkthrough.pageWithFlyout.flyouts.example.pending');
    } else if (changesApplied) {
      return t('walkthrough.pageWithFlyout.flyouts.example.applySuccess');
    } else {
      return t('walkthrough.pageWithFlyout.flyouts.example.affected');
    }
  }

  render() {
    const { t, onClose } = this.props;
    const {
      itemCount,
      isPending,
      error,
      successCount,
      changesApplied
    } = this.state;

    const summaryCount = changesApplied ? successCount : itemCount;
    const completedSuccessfully = changesApplied && !error;
    const summaryMessage = this.getSummaryMessage();

    return (
      <Flyout header={t('walkthrough.pageWithFlyout.flyouts.example.header')} t={t} onClose={onClose}>
          {
            /**
             * Really, anything you need could go inside a flyout.
             * The following is a simple empty form with buttons to do an action or close the flyout.
             * */
          }
          <form className="example-flyout-container" onSubmit={this.apply}>
            <div className="example-flyout-header">{t('walkthrough.pageWithFlyout.flyouts.example.header')}</div>
            <div className="example-flyout-descr">{t('walkthrough.pageWithFlyout.flyouts.example.description')}</div>

            <div className="form-placeholder">{t('walkthrough.pageWithFlyout.flyouts.example.insertFormHere')}</div>

            {/** Sumarizes the action being taken; including count of items affected & status/pending indicator */}
            <SummarySection>
              <SectionHeader>{t('walkthrough.pageWithFlyout.flyouts.example.summaryHeader')}</SectionHeader>
              <SummaryBody>
                <SummaryCount>{summaryCount}</SummaryCount>
                <SectionDesc>{summaryMessage}</SectionDesc>
                {this.state.isPending && <Indicator />}
                {completedSuccessfully && <Svg className="summary-icon" path={svgs.apply} />}
              </SummaryBody>
            </SummarySection>

            {/** Displays an error message if one occurs while applying changes. */}
            {error && <AjaxError className="example-flyout-error" t={t} error={error} />}
            {
              /** If changes are not yet applied, show the buttons for applying changes and closing the flyout. */
              !changesApplied &&
              <BtnToolbar>
                <Btn svg={svgs.reconfigure} primary={true} disabled={isPending || itemCount === 0 } type="submit">{t('walkthrough.pageWithFlyout.flyouts.example.apply')}</Btn>
                <Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.cancel')}</Btn>
              </BtnToolbar>
            }
            {
              /**
               * If changes are applied, show only the close button.
               * Other text or component might be included here as well.
               * For example, you might provide a link to the detail page for a newly submitted job.
               * */
              !!changesApplied &&
              <BtnToolbar>
                <Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.close')}</Btn>
              </BtnToolbar>
            }
          </form>
      </Flyout>
    );
  }
}

Skopiuj folder src/walkthrough/components/pages/pageWithFlyout/flyouts do folderu src/components/pages/example .

Zmodyfikuj src/components/pages/example/basicPage.js , aby dodać okno wysuwane.

Dodaj element Btn do importów ze składników/udostępnionych i dodaj importy dla plików svgs i ExampleFlyoutContainer:

import {
  AjaxError,
  ContextMenu,
  PageContent,
  RefreshBar,
  Btn
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';
import { svgs } from 'utilities';
import { ExampleFlyoutContainer } from './flyouts/exampleFlyout';

Dodaj definicję const dla elementu closedFlyoutState i dodaj ją do stanu w konstruktorze:

const closedFlyoutState = { openFlyoutName: undefined };

export class BasicPage extends Component {
  constructor(props) {
    super(props);
    this.state = { contextBtns: null, closedFlyoutState };
  }

Dodaj następujące funkcje do klasy BasicPage :

  closeFlyout = () => this.setState(closedFlyoutState);

  openFlyout = (name) => () => this.setState({ openFlyoutName: name });

Dodaj następujące definicje const do funkcji renderowania :

    const { openFlyoutName } = this.state;

    const isExampleFlyoutOpen = openFlyoutName === 'example';

Dodaj przycisk, aby otworzyć menu wysuwane do menu kontekstowego:

      <ContextMenu key="context-menu">
        {this.state.contextBtns}
        <Btn svg={svgs.reconfigure} onClick={this.openFlyout('example')}>{t('walkthrough.pageWithFlyout.open')}</Btn>
      </ContextMenu>,

Dodaj tekst i kontener wysuwany do zawartości strony:

      <PageContent className="basic-page-container" key="page-content">
        {t('walkthrough.pageWithFlyout.pageBody')}
        { isExampleFlyoutOpen && <ExampleFlyoutContainer onClose={this.closeFlyout} /> }
        <RefreshBar refresh={fetchData} time={lastUpdated} isPending={isPending} t={t} />
        {!!error && <AjaxError t={t} error={error} />}
        {!error && <ExampleGrid {...gridProps} />}
      </PageContent>

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 Przykład i kliknij pozycję Otwórz okno wysuwane.

Następne kroki

W tym artykule przedstawiono informacje o dostępnych zasobach, które ułatwiają dodawanie lub dostosowywanie stron w internetowym interfejsie użytkownika w akceleratorze rozwiązania do monitorowania zdalnego.

Po zdefiniowaniu wysuwanego na stronie następnym krokiem jest dodanie panelu do pulpitu nawigacyjnego w internetowym interfejsie użytkownika akceleratora 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

Dodawanie niestandardowego wysuwania do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego

Wymagania wstępne

Przed rozpoczęciem

Dodawanie okna wysuwanego

Dodaj nowe pliki definiujące okno wysuwane

Dodawanie wysuwanych do strony

Testowanie wysuwanych

Następne kroki

Dodatkowe zasoby