Pnp refresh (#231)

* Discover nav (#220)

* initial commit

* make pnp sub menus pivots and updated tests

* update screenshots, readme and version

* address comments and made interface list better looking

* Component name (#221)

* initial commit

* add component name in router and use it in breadcrumb

* rebase from pnpRefresh

* address comments, add tests and make interface ids into a table

* rebase from master

* format exploded message; move buttons (#223)

* format exploded message; move buttons

* rename a function per comments

* Module sas key (#225)

* add sas token generation for module; module identity and tiwn split view; scroll fixes

* allow multiple for columns; fix one more scroll

* rename digital twin to pnp (#229)

* rebase from pnpRefresh

* fix merge conflict and address comments

* fix build break and update screenshots

README.md

@@ -1,5 +1,5 @@
 
-# Azure IoT Plug and Play (PnP) Device Explorer
+# Azure IoT explorer
 
 [![Build Status](https://dev.azure.com/azure/azure-iot-explorer/_apis/build/status/Azure%20IoT%20Explorer%20CI%20Pipeline?branchName=master)](https://dev.azure.com/azure/azure-iot-explorer/_build/latest?definitionId=31&branchName=master)
 
@@ -56,7 +56,11 @@ If you'd like to package the app yourself, please refer to the [FAQ](https://git
 <img src="doc/screenshots/settings.PNG" alt="settings" width="400"/>
 
 - Go to the device details page by clicking the name of a PnP device.
-- Interfaces implemented by the PnP device would be populated under the DIGITAL TWIN section of the left navigation bar. Open interface, properties, commands or telemetry to start interacting with the PnP device.
+- Click Plug and Play from the navigation. If the device is a Plug and Play device, the Device capability model ID would be shown. A table would show the list of components implemented by the device and the corresponding interfaces the components conform to.
+
+<img src="doc/screenshots/pnp_interfaces.PNG" alt="settings" width="800"/>
+
+- Click the name of any component, and switch between interface, properties, commands and telemetry to start interacting with the PnP device.
 
 <img src="doc/screenshots/pnp_device_details.PNG" alt="pnp_device_details" width="800"/>
 

src/app/api/parameters/deviceParameters.ts

@@ -58,7 +58,7 @@ export interface FetchDigitalTwinInterfacePropertiesParameters extends DataPlane
 
 export interface InvokeDigitalTwinInterfaceCommandParameters extends DataPlaneParameters {
     digitalTwinId: string; // Format of digitalTwinId is DeviceId[~ModuleId]. ModuleId is optional.
-    interfaceName: string;
+    componentName: string;
     commandName: string;
     connectTimeoutInSeconds?: number;
     payload?: any; // tslint:disable-line:no-any

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

@@ -15,7 +15,7 @@ import { DataPlaneParameters } from '../parameters/deviceParameters';
 
 const deviceId = 'deviceId';
 const connectionString = 'HostName=test-string.azure-devices.net;SharedAccessKeyName=owner;SharedAccessKey=fakeKey=';
-const interfaceName = 'interfaceName';
+const componentName = 'componentName';
 const headers = new Headers({
     'Accept': 'application/json',
     'Content-Type': 'application/json'
@@ -214,9 +214,9 @@ describe('deviceTwinService', () => {
     context('invokeDigitalTwinInterfaceCommand', () => {
         const parameters = {
             commandName: 'commandName',
+            componentName,
             connectionString,
             digitalTwinId: undefined,
-            interfaceName,
             payload: undefined
         };
         it ('returns if digitalTwinId is not specified', () => {
@@ -255,7 +255,7 @@ describe('deviceTwinService', () => {
                 body: JSON.stringify(parameters.payload),
                 hostName: connectionInformation.connectionInfo.hostName,
                 httpMethod: HTTP_OPERATION_TYPES.Post,
-                path: `/digitalTwins/${deviceId}/interfaces/${parameters.interfaceName}/commands/${parameters.commandName}`,
+                path: `/digitalTwins/${deviceId}/interfaces/${parameters.componentName}/commands/${parameters.commandName}`,
                 queryString,
                 sharedAccessSignature: connectionInformation.sasToken
             };

src/app/api/services/devicesService.ts

@@ -106,7 +106,7 @@ export const invokeDigitalTwinInterfaceCommand = async (parameters: InvokeDigita
             body: JSON.stringify(parameters.payload),
             hostName: connectionInformation.connectionInfo.hostName,
             httpMethod: HTTP_OPERATION_TYPES.Post,
-            path: `/digitalTwins/${parameters.digitalTwinId}/interfaces/${parameters.interfaceName}/commands/${parameters.commandName}`,
+            path: `/digitalTwins/${parameters.digitalTwinId}/interfaces/${parameters.componentName}/commands/${parameters.commandName}`,
             queryString,
             sharedAccessSignature: connectionInformation.sasToken
         };

src/app/constants/iconNames.ts

@@ -27,6 +27,7 @@ export const WARNING = 'Warning';
 export const DIRECT_METHOD = 'Remote';
 export const CLOUD_TO_DEVICE_MESSAGE = 'Mail';
 export const ITEM = 'LocationDot';
+export const NAVIGATE_BACK = 'NavigateBack';
 
 export enum GroupedList {
     OPEN = 'ChevronDown',

src/app/constants/modelDefinitionConstants.ts

@@ -2,6 +2,6 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License
  **********************************************************/
-export const modelDiscoveryInterfaceName = 'urn_azureiot_ModelDiscovery_DigitalTwin';
+export const modelDiscoveryComponentName = 'urn_azureiot_ModelDiscovery_DigitalTwin';
 export const modelDefinitionInterfaceId = 'urn:azureiot:ModelDiscovery:ModelDefinition:1';
 export const modelDefinitionCommandName = 'getModelDefinition';

src/app/constants/routes.ts

@@ -8,13 +8,15 @@ export enum ROUTE_PARTS {
     CLOUD_TO_DEVICE_MESSAGE = 'cloudToDeviceMessage',
     DEVICE_DETAIL = 'deviceDetail',
     DEVICES = 'devices',
-    DIGITAL_TWINS = 'digitalTwins',
+    DIGITAL_TWINS = 'ioTPlugAndPlay',
+    DIGITAL_TWINS_DETAIL = 'ioTPlugAndPlayDetail',
     EVENTS = 'events',
     IDENTITY = 'identity',
     INTERFACES = 'interfaces',
     METHODS = 'methods',
     MODULE_IDENTITY = 'moduleIdentity',
     MODULE_DETAIL = 'moduleDetail',
+    MODULE_TWIN = 'moduleTwin',
     PROPERTIES = 'properties',
     SETTINGS = 'settings',
     TWIN = 'twin',
@@ -24,5 +26,6 @@ export enum ROUTE_PARTS {
 export enum ROUTE_PARAMS {
     DEVICE_ID = 'deviceId',
     INTERFACE_ID = 'interfaceId',
+    COMPONENT_NAME = 'componentName',
     MODULE_ID = 'moduleId'
 }

src/app/css/_deviceContent.scss

@@ -25,7 +25,7 @@ $nav-width: 20%;
         display: flex;
         flex-Direction: column;
         width: $nav-width;
-        height: calc(100vh - 140px);
+        height: calc(100vh - 131px);
         float: left;
         @include themify($themes) {
                 border: {

src/app/css/_deviceContentNav.scss

@@ -4,8 +4,12 @@
  **********************************************************/
 .nav-label{
     font-weight: bold !important;
-    padding-left: 32px !important;
+    padding-left: 8px !important;
+    font-size: 18px;
 }
 .navToggle {
-    margin-left:5px;
+    margin-left:2px;
 }
+.ms-Nav-chevronButton  {
+    margin-left: 30px;
+}

src/app/css/_deviceDetail.scss

@@ -3,9 +3,15 @@
  * Licensed under the MIT License
  **********************************************************/
  @import 'themes';
+ @import 'variables';
 
 .device-detail {
-    padding: 20px;
+    height: calc(100vh - 244px);
+    overflow-y: auto;
+    padding-left: 30px;
+    padding-right: 20px;
+    width: calc(80% - 50px);
+    position: fixed;
 }
 
 .method-payload{
@@ -33,37 +39,6 @@
     }
 }
 
-.sas-token-section {
-    margin: 0px 10px;
-
-    .ms-Dropdown-title {
-        @include themify($themes){
-            background-color: themed('inputComponentBackgroundColor');
-        }
-    }
-
-    .ms-spinButton-input {
-        @include themify($themes) {
-            background-color: themed('inputComponentBackgroundColor')
-        }
-    }
-
-    .sas-token-generate-button {
-        margin-bottom: 5px;
-        margin-top: 5px;
-    }
-
-    .sas-token-key-field {
-        margin-bottom: 5px;
-        width: 300px;
-    }
-
-    .sas-token-expiration-field {
-        margin-bottom: 5px;
-        width: 300px;
-    }
-}
-
 .list-detail {
     .ms-DetailsHeader {
         @include themify($themes) {
@@ -84,3 +59,7 @@
         }
     }
 }
+
+.no-pnp-content {
+    padding: 25px;
+}

src/app/css/_deviceEvents.scss

@@ -22,12 +22,6 @@
         }
     }
 
-    .scrollable {
-        overflow: auto;
-        margin-top: 10px;
-        height: calc(100vh - 341px);
-    }
-
     .consumer-group-label {
         font-weight: 600;
         font-size: 14px;
@@ -38,10 +32,15 @@
 
     .consumer-group-text-field {
         display: grid;
-        padding-left: 26px;
+        padding-left: 24px;
+        padding-bottom: 10px;
         @include themify($themes) {
             color: themed('textColor');
         }
         width: 500px;
     }
+
+    .toggle-button {
+        padding-left: 24px;
+    }
 }

src/app/css/_devicePnpDetailList.scss

@@ -23,8 +23,6 @@
 }
 
 .pnp-detail-list {
-    padding-top: 20px;
-    top: 0;
     @include themify($themes) {
         background-color: themed('backgroundColor');
     }
@@ -85,6 +83,10 @@
             border-bottom: none;
         }
 
+        .item-summary-partial {
+            border-bottom: none;
+        }
+
         .item-detail {
             @include themify($themes) {
                 border-bottom-color: 1px solid themed('itemDetailBottomBorderColor');
@@ -169,7 +171,7 @@
     {
         padding-top: 20px;
         .monaco-editor {
-            height: calc(100vh - 600px);
+            height: calc(100vh - 540px);
         }
     }
 }
@@ -179,11 +181,16 @@
 }
 
 .scrollable-lg {
-    height: calc(100vh - 300px);
+    height: calc(100vh - 245px);
+    overflow-y: auto;
+}
+
+.scrollable-pnp-telemetry {
+    height: calc(100vh - 400px);
     overflow-y: auto;
 }
 
-.scrollable-sm {
-    height: calc(100vh - 392px);
+.scrollable-telemetry {
+    height: calc(100vh - 360px);
     overflow-y: auto;
 }

src/app/css/_digitalTwinNav.scss

@@ -0,0 +1,11 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+ @import 'themes';
+
+.dcm-info {
+    font-size: 16px;
+    font-weight: bold;
+    padding-left: 10px;
+}

src/app/css/_header.scss

@@ -15,7 +15,7 @@
     .title {
         grid-area: title;
         margin-top: 10px;
-        margin-left: 5px;
+        margin-left: 10px;
         font-size: 18px;
         font-weight: 600;
     }

src/app/css/_layouts.scss

@@ -67,10 +67,6 @@
     }
 }
 
-.view-scroll {
-    overflow: auto;
-}
-
 .view-scroll-vertical {
     overflow-y: auto;
     overflow-x: hidden;

src/app/css/_moduleIdentityDetail.scss

@@ -1,5 +1,36 @@
-.module-identity {
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+@import 'variables';
+
+.module-identity-detail {
+    padding-left: 30px;
+    padding-right: 20px;
+
+    height: calc(100vh - 240px);
+    overflow-y: auto;
+    position: fixed;
+    width: calc(80% - 50px);
+
+    .authentication{
+        padding-top: 20px;
+        .autoGenerateButton {
+            padding-top: 10px;
+        }
+        .ms-ChoiceFieldGroup-flexContainer {
+            display: flex;
+            .ms-ChoiceField-wrapper {
+                padding-right: 10px;
+            }
+        }
+    }
+
     .monaco-editor {
-        height: calc(100vh - 680px);
+        height: calc(100vh - 280px);
+    }
+
+    .collapsible-section {
+        margin-top: 20px;
     }
-}
+}