UI: Refactoring noDataDisplayMessageText

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

@@ -39,7 +39,7 @@ import {
   createLabelFromDatasource,
   deepClone,
   hashCode,
-  isDefined, isNotEmptyStr,
+  isDefined,
   isNumber,
   isObject,
   isUndefined
@@ -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> = [];
@@ -265,13 +267,6 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     }
   }
 
-  get noDataDisplayMessageText() {
-    const noDataDisplayMessage = this.ctx.widgetConfig.noDataDisplayMessage;
-    return isNotEmptyStr(noDataDisplayMessage)
-      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
-      : this.translate.instant('alarm.no-alarms-prompt');
-  }
-
   ngAfterViewInit(): void {
     fromEvent(this.searchInputField.nativeElement, 'keyup')
       .pipe(
@@ -364,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.ts

@@ -44,7 +44,7 @@ import {
   createLabelFromDatasource,
   deepClone,
   hashCode,
-  isDefined, isNotEmptyStr,
+  isDefined,
   isNumber,
   isObject,
   isUndefined
@@ -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> = [];
@@ -211,13 +213,6 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.ctx.updateWidgetParams();
   }
 
-  get noDataDisplayMessageText() {
-    const noDataDisplayMessage = this.ctx.widgetConfig.noDataDisplayMessage;
-    return isNotEmptyStr(noDataDisplayMessage)
-      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
-      : this.translate.instant('entity.no-entities-prompt');
-  }
-
   ngAfterViewInit(): void {
     fromEvent(this.searchInputField.nativeElement, 'keyup')
       .pipe(
@@ -282,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.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;
@@ -359,13 +360,13 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     setTimeout(() => {
       this.dashboardWidget.updateWidgetParams();
     }, 0);
-  }
 
-  get noDataDisplayMessageText(): string {
     const noDataDisplayMessage = this.widget.config.noDataDisplayMessage;
-    return isNotEmptyStr(noDataDisplayMessage)
+    if (isNotEmptyStr(noDataDisplayMessage)) {
-      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
+      this.noDataDisplayMessageText = this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
-      : this.translate.instant('widget.no-data');
+    } else {
+      this.noDataDisplayMessageText = this.translate.instant('widget.no-data');
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -323,8 +323,6 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   dropShadow: boolean;
   enableFullscreen: boolean;
 
-  noDataDisplayMessage: string;
-
   hasTimewindow: boolean;
 
   hasAggregation: boolean;
@@ -413,7 +411,6 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
 
     this.titleIcon = isDefined(this.widget.config.titleIcon) ? this.widget.config.titleIcon : '';
     this.showTitleIcon = isDefined(this.widget.config.showTitleIcon) ? this.widget.config.showTitleIcon : false;
-    this.noDataDisplayMessage = isDefined(this.widget.config.noDataDisplayMessage) ? this.widget.config.noDataDisplayMessage : '';
     this.titleIconStyle = {};
     if (this.widget.config.iconColor) {
       this.titleIconStyle.color = this.widget.config.iconColor;