UI: Add edge quick overview widget settings form

application/src/main/data/json/system/widget_bundles/edge_widgets.json

@@ -19,10 +19,11 @@
         "templateHtml": "<tb-edges-overview-widget \n    [ctx]=\"ctx\">\n</tb-edges-overview-widget>",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        dataKeysOptional: true\n    };\n}\n\nself.onDestroy = function() {\n};\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"EdgeOverviewSettings\",\n        \"properties\": {\n            \"enableDefaultTitle\": {\n                \"title\": \"Display default title\",\n                \"type\": \"boolean\",\n                \"default\": true\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"enableDefaultTitle\"\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-edge-quick-overview-widget-settings",
         "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"showTitleIcon\":true,\"titleIcon\":\"router\",\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{},\"title\":\"Edge Quick Overview\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"}]}],\"widgetStyle\":{},\"actions\":{}}"
       }
     }
   ]
-}
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html

@@ -0,0 +1,22 @@
+<!--
+
+    Copyright © 2016-2022 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<section class="tb-widget-settings" [formGroup]="edgeQuickOverviewWidgetSettingsForm" fxLayout="column">
+  <mat-slide-toggle class="mat-slide" formControlName="enableDefaultTitle">
+    {{ 'widgets.edge.display-default-title' | translate }}
+  </mat-slide-toggle>
+</section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.ts

@@ -0,0 +1,52 @@
+///
+/// Copyright © 2016-2022 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-edge-quick-overview-widget-settings',
+  templateUrl: './edge-quick-overview-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class EdgeQuickOverviewWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  edgeQuickOverviewWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.edgeQuickOverviewWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      enableDefaultTitle: true
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.edgeQuickOverviewWidgetSettingsForm = this.fb.group({
+      enableDefaultTitle: [settings.enableDefaultTitle, []]
+    });
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -144,6 +144,9 @@ import {
 import {
   DateRangeNavigatorWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component';
+import {
+  EdgeQuickOverviewWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -197,7 +200,8 @@ import {
     KnobControlWidgetSettingsComponent,
     RpcTerminalWidgetSettingsComponent,
     RpcShellWidgetSettingsComponent,
-    DateRangeNavigatorWidgetSettingsComponent
+    DateRangeNavigatorWidgetSettingsComponent,
+    EdgeQuickOverviewWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -255,7 +259,8 @@ import {
     KnobControlWidgetSettingsComponent,
     RpcTerminalWidgetSettingsComponent,
     RpcShellWidgetSettingsComponent,
-    DateRangeNavigatorWidgetSettingsComponent
+    DateRangeNavigatorWidgetSettingsComponent,
+    EdgeQuickOverviewWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -299,5 +304,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-knob-control-widget-settings': KnobControlWidgetSettingsComponent,
   'tb-rpc-terminal-widget-settings': RpcTerminalWidgetSettingsComponent,
   'tb-rpc-shell-widget-settings': RpcShellWidgetSettingsComponent,
-  'tb-date-range-navigator-widget-settings': DateRangeNavigatorWidgetSettingsComponent
+  'tb-date-range-navigator-widget-settings': DateRangeNavigatorWidgetSettingsComponent,
+  'tb-edge-quick-overview-widget-settings': EdgeQuickOverviewWidgetSettingsComponent
 };

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3391,6 +3391,9 @@
             "sort-settings": "Sort settings",
             "nodes-sort-function": "Nodes sort function"
         },
+        "edge": {
+            "display-default-title": "Display default title"
+        },
         "gauge": {
             "default-color": "Default color",
             "radial-gauge-settings": "Radial gauge settings",