From 4286ee8bf679f5d8b48d17e3741d266648b3e116 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 9 Nov 2023 10:35:06 +0200
Subject: [PATCH] UI: Minor fixes

---
 .../config/basic/common/data-key-row.component.ts      |  4 +++-
 .../config/basic/common/data-keys-panel.component.ts   | 10 ++++++++--
 .../components/widget/config/datasource.component.ts   |  2 +-
 .../widget/lib/chart/doughnut-widget.component.ts      |  3 +++
 ui-ngx/src/app/shared/models/widget.models.ts          |  4 ++--
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts
index 573aea1e90..a6b6c426a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts
@@ -69,9 +69,11 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { alarmFields } from '@shared/models/alarm.models';
 import { UtilsService } from '@core/services/utils.service';
 
+export const dataKeyValid = (key: DataKey): boolean => !!key && !!key.type && !!key.name;
+
 export const dataKeyRowValidator = (control: AbstractControl): ValidationErrors | null => {
   const dataKey: DataKey = control.value;
-  if (!dataKey || !dataKey.type || !dataKey.name) {
+  if (!dataKeyValid(dataKey)) {
     return {
       dataKey: true
     };
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts
index 00684f6d53..07a122c66a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts
@@ -38,7 +38,7 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKey, DatasourceType, JsonSettingsSchema, widgetType } from '@shared/models/widget.models';
-import { dataKeyRowValidator } from '@home/components/widget/config/basic/common/data-key-row.component';
+import { dataKeyRowValidator, dataKeyValid } from '@home/components/widget/config/basic/common/data-key-row.component';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { UtilsService } from '@core/services/utils.service';
@@ -168,7 +168,13 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
       keys: [this.fb.array([]), []]
     });
     this.keysListFormGroup.valueChanges.subscribe(
-      (val) => this.propagateChange(this.keysListFormGroup.get('keys').value)
+      () => {
+        let keys: DataKey[] = this.keysListFormGroup.get('keys').value;
+        if (keys) {
+          keys = keys.filter(k => dataKeyValid(k));
+        }
+        this.propagateChange(keys);
+      }
     );
     this.updateParams();
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.ts
index 92b2e84618..08c86de1d5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.ts
@@ -263,7 +263,7 @@ export class DatasourceComponent implements ControlValueAccessor, OnInit, Valida
   }
 
   public isDataKeysOptional(type?: DatasourceType): boolean {
-    if (this.hasAdditionalLatestDataKeys) {
+    if (this.hasAdditionalLatestDataKeys || this.hideDataKeys) {
       return true;
     } else {
       return this.dataKeysOptional
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
index c4f32f89c9..92d8abeb07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
@@ -424,6 +424,9 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
     if (this.settings.showTooltip) {
       this.doughnutOptions.series[0].tooltip = {
         formatter: (params) => {
+          if (!params.name) {
+            return null;
+          }
           let value: string;
           if (this.settings.tooltipValueType === DoughnutTooltipValueType.percentage) {
             const percents = params.value / this.total * 100;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 5e860a2930..0e676138ce 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -426,8 +426,8 @@ export const datasourcesHasOnlyComparisonAggregation = (datasources?: Array<Data
   }
   if (datasources) {
     const foundDatasource = datasources.find(datasource => {
-      const found = datasource.dataKeys && datasource.dataKeys.find(key => key.type === DataKeyType.timeseries &&
-        key.aggregationType && key.aggregationType !== AggregationType.NONE && !key.comparisonEnabled);
+      const found = datasource.dataKeys && datasource.dataKeys.find(key => key?.type === DataKeyType.timeseries &&
+        key?.aggregationType && key.aggregationType !== AggregationType.NONE && !key.comparisonEnabled);
       return !!found;
     });
     if (foundDatasource) {