From d43259d71fd7bd8ef8f9efdd92746206fcf27249 Mon Sep 17 00:00:00 2001 From: "Kumar, Ravi Shankar" Date: Wed, 4 Jan 2023 20:12:24 +0530 Subject: [PATCH] Changes has been added for the checklist and removed console.log --- README.md | 76 ++++++++++++++----- package.json | 4 +- ...evice-details-widget-config.component.html | 23 ------ ...-device-details-widget-config.component.ts | 17 ++--- widget/gp-device-details-widget.component.ts | 4 - widget/gp-device-details-widget.service.ts | 7 +- 6 files changed, 67 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 4b37b22..ab19b42 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,67 @@ -# Cumulocity device details widget plugin +# Cumulocity Device Details Widget Plugin [](https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin/releases/download/1.0.0-beta/device-details-runtime-widget-1.0.0-beta.zip) -This Device Details Widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. It shows current device details properties in widget. +This Device Details Widget Plugin is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. This Plugin is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call. -``` -"exports": [ - { - "name": "Cumulocity Device Details Widget Plugin", - "module": "GpDeviceDetailsWidgetModule", - "path": "./widget/gp-device-details-widget.module.ts", - "description": "Adds a custom widget to the shell application" - } -] -``` +### Please note that this plugin is in currently under BETA mode. -**How to start** -Run the command below to scaffold a `widget` plugin. +### Please choose Demo Widget release based on Cumulocity/Application builder version: -``` -c8ycli new widget-plugin -``` +|APPLICATION BUILDER | CUMULOCITY | DEVICE DETAILS WIDGET PLUGIN | +|--------------------|-------------|-------------------------------| +| 2.0.x(coming soon) | >= 1016.x.x | 1.x.x | + + +![Device_Details_1](https://user-images.githubusercontent.com/99970126/181510210-2e16463e-0c57-4048-b458-4253a1c913ec.PNG) + +![Device-Details-Config](https://user-images.githubusercontent.com/99970126/188394087-58a3da72-1ae3-4812-8aef-a6afe3a64c9a.png) + + +## Features + +## Installation + +### Runtime Widget Deployment? + + - This plugin support runtime deployment. Download [Runtime Binary](https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin/releases/download/1.0.0-beta/device-details-runtime-widget-1.0.0-beta.zip) and follow runtime deployment instructions from [here](https://github.com/SoftwareAG/cumulocity-runtime-widget-loader). -As the app.module is a typical Cumuloctiy application, any new plugin can be tested via the CLI: +## Supported Product Versions +- **App Builder:** Tested with Cumulocity App Builder version 1.3.0 +**Requirements:** +* Git +* NodeJS (release builds are currently built with `v14.18.0`) +* NPM (Included with NodeJS) + +**Instructions** +1. Clone the repository: +``` +git clone https://github.com/SoftwareAG/cumulocity-device-details-widget-plugin.git +``` +2. Change directory: +``` +cd cumulocity-device-details-widget-plugin +``` +3. Install the dependencies: +``` +npm install +``` +4. (Optional) Local development server: ``` npm start -- --shell cockpit ``` +5. Build the app: +``` +npm run build +``` +6. Deploy the app: +``` +npm run deploy +``` + -In the Module Federation terminology, `widget` plugin is called `remote` and the `cokpit` is called `shell`. Modules provided by this `widget` will be loaded by the `cockpit` application at the runtime. This plugin provides a basic custom widget that can be accessed through the `Add widget` menu. +------------------------------ -> Note that the `--shell` flag creates a proxy to the cockpit application and provides` GpDeviceDetailsWidgetModule` as an `remote` via URL options. +These tools are provided as-is and without warranty or support. They do not constitute part of the Software AG product suite. Users are free to use, fork and modify them, subject to the license agreement. While Software AG welcomes contributions, we cannot guarantee to include every contribution in the master project. +_____________________ +For more information you can Ask a Question in the [TECH Community Forums](https://tech.forums.softwareag.com/tag/Cumulocity-IoT). -Also deploying needs no special handling and can be simply done via `npm run deploy`. As soon as the application has exports it will be uploaded as a plugin. diff --git a/package.json b/package.json index 774e714..49e2ee0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cumulocity-device-details-widget-plugin", "version": "1.0.0-beta", - "description": "This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:", + "description": "This is the Cumulocity module federation plugin. This Plugins is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call.", "scripts": { "start": "c8ycli server --env.beta=true", "build": "c8ycli build --env.mode=production", @@ -78,7 +78,7 @@ "name": "Cumulocity Device Details Widget Plugin", "module": "GpDeviceDetailsWidgetModule", "path": "./widget/gp-device-details-widget.module.ts", - "description": "Adds a custom widget to the shell application" + "description": "This Plugins is designed to display the Device Details can fetch the details from the Api call and can display data according to the fields provided. The angular widget has the ability to summarize information relating to the names from the Api call." } ], "remotes": { diff --git a/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.html b/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.html index 89350c6..ba16f32 100644 --- a/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.html +++ b/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.html @@ -29,20 +29,6 @@ - - - - - @@ -53,13 +39,4 @@ - \ No newline at end of file diff --git a/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.ts b/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.ts index 32a28b3..4b80d45 100644 --- a/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.ts +++ b/widget/gp-device-details-widget-config/gp-device-details-widget-config.component.ts @@ -18,7 +18,6 @@ import { Component, OnInit, Input } from '@angular/core'; import { Observable } from 'rxjs'; import { GpDeviceDetailsWidgetService } from '../gp-device-details-widget.service'; -import { UntypedFormControl, UntypedFormGroup } from '@angular/forms'; @Component({ selector: 'lib-gp-device-details-widget-config', templateUrl: './gp-device-details-widget-config.component.html', @@ -27,11 +26,6 @@ import { UntypedFormControl, UntypedFormGroup } from '@angular/forms'; export class GpDeviceDetailsWidgetConfigComponent implements OnInit { @Input() config: any = {}; - - // stateCtrl = new UntypedFormControl(); - // myForm = new UntypedFormGroup({ - // state: this.stateCtrl - // }); propertiesToDisplay: any[] = []; constructor(private deviceDetailsService: GpDeviceDetailsWidgetService) { } @@ -75,10 +69,9 @@ export class GpDeviceDetailsWidgetConfigComponent implements OnInit { "uomTypeId": "UOM-003", "uomTypeDes": "Each" } + configDevice = null; ngOnInit() { - // this.toDotNotation(this.deviceDetail); - // this.extractKeysFromObject(this.deviceDetail); if (!this.config.propList) { this.config.propList = [{ label: '', value: '' }]; } @@ -87,6 +80,13 @@ export class GpDeviceDetailsWidgetConfigComponent implements OnInit { } } + ngDoCheck(): void { + if(this.config.device && this.config.device.id !== this.configDevice){ + this.configDevice = this.config.device.id; + this.getDeviceData(); + } + } + async getDeviceData() { if (this.config.deviceDetailsUrl && this.config.mainListName) { this.deviceDetailsService.getDeviceDataByID(this.config) @@ -94,7 +94,6 @@ export class GpDeviceDetailsWidgetConfigComponent implements OnInit { .then((data) => { this.extractKeysFromObject(data[this.config.mainListName]); }); - //this.propertiesToDisplay = []; } } diff --git a/widget/gp-device-details-widget.component.ts b/widget/gp-device-details-widget.component.ts index ce24ab1..7ebc77e 100644 --- a/widget/gp-device-details-widget.component.ts +++ b/widget/gp-device-details-widget.component.ts @@ -69,10 +69,6 @@ export class GpDeviceDetailsWidgetComponent implements OnInit { }); if (this.config) { this.mainList = this.config.mainListName; - /* this.deviceDataColumnName = this.config.tableColumnNames.split(','); - // tslint:disable-next-line: no-unused-expression - (this.deviceDataColumnName); - this.deviceDataColumnvalues = this.config.tableColumnValues.split(',');*/ } } getDeviceDetails() { diff --git a/widget/gp-device-details-widget.service.ts b/widget/gp-device-details-widget.service.ts index 34eb531..9f52832 100644 --- a/widget/gp-device-details-widget.service.ts +++ b/widget/gp-device-details-widget.service.ts @@ -17,7 +17,6 @@ */ import { Injectable } from '@angular/core'; import { InventoryService, IdentityService, IResultList, IManagedObject } from '@c8y/client'; -import { HttpClient } from '@angular/common/http'; @Injectable({providedIn: "root"}) export class GpDeviceDetailsWidgetService { @@ -63,7 +62,6 @@ export class GpDeviceDetailsWidgetService { } async getDeviceData(config) { const inventory = await this.inventory.detail(config.device.id); - //const inventory = await this.inventory.detail('00010238'); this.response = inventory.data; if ((this.response.hasOwnProperty('c8y_IsDevice')) || (this.response.hasOwnProperty('c8y_IsAsset'))) { this.deviceExternalId = await this.getExternalId(config.device.id); @@ -92,9 +90,8 @@ export class GpDeviceDetailsWidgetService { } async getDeviceDataByID(config) { - // let deviceExternalID = await this.getExternalIdForDevice(config); - let deviceDetailsURL = config.deviceDetailsUrl + '00001246'; - // return this.http.get(deviceDetailsURL); + let deviceExternalID = await this.getExternalIdForDevice(config); + let deviceDetailsURL = config.deviceDetailsUrl + deviceExternalID; return fetch(deviceDetailsURL); } }