From 8d9f5f925e72a0866094adaf1475bc194ab484a6 Mon Sep 17 00:00:00 2001 From: rusikv Date: Wed, 18 Oct 2023 12:59:28 +0300 Subject: [PATCH 01/12] UI: fixed message 'No data to display on widget' not showing when there is no data for timeseries and value chart widgets --- .../lib/cards/aggregated-value-card-widget.component.ts | 4 ++-- .../home/components/widget/lib/flot-widget.component.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts index 5380874811..e81cb270e7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts @@ -116,7 +116,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit ngOnInit(): void { this.ctx.$scope.aggregatedValueCardWidget = this; this.settings = {...aggregatedValueCardDefaultSettings, ...this.ctx.settings}; - this.showSubtitle = this.settings.showSubtitle; + this.showSubtitle = this.settings.showSubtitle && this.ctx.datasources?.length > 0; const subtitle = this.settings.subtitle; this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$); this.subtitleStyle = textStyle(this.settings.subtitleFont, '0.25px'); @@ -156,7 +156,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit } ngAfterViewInit(): void { - if (this.showChart) { + if (this.showChart && this.ctx.datasources?.length) { const settings = { shadowSize: 0, enableSelection: false, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts index 9272295a27..1494e987ce 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts @@ -60,7 +60,9 @@ export class FlotWidgetComponent implements OnInit { this.settings = this.ctx.settings; this.chartType = this.chartType || 'line'; this.configureLegend(); - this.flot = new TbFlot(this.ctx, this.chartType, $(this.flotElement.nativeElement)); + if (this.ctx.datasources?.length) { + this.flot = new TbFlot(this.ctx, this.chartType, $(this.flotElement.nativeElement)); + } } private configureLegend(): void { From 84f27b1d456006fc4e711755e94590391e1c500e Mon Sep 17 00:00:00 2001 From: rusikv Date: Wed, 18 Oct 2023 17:50:38 +0300 Subject: [PATCH 02/12] UI: Fixed position of help icon in custom date config of card widgets --- .../settings/common/date-format-settings-panel.component.html | 2 +- .../settings/common/date-format-settings-panel.component.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html index ee332924f0..3a2d9f78b9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html @@ -21,7 +21,7 @@
date.format
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss index ec6a762966..784b4fbeb4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss @@ -51,7 +51,6 @@ .mat-mdc-form-field-icon-suffix { display: flex; align-items: center; - line-height: normal; } } } From 2a4b34893139bf40876fd3ef5ff0d4722732f06a Mon Sep 17 00:00:00 2001 From: rusikv Date: Wed, 18 Oct 2023 18:44:25 +0300 Subject: [PATCH 03/12] UI: added decibel-milliwatts unit to dictionary --- ui-ngx/src/assets/locale/locale.constant-en_US.json | 1 + ui-ngx/src/assets/metadata/units.json | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b4c0f07c85..0326633be4 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4388,6 +4388,7 @@ "volt": "Volt", "kilovolts": "Kilovolts", "dbmV": "dBmV", + "dbm": "dBm", "volt-meter": "Volt-Meter", "kilovolt-meter": "Kilovolt-Meter", "megavolt-meter": "Megavolt-Meter", diff --git a/ui-ngx/src/assets/metadata/units.json b/ui-ngx/src/assets/metadata/units.json index 988c3f34ce..5d680c6e2c 100644 --- a/ui-ngx/src/assets/metadata/units.json +++ b/ui-ngx/src/assets/metadata/units.json @@ -938,6 +938,11 @@ "symbol": "dBmV", "tags": ["decibels millivolt","voltage level","signal","dBmV"] }, +{ + "name": "unit.dbm", + "symbol": "dBm", + "tags": ["decibel milliwatts","output power","signal","dBm"] +}, { "name": "unit.volt-meter", "symbol": "V·m", From 357428749905cca6d8aca705dcdbe675fe93eb44 Mon Sep 17 00:00:00 2001 From: rusikv Date: Thu, 19 Oct 2023 15:05:25 +0300 Subject: [PATCH 04/12] UI: fix for help icon in custom date of card widgets --- .../common/date-format-settings-panel.component.html | 2 +- .../common/date-format-settings-panel.component.scss | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html index 3a2d9f78b9..279b48fb3a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html @@ -21,7 +21,7 @@
date.format
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss index 784b4fbeb4..7ca3237b5d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss @@ -48,9 +48,12 @@ } .mat-mdc-form-field.tb-date-format-input { .mat-mdc-text-field-wrapper.mdc-text-field--outlined { - .mat-mdc-form-field-icon-suffix { - display: flex; - align-items: center; + .mat-mdc-form-field-flex { + .mat-mdc-form-field-icon-suffix { + display: flex; + align-items: center; + line-height: normal; + } } } } From 408b890679a66f61a67a53b092eb29ea651dc6d1 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 20 Oct 2023 11:01:04 +0300 Subject: [PATCH 05/12] UI: Fixed widget setting boarder radius --- .../src/app/modules/home/models/dashboard-component.models.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index 8104e80e36..790ea29615 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -479,7 +479,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { backgroundColor: this.backgroundColor, padding: this.padding, margin: this.margin, - borderRadius: this.borderRadius}; + borderRadius: this.borderRadius || 'unset' }; if (this.widget.config.widgetStyle) { this.style = {...this.style, ...this.widget.config.widgetStyle}; } From fc1d694fd77dc51866246ee3d25a6784a11db831 Mon Sep 17 00:00:00 2001 From: rusikv Date: Fri, 20 Oct 2023 11:13:43 +0300 Subject: [PATCH 06/12] UI: Fixed state chart default legend position not set --- .../src/main/data/json/system/widget_types/state_chart.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/src/main/data/json/system/widget_types/state_chart.json b/application/src/main/data/json/system/widget_types/state_chart.json index 25a3130d48..a78fc06f64 100644 --- a/application/src/main/data/json/system/widget_types/state_chart.json +++ b/application/src/main/data/json/system/widget_types/state_chart.json @@ -19,7 +19,7 @@ "latestDataKeySettingsDirective": "tb-flot-latest-key-settings", "hasBasicMode": true, "basicModeDirective": "tb-flot-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":0,\"max\":1.2,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"timeForComparison\":\"previousInterval\",\"comparisonCustomIntervalValue\":7200000,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"right\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false,\"dataKeysListForLabels\":[]},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"legendConfig\":{\"direction\":\"column\",\",position\":\"bottom\",\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false},\"configMode\":\"basic\",\"showTitleIcon\":false,\"titleIcon\":\"waterfall_chart\",\"iconColor\":\"#1F6BDD\"}" + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":0,\"max\":1.2,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"timeForComparison\":\"previousInterval\",\"comparisonCustomIntervalValue\":7200000,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"right\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false,\"dataKeysListForLabels\":[]},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"configMode\":\"basic\",\"showTitleIcon\":false,\"titleIcon\":\"waterfall_chart\",\"iconColor\":\"#1F6BDD\"}" }, "externalId": null, "tags": null From deb8cf3a22f2792bb824d531b5d427007c1afb83 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 20 Oct 2023 17:43:21 +0300 Subject: [PATCH 07/12] UI: Add support inside widget bundle added new widgets --- ui-ngx/src/app/core/http/widget.service.ts | 9 ++++ .../import-export/import-export.service.ts | 6 +-- .../pages/widget/widget-editor.component.ts | 19 +++++-- .../widgets-bundle-widgets.component.html | 26 ++++++--- .../widgets-bundle-widgets.component.ts | 54 ++++++++++++++++--- .../assets/locale/locale.constant-en_US.json | 2 + ui-ngx/src/typings/utils.d.ts | 6 +++ 7 files changed, 101 insertions(+), 21 deletions(-) diff --git a/ui-ngx/src/app/core/http/widget.service.ts b/ui-ngx/src/app/core/http/widget.service.ts index 9dcda4ef8a..6b53e4d0cb 100644 --- a/ui-ngx/src/app/core/http/widget.service.ts +++ b/ui-ngx/src/app/core/http/widget.service.ts @@ -236,6 +236,15 @@ export class WidgetService { return this.http.get>(url, defaultHttpOptionsFromConfig(config)); } + public addWidgetFqnToWidgetBundle(widgetsBundleId: string, fqn: string, config?: RequestConfig) { + return this.getBundleWidgetTypeFqns(widgetsBundleId, config).pipe( + mergeMap(widgetsBundleFqn => { + widgetsBundleFqn.push(fqn); + return this.updateWidgetsBundleWidgetFqns(widgetsBundleId, widgetsBundleFqn, config); + }) + ); + } + public getWidgetTemplate(widgetTypeParam: widgetType, config?: RequestConfig): Observable { const templateWidgetType = widgetTypesData.get(widgetTypeParam); diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts b/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts index e91375e75e..e71c4df0d5 100644 --- a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts +++ b/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts @@ -297,7 +297,7 @@ export class ImportExportService { ); } - public importWidgetType(): Observable { + public importWidgetType(): Observable { return this.openImportDialog('widget-type.import', 'widget-type.widget-type-file').pipe( mergeMap((widgetTypeDetails: WidgetTypeDetails) => { if (!this.validateImportedWidgetTypeDetails(widgetTypeDetails)) { @@ -309,9 +309,7 @@ export class ImportExportService { return this.widgetService.saveImportedWidgetTypeDetails(widgetTypeDetails); } }), - catchError((err) => { - return of(null); - }) + catchError(() => of(null)) ); } diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts index d3ba1d1daa..cc382c420a 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts @@ -52,11 +52,11 @@ import { SaveWidgetTypeAsDialogComponent, SaveWidgetTypeAsDialogResult } from '@home/pages/widget/save-widget-type-as-dialog.component'; -import { forkJoin, Subscription } from 'rxjs'; +import { forkJoin, mergeMap, of, Subscription, throwError } from 'rxjs'; import { ResizeObserver } from '@juggle/resize-observer'; import { widgetEditorCompleter } from '@home/pages/widget/widget-editor.models'; import { Observable } from 'rxjs/internal/Observable'; -import { map, tap } from 'rxjs/operators'; +import { catchError, map, tap } from 'rxjs/operators'; import { beautifyCss, beautifyHtml, beautifyJs } from '@shared/models/beautify.models'; import Timeout = NodeJS.Timeout; @@ -543,7 +543,20 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe private commitSaveWidget() { const id = (this.widgetTypeDetails && this.widgetTypeDetails.id) ? this.widgetTypeDetails.id : undefined; const createdTime = (this.widgetTypeDetails && this.widgetTypeDetails.createdTime) ? this.widgetTypeDetails.createdTime : undefined; - this.widgetService.saveWidgetTypeDetails(this.widget, id, createdTime).subscribe({ + this.widgetService.saveWidgetTypeDetails(this.widget, id, createdTime).pipe( + mergeMap((widgetTypeDetails) => { + const widgetsBundleId = this.route.snapshot.params.widgetsBundleId as string; + if (widgetsBundleId) { + return this.widgetService.addWidgetFqnToWidgetBundle(widgetsBundleId, widgetTypeDetails.fqn).pipe( + map(() => widgetTypeDetails), + catchError((error) => this.widgetService.deleteWidgetType(widgetTypeDetails.id.id).pipe( + mergeMap(() => throwError(() => error)) + )) + ); + } + return of(widgetTypeDetails); + }) + ).subscribe({ next: (widgetTypeDetails) => { this.saveWidgetPending = false; if (!this.widgetTypeDetails?.id) { diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html index 2d95fd1fdb..fcd36d6f00 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html +++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html @@ -27,6 +27,23 @@ {{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }} + + + + +