UI: Added translation for dashboard api usage; Added support translation on widget title and widget title tooltip

ui-ngx/src/app/core/api/widget-api.models.ts

@@ -198,7 +198,7 @@ export class WidgetSubscriptionContext {
 export type SubscriptionMessageSeverity = 'info' | 'warn' | 'error' | 'success';
 
 export interface SubscriptionMessage {
-  severity: SubscriptionMessageSeverity,
+  severity: SubscriptionMessageSeverity;
   message: string;
 }
 

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

@@ -90,7 +90,7 @@
                     matTooltipPosition="above"
                     class="mat-subheading-2 title">
                 <mat-icon *ngIf="widget.showTitleIcon" [ngStyle]="widget.titleIconStyle">{{widget.titleIcon}}</mat-icon>
-                {{widget.title}}
+                {{widget.customTranslatedTitle}}
               </span>
               <tb-timewindow *ngIf="widget.hasTimewindow"
                              #timewindowComponent

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

@@ -54,6 +54,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { SafeStyle } from '@angular/platform-browser';
 import { distinct } from 'rxjs/operators';
 import { ResizeObserver } from '@juggle/resize-observer';
+import { UtilsService } from '@core/services/utils.service';
 
 @Component({
   selector: 'tb-dashboard',
@@ -168,6 +169,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
   private gridsterResize$: ResizeObserver;
 
   constructor(protected store: Store<AppState>,
+              public utils: UtilsService,
               private timeService: TimeService,
               private dialogService: DialogService,
               private breakpointObserver: BreakpointObserver,

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

@@ -24,6 +24,7 @@ import { guid, isDefined, isEqual, isUndefined } from '@app/core/utils';
 import { IterableDiffer, KeyValueDiffer } from '@angular/core';
 import { IAliasController, IStateController } from '@app/core/api/widget-api.models';
 import { enumerable } from '@shared/decorators/enumerable';
+import { UtilsService } from '@core/services/utils.service';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -56,6 +57,7 @@ export interface DashboardCallbacks {
 }
 
 export interface IDashboardComponent {
+  utils: UtilsService;
   gridsterOpts: GridsterConfig;
   gridster: GridsterComponent;
   dashboardWidgets: DashboardWidgets;
@@ -295,6 +297,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   margin: string;
 
   title: string;
+  customTranslatedTitle: string;
   titleTooltip: string;
   showTitle: boolean;
   titleStyle: {[klass: string]: any};
@@ -358,8 +361,10 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
 
     this.title = isDefined(this.widgetContext.widgetTitle)
       && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title;
+    this.customTranslatedTitle = this.dashboard.utils.customTranslation(this.title, this.title);
     this.titleTooltip = isDefined(this.widgetContext.widgetTitleTooltip)
       && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip;
+    this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip);
     this.showTitle = isDefined(this.widget.config.showTitle) ? this.widget.config.showTitle : true;
     this.titleStyle = this.widget.config.titleStyle ? this.widget.config.titleStyle : {};
 

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

@@ -433,7 +433,57 @@
         "no-telemetry-text": "No telemetry found"
     },
     "api-usage": {
-        "api-usage": "Api Usage"
+        "api-usage": "Api Usage",
+        "data-points": "Data points",
+        "data-points-storage-days": "Data points storage days",
+        "email": "Email",
+        "email-messages": "Email messages",
+        "email-messages-daily-activity": "Email messages daily activity",
+        "email-messages-hourly-activity": "Email messages hourly activity",
+        "email-messages-monthly-activity": "Email messages monthly activity",
+        "exceptions": "Exceptions",
+        "executions": "Executions",
+        "javascript": "JavaScript",
+        "javascript-executions": "JavaScript executions",
+        "javascript-functions": "JavaScript functions",
+        "javascript-functions-daily-activity": "JavaScript functions daily activity",
+        "javascript-functions-hourly-activity": "JavaScript functions hourly activity",
+        "javascript-functions-monthly-activity": "JavaScript functions monthly activity",
+        "latest-error": "Latest Error",
+        "messages": "Messages",
+        "permanent-failures": "${entityName} Permanent Failures",
+        "permanent-timeouts": "${entityName} Permanent Timeouts",
+        "processing-failures": "${entityName} Processing Failures",
+        "processing-failures-and-timeouts": "Processing Failures and Timeouts",
+        "processing-timeouts": "${entityName} Processing Timeouts",
+        "queue-stats": "Queue Stats",
+        "rule-chain": "Rule Chain",
+        "rule-engine": "Rule Engine",
+        "rule-engine-daily-activity": "Rule Engine daily activity",
+        "rule-engine-executions": "Rule Engine executions",
+        "rule-engine-hourly-activity": "Rule Engine hourly activity",
+        "rule-engine-monthly-activity": "Rule Engine monthly activity",
+        "rule-engine-statistics": "Rule Engine Statistics",
+        "rule-node": "Rule Node",
+        "sms": "SMS",
+        "sms-messages": "SMS messages",
+        "sms-messages-daily-activity": "SMS messages daily activity",
+        "sms-messages-hourly-activity": "SMS messages hourly activity",
+        "sms-messages-monthly-activity": "SMS messages monthly activity",
+        "successful": "${entityName} Successful",
+        "telemetry": "Telemetry",
+        "telemetry-persistence": "Telemetry persistence",
+        "telemetry-persistence-daily-activity": "Telemetry persistence daily activity",
+        "telemetry-persistence-hourly-activity": "Telemetry persistence hourly activity",
+        "telemetry-persistence-monthly-activity": "Telemetry persistence monthly activity",
+        "transport": "Transport",
+        "transport-daily-activity": "Transport daily activity",
+        "transport-data-points": "Transport data points",
+        "transport-hourly-activity": "Transport hourly activity",
+        "transport-messages": "Transport messages",
+        "transport-monthly-activity": "Transport monthly activity",
+        "view-details": "View details",
+        "view-statistics": "View statistics"
     },
     "audit-log": {
         "audit": "Audit",