Add a flyout to the Remote Monitoring solution UI - Azure

Article
10/05/2018

This article shows you how to add a new flyout onto a page in the Remote Monitoring solution accelerator web UI. The article describes:

How to prepare a local development environment.
How to add a new flyout to a page in the web UI.

The example flyout in this article displays on the page with the grid that the Add a custom grid to the Remote Monitoring solution accelerator web UI how-to article shows you how to add.

Prerequisites

To complete the steps in this how-to guide, you need the following software installed on your local development machine:

Git
Node.js

Before you start

You should complete the steps in the following articles before continuing:

To add a flyout to the web UI, you need to add the source files that define the flyout, and modify some existing files to make the web UI aware of the new component.

To get you started, the src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout folder contains the files that define a flyout:

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

Copy the src/walkthrough/components/pages/pageWithFlyout/flyouts folder to the src/components/pages/example folder.

Modify the src/components/pages/example/basicPage.js to add the flyout.

Add Btn to the imports from components/shared and add imports for svgs and ExampleFlyoutContainer:

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

Add a const definition for closedFlyoutState and add it to the state in the constructor:

const closedFlyoutState = { openFlyoutName: undefined };

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

Add the following functions to the BasicPage class:

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

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

Add the following const definitions to the render function:

    const { openFlyoutName } = this.state;

    const isExampleFlyoutOpen = openFlyoutName === 'example';

Add a button to open the flyout to the context menu:

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

Add some text and the flyout container to the page content:

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

If the web UI is not already running locally, run the following command in the root of your local copy of the repository:

npm start

The previous command runs the UI locally at https://localhost:3000/dashboard. Navigate to the Example page and click Open Flyout.

Next steps

In this article, you learned about the resources available to help you add or customize pages in the web UI in the Remote Monitoring solution accelerator.

Now you have defined a flyout on a page, the next step is to Add a panel to the dashboard in the Remote Monitoring solution accelerator web UI.

For more conceptual information about the Remote Monitoring solution accelerator, see Remote Monitoring architecture.

Add a custom flyout to the Remote Monitoring solution accelerator web UI

Prerequisites

Before you start

Add a flyout

Add the new files that define the flyout

Add the flyout to the page

Test the flyout

Next steps

Additional resources