Merge branch 'master' of github.com:thingsboard/thingsboard

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

ui-ngx/src/app/core/http/widget.service.ts

@@ -236,6 +236,15 @@ export class WidgetService {
     return this.http.get<PageData<WidgetTypeInfo>>(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<WidgetInfo> {
     const templateWidgetType = widgetTypesData.get(widgetTypeParam);

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -110,6 +110,7 @@
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
           <tb-widgets-bundle-select fxFlexOffset="5"
                                     fxFlex
+                                    required
                                     [selectFirstBundle]="false"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
                                     [ngModel]="null"

ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts

@@ -297,7 +297,7 @@ export class ImportExportService {
     );
   }
 
-  public importWidgetType(): Observable<WidgetType> {
+  public importWidgetType(): Observable<WidgetTypeDetails> {
     return this.openImportDialog('widget.import', 'widget-type.widget-file').pipe(
       mergeMap((widgetTypeDetails: WidgetTypeDetails) => {
         if (!this.validateImportedWidgetTypeDetails(widgetTypeDetails)) {
@@ -309,9 +309,7 @@ export class ImportExportService {
           return this.widgetService.saveImportedWidgetTypeDetails(widgetTypeDetails);
         }
       }),
-      catchError((err) => {
+      catchError(() => of(null))
-        return of(null);
-      })
     );
   }
 

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);
@@ -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,

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts

@@ -60,8 +60,10 @@ export class FlotWidgetComponent implements OnInit {
     this.settings = this.ctx.settings;
     this.chartType = this.chartType || 'line';
     this.configureLegend();
+    if (this.ctx.datasources?.length) {
       this.flot = new TbFlot(this.ctx, this.chartType, $(this.flotElement.nativeElement));
     }
+  }
 
   private configureLegend(): void {
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html

@@ -21,7 +21,7 @@
     <div class="fixed-title-width" translate>date.format</div>
     <mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic">
       <input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
-      <div matSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
+      <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
     </mat-form-field>
   </div>
   <mat-divider></mat-divider>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss

@@ -48,6 +48,7 @@
     }
     .mat-mdc-form-field.tb-date-format-input {
       .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+        .mat-mdc-form-field-flex {
           .mat-mdc-form-field-icon-suffix {
             display: flex;
             align-items: center;
@@ -56,6 +57,7 @@
         }
       }
     }
+  }
   .tb-date-format-settings-panel-buttons {
     height: 60px;
     display: flex;

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};
     }

ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
+<form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="width: 360px">
   <mat-toolbar color="primary">
     <h2 translate>widget.save-widget-as</h2>
     <span fxFlex></span>
@@ -29,7 +29,6 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
-    <fieldset>
     <span translate>widget.save-widget-as-text</span>
     <mat-form-field class="mat-block">
       <mat-label translate>widget.title</mat-label>
@@ -38,7 +37,10 @@
         {{ 'widget.title-required' | translate }}
       </mat-error>
     </mat-form-field>
-    </fieldset>
+    <tb-widgets-bundle-select
+      formControlName="widgetsBundle"
+      bundlesScope="{{bundlesScope}}">
+    </tb-widgets-bundle-select>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"

ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts

@@ -18,12 +18,15 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
 
 export interface SaveWidgetTypeAsDialogResult {
   widgetName: string;
+  widgetBundleId?: string;
 }
 
 @Component({
@@ -34,18 +37,27 @@ export interface SaveWidgetTypeAsDialogResult {
 export class SaveWidgetTypeAsDialogComponent extends
   DialogComponent<SaveWidgetTypeAsDialogComponent, SaveWidgetTypeAsDialogResult> implements OnInit {
 
-  saveWidgetTypeAsFormGroup: UntypedFormGroup;
+  saveWidgetTypeAsFormGroup: FormGroup;
+  bundlesScope: string;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               public dialogRef: MatDialogRef<SaveWidgetTypeAsDialogComponent, SaveWidgetTypeAsDialogResult>,
-              public fb: UntypedFormBuilder) {
+              public fb: FormBuilder) {
     super(store, router, dialogRef);
+
+    const authUser = getCurrentAuthUser(store);
+    if (authUser.authority === Authority.TENANT_ADMIN) {
+      this.bundlesScope = 'tenant';
+    } else {
+      this.bundlesScope = 'system';
+    }
   }
 
   ngOnInit(): void {
     this.saveWidgetTypeAsFormGroup = this.fb.group({
-      title: [null, [Validators.required]]
+      title: [null, [Validators.required]],
+      widgetsBundle: [null]
     });
   }
 
@@ -55,8 +67,10 @@ export class SaveWidgetTypeAsDialogComponent extends
 
   saveAs(): void {
     const widgetName: string = this.saveWidgetTypeAsFormGroup.get('title').value;
+    const widgetBundleId: string = this.saveWidgetTypeAsFormGroup.get('widgetsBundle').value?.id?.id;
     const result: SaveWidgetTypeAsDialogResult = {
-      widgetName
+      widgetName,
+      widgetBundleId
     };
     this.dialogRef.close(result);
   }

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@@ -52,7 +52,7 @@ import {
   SaveWidgetTypeAsDialogComponent,
   SaveWidgetTypeAsDialogResult
 } from '@home/pages/widget/save-widget-type-as-dialog.component';
-import { forkJoin, Subscription } from 'rxjs';
+import { forkJoin, mergeMap, of, Subscription } from 'rxjs';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { widgetEditorCompleter } from '@home/pages/widget/widget-editor.models';
 import { Observable } from 'rxjs/internal/Observable';
@@ -563,7 +563,17 @@ 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 && !id) {
+          return this.widgetService.addWidgetFqnToWidgetBundle(widgetsBundleId, widgetTypeDetails.fqn).pipe(
+            map(() => widgetTypeDetails)
+          );
+        }
+        return of(widgetTypeDetails);
+      })
+    ).subscribe({
       next: (widgetTypeDetails) => {
         this.saveWidgetPending = false;
         if (!this.widgetTypeDetails?.id) {
@@ -595,11 +605,25 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
           config.title = this.widget.widgetName;
           this.widget.defaultConfig = JSON.stringify(config);
           this.isDirty = false;
-          this.widgetService.saveWidgetTypeDetails(this.widget, undefined, undefined).subscribe(
+          this.widgetService.saveWidgetTypeDetails(this.widget, undefined, undefined).pipe(
+            mergeMap((widget) => {
+              if (saveWidgetAsData.widgetBundleId) {
+                return this.widgetService.addWidgetFqnToWidgetBundle(saveWidgetAsData.widgetBundleId, widget.fqn).pipe(
+                  map(() => widget)
+                );
+              }
+              return of(widget);
+            })
+          ).subscribe(
             {
               next: (widgetTypeDetails) => {
                 this.saveWidgetAsPending = false;
-                this.router.navigate(['..', widgetTypeDetails.id.id], {relativeTo: this.route});
+                if (saveWidgetAsData.widgetBundleId) {
+                  this.router.navigate(['resources', 'widgets-library', 'widgets-bundles',
+                    saveWidgetAsData.widgetBundleId, widgetTypeDetails.id.id]);
+                } else {
+                  this.router.navigate(['resources', 'widgets-library', 'widget-types', widgetTypeDetails.id.id]);
+                }
               },
               error: () => {
                 this.saveWidgetAsPending = false;

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html

@@ -27,6 +27,23 @@
         </button>
         <span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
         <span fxFlex></span>
+        <button mat-icon-button [disabled]="isLoading$ | async"
+                *ngIf="!isReadOnly"
+                matTooltip="{{ 'widget.add-new-widget' | translate }}"
+                matTooltipPosition="above"
+                [matMenuTriggerFor]="addWidgetMenu">
+          <mat-icon>add</mat-icon>
+        </button>
+        <mat-menu #addWidgetMenu="matMenu" xPosition="before">
+          <button mat-menu-item (click)="addWidgetType($event)">
+            <mat-icon>insert_drive_file</mat-icon>
+            <span>{{ 'dashboard.create-new-widget' | translate }}</span>
+          </button>
+          <button mat-menu-item (click)="importWidgetType()">
+            <mat-icon>file_upload</mat-icon>
+            <span>{{ 'widget.import' | translate }}</span>
+          </button>
+        </mat-menu>
         <button mat-icon-button
                 matTooltip="{{ 'widgets-bundle.export' | translate }}"
                 matTooltipPosition="above"
@@ -83,18 +100,15 @@
       </div>
     </div>
     <div *ngIf="editMode && !addMode && widgets?.length" class="tb-add-widget-button"
-         matTooltip="{{ 'widget.add' | translate }}"
+         matTooltip="{{ 'widget.add-existing-widget' | translate }}"
          matTooltipPosition="above"
          (click)="addWidgetMode()">
       <tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
     </div>
     <div *ngIf="editMode && !addMode && !widgets?.length" class="tb-add-widget-button-panel">
-      <div class="tb-add-widget-button-with-text"
+      <div class="tb-add-widget-button-with-text" (click)="addWidgetMode()">
-           matTooltip="{{ 'widget.add' | translate }}"
-           matTooltipPosition="above"
-           (click)="addWidgetMode()">
         <tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
-        <div class="tb-add-widget-button-text" translate>widget.add</div>
+        <div class="tb-add-widget-button-text" translate>widget.add-existing-widget</div>
       </div>
     </div>
     <div *ngIf="isReadOnly && !widgets?.length" class="tb-no-data-available">

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts

@@ -24,13 +24,17 @@ import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { Authority } from '@shared/models/authority.enum';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { WidgetTypeInfo } from '@shared/models/widget.models';
+import { widgetType as WidgetDataType, WidgetTypeInfo } from '@shared/models/widget.models';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 import { WidgetService } from '@core/http/widget.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { isDefinedAndNotNull } from '@core/utils';
 import { FormControl, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component';
+
+type WidgetTypeBundle = WithOptional<WidgetTypeInfo, 'widgetType'>;
 
 @Component({
   selector: 'tb-widgets-bundle-widget',
@@ -47,7 +51,7 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
   isDirty = false;
 
   widgetsBundle: WidgetsBundle;
-  widgets: Array<WidgetTypeInfo>;
+  widgets: Array<WidgetTypeBundle>;
   excludeWidgetTypeIds: Array<string>;
 
   addWidgetFormControl = new FormControl(null, [Validators.required]);
@@ -58,7 +62,8 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
               private widgetsService: WidgetService,
               private importExport: ImportExportService,
               private sanitizer: DomSanitizer,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private dialog: MatDialog) {
     super(store);
     this.authUser = getCurrentAuthUser(this.store);
     this.widgetsBundle = this.route.snapshot.data.widgetsBundle;
@@ -88,7 +93,7 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
     return '/assets/widget-preview-empty.svg';
   }
 
-  trackByWidget(index: number, widget: WidgetTypeInfo): any {
+  trackByWidget(index: number, widget: WidgetTypeBundle): any {
     return widget;
   }
 
@@ -109,27 +114,27 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
     this.addMode = false;
   }
 
-  private addWidget(newWidget: WidgetTypeInfo) {
+  private addWidget(newWidget: WidgetTypeBundle) {
     this.widgets.push(newWidget);
     this.isDirty = true;
     this.addMode = false;
   }
 
-  openWidgetEditor($event: Event, widgetType: WidgetTypeInfo) {
+  openWidgetEditor($event: Event, widgetType: WidgetTypeBundle) {
     if ($event) {
       $event.stopPropagation();
     }
     this.router.navigate([widgetType.id.id], {relativeTo: this.route}).then(()=> {});
   }
 
-  exportWidgetType($event: Event, widgetType: WidgetTypeInfo) {
+  exportWidgetType($event: Event, widgetType: WidgetTypeBundle) {
     if ($event) {
       $event.stopPropagation();
     }
     this.importExport.exportWidgetType(widgetType.id.id);
   }
 
-  removeWidgetType($event: Event, widgetType: WidgetTypeInfo) {
+  removeWidgetType($event: Event, widgetType: WidgetTypeBundle) {
     if ($event) {
       $event.stopPropagation();
     }
@@ -176,4 +181,44 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
     });
   }
 
+  addWidgetType($event: Event): void {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.dialog.open<SelectWidgetTypeDialogComponent, any,
+      WidgetDataType>(SelectWidgetTypeDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
+    }).afterClosed().subscribe(
+      (type) => {
+        if (type) {
+          this.router.navigate([type], {relativeTo: this.route}).then(() => {});
+        }
+      }
+    );
+  }
+
+  importWidgetType() {
+    this.importExport.importWidgetType().subscribe(
+      (widgetType) => {
+        if (widgetType) {
+          const isExistWidget = this.widgets.some(widget => widget.id.id === widgetType.id.id);
+          if (isExistWidget) {
+            this.widgets = this.widgets.map(widget => widget.id.id !== widgetType.id.id ? widget : widgetType);
+          }
+          if (this.editMode) {
+            this.widgets.push(widgetType);
+            this.isDirty = true;
+            this.cd.markForCheck();
+          } else if (!isExistWidget) {
+            this.widgetsService.addWidgetFqnToWidgetBundle(this.widgetsBundle.id.id, widgetType.fqn).subscribe(() => {
+              this.widgets.push(widgetType);
+              this.cd.markForCheck();
+            });
+          }
+        }
+      }
+    );
+  }
+
 }

ui-ngx/src/app/shared/components/widgets-bundle-select.component.html

@@ -19,9 +19,9 @@
   <mat-select [required]="required"
               [disabled]="disabled"
               [(ngModel)]="widgetsBundle"
-              matInput
               panelClass="tb-widgets-bundle-select"
               placeholder="{{ 'widget.select-widgets-bundle' | translate }}"
+              (blur)="onTouched()"
               (ngModelChange)="widgetsBundleChanged()">
     <mat-select-trigger>
       <div class="tb-bundle-item">
@@ -29,6 +29,8 @@
         <span translate class="tb-bundle-system" *ngIf="isSystem(widgetsBundle)">widgets-bundle.system</span>
       </div>
     </mat-select-trigger>
+    <mat-option [value]="null" *ngIf="!required">
+    </mat-option>
     <mat-option *ngFor="let widgetsBundle of widgetsBundles$ | async" [value]="widgetsBundle">
       <div class="tb-bundle-item">
         <span>{{widgetsBundle.title}}</span>

ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts

@@ -20,12 +20,12 @@ import { Observable } from 'rxjs';
 import { map, share, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
 import { isDefined } from '@core/utils';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-widgets-bundle-select',
@@ -44,19 +44,15 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
   bundlesScope: 'system' | 'tenant';
 
   @Input()
+  @coerceBoolean()
   selectFirstBundle: boolean;
 
   @Input()
   selectBundleAlias: string;
 
-  private requiredValue: boolean;
-  get required(): boolean {
-    return this.requiredValue;
-  }
   @Input()
-  set required(value: boolean) {
+  @coerceBoolean()
-    this.requiredValue = coerceBooleanProperty(value);
+  required: boolean;
-  }
 
   @Input()
   disabled: boolean;
@@ -70,7 +66,8 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
 
   widgetsBundle: WidgetsBundle | null;
 
-  private propagateChange = (v: any) => { };
+  onTouched = () => {};
+  private propagateChange: (value: any) => void = () => {};
 
   constructor(private store: Store<AppState>,
               private widgetService: WidgetService) {
@@ -81,6 +78,7 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
   }
 
   registerOnTouched(fn: any): void {
+    this.onTouched = fn;
   }
 
   ngOnInit() {

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",
@@ -4759,7 +4760,7 @@
         "no-widgets-text": "No widgets found",
         "management": "Widget management",
         "editor": "Widget Editor",
-        "confirm-to-exit-editor-html": "You have unsaved default widget settings.<br>Are you sure you want to leave this page?",
+        "confirm-to-exit-editor-html": "You have unsaved widget settings.<br>Are you sure you want to leave this page?",
         "widget-type-not-found": "Problem loading widget configuration.<br>Probably associated\n    widget type was removed.",
         "widget-type-load-error": "Widget wasn't loaded due to the following errors:",
         "remove": "Remove widget",
@@ -4827,6 +4828,8 @@
         "details": "Details",
         "widget-details": "Widget details",
         "add": "Add Widget",
+        "add-existing-widget": "Add existing widget",
+        "add-new-widget": "Add new widget",
         "search-widgets": "Search widgets",
         "selected-widgets": "{ count, plural, =1 {1 widget} other {# widgets} } selected",
         "undo": "Undo widget changes",

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",

ui-ngx/src/typings/utils.d.ts

@@ -19,3 +19,9 @@ type NestedKeyOf<ObjectType extends object> =
     ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]> extends infer U extends string ? U : never}`
     : `${Key}`
   }[keyof ObjectType & (string | number)];
+
+type AllKeyOf<T> = T extends never ? never : keyof T;
+
+type Optional<T, K> = { [P in Extract<keyof T, K>]?: T[P] };
+
+type WithOptional<T, K extends AllKeyOf<T>> = T extends never ? never : Omit<T, K> & Optional<T, K>;