From 9c38756eb3c7109b9745a4195d5f28e2b81b56bb Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 13 Oct 2021 12:14:18 +0300
Subject: [PATCH 1/4] Add input field no data to display alternative message

---
 .../home/components/widget/widget-config.component.html     | 6 ++++++
 .../home/components/widget/widget-config.component.ts       | 2 ++
 .../modules/home/components/widget/widget.component.html    | 3 +--
 .../app/modules/home/components/widget/widget.component.ts  | 5 +++++
 .../app/modules/home/models/dashboard-component.models.ts   | 3 +++
 ui-ngx/src/app/shared/models/widget.models.ts               | 1 +
 ui-ngx/src/assets/locale/locale.constant-en_US.json         | 3 ++-
 ui-ngx/src/assets/locale/locale.constant-ru_RU.json         | 3 ++-
 ui-ngx/src/assets/locale/locale.constant-uk_UA.json         | 3 ++-
 9 files changed, 24 insertions(+), 5 deletions(-)

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 555e489afa..761603a3ee 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
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
index 48ed4bf700..7d779a3a6c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
+++ b/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)
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index 0b0498d562..fcaede8fc9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/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"
-        translate>widget.no-data</span>
+        class="tb-absolute-fill">{{ noDataDisplayMessageText }}</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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 920f6721b9..b95d96064c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -361,6 +361,11 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     }, 0);
   }
 
+  get noDataDisplayMessageText(): string {
+    const noDataDisplayMessage = isNotEmptyStr(this.widget.config.noDataDisplayMessage) ? this.widget.config.noDataDisplayMessage : '{i18n:widget.no-data}';
+    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+  }
+
   ngAfterViewInit(): void {
   }
 
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index 2a3d92cf31..efbb3a5c23 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@@ -323,6 +323,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   dropShadow: boolean;
   enableFullscreen: boolean;
 
+  noDataDisplayMessage: string;
+
   hasTimewindow: boolean;
 
   hasAggregation: boolean;
@@ -411,6 +413,7 @@ 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;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 687566afa7..0b0353c7a9 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/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;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 7451e2c1b9..4528890b14 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3077,7 +3077,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",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
index d6fefd0e55..66d99281bb 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
+++ b/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": "Импортировать тип виджета",
diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
index 0031ca2ad0..43691918dd 100644
--- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
+++ b/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": "Імпортувати тип віджета",

From dd29490dd7a9e126db08dda68ffc85708a8b9b14 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 13 Oct 2021 12:47:47 +0300
Subject: [PATCH 2/4] Add no data display message to entities and alarm tables

---
 .../widget/lib/alarms-table-widget.component.html          | 2 +-
 .../components/widget/lib/alarms-table-widget.component.ts | 7 ++++++-
 .../widget/lib/entities-table-widget.component.html        | 2 +-
 .../widget/lib/entities-table-widget.component.ts          | 7 ++++++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index 7c88c79e2b..a86da23f59 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index bcdc396c79..11eeb37cab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -39,7 +39,7 @@ import {
   createLabelFromDatasource,
   deepClone,
   hashCode,
-  isDefined,
+  isDefined, isNotEmptyStr,
   isNumber,
   isObject,
   isUndefined
@@ -265,6 +265,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     }
   }
 
+  get noDataDisplayMessageText() {
+    const noDataDisplayMessage = isNotEmptyStr(this.ctx.widgetConfig.noDataDisplayMessage) ? this.ctx.widgetConfig.noDataDisplayMessage : '{i18n:alarm.no-alarms-prompt}';
+    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+  }
+
   ngAfterViewInit(): void {
     fromEvent(this.searchInputField.nativeElement, 'keyup')
       .pipe(
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
index ddf4972dc7..74ccd53ec2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index f1617eb288..7c0f1794c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@@ -44,7 +44,7 @@ import {
   createLabelFromDatasource,
   deepClone,
   hashCode,
-  isDefined,
+  isDefined, isNotEmptyStr,
   isNumber,
   isObject,
   isUndefined
@@ -211,6 +211,11 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.ctx.updateWidgetParams();
   }
 
+  get noDataDisplayMessageText() {
+    const noDataDisplayMessage = isNotEmptyStr(this.ctx.widgetConfig.noDataDisplayMessage) ? this.ctx.widgetConfig.noDataDisplayMessage : '{i18n:entity.no-entities-prompt}';
+    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+  }
+
   ngAfterViewInit(): void {
     fromEvent(this.searchInputField.nativeElement, 'keyup')
       .pipe(

From a8ec0c28078ca435b1bc7cb96456931df036e191 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Wed, 20 Oct 2021 12:28:08 +0300
Subject: [PATCH 3/4] Change custom translation method for default text

---
 .../components/widget/lib/alarms-table-widget.component.ts  | 6 ++++--
 .../widget/lib/entities-table-widget.component.ts           | 6 ++++--
 .../app/modules/home/components/widget/widget.component.ts  | 6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index 11eeb37cab..d6d754f62b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -266,8 +266,10 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   }
 
   get noDataDisplayMessageText() {
-    const noDataDisplayMessage = isNotEmptyStr(this.ctx.widgetConfig.noDataDisplayMessage) ? this.ctx.widgetConfig.noDataDisplayMessage : '{i18n:alarm.no-alarms-prompt}';
-    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+    const noDataDisplayMessage = this.ctx.widgetConfig.noDataDisplayMessage;
+    return isNotEmptyStr(noDataDisplayMessage)
+      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
+      : this.translate.instant('alarm.no-alarms-prompt');
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index 7c0f1794c5..d068a1010e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@@ -212,8 +212,10 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   }
 
   get noDataDisplayMessageText() {
-    const noDataDisplayMessage = isNotEmptyStr(this.ctx.widgetConfig.noDataDisplayMessage) ? this.ctx.widgetConfig.noDataDisplayMessage : '{i18n:entity.no-entities-prompt}';
-    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+    const noDataDisplayMessage = this.ctx.widgetConfig.noDataDisplayMessage;
+    return isNotEmptyStr(noDataDisplayMessage)
+      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
+      : this.translate.instant('entity.no-entities-prompt');
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index b95d96064c..257c7bd3a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -362,8 +362,10 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   }
 
   get noDataDisplayMessageText(): string {
-    const noDataDisplayMessage = isNotEmptyStr(this.widget.config.noDataDisplayMessage) ? this.widget.config.noDataDisplayMessage : '{i18n:widget.no-data}';
-    return this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+    const noDataDisplayMessage = this.widget.config.noDataDisplayMessage;
+    return isNotEmptyStr(noDataDisplayMessage)
+      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
+      : this.translate.instant('widget.no-data');
   }
 
   ngAfterViewInit(): void {

From d53d4362b7b8ac698ba4f22da9b0016bb6efad7d Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 3 Nov 2021 17:57:00 +0200
Subject: [PATCH 4/4] UI: Refactoring noDataDisplayMessageText

---
 .../widget/lib/alarms-table-widget.component.ts    | 14 ++++++--------
 .../widget/lib/entities-table-widget.component.ts  | 14 ++++++--------
 .../components/widget/lib/table-widget.models.ts   | 10 ++++++++++
 .../lib/timeseries-table-widget.component.html     |  2 +-
 .../lib/timeseries-table-widget.component.ts       |  5 +++++
 .../home/components/widget/widget.component.ts     | 11 ++++++-----
 .../home/models/dashboard-component.models.ts      |  3 ---
 7 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index d6d754f62b..7b32d84e71 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index d068a1010e..bd52f2ab9b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index c18f467703..f90c287111 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/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)';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 099820cfec..8c3b9084b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/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"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
index 11f1015233..de8cec8dc7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/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)';
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 257c7bd3a2..fb424f1645 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/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)
-      ? this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage)
-      : this.translate.instant('widget.no-data');
+    if (isNotEmptyStr(noDataDisplayMessage)) {
+      this.noDataDisplayMessageText = this.utils.customTranslation(noDataDisplayMessage, noDataDisplayMessage);
+    } else {
+      this.noDataDisplayMessageText = this.translate.instant('widget.no-data');
+    }
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index efbb3a5c23..2a3d92cf31 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/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;