Merge Master into Edge feature branch

README.md

@@ -105,8 +105,8 @@ You can find a guide to using it [here](https://github.com/facebookincubator/cre
 - [SASS](http://sass-lang.com/)
 - [React-i18nnext](https://github.com/i18next/react-i18next)
 
-[build-badge]: https://img.shields.io/travis/Azure/pcs-remote-monitoring-webui.svg
-[build-url]: https://travis-ci.org/Azure/pcs-remote-monitoring-webui
+[build-badge]: https://solutionaccelerators.visualstudio.com/RemoteMonitoring/_apis/build/status/pcs-remote-monitoring-webui
+[build-url]: https://solutionaccelerators.visualstudio.com/RemoteMonitoring/_build/latest?definitionId=32
 [issues-badge]: https://img.shields.io/github/issues/azure/pcs-remote-monitoring-webui.svg
 [issues-url]: https://github.com/Azure/pcs-remote-monitoring-webui/issues/new
 [gitter-badge]: https://img.shields.io/gitter/room/azure/iot-solutions.js.svg

docs/walkthrough/addNewDashboardPanel.md

@@ -5,10 +5,10 @@ The following is for creating a new panel called "**examplePanel**."
 
 1. Create a folder named `examplePanel` inside the `components/pages/dashboard/panels` folder.
 1. Create 3 files in the new folder. See the individual example files for more details and comments inline.
-    - [examplePanel.js](/src/components/pages/dashboard/panels/_examplePanel/examplePanel.js) - main component for the panel
-    - [examplePanel.scss](/src/components/pages/dashboard/panels/_examplePanel/examplePanel.scss) - styles for the new panel
-    - [index.js](/src/components/pages/dashboard/panels/_examplePanel/index.js) - exports for the new panel
-1. Add the new panel to the main panel export file: [dashboard/panels/index.js](/src/components/pages/dashboard/panels/index.js).
+    - [examplePanel.js](/src/walkthrough/components/pages/dashboard/panels/examplePanel/examplePanel.js) - main component for the panel
+    - [examplePanel.scss](/src/walkthrough/components/pages/dashboard/panels/examplePanel/examplePanel.scss) - styles for the new panel
+    - [index.js](/src/walkthrough/components/pages/dashboard/panels/examplePanel/index.js) - exports for the new panel
+1. Add the new panel to the main panel export file: [dashboard/panels/index.js](/src/walkthrough/components/pages/dashboard/panels/index.js).
     ```js
     export * from './examplePanel';
     ```
@@ -18,7 +18,7 @@ The following is for creating a new panel called "**examplePanel**."
       "header": "Example Panel",
     },
     ```
-1. In the [examplePanel.js](/src/components/pages/dashboard/panels/_examplePanel/examplePanel.js), import the `Panel` components.
+1. In the [examplePanel.js](/src/walkthrough/components/pages/dashboard/panels/examplePanel/examplePanel.js), import the `Panel` components.
     ```js
     import {
       Panel,
@@ -38,7 +38,7 @@ The following is for creating a new panel called "**examplePanel**."
       </PanelContent>
     </Panel>
     ```
-1. Add your panel to the [dashboard.js](/src/components/pages/dashboard/dashboard.js) page. Size the `Cell` for the panel according to how much space it will need. See [grid.scss](/src/components/pages/dashboard/grid/grid.scss) for the available grid-cell styles.
+1. Add your panel to the [dashboard.js](/src/walkthrough/components/pages/dashboard/dashboard.js) page. Size the `Cell` for the panel according to how much space it will need. See [grid.scss](/src/components/pages/dashboard/grid/grid.scss) for the available grid-cell styles.
     ```jsx
     <Cell className="col-4">
       <ExamplePanel t={t} />

docs/walkthrough/addNewFlyout.md

@@ -11,16 +11,16 @@ The following is for creating a new flyout called "**exampleFlyout**."
 ### Create the new flyout
 1. Create a folder named `exampleFlyout` inside your page's `flyouts` folder.
 1. Create 4 files in the new folder. See the individual example files for more details and comments inline.
-    - [exampleFlyout.container.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.container.js) - maps redux and epic actions and selectors to the props for the flyout
-    - [exampleFlyout.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.js) - main component for the flyout
-    - [exampleFlyout.scss](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.scss) - styles for the flyout
-    - [index.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/index.js) - exports for the new flyout
+    - [exampleFlyout.container.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.container.js) - maps redux and epic actions and selectors to the props for the flyout
+    - [exampleFlyout.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.js) - main component for the flyout
+    - [exampleFlyout.scss](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.scss) - styles for the flyout
+    - [index.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/index.js) - exports for the new flyout
 
 ### Setup the flyout
-1. Open your flyout's container file [exampleFlyout.container.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.container.js) so the data and actions can be connected to the page props.
+1. Open your flyout's container file [exampleFlyout.container.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.container.js) so the data and actions can be connected to the page props.
     - To keep our example simple, no actions are mapped. But in a real world scenario, you would very likely need this. See the [Add a New Grid walkthrough](addNewGrid.md) for more information on mapping data and actions via a `container.js.`
 
-1. Open your flyout's file [exampleFlyout.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.js). Use the various Flyout components to ensure consistency with others. Then, add whatever components are needed inside `FlyoutContent`. Notice that the FlyoutCloseBtn provides a way to close the flyout.
+1. Open your flyout's file [exampleFlyout.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.js). Use the various Flyout components to ensure consistency with others. Then, add whatever components are needed inside `FlyoutContent`. Notice that the FlyoutCloseBtn provides a way to close the flyout.
     ```jsx
     <Flyout>
       <FlyoutHeader>
@@ -38,7 +38,7 @@ The following is for creating a new flyout called "**exampleFlyout**."
     ```
 
 ### Open the flyout from a page
-1. Open your page's file [flyoutExample.js](/src/components/pages/_flyoutExample/flyoutExample.js).
+1. Open your page's file [pageWithFlyout.js](/src/walkthrough/components/pages/pageWithFlyout/pageWithFlyout.js).
 1. In the render method, add a context button to open the flyout.
     ```jsx
     <ContextMenu key="context-menu">
@@ -66,7 +66,7 @@ The following is for creating a new flyout called "**exampleFlyout**."
 ## More Advanced Topics
 
 ### Do some action and show progress
-Often, a flyout will be used to call a service to create/update/delete something. See the [exampleFlyout.js](/src/components/pages/_flyoutExample/flyouts/exampleFlyout/exampleFlyout.js) file for an example of
+Often, a flyout will be used to call a service to create/update/delete something. See the [exampleFlyout.js](/src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.js) file for an example of
 - using `SummarySection` to indicate how many items will be affected
 - showing an `Indicator` (progress spinner) while an action is in progress
 - showing an `Svg` checkmark when the action is complete

docs/walkthrough/addNewGrid.md

@@ -15,12 +15,12 @@ Grids in remote monitoring are based on [ag-grid][ag-grid], with our own customi
 ### Create the new grid
 1. Create a folder named `exampleGrid` inside your page's folder.
 1. Create 3 files in the new folder. See the individual example files for more details and comments inline.
-    - [exampleGrid.js](/src/components/pages/_gridExample/exampleGrid/exampleGrid.js) - main component for the grid, sets up context buttons and soft/hard selection event handlers, wraps [pcsGrid][pcsGrid]
-    - [exampleGridConfig.js](/src/components/pages/_gridExample/exampleGrid/exampleGridConfig.js) - configuration such as column definitions for the grid
-    - [index.js](/src/components/pages/_gridExample/exampleGrid/index.js) - exports for the new grid
+    - [exampleGrid.js](/src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGrid.js) - main component for the grid, sets up context buttons and soft/hard selection event handlers, wraps [pcsGrid][pcsGrid]
+    - [exampleGridConfig.js](/src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGridConfig.js) - configuration such as column definitions for the grid
+    - [index.js](/src/walkthrough/components/pages/pageWithGrid/exampleGrid/index.js) - exports for the new grid
 
 ### Setup the page
-1. Open your page's container file [gridExample.container.js](/src/components/pages/_gridExample/gridExample.container.js) so the data and actions can be connected to the page props.
+1. Open your page's container file [pageWithGrid.container.js](/src/walkthrough/components/pages/pageWithGrid/pageWithGrid.container.js) so the data and actions can be connected to the page props.
 1. Map the data from the redux store to props.
     ```js
     const mapStateToProps = state => ({
@@ -38,11 +38,11 @@ Grids in remote monitoring are based on [ag-grid][ag-grid], with our own customi
     ```
 1. Connect the data and actions to the page component.
     ```js
-    export const GridExampleContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(GridExample));
+    export const PageWithGridContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(PageWithGrid));
     ```
     - Notice the use of [i18next][i18next]'s translate method. This will pass an additional prop called `t` containing the translated strings for use in the page.
 
-1. Open your page's file [gridExample.js](/src/components/pages/_gridExample/gridExample.js) so the grid and refresh bar can be added.
+1. Open your page's file [pageWithGrid.js](/src/walkthrough/components/pages/pageWithGrid/pageWithGrid.js) so the grid and refresh bar can be added.
 1. Import your grid as well as other components like `AjaxError` and `RefreshBar`.
     ```js
     import { AjaxError, RefreshBar } from 'components/shared';
@@ -57,8 +57,8 @@ Grids in remote monitoring are based on [ag-grid][ag-grid], with our own customi
       if (!lastUpdated && !isPending) fetchData();
     }
     ```
-    - Alternatively, if the the data is useful on other pages as well, then it can be loaded in the "APP_INITIALIZE" epic in [appReducer.js](../store/reducers/appReducer.js)
-1. In render, set up the props for the grid. Choose the columnDefs to show from those configured in [exampleGridConfig.js](/src/components/pages/_gridExample/exampleGrid/exampleGridConfig.js).
+    - Alternatively, if the the data is useful on other pages as well, then it can be loaded in the "APP_INITIALIZE" epic in [appReducer.js](/src/store/reducers/appReducer.js)
+1. In render, set up the props for the grid. Choose the columnDefs to show from those configured in [exampleGridConfig.js](/src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGridConfig.js).
     ```js
     const { t, data, error, isPending, lastUpdated, fetchData } = this.props;
     const gridProps = {
@@ -135,7 +135,7 @@ The user may need to act on mulitple rows at the same time. Checking a row's che
 ### Soft Select Rows
 The user may need to act on a single row. A soft select link can be configured for one or more columns in the columnDefs.
 
-1. In [exampleGridConfig.js](/src/components/pages/_gridExample/exampleGrid/exampleGridConfig.js), add `SoftSelectLinkRenderer` as the cellRendererFramework for a columnDef.
+1. In [exampleGridConfig.js](/src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGridConfig.js), add `SoftSelectLinkRenderer` as the cellRendererFramework for a columnDef.
     ```js
     export const exampleColumnDefs = {
       id: {

docs/walkthrough/addNewPage.md

@@ -1,47 +1,62 @@
 Walkthrough: Adding a New Page
 ===========================
 
-The following is for creating a new page called "**example**."
+The following is for creating a new page called "**basicPage**."
 
 1. Create a folder named `example` inside the `components/pages` folder.
 1. Create 4 files in the new folder. See the individual example files for more details and comments inline.
-    - [example.container.js](/src/components/pages/_example/example.container.js) - maps redux and epic actions and selectors to the props for the page
-    - [example.js](/src/components/pages/_example/example.js) - main component for the page
-    - [example.scss](/src/components/pages/_example/example.scss) - styles for the page
-    - [example.test.js](/src/components/pages/_example/example.test.js) - basic rendering test
-1. Add the new page's container to the [components/pages/index.js](/src/components/pages/index.js) file.
+    - [basicPage.container.js](/src/walkthrough/components/pages/basicPage/basicPage.container.js) - maps redux and epic actions and selectors to the props for the page
+    - [basicPage.js](/src/walkthrough/components/pages/basicPage/basicPage.js) - main component for the page
+    - [basicPage.scss](/src/walkthrough/components/pages/basicPage/basicPage.scss) - styles for the page
+    - [basicPage.test.js](/src/walkthrough/components/pages/basicPage/basicPage.test.js) - basic rendering test
+1. Add the new page's container to the [components/pages/index.js](/src/walkthrough/components/pages/index.js) file.
     ```js
-    export * from './example/example.container';
+    export * from './basicPage/basicPage.container';
     ```
 1. (Optional)  Add an SVG icon for the new page. See [utilities/README.md](../utilities/README.md) for more information.
     - Note that existing SVGs can be used as well.
 1. Add the page name to the translations file, [translations.json](../../public/locales/en/translations.json). [i18next][i18next] is used for internationalization.
     ```json
     "tabs": {
-      "template": "Template",
+      "example": "Example",
     },
     ```
-1. Open the top level application page, [components/app/app.js](/src/components/app/app.js).
+1. Open the top level application page, [walkthrough/components/app.js](/src/walkthrough/components/app.js).
 1. Add the new page to the imports.
     ```javascript
     // Page Components
     import  {
       //...
-      TemplateContainer as TemplatePage
+      BasicPageContainer
     } from 'components/pages';
     ```
-1. Add a navigation tab, refernce the SVG icon added previously.
+1. Add the new page to the `pagesConfig`. Set the to address for the route, reference the SVG icon and translations added previously, and set the component to the page's container.
     ```js
-    const templateTab = { to: '/template', svg: svgs.tabs.template, labelId: 'tabs.template' };
+    const pagesConfig = [
+      //...
+      {
+        to: '/basicpage',
+        exact: true,
+        svg: svgs.tabs.example,
+        labelId: 'walkthrough.tabs.basicPage',
+        component: BasicPageContainer
+      },
+      //...
+    ];
     ```
-1. Add the new navigation tab to tabConfigs.
+1. Add any new breadcrumbs to the `crumbsConfig`.
       ```js
-      const tabConfigs = [ dashboardTab, devicesTab, rulesTab, maintenanceTab, templateTab ];
+      const crumbsConfig = [
+        //...
+        {
+          path: '/basicpage', crumbs: [
+            { to: '/basicpage', labelId: 'walkthrough.tabs.basicPage' }
+          ]
+        },
+        //...
+      ];
       ```
-1. In the render method, add the route for the new page.
-    ```jsx
-    <Route path={templateTab.to} component={TemplatePage} />
-    ```
+      - This example page only has one breadcrumb to be shown, but some pages will have more. See [components/app.js](/src/components/app.js) for more examples.
 1. **Congratulations!** Run the application to see your new page in action.
 1. Now, you can edit the page to do what you want.
 

docs/walkthrough/addNewService.md

@@ -7,16 +7,16 @@ Services in remote monitoring are called using [rxjs][rxjs] Observables.
 
 ### Create the Service
 
-1. Create [exampleModels.js](/src/services/models/_exampleModels.js) for the service under the `services/models` folder.
+1. Create [exampleModels.js](/src/walkthrough/services/models/exampleModels.js) for the service under the `services/models` folder.
     - See the models [README](/src/services/models/README.md) for more information on the purpose of these models and general naming conventions.
-    - Don't forget to add your new file to the exports in [index.js](/src/services/models/index.js)
-1. Create [exampleService.js](/src/services/_exampleService.js) in the `services` folder.
-    - Use [services/httpClient.js](/src/services/httpClient.js) to make calls to the services. Then, transform the response using the models.
+    - Don't forget to add your new file to the exports in [index.js](/src/walkthrough/services/models/index.js)
+1. Create [exampleService.js](/src/walkthrough/services/exampleService.js) in the `services` folder.
+    - Use [utilities/httpClient.js](/src/utilities/httpClient.js) to make calls to the services. Then, transform the response using the models.
     - Note that the example service does not call actual services. Instead, it returns hardcoded data as an observable to mimick service calls.
-    - Don't forget to add your new file to the exports in [index.js](/src/services/index.js)
+    - Don't forget to add your new file to the exports in [index.js](/src/walkthrough/services/index.js)
 
 ### Set up the Service in the store
-1. Create [exampleReducer.js](/src/store/reducers/_exampleReducer.js) in the `store/reducers/` folder.
+1. Create [exampleReducer.js](/src/walkthrough/store/reducers/exampleReducer.js) in the `store/reducers/` folder.
 1. Add [redux-observable][redux-obs] epics to make service calls.
     ```js
     export const epics = createEpicScenario({
@@ -80,19 +80,19 @@ Services in remote monitoring are called using [rxjs][rxjs] Observables.
 
 ## Configure the Middleware
 
-1. Add the reducer to the [rootReducer.js](/src/store/rootReducer.js) in the `store` folder.
+1. Add the reducer to the [rootReducer.js](/src/walkthrough/store/rootReducer.js) in the `store` folder.
     ```js
-    import { reducer as exampleReducer } from './reducers/_exampleReducer';
+    import { reducer as exampleReducer } from './reducers/exampleReducer';
 
     const rootReducer = combineReducers({
       ...exampleReducer,
     //...
     });
     ```
 
-1. Add the epics to [rootEpic.js](/src/store/rootEpic.js) in the `store` folder.
+1. Add the epics to [rootEpic.js](/src/walkthrough/store/rootEpic.js) in the `store` folder.
     ```js
-    import { epics as exampleEpics } from './reducers/_exampleReducer';
+    import { epics as exampleEpics } from './reducers/exampleReducer';
 
     const epics = [
       ...exampleEpics.getEpics(),