Merge pull request #5486 from ArtemDzhereleiko/imp/widget-settings/no-data-message

[3.2.2] UI: New widget settings with input field no data message

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -136,7 +136,7 @@
       </table>
       <span [fxShow]="(alarmsDatasource.isEmpty() | async) && !alarmsDatasource.dataLoading"
             fxLayoutAlign="center center"
-            class="no-data-found" translate>alarm.no-alarms-prompt</span>
+            class="no-data-found">{{ noDataDisplayMessageText }}</span>
       <span [fxShow]="alarmsDatasource.dataLoading"
             fxLayoutAlign="center center"
             class="no-data-found">{{ 'common.loading' | translate }}</span>

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

@@ -74,6 +74,7 @@ import {
   getColumnWidth,
   getRowStyleInfo,
   getTableCellButtonActions,
+  noDataMessage,
   prepareTableCellButtonActions,
   RowStyleInfo,
   TableCellButtonActionDescriptor,
@@ -166,6 +167,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public alarmsDatasource: AlarmsDatasource;
+  public noDataDisplayMessageText: string;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -357,6 +359,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.pageLink.severityList = isDefined(this.widgetConfig.alarmSeverityList) ? this.widgetConfig.alarmSeverityList : [];
     this.pageLink.typeList = isDefined(this.widgetConfig.alarmTypeList) ? this.widgetConfig.alarmTypeList : [];
 
+    this.noDataDisplayMessageText =
+      noDataMessage(this.widgetConfig.noDataDisplayMessage, 'alarm.no-alarms-prompt', this.utils, this.translate);
+
     const cssString = constructTableCssString(this.widgetConfig);
     const cssParser = new cssjs();
     cssParser.testMode = false;

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -95,7 +95,7 @@
       </table>
       <span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading"
             fxLayoutAlign="center center"
-            class="no-data-found" translate>entity.no-entities-prompt</span>
+            class="no-data-found">{{ noDataDisplayMessageText }}</span>
       <span [fxShow]="entityDatasource.dataLoading"
             fxLayoutAlign="center center"
             class="no-data-found">{{ 'common.loading' | translate }}</span>

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

@@ -80,6 +80,7 @@ import {
   getEntityValue,
   getRowStyleInfo,
   getTableCellButtonActions,
+  noDataMessage,
   prepareTableCellButtonActions,
   RowStyleInfo,
   TableCellButtonActionDescriptor,
@@ -142,6 +143,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public entityDatasource: EntityDatasource;
+  public noDataDisplayMessageText: string;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -275,6 +277,9 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
     this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024;
 
+    this.noDataDisplayMessageText =
+      noDataMessage(this.widgetConfig.noDataDisplayMessage, 'entity.no-entities-prompt', this.utils, this.translate);
+
     const cssString = constructTableCssString(this.widgetConfig);
     const cssParser = new cssjs();
     cssParser.testMode = false;

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -23,6 +23,8 @@ import { Direction, EntityDataSortOrder, EntityKey } from '@shared/models/query/
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { FormattedData } from '@home/components/widget/lib/maps/map-models';
+import { UtilsService } from '@core/services/utils.service';
+import { TranslateService } from '@ngx-translate/core';
 
 const tinycolor = tinycolor_;
 
@@ -352,6 +354,14 @@ function filterTableCellButtonAction(widgetContext: WidgetContext,
   }
 }
 
+export function noDataMessage(noDataDisplayMessage: string, defaultMessage: string,
+                              utils: UtilsService, translate: TranslateService): string {
+  if (isNotEmptyStr(noDataDisplayMessage)) {
+    return utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+  }
+  return translate.instant(defaultMessage);
+}
+
 export function constructTableCssString(widgetConfig: WidgetConfig): string {
   const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
   const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)';

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -104,7 +104,7 @@
             </table>
             <span [fxShow]="source.timeseriesDatasource.isEmpty() | async"
                   fxLayoutAlign="center center"
-                  class="no-data-found" translate>widget.no-data-found</span>
+                  class="no-data-found">{{ noDataDisplayMessageText }}</span>
           </div>
           <mat-divider *ngIf="displayPagination"></mat-divider>
           <mat-paginator *ngIf="displayPagination"

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

@@ -59,6 +59,7 @@ import {
   getCellStyleInfo,
   getRowStyleInfo,
   getTableCellButtonActions,
+  noDataMessage,
   prepareTableCellButtonActions,
   RowStyleInfo,
   TableCellButtonActionDescriptor,
@@ -126,6 +127,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public textSearch: string = null;
   public sources: TimeseriesTableSource[];
   public sourceIndex: number;
+  public noDataDisplayMessageText: string;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -251,6 +253,9 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     }
     this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
 
+    this.noDataDisplayMessageText =
+      noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widget.no-data-found', this.utils, this.translate);
+
     let cssString = constructTableCssString(this.widgetConfig);
 
     const origBackgroundColor = this.widgetConfig.backgroundColor || 'rgb(255, 255, 255)';

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

@@ -306,6 +306,12 @@
                 <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
               </mat-form-field>
             </div>
+            <div fxLayout="row">
+              <mat-form-field fxFlex>
+                <mat-label translate>widget-config.no-data-display-message</mat-label>
+                <input matInput formControlName="noDataDisplayMessage">
+              </mat-form-field>
+            </div>
           </ng-template>
         </mat-expansion-panel>
       </mat-accordion>

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

@@ -209,6 +209,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
       titleStyle: [null, []],
       units: [null, []],
       decimals: [null, [Validators.min(0), Validators.max(15), Validators.pattern(/^\d*$/)]],
+      noDataDisplayMessage: [null, []],
       showLegend: [null, []],
       legendConfig: [null, []]
     });
@@ -411,6 +412,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
             },
             units: config.units,
             decimals: config.decimals,
+            noDataDisplayMessage: isDefined(config.noDataDisplayMessage) ? config.noDataDisplayMessage : '',
             showLegend: isDefined(config.showLegend) ? config.showLegend :
               this.widgetType === widgetType.timeseries,
             legendConfig: config.legendConfig || defaultLegendConfig(this.widgetType)

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

@@ -39,8 +39,7 @@
 <div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
   <span fxLayoutAlign="center center"
         style="display: flex;"
-        class="tb-absolute-fill"
+        class="tb-absolute-fill">{{ noDataDisplayMessageText }}</span>
-        translate>widget.no-data</span>
 </div>
 <div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">
   <mat-spinner color="accent" md-mode="indeterminate" diameter="40"></mat-spinner>

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

@@ -141,6 +141,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   widgetErrorData: ExceptionData;
   loadingData: boolean;
   displayNoData = false;
+  noDataDisplayMessageText: string;
 
   displayLegend: boolean;
   legendConfig: LegendConfig;
@@ -360,6 +361,13 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     setTimeout(() => {
       this.dashboardWidget.updateWidgetParams();
     }, 0);
+
+    const noDataDisplayMessage = this.widget.config.noDataDisplayMessage;
+    if (isNotEmptyStr(noDataDisplayMessage)) {
+      this.noDataDisplayMessageText = this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+    } else {
+      this.noDataDisplayMessageText = this.translate.instant('widget.no-data');
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/shared/models/widget.models.ts

@@ -509,6 +509,7 @@ export interface WidgetConfig {
   titleStyle?: {[klass: string]: any};
   units?: string;
   decimals?: number;
+  noDataDisplayMessage?: string;
   actions?: {[actionSourceId: string]: Array<WidgetActionDescriptor>};
   settings?: any;
   alarmSource?: Datasource;

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

@@ -3081,7 +3081,8 @@
         "icon-color": "Icon color",
         "icon-size": "Icon size",
         "advanced-settings": "Advanced settings",
-        "data-settings": "Data settings"
+        "data-settings": "Data settings",
+        "no-data-display-message": "\"No data to display\" alternative message"
     },
     "widget-type": {
         "import": "Import widget type",

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

@@ -1679,7 +1679,8 @@
         "icon-color": "Цвет иконки",
         "icon-size": "Размер иконки",
         "advanced-settings": "Расширенные настройки",
-        "data-settings": "Настройки данных"
+        "data-settings": "Настройки данных",
+        "no-data-display-message": "\"Нет данных для отображения\" альтернативный текст"
     },
     "widget-type": {
         "import": "Импортировать тип виджета",

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

@@ -2251,7 +2251,8 @@
         "icon-color": "Колір іконки",
         "icon-size": "Розмір іконки",
         "advanced-settings": "Розширені налаштування",
-        "data-settings": "Налаштування даних"
+        "data-settings": "Налаштування даних",
+        "no-data-display-message": "\"Немає данних для відображення\" альтернативний текст"
     },
     "widget-type": {
         "import": "Імпортувати тип віджета",