updateDatasourceError

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -83,16 +83,24 @@
         </div>
       </div>
       <mat-accordion multi>
-        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
+        <mat-expansion-panel (opened)="extensionPanelIsOpen(true)" (closed)="extensionPanelIsOpen(false)" class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
                                     widgetType !== widgetTypes.alarm &&
                                     modelValue?.isDataEnabled" [expanded]="true">
           <mat-expansion-panel-header>
-            <mat-panel-title fxLayout="column">
+            <mat-panel-title fxLayout="row">
-              <div class="tb-panel-title" translate>widget-config.datasources</div>
+              <div fxLayout="column">
-              <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
+                <div class="tb-panel-title" translate>widget-config.datasources</div>
-                   class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
+                <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
-              <tb-error [error]="dataError"></tb-error>
+                     class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
+              </div>
+              <mat-icon *ngIf = '(datasourceError.length > 0 || !datasourcesFormArray().valid) && !openExtensionPanel'
+                        style = "color: red; font-size: 18px; margin-left: 5px;">
+                report_gmailerrorred
+              </mat-icon>
             </mat-panel-title>
+            <mat-panel-description *ngIf = "timeseriesKeyError">
+              <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
+            </mat-panel-description>
           </mat-expansion-panel-header>
           <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
                 <span translate fxLayoutAlign="center center"

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

@@ -169,8 +169,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
   public layoutSettings: FormGroup;
   public advancedSettings: FormGroup;
   public actionsSettings: FormGroup;
-
+  public openExtensionPanel = true;
-  public dataError = '';
+  public timeseriesKeyError = false;
 
   public datasourceError: string[] = [];
 
@@ -230,6 +230,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
         this.widgetSettings.get('titleTooltip').disable({emitEvent: false});
         this.widgetSettings.get('showTitleIcon').patchValue(false);
         this.widgetSettings.get('showTitleIcon').disable({emitEvent: false});
+        this.widgetSettings.get('showTitleIcon').disable({emitEvent: false});
       }
     });
 
@@ -920,7 +921,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
   }
 
   public validate(c: FormControl) {
-    this.dataError = '';
+    this.timeseriesKeyError = false;
     this.datasourceError = [];
     if (!this.dataSettings.valid) {
       return {
@@ -975,7 +976,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
         if (this.widgetType === widgetType.timeseries && this.modelValue?.typeParameters?.hasAdditionalLatestDataKeys) {
           let valid = config.datasources.filter(datasource => datasource?.dataKeys?.length).length > 0;
           if (!valid) {
-            this.dataError = 'At least one timeseries data key should be specified';
+            this.timeseriesKeyError = true;
             return {
               timeseriesDataKeys: {
                 valid: false
@@ -1003,4 +1004,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
     return null;
   }
 
+  public extensionPanelIsOpen(value) {
+    this.openExtensionPanel = value;
+  }
 }

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

@@ -3609,6 +3609,7 @@
         "display-legend": "Display legend",
         "datasources": "Datasources",
         "maximum-datasources": "Maximum { count, plural, 1 {1 datasource is allowed.} other {# datasources are allowed} }",
+        "timeseries-key-error": "At least one timeseries data key should be specified",
         "datasource-type": "Type",
         "datasource-parameters": "Parameters",
         "remove-datasource": "Remove datasource",