From 9bce294753e4d07e5ad389c4e907fc500b0ff0c9 Mon Sep 17 00:00:00 2001 From: YashPShah-swag Date: Thu, 19 Oct 2023 17:41:06 +0530 Subject: [PATCH] replaced asset selector with datapoints selector --- widget/kpitrend-widget-config.component.html | 377 ++++++++++--------- widget/kpitrend-widget-config.component.ts | 61 +-- widget/kpitrend-widget.component.ts | 13 +- widget/kpitrend-widget.module.ts | 6 +- 4 files changed, 227 insertions(+), 230 deletions(-) diff --git a/widget/kpitrend-widget-config.component.html b/widget/kpitrend-widget-config.component.html index e97baea..7a26126 100644 --- a/widget/kpitrend-widget-config.component.html +++ b/widget/kpitrend-widget-config.component.html @@ -1,179 +1,214 @@ - - - - - - - - - - - -
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- Interval -
-
- Count +
+
+
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - +
+
+ Interval +
+
+ Count +
+
+ + + + + + + + + + + + + +
+ \ No newline at end of file diff --git a/widget/kpitrend-widget-config.component.ts b/widget/kpitrend-widget-config.component.ts index 58efa1e..6e66b49 100644 --- a/widget/kpitrend-widget-config.component.ts +++ b/widget/kpitrend-widget-config.component.ts @@ -25,18 +25,17 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -export function exactlyASingleDatapointActive(): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const datapoints: any[] = control.value; - if (!datapoints || !datapoints.length) { - return null; - } - const activeDatapoints = datapoints.filter(datapoint => datapoint.__active); - if (activeDatapoints.length === 1) { - return null; - } - return { exactlyOneDatapointNeedsToBeActive: true }; +export function singleDatapointValidation(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const datapoints: any[] = control.value; + if (!datapoints || !datapoints.length) { return null; } + const activeDatapointsList = datapoints.filter(datapoint => datapoint.__active); + if (activeDatapointsList.length === 1) { + return null; + } + return { singleDataPointActive: true }; }; + } @Component({ @@ -44,7 +43,7 @@ export function exactlyASingleDatapointActive(): ValidatorFn { templateUrl: './kpitrend-widget-config.component.html', styleUrls: ['./kpitrend-widget-config.component.css'] }) -export class KPITrendWidgetConfig implements OnInit,DoCheck { +export class KPITrendWidgetConfig implements OnInit{ @Input() config: any = {}; datapointSelectDefaultFormOptions: Partial = { @@ -109,27 +108,10 @@ export class KPITrendWidgetConfig implements OnInit,DoCheck { private destroy$ = new Subject(); constructor(private fetchClient: FetchClient, private formBuilder: FormBuilder, private form: NgForm) {} - ngDoCheck(): void { - if (this.config.device && this.config.device.id !== this.configDevice) { - this.configDevice = this.config.device.id; - const context = this.config.device; - if (context?.id) { - this.datapointSelectionConfig.contextAsset = context; - this.datapointSelectionConfig.assetSelectorConfig - } - } - } - async ngOnInit() { try { - if (this.config.device && this.config.device.id) { - this.configDevice = this.config.device.id; - this.datapointSelectionConfig.contextAsset = this.config.device; - this.datapointSelectionConfig.assetSelectorConfig; - } // Editing an existing widget if(_.has(this.config, 'customwidgetdata')) { - this.loadFragmentSeries(); this.widgetInfo = _.get(this.config, 'customwidgetdata'); } else { // Adding a new widget _.set(this.config, 'customwidgetdata', this.widgetInfo); @@ -162,25 +144,6 @@ export class KPITrendWidgetConfig implements OnInit,DoCheck { _.set(this.config, 'customwidgetdata', this.widgetInfo); } - public async loadFragmentSeries(): Promise { - if( !_.has(this.config, "device.id")) { - console.log("Cannot get fragment series because device id is blank."); - } else { - if(this.oldDeviceId !== this.config.device.id) { - this.measurementSeriesDisabled = true; - this.fetchClient.fetch('/inventory/managedObjects/'+ this.config.device.id +'/supportedSeries').then((resp: IFetchResponse) => { - this.measurementSeriesDisabled = false; - if(resp !== undefined) { - resp.json().then((jsonResp) => { - this.supportedSeries = jsonResp.c8y_SupportedSeries; - }); - } - this.oldDeviceId = this.config.device.id; - }); - } - } - } - setSelectedColorForKPI(value: string) { this.widgetInfo.kpi.color = value; this.updateConfig(); @@ -246,7 +209,7 @@ private createForm() { datapoints: this.formBuilder.control(new Array(), [ Validators.required, Validators.minLength(1), - exactlyASingleDatapointActive() + singleDatapointValidation() ]) }); } diff --git a/widget/kpitrend-widget.component.ts b/widget/kpitrend-widget.component.ts index 3818bc8..a99b88e 100644 --- a/widget/kpitrend-widget.component.ts +++ b/widget/kpitrend-widget.component.ts @@ -204,17 +204,16 @@ export class KPITrendWidget implements OnInit, AfterViewInit, OnDestroy { // ngOnInit() async ngOnInit(): Promise { - try { // Get Creation Timestamp this.creationTimestamp = _.get(this.config, 'customwidgetdata.metadata.creationTimestamp'); // Get Device Id - this.device.id = _.get(this.config, 'device.id'); - if(this.device.id === undefined || this.device.id.length === 0) { - this.validation.measurement = false; - console.log("Device is not selected. Will not be fetching measurements."); - } + if(this.config.datapoints && this.config.datapoints.length > 0){ + const dataPointsObj = this.config.datapoints.find( dp => dp.__active == true); + this.device.id=dataPointsObj.__target.id; + } + // Get KPI Title this.kpi.title = _.get(this.config, 'customwidgetdata.metadata.title'); @@ -232,7 +231,7 @@ export class KPITrendWidget implements OnInit, AfterViewInit, OnDestroy { // Get Measurement if(this.config.datapoints && this.config.datapoints.length > 0){ - const dataPointsObj = this.config.datapoints.find( dp => dp.__active == true);console.log("dpObject:",dataPointsObj); + const dataPointsObj = this.config.datapoints.find( dp => dp.__active == true); this.measurement.fragment = dataPointsObj.fragment; this.measurement.series=dataPointsObj.series; } diff --git a/widget/kpitrend-widget.module.ts b/widget/kpitrend-widget.module.ts index 59fc23c..4a2c059 100644 --- a/widget/kpitrend-widget.module.ts +++ b/widget/kpitrend-widget.module.ts @@ -44,7 +44,7 @@ import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector' { id: 'com.softwareag.globalpresales.kpitrendwidget', label: 'KPI Trend Widget Plugin', - description: 'This widget shows the latest measurement value and unit received from a device as a KPI. It compares this measurement value with the average of measurements received in the selected interval and calculated the percentage growth or fall. It allows to configure threshold values to change the KPI color when threshold values are reached. It also shows a trend chart by plotting all the measurement values received for the selected interval or measurements count.', + description: 'This widget shows the latest measurement value and unit received from a device as a KPI. It compares this measurement value with the average of measurements received in the selected interval and calculated the percentage growth or fall.', component: KPITrendWidget, configComponent: KPITrendWidgetConfig, previewImage: require("./images/img-preview.png"), @@ -54,10 +54,10 @@ import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector' data: { ng1: { options: { - noDeviceTarget: false, + noDeviceTarget: true, noNewWidgets: false, deviceTargetNotRequired: false, - groupsSelectable: true + groupsSelectable: false } } }