将浮出控件添加到远程监视解决方案 UI - Azure

项目
10/05/2018

本文介绍如何在远程监视解决方案加速器 Web UI 中的页面上添加新的浮出控件。本文介绍：

如何准备本地开发环境。
如何向 Web UI 中的页面添加新浮出控件。

本文中的示例浮出控件显示在具有网格的页面上，若要了解如何添加网格，请参阅向远程监视解决方案加速器 Web UI 添加自定义网格操作指南。

先决条件

要完成本操作指南中的步骤，需要在本地开发计算机上安装以下软件：

Git
Node.js

开始之前

应先完成下列文章中的步骤，再继续操作：

要向 Web UI 添加浮出控件，需要添加定义浮出控件的源文件，然后修改部分现有文件，从而让 Web UI 识别新组件。

首先，src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout 文件夹包含定义浮出控件的文件：

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

将 src/walkthrough/components/pages/pageWithFlyout/flyouts 文件夹复制到 src/components/pages/example 文件夹。

修改 src/components/pages/example/basicPage.js 以添加浮出控件。

将 Btn 添加到 components/shared 的导入中，并为 svgs 和 ExampleFlyoutContainer 添加导入：

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

为 closedFlyoutState 添加 const 定义并将其添加到构造函数的状态中：

const closedFlyoutState = { openFlyoutName: undefined };

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

将以下函数添加到 BasicPage 类：

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

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

将以下 const 定义添加至 render 函数：

    const { openFlyoutName } = this.state;

    const isExampleFlyoutOpen = openFlyoutName === 'example';

在上下文菜单中添加用于打开浮出控件的按钮：

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

将一些文本和浮出控件容器添加到页面内容：

      <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>

如果 Web UI 尚未在本地运行，请在存储库的本地副本的根目录中运行以下命令：

npm start

上述命令在本地 (https://localhost:3000/dashboard) 运行 UI。导航到“示例”页，单击“打开浮出控件”。

后续步骤

本文介绍了可以帮助你在远程监视解决方案加速器 Web UI 中添加或自定义页面的资源。

现已在页面上定义了浮出控件，下一步是向远程监视解决方案加速器 Web UI 中的仪表板添加面板。

有关远程监视解决方案加速器的更多概念信息，请参阅远程监视体系结构。

向远程监视解决方案加速器 Web UI 添加自定义浮出控件

先决条件

开始之前

添加浮出控件

添加定义浮出控件的新文件

将浮出控件添加到页面

测试浮出控件

后续步骤

其他资源