Add a custom panel to the dashboard in the Remote Monitoring solution accelerator web UI

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

• How to prepare a local development environment.
• How to add a new panel to a dashboard page in the web UI.

The example panel in this article displays on the existing dashboard page.

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 Add a custom page to the Remote Monitoring solution accelerator web UI article before continuing.

Add a panel

To add a panel to the web UI, you need to add the source files that define the panel, and then modify the dashboard to display the panel.

Add the new files that define the panel

To get you started, the src/walkthrough/components/pages/dashboard/panels/examplePanel folder contains the files that define a panel, including:

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

Copy the src/walkthrough/components/pages/dashboard/panels/examplePanel folder to the src/components/pages/dashboard/panels folder.

Add the following export to the src/walkthrough/components/pages/dashboard/panels/index.js file:

export * from './examplePanel';

Add the panel to the dashboard

Modify the src/components/pages/dashboard/dashboard.js to add the panel.

Add the example panel to the list of imports from panels:

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

Add the following cell definition to the grid in the page content:

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

Test the flyout

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 Dashboard page to view the new panel.

Next steps

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

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