Skip to content

Latest commit

 

History

History
118 lines (76 loc) · 4.62 KB

iot-accelerators-remote-monitoring-customize-service.md

File metadata and controls

118 lines (76 loc) · 4.62 KB
title description author manager ms.author ms.service services ms.date ms.topic
Add a service to the Remote Monitoring solution UI - Azure | Microsoft Docs
This article shows you how to add a new service into the Remote Monitoring solution accelerator web UI.
dominicbetts
timlt
dobett
iot-accelerators
iot-accelerators
10/02/2018
conceptual

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

This article shows you how to add a new service into the Remote Monitoring solution accelerator web UI. The article describes:

  • How to prepare a local development environment.
  • How to add a new service to the web UI.

The example service in this article provides the data for a grid that the Add a custom grid to the Remote Monitoring solution accelerator web UI how-to article shows you how to add.

In a React application, a service typically interacts with a back-end service. Examples in the Remote Monitoring solution accelerator include services that interact with the IoT hub manager and configuration microservices.

Prerequisites

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

Before you start

You should complete the steps in the Add a custom page to the Remote Monitoring solution accelerator web UI how-to article before continuing.

Add a service

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

Add the new files that define the service

To get you started, the src/walkthrough/services folder contains the files that define a simple service:

exampleService.js

[!code-javascriptExample service]

To learn more about how services are implemented, see The introduction to Reactive Programming you've been missing.

model/exampleModels.js

[!code-javascriptExample model]

Copy exampleService.js to the src/services folder and copy exampleModels.js to the src/services/models folder.

Update the index.js file in the src/services folder to export the new service:

export * from './exampleService';

Update the index.js file in the src/services/models folder to export the new model:

export * from './exampleModels';

Set up the calls to the service from the store

To get you started, the src/walkthrough/store/reducers folder contains a sample reducer:

exampleReducer.js

[!code-javascriptExample reducer]

Copy exampleReducer.js to the src/store/reducers folder.

To learn more about the reducer and Epics, see redux-observable.

Configure the middleware

To configure the middleware, add the reducer to the rootReducer.js file in the src/store folder:

import { reducer as exampleReducer } from './reducers/exampleReducer';

const rootReducer = combineReducers({
  ...appReducer,
  ...devicesReducer,
  ...rulesReducer,
  ...simulationReducer,
  ...exampleReducer
});

Add the epics to the rootEpics.js file in the src/store folder:

import { epics as exampleEpics } from './reducers/exampleReducer';

// Extract the epic function from each property object
const epics = [
  ...appEpics.getEpics(),
  ...devicesEpics.getEpics(),
  ...rulesEpics.getEpics(),
  ...simulationEpics.getEpics(),
  ...exampleEpics.getEpics()
];

Next steps

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

Now you have defined a service, the next step is to Add a custom grid to the Remote Monitoring solution accelerator web UI that displays data returned by the service.

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