merge device events pages and make system property toggle in realtime

package.json

@@ -88,7 +88,6 @@
     "react-collapsible": "2.3.2",
     "react-dom": "16.13.1",
     "react-i18next": "11.5.0",
-    "react-infinite-scroller": "1.2.2",
     "react-jsonschema-form": "1.7.0",
     "react-router-dom": "5.2.0",
     "react-smooth-dnd": "0.11.0",
@@ -117,7 +116,6 @@
     "@types/jest-plugin-context": "2.9.0",
     "@types/react": "16.9.35",
     "@types/react-dom": "16.9.8",
-    "@types/react-infinite-scroller": "1.0.8",
     "@types/react-jsonschema-form": "1.0.10",
     "@types/react-router-dom": "5.1.5",
     "@types/react-toastify": "4.0.1",

src/app/api/parameters/deviceParameters.ts

@@ -36,7 +36,6 @@ export interface MonitorEventsParameters {
     customEventHubConnectionString?: string;
     hubConnectionString?: string;
 
-    fetchSystemProperties?: boolean;
     startTime?: Date;
 }
 

src/app/api/services/devicesService.spec.ts

@@ -637,7 +637,6 @@ describe('deviceTwinService', () => {
             consumerGroup: '$Default',
             customEventHubConnectionString: undefined,
             deviceId,
-            fetchSystemProperties: undefined,
             hubConnectionString: undefined,
             startTime: undefined
         };

src/app/connectionStrings/components/connectionStringsView.spec.tsx

@@ -12,7 +12,6 @@ import { ConnectionStringEditView } from './connectionStringEditView';
 import { CONNECTION_STRING_LIST_MAX_LENGTH } from '../../constants/browserStorage';
 import * as AsyncSagaReducer from '../../shared/hooks/useAsyncSagaReducer';
 import { connectionStringsStateInitial } from '../state';
-import * as actions from '../actions';
 import { upsertConnectionStringAction } from '../actions';
 
 jest.mock('react-router-dom', () => ({

src/app/constants/actionTypes.ts

@@ -13,6 +13,7 @@ export const FETCH_MODEL_DEFINITION = 'FETCH_MODEL_DEFINITION';
 // devices
 export const ADD_DEVICE = 'ADD_DEVICE';
 export const CLEAR_DEVICES = 'CLEAR_DEVICES';
+export const CLEAR_MONITORING_EVENTS = 'CLEAR_MONITORING_EVENTS';
 export const CLOUD_TO_DEVICE_MESSAGE = 'CLOUD_TO_DEVICE_MESSAGE';
 export const DELETE_DEVICES = 'DELETE_DEVICES';
 export const EXECUTE_METHOD = 'EXECUTE_METHOD';
@@ -24,6 +25,8 @@ export const INVOKE_DEVICE_METHOD = 'INVOKE_DEVICE_METHOD';
 export const INVOKE_DIGITAL_TWIN_INTERFACE_COMMAND = 'INVOKE_DIGITAL_TWIN_INTERFACE_COMMAND';
 export const PATCH_DIGITAL_TWIN = 'PATCH_DIGITAL_TWIN';
 export const SET_COMPONENT_NAME = 'SET_COMPONENT_NAME';
+export const START_EVENTS_MONITORING = 'START_EVENTS_MONITORING';
+export const STOP_EVENTS_MONITORING = 'STOP_EVENTS_MONITORING';
 export const UPDATE_TWIN = 'UPDATE_TWIN';
 export const UPDATE_DEVICE_IDENTITY = 'UPDATE_DEVICE_IDENTITY';
 

src/app/css/_deviceEvents.scss

@@ -20,6 +20,10 @@
                 border-top: 1px solid themed('contrastBorder');
             }
             padding: 0 25px;
+            width: 100%;
+            pre {
+                white-space: pre-wrap;
+            }
         }
     }
 
@@ -66,5 +70,44 @@
     .scrollable-telemetry {
         height: calc(100vh - 400px);
         overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .scrollable-pnp-telemetry {
+        height: calc(100vh - 490px);
+        overflow-y: auto;
+        overflow-x: hidden;
+        .column-value-text {
+            .value-validation-error {
+                @include themify($themes) {
+                    color: themed('errorText');
+                }
+                padding-top: 10px;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .pnp-modeled-list {
+        @include themify($themes) {
+            background-color: themed('backgroundColor');
+        }
+        .list-header {
+            font-weight: bold;
+            border-bottom: 1px solid;
+            @include themify($themes) {
+                border-bottom-color: themed('borderColor');
+            }
+            padding-bottom: 5px;
+        }
+    }
+
+    .item-summary {
+        overflow: auto;
+        width: 100%;
+        border-bottom: 1px solid;
+        @include themify($themes) {
+            border-bottom-color: themed('borderColor');
+        }
     }
 }

src/app/css/_devicePnpDetailList.scss

@@ -186,8 +186,3 @@
     height: calc(100vh - 245px);
     overflow-y: auto;
 }
-
-.scrollable-pnp-telemetry {
-    height: calc(100vh - 400px);
-    overflow-y: auto;
-}

src/app/devices/cloudToDeviceMessage/saga.spec.ts

@@ -26,13 +26,11 @@ describe('cloudToDeviceMessageSaga', () => {
         return randomNumber;
     });
 
-    const connectionString = 'connection_string';
     const deviceId = 'device_id';
     const message = 'message';
 
     const cloudToDeviceMessageParameters: CloudToDeviceMessageParameters = {
         body: message,
-        connectionString,
         deviceId
     };
 

src/app/devices/deviceEvents/actions.ts

@@ -0,0 +1,14 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+import actionCreatorFactory from 'typescript-fsa';
+import { DEVICECONTENT } from '../../constants/actionPrefixes';
+import { CLEAR_MONITORING_EVENTS, START_EVENTS_MONITORING, STOP_EVENTS_MONITORING } from '../../constants/actionTypes';
+import { Message } from '../../api/models/messages';
+import { MonitorEventsParameters } from '../../api/parameters/deviceParameters';
+
+const deviceContentCreator = actionCreatorFactory(DEVICECONTENT);
+export const startEventsMonitoringAction = deviceContentCreator.async<MonitorEventsParameters, Message[]>(START_EVENTS_MONITORING);
+export const stopEventsMonitoringAction = deviceContentCreator.async<void, void>(STOP_EVENTS_MONITORING);
+export const clearMonitoringEventsAction = deviceContentCreator(CLEAR_MONITORING_EVENTS);