Merge Master into Edge feature branch (#1083)

* Dev Walkthru: add a new Panel to the Dashboard (#1062)

* Dev Walkthru: add a new Panel to the Dashboard

* small tweaks, review feedback

* fix bad code end marker

* Diagnostics bugFix (#1065)

* flatMap

* Dummy comment to retrigger build

* Add Rule Diagnostics (#1064)

Add diagnostics logging for rule create/update events. Added the following metrics:
Rule_NewClick
Rule_EditClick
Rule_DeviceGroupClick
Rule_CalculationClick
Rule_FieldClick
Rule_OperatorClick
Rule_AddConditionClick
Rule_SeverityLevelClick
Rule_StatusToggle
Rule_ApplyClick
Rule_CancelClick
Rule_TopXCloseClick

Also includes new "sessionid" sections of diagnostics call, which logs the time in ms since Jan 1, 1970 when the page was loaded (amplitude expects session id in this format). This fields will be added by diagnostics to enable logging of session id to amplitude--until those changes go in it will be ignored by the backend.

* Delete .travis.yml (#1066)

* Delete .travis.yml

* Update README.md

* Add diagnostics for new device funnel (#1075)

* Add device metrics

Add metrics for new device flyout

* Add device created metric

Add metric on device create so we can log device id for physical devices

* Fix rule apply event

Rule apply click event was only emitted for new rules. Move call so it is emitted if a rule is added or edited.

* Address comments and align metric names

Address comments. Update metric names to be in same format as rule metrics

* fix insertion when entities are null for devices and rules (#1078)

* Refactor to make walkthrough code less intrusive (#1069)

* refactor to make walkthrough code less intrusive

* refactor after meeting with team

* update MD files, move httpClient

* review feedback

* fix nit

* update breadcrumbs to use isDef instead of checking undefined

* example

* add packages

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/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(),