From c1823ff1e2b7ecc72faeefb49d300f0a3fcaf430 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 28 Oct 2021 13:41:37 +0300
Subject: [PATCH] UI: Refactoring widget settings

---
 .../widget/legend-config.component.html       |   6 +-
 .../widget/legend-config.component.ts         |  78 ++-
 .../widget/widget-config.component.html       | 458 +++++++++---------
 .../widget/widget-config.component.scss       |   7 +-
 4 files changed, 269 insertions(+), 280 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
index 46faecb9f5..7d824a0186 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
@@ -38,9 +38,6 @@
     </mat-form-field>
   </div>
   <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-    <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
-      {{ 'legend.sort-legend' | translate }}
-    </mat-checkbox>
     <mat-checkbox formControlName="showMin" fxFlex="48">
       {{ 'legend.show-min' | translate }}
     </mat-checkbox>
@@ -53,5 +50,8 @@
     <mat-checkbox formControlName="showTotal" fxFlex="48">
       {{ 'legend.show-total' | translate }}
     </mat-checkbox>
+    <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
+      {{ 'legend.sort-legend' | translate }}
+    </mat-checkbox>
   </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts
index eb38e0adb1..1fa5e166f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts
@@ -14,14 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
-  Component,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewContainerRef
-} from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { isDefined } from '@core/utils';
 import {
@@ -32,6 +25,7 @@ import {
   legendPositionTranslationMap
 } from '@shared/models/widget.models';
 import { Subscription } from 'rxjs';
+
 // @dynamic
 @Component({
   selector: 'tb-legend-config',
@@ -49,7 +43,6 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
 
   @Input() disabled: boolean;
 
-  legendSettings: LegendConfig;
   legendConfigForm: FormGroup;
   legendDirection = LegendDirection;
   legendDirections = Object.keys(LegendDirection);
@@ -58,12 +51,11 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
   legendPositions = Object.keys(LegendPosition);
   legendPositionTranslations = legendPositionTranslationMap;
 
-  legendSettingsChangesSubscription: Subscription;
-
+  private legendSettingsFormChanges$: Subscription;
+  private legendSettingsFormDirectionChanges$: Subscription;
   private propagateChange = (_: any) => {};
 
-  constructor(public fb: FormBuilder,
-              public viewContainerRef: ViewContainerRef) {
+  constructor(private fb: FormBuilder) {
   }
 
   ngOnInit(): void {
@@ -76,9 +68,13 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
       showAvg: [null, []],
       showTotal: [null, []]
     });
-    this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => {
-      this.onDirectionChanged(direction);
-    });
+    this.legendSettingsFormDirectionChanges$ = this.legendConfigForm.get('direction').valueChanges
+      .subscribe((direction: LegendDirection) => {
+        this.onDirectionChanged(direction);
+      });
+    this.legendSettingsFormChanges$ = this.legendConfigForm.valueChanges.subscribe(
+      () => this.legendConfigUpdated()
+    );
   }
 
   private onDirectionChanged(direction: LegendDirection) {
@@ -93,7 +89,14 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
   }
 
   ngOnDestroy(): void {
-    this.removeChangeSubscriptions();
+    if (this.legendSettingsFormDirectionChanges$) {
+      this.legendSettingsFormDirectionChanges$.unsubscribe();
+      this.legendSettingsFormDirectionChanges$ = null;
+    }
+    if (this.legendSettingsFormChanges$) {
+      this.legendSettingsFormChanges$.unsubscribe();
+      this.legendSettingsFormChanges$ = null;
+    }
   }
 
   registerOnChange(fn: any): void {
@@ -112,39 +115,22 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
     }
   }
 
-  private removeChangeSubscriptions() {
-    if (this.legendSettingsChangesSubscription) {
-      this.legendSettingsChangesSubscription.unsubscribe();
-      this.legendSettingsChangesSubscription = null;
-    }
-  }
-
-  private createChangeSubscriptions() {
-    this.legendSettingsChangesSubscription = this.legendConfigForm.valueChanges.subscribe(
-      () => this.legendConfigUpdated()
-    );
-  }
-
-  writeValue(obj: LegendConfig): void {
-    this.legendSettings = obj;
-    this.removeChangeSubscriptions();
-    if (this.legendSettings) {
+  writeValue(legendConfig: LegendConfig): void {
+    if (legendConfig) {
       this.legendConfigForm.patchValue({
-        direction: this.legendSettings.direction,
-        position: this.legendSettings.position,
-        sortDataKeys: isDefined(this.legendSettings.sortDataKeys) ? this.legendSettings.sortDataKeys : false,
-        showMin: isDefined(this.legendSettings.showMin) ? this.legendSettings.showMin : false,
-        showMax: isDefined(this.legendSettings.showMax) ? this.legendSettings.showMax : false,
-        showAvg: isDefined(this.legendSettings.showAvg) ? this.legendSettings.showAvg : false,
-        showTotal: isDefined(this.legendSettings.showTotal) ? this.legendSettings.showTotal : false
-      });
+        direction: legendConfig.direction,
+        position: legendConfig.position,
+        sortDataKeys: isDefined(legendConfig.sortDataKeys) ? legendConfig.sortDataKeys : false,
+        showMin: isDefined(legendConfig.showMin) ? legendConfig.showMin : false,
+        showMax: isDefined(legendConfig.showMax) ? legendConfig.showMax : false,
+        showAvg: isDefined(legendConfig.showAvg) ? legendConfig.showAvg : false,
+        showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false
+      }, {emitEvent: false});
     }
-    this.onDirectionChanged(this.legendSettings.direction);
-    this.createChangeSubscriptions();
+    this.onDirectionChanged(legendConfig.direction);
   }
 
   private legendConfigUpdated() {
-    this.legendSettings = this.legendConfigForm.value;
-    this.propagateChange(this.legendSettings);
+    this.propagateChange(this.legendConfigForm.value);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 0121b07cf6..555e489afa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -82,241 +82,241 @@
           </mat-checkbox>
         </div>
       </div>
-      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
-                                  widgetType !== widgetTypes.alarm &&
-                                  modelValue?.isDataEnabled" [expanded]="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title fxLayout="column">
-            <div class="tb-panel-title" translate>widget-config.datasources</div>
-            <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
-                 class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
-              <span translate fxLayoutAlign="center center"
-                    class="tb-prompt">datasource.add-datasource-prompt</span>
-        </div>
-        <ng-template #datasourcesTemplate>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <span style="width: 60px;"></span>
-            <div fxFlex fxLayout="row" fxLayoutAlign="start center"
-                 style="padding: 0 0 0 10px; margin: 5px;">
-              <span translate style="min-width: 120px;">widget-config.datasource-type</span>
-              <span fxHide fxShow.gt-sm translate fxFlex
-                    style="padding-left: 10px;">widget-config.datasource-parameters</span>
-              <span style="min-width: 40px;"></span>
-            </div>
+      <mat-accordion multi>
+        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
+                                    widgetType !== widgetTypes.alarm &&
+                                    modelValue?.isDataEnabled" [expanded]="true">
+          <mat-expansion-panel-header>
+            <mat-panel-title fxLayout="column">
+              <div class="tb-panel-title" translate>widget-config.datasources</div>
+              <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
+                   class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
+                <span translate fxLayoutAlign="center center"
+                      class="tb-prompt">datasource.add-datasource-prompt</span>
           </div>
-          <div style="overflow: auto; padding-bottom: 15px;">
-            <mat-list dndDropzone dndEffectAllowed="move"
-                      (dndDrop)="onDatasourceDrop($event)"
-                      [dndDisableIf]="disabled" formArrayName="datasources">
-              <mat-list-item dndPlaceholderRef
-                             class="dndPlaceholder">
-              </mat-list-item>
-              <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
-                             [dndDraggable]="datasourceControl.value"
-                             (dndMoved)="dndDatasourceMoved($index)"
-                             [dndDisableIf]="disabled"
-                             dndEffectAllowed="move">
-                <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-                  <div style="width: 60px;">
-                    <button *ngIf="!disabled" mat-icon-button color="primary"
-                            class="handle"
-                            style="min-width: 40px; margin: 0"
-                            dndHandle
-                            matTooltip="{{ 'action.drag' | translate }}"
-                            matTooltipPosition="above">
-                      <mat-icon>drag_handle</mat-icon>
-                    </button>
-                    <span>{{$index + 1}}.</span>
-                  </div>
-                  <div class="mat-elevation-z4" fxFlex
-                       fxLayout="row"
-                       fxLayoutAlign="start center"
-                       style="padding: 0 0 0 10px; margin: 5px;">
-                    <section fxFlex
-                             fxLayout="column"
-                             fxLayoutAlign="center"
-                             fxLayout.gt-sm="row"
-                             fxLayoutAlign.gt-sm="start center">
-                      <mat-form-field class="tb-datasource-type">
-                        <mat-select [formControl]="datasourceControl.get('type')">
-                          <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
-                            {{ datasourceTypesTranslations.get(datasourceType) | translate }}
-                          </mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                      <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
-                        <ng-template [ngSwitchCase]="datasourceType.function">
-                          <mat-form-field floatLabel="always"
-                                          class="tb-datasource-name" style="min-width: 200px;">
-                            <mat-label></mat-label>
-                            <input matInput
-                                   placeholder="{{ 'datasource.label' | translate }}"
-                                   [formControl]="datasourceControl.get('name')">
-                          </mat-form-field>
-                        </ng-template>
-                        <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
-                                                 datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">
-                          <tb-entity-alias-select
-                            [showLabel]="true"
-                            [tbRequired]="true"
-                            [aliasController]="aliasController"
-                            [formControl]="datasourceControl.get('entityAliasId')"
-                            [callbacks]="widgetConfigCallbacks">
-                          </tb-entity-alias-select>
-                          <tb-filter-select
-                            [showLabel]="true"
-                            [aliasController]="aliasController"
-                            [formControl]="datasourceControl.get('filterId')"
-                            [callbacks]="widgetConfigCallbacks">
-                          </tb-filter-select>
-                          <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"
-                                          floatLabel="always"
-                                          class="tb-datasource-name no-border-top" style="min-width: 200px;">
-                            <mat-label></mat-label>
-                            <input matInput
-                                   placeholder="{{ 'datasource.label' | translate }}"
-                                   [formControl]="datasourceControl.get('name')">
-                          </mat-form-field>
-                        </ng-template>
+          <ng-template #datasourcesTemplate>
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+              <span style="width: 60px;"></span>
+              <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+                   style="padding: 0 0 0 10px; margin: 5px;">
+                <span translate style="min-width: 120px;">widget-config.datasource-type</span>
+                <span fxHide fxShow.gt-sm translate fxFlex
+                      style="padding-left: 10px;">widget-config.datasource-parameters</span>
+                <span style="min-width: 40px;"></span>
+              </div>
+            </div>
+            <div style="overflow: auto; padding-bottom: 15px;">
+              <mat-list dndDropzone dndEffectAllowed="move"
+                        (dndDrop)="onDatasourceDrop($event)"
+                        [dndDisableIf]="disabled" formArrayName="datasources">
+                <mat-list-item dndPlaceholderRef
+                               class="dndPlaceholder">
+                </mat-list-item>
+                <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
+                               [dndDraggable]="datasourceControl.value"
+                               (dndMoved)="dndDatasourceMoved($index)"
+                               [dndDisableIf]="disabled"
+                               dndEffectAllowed="move">
+                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                    <div style="width: 60px;">
+                      <button *ngIf="!disabled" mat-icon-button color="primary"
+                              class="handle"
+                              style="min-width: 40px; margin: 0"
+                              dndHandle
+                              matTooltip="{{ 'action.drag' | translate }}"
+                              matTooltipPosition="above">
+                        <mat-icon>drag_handle</mat-icon>
+                      </button>
+                      <span>{{$index + 1}}.</span>
+                    </div>
+                    <div class="mat-elevation-z4" fxFlex
+                         fxLayout="row"
+                         fxLayoutAlign="start center"
+                         style="padding: 0 0 0 10px; margin: 5px;">
+                      <section fxFlex
+                               fxLayout="column"
+                               fxLayoutAlign="center"
+                               fxLayout.gt-sm="row"
+                               fxLayoutAlign.gt-sm="start center">
+                        <mat-form-field class="tb-datasource-type">
+                          <mat-select [formControl]="datasourceControl.get('type')">
+                            <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
+                              {{ datasourceTypesTranslations.get(datasourceType) | translate }}
+                            </mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                        <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
+                          <ng-template [ngSwitchCase]="datasourceType.function">
+                            <mat-form-field floatLabel="always"
+                                            class="tb-datasource-name" style="min-width: 200px;">
+                              <mat-label></mat-label>
+                              <input matInput
+                                     placeholder="{{ 'datasource.label' | translate }}"
+                                     [formControl]="datasourceControl.get('name')">
+                            </mat-form-field>
+                          </ng-template>
+                          <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
+                                                   datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">
+                            <tb-entity-alias-select
+                              [showLabel]="true"
+                              [tbRequired]="true"
+                              [aliasController]="aliasController"
+                              [formControl]="datasourceControl.get('entityAliasId')"
+                              [callbacks]="widgetConfigCallbacks">
+                            </tb-entity-alias-select>
+                            <tb-filter-select
+                              [showLabel]="true"
+                              [aliasController]="aliasController"
+                              [formControl]="datasourceControl.get('filterId')"
+                              [callbacks]="widgetConfigCallbacks">
+                            </tb-filter-select>
+                            <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"
+                                            floatLabel="always"
+                                            class="tb-datasource-name no-border-top" style="min-width: 200px;">
+                              <mat-label></mat-label>
+                              <input matInput
+                                     placeholder="{{ 'datasource.label' | translate }}"
+                                     [formControl]="datasourceControl.get('name')">
+                            </mat-form-field>
+                          </ng-template>
+                        </section>
+                        <tb-data-keys class="tb-data-keys" fxFlex
+                                      [widgetType]="widgetType"
+                                      [datasourceType]="datasourceControl.get('type').value"
+                                      [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
+                                      [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional"
+                                      [aliasController]="aliasController"
+                                      [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
+                                      [callbacks]="widgetConfigCallbacks"
+                                      [entityAliasId]="datasourceControl.get('entityAliasId').value"
+                                      [formControl]="datasourceControl.get('dataKeys')">
+                        </tb-data-keys>
                       </section>
-                      <tb-data-keys class="tb-data-keys" fxFlex
-                                    [widgetType]="widgetType"
-                                    [datasourceType]="datasourceControl.get('type').value"
-                                    [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
-                                    [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional"
-                                    [aliasController]="aliasController"
-                                    [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
-                                    [callbacks]="widgetConfigCallbacks"
-                                    [entityAliasId]="datasourceControl.get('entityAliasId').value"
-                                    [formControl]="datasourceControl.get('dataKeys')">
-                      </tb-data-keys>
-                    </section>
-                    <button [disabled]="isLoading$ | async"
-                            type="button"
-                            mat-icon-button color="primary"
-                            style="min-width: 40px;"
-                            (click)="removeDatasource($index)"
-                            matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
-                            matTooltipPosition="above">
-                      <mat-icon>close</mat-icon>
-                    </button>
+                      <button [disabled]="isLoading$ | async"
+                              type="button"
+                              mat-icon-button color="primary"
+                              style="min-width: 40px;"
+                              (click)="removeDatasource($index)"
+                              matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
+                              matTooltipPosition="above">
+                        <mat-icon>close</mat-icon>
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </mat-list-item>
-            </mat-list>
+                </mat-list-item>
+              </mat-list>
+            </div>
+          </ng-template>
+          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <button [disabled]="isLoading$ | async"
+                    type="button"
+                    mat-raised-button color="primary"
+                    [fxShow]="modelValue?.typeParameters &&
+                              (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
+                    (click)="addDatasource()"
+                    matTooltip="{{ 'widget-config.add-datasource' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>add</mat-icon>
+              <span translate>action.add</span>
+            </button>
           </div>
-        </ng-template>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-          <button [disabled]="isLoading$ | async"
-                  type="button"
-                  mat-raised-button color="primary"
-                  [fxShow]="modelValue?.typeParameters &&
-                            (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
-                  (click)="addDatasource()"
-                  matTooltip="{{ 'widget-config.add-datasource' | translate }}"
-                  matTooltipPosition="above">
-            <mat-icon>add</mat-icon>
-            <span translate>action.add</span>
-          </button>
-        </div>
-      </mat-expansion-panel>
-      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
-                                  modelValue?.isDataEnabled" [expanded]="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            {{ 'widget-config.target-device' | translate }}
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
-          <tb-entity-alias-select fxFlex
-            [tbRequired]="!widgetEditMode"
-            [aliasController]="aliasController"
-            [allowedEntityTypes]="[entityTypes.DEVICE]"
-            [callbacks]="widgetConfigCallbacks"
-            formControlName="targetDeviceAliasId">
-          </tb-entity-alias-select>
-        </div>
-      </mat-expansion-panel>
-      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
-                                  modelValue?.isDataEnabled" [expanded]="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            {{ 'widget-config.alarm-source' | translate }}
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">
-          <section fxFlex
-                   fxLayout="column"
-                   fxLayoutAlign="center"
-                   fxLayout.gt-sm="row"
-                   fxLayoutAlign.gt-sm="start center">
-            <mat-form-field class="tb-datasource-type">
-              <mat-select formControlName="type">
-                <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
-                  {{ datasourceTypesTranslations.get(datasourceType) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
-              <ng-template [ngSwitchCase]="datasourceType.entity">
-                <tb-entity-alias-select
-                  [showLabel]="true"
-                  [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
-                  [aliasController]="aliasController"
-                  formControlName="entityAliasId"
-                  [callbacks]="widgetConfigCallbacks">
-                </tb-entity-alias-select>
-                <tb-filter-select
-                  [showLabel]="true"
-                  [aliasController]="aliasController"
-                  formControlName="filterId"
-                  [callbacks]="widgetConfigCallbacks">
-                </tb-filter-select>
-              </ng-template>
+        </mat-expansion-panel>
+        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
+                                    modelValue?.isDataEnabled" [expanded]="true">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              {{ 'widget-config.target-device' | translate }}
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
+            <tb-entity-alias-select fxFlex
+              [tbRequired]="!widgetEditMode"
+              [aliasController]="aliasController"
+              [allowedEntityTypes]="[entityTypes.DEVICE]"
+              [callbacks]="widgetConfigCallbacks"
+              formControlName="targetDeviceAliasId">
+            </tb-entity-alias-select>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
+                                    modelValue?.isDataEnabled" [expanded]="true">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              {{ 'widget-config.alarm-source' | translate }}
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">
+            <section fxFlex
+                     fxLayout="column"
+                     fxLayoutAlign="center"
+                     fxLayout.gt-sm="row"
+                     fxLayoutAlign.gt-sm="start center">
+              <mat-form-field class="tb-datasource-type">
+                <mat-select formControlName="type">
+                  <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
+                    {{ datasourceTypesTranslations.get(datasourceType) | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
+                <ng-template [ngSwitchCase]="datasourceType.entity">
+                  <tb-entity-alias-select
+                    [showLabel]="true"
+                    [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
+                    [aliasController]="aliasController"
+                    formControlName="entityAliasId"
+                    [callbacks]="widgetConfigCallbacks">
+                  </tb-entity-alias-select>
+                  <tb-filter-select
+                    [showLabel]="true"
+                    [aliasController]="aliasController"
+                    formControlName="filterId"
+                    [callbacks]="widgetConfigCallbacks">
+                  </tb-filter-select>
+                </ng-template>
+              </section>
+              <tb-data-keys class="tb-data-keys" fxFlex
+                            [widgetType]="widgetType"
+                            [datasourceType]="alarmSourceSettings.get('type').value"
+                            [aliasController]="aliasController"
+                            [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
+                            [callbacks]="widgetConfigCallbacks"
+                            [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
+                            formControlName="dataKeys">
+              </tb-data-keys>
             </section>
-            <tb-data-keys class="tb-data-keys" fxFlex
-                          [widgetType]="widgetType"
-                          [datasourceType]="alarmSourceSettings.get('type').value"
-                          [aliasController]="aliasController"
-                          [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
-                          [callbacks]="widgetConfigCallbacks"
-                          [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
-                          formControlName="dataKeys">
-            </tb-data-keys>
-          </section>
-        </div>
-      </mat-expansion-panel>
-    </div>
-    <div [formGroup]="widgetSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>
-          <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
-               fxLayoutGap="8px">
-            <mat-form-field fxFlex>
-              <mat-label translate>widget-config.units</mat-label>
-              <input matInput formControlName="units">
-            </mat-form-field>
-            <mat-form-field fxFlex>
-              <mat-label translate>widget-config.decimals</mat-label>
-              <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
-            </mat-form-field>
           </div>
-        </ng-template>
-      </mat-expansion-panel>
+        </mat-expansion-panel>
+        <mat-expansion-panel [formGroup]="widgetSettings">
+          <mat-expansion-panel-header>
+            <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
+                 fxLayoutGap="8px">
+              <mat-form-field fxFlex>
+                <mat-label translate>widget-config.units</mat-label>
+                <input matInput formControlName="units">
+              </mat-form-field>
+              <mat-form-field fxFlex>
+                <mat-label translate>widget-config.decimals</mat-label>
+                <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
+              </mat-form-field>
+            </div>
+          </ng-template>
+        </mat-expansion-panel>
+      </mat-accordion>
     </div>
   </mat-tab>
   <mat-tab label="{{ 'widget-config.settings' | translate }}">
     <div class="mat-content mat-padding" fxLayout="column">
       <div [formGroup]="widgetSettings" fxLayout="column">
-        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+        <fieldset class="fields-group" fxLayout="column">
           <legend class="group-title" translate>widget-config.title</legend>
-          <mat-slide-toggle formControlName="showTitle">
+          <mat-slide-toggle formControlName="showTitle" style="margin: 8px 0">
             {{ 'widget-config.display-title' | translate }}
           </mat-slide-toggle>
           <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
@@ -330,7 +330,7 @@
               <input matInput formControlName="titleTooltip">
             </mat-form-field>
           </div>
-          <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+          <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px" style="margin: 0">
             <legend class="group-title" translate>widget-config.title-icon</legend>
             <mat-slide-toggle formControlName="showTitleIcon">
               {{ 'widget-config.display-icon' | translate }}
@@ -368,10 +368,10 @@
               </ng-template>
           </mat-expansion-panel>
         </fieldset>
-        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+        <fieldset class="fields-group" fxLayout="column">
           <legend class="group-title" translate>widget-config.widget-style</legend>
           <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center"
-               fxFlex="100%" fxLayoutGap="8px">
+               fxFlex="100%" fxLayoutGap="8px" class="tb-widget-style">
             <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
                  fxLayoutGap="8px" fxFlex.gt-md>
               <tb-color-input fxFlex
@@ -399,7 +399,7 @@
               </mat-form-field>
             </div>
           </div>
-          <mat-slide-toggle formControlName="dropShadow">
+          <mat-slide-toggle formControlName="dropShadow" style="margin-bottom: 8px">
             {{ 'widget-config.drop-shadow' | translate }}
           </mat-slide-toggle>
           <mat-slide-toggle formControlName="enableFullscreen">
@@ -421,7 +421,7 @@
             </ng-template>
           </mat-expansion-panel>
         </fieldset>
-        <fieldset class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
+        <fieldset class="fields-group fields-group-slider" fxLayout="column">
           <legend class="group-title" translate>widget-config.legend</legend>
           <mat-expansion-panel class="tb-settings">
             <mat-expansion-panel-header fxLayout="row wrap">
@@ -439,7 +439,7 @@
             </ng-template>
           </mat-expansion-panel>
         </fieldset>
-        <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
+        <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column">
           <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
           <mat-expansion-panel class="tb-settings">
             <mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
index 4c4fa317ce..8d8cd742c6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
@@ -85,6 +85,9 @@
         padding: 0 16px 8px;
       }
     }
+    .tb-widget-style {
+      margin-top: 16px;
+    }
   }
 }
 
@@ -128,10 +131,10 @@
           align-items: center;
         }
         .mat-expansion-panel-body{
-          padding: 0 0 16px;
+          padding: 0;
         }
         .tb-json-object-panel {
-          margin: 0;
+          margin: 0 0 8px;
         }
         .mat-checkbox-layout {
           margin: 5px 0;