diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts
index e4b9deae89..d7dfdc29b4 100644
--- a/ui-ngx/src/app/core/api/widget-api.models.ts
+++ b/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;
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 653e7f841f..063bd0a63d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/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
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
index 0289831a01..d36cc3eb4e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/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,
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 3709b08b28..94a50540f9 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
@@ -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 : {};
 
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw b/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
index ab61bd331d..b54ce8ea99 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
@@ -95,7 +95,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"JavaScript\";"
+                  "postFuncBody": "return \"{i18n:api-usage.javascript}\";"
                 },
                 {
                   "name": "jsExecutionApiState",
@@ -108,7 +108,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Executions\";"
+                  "postFuncBody": "return \"{i18n:api-usage.executions}\";"
                 }
               ]
             }
@@ -123,8 +123,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"javascript_functions_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"javascript_functions_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "JavaScript functions",
           "dropShadow": true,
@@ -253,7 +253,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Telemetry\";"
+                  "postFuncBody": "return \"{i18n:api-usage.telemetry}\";"
                 },
                 {
                   "name": "dbApiState",
@@ -266,7 +266,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Data points storage days\";"
+                  "postFuncBody": "return \"{i18n:api-usage.data-points-storage-days}\";"
                 }
               ]
             }
@@ -281,8 +281,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"telemetry_persistence_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"telemetry_persistence_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "Telemetry persistence",
           "dropShadow": true,
@@ -411,7 +411,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Rule Engine\";"
+                  "postFuncBody": "return \"{i18n:api-usage.rule-engine}\";"
                 },
                 {
                   "name": "ruleEngineApiState",
@@ -424,7 +424,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Executions\";"
+                  "postFuncBody": "return \"{i18n:api-usage.executions}\";"
                 }
               ]
             }
@@ -439,8 +439,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n",
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"rule_engine_statistics_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View statistics</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n        <button id=\"rule_engine_execution_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>"
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n",
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"rule_engine_statistics_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-statistics}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n        <button id=\"rule_engine_execution_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>"
           },
           "title": "Rule Engine execution",
           "dropShadow": true,
@@ -605,7 +605,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Transport\";"
+                  "postFuncBody": "return \"{i18n:api-usage.transport}\";"
                 }
               ]
             }
@@ -620,8 +620,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n            var pointsCount = \"${pointsCount:0}\";\n            var pointsLimit = \"${pointsLimit:0}\";\n            pointsCount = pointsCount.length > 0 ? parseInt(pointsCount, 10) : 0;\n            pointsLimit = pointsLimit.length > 0 ? parseInt(pointsLimit, 10) : 0;\n            var pointsPercentElement = $('#api-usage-percent2', parentTag);\n            var pointsValueElement = $('#api-usage-value2', parentTag);\n            var pointsBarElement = $('#api-usage-bar2', parentTag);\n            if (Number.isFinite(pointsLimit) && pointsLimit > 0) {\n                var percent = Math.min(100, ((pointsCount / pointsLimit) * 100));\n                pointsBarElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                pointsPercentElement.text(percent + '%');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ' + toShortNumber(pointsLimit));\n            } else {\n                pointsBarElement.width('0%');\n                pointsPercentElement.text('');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>\n                    <span>${title}</span>\n                </div>\n                <div class='state'>${apiState}</div>\n            </div>\n            <div class=\"bars-row\">\n                <div class=\"bar-column\" style=\"margin-right: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">Messages</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                        </div>\n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value\"></div>\n                        </div>\n                    </div>    \n                </div>\n                <div class=\"bar-column\" style=\"margin-left: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">Data points</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar2\"></div>\n                        </div>    \n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent2\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value2\"></div>\n                        </div>\n                    </div>    \n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"transport_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div>    \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n"
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n            var pointsCount = \"${pointsCount:0}\";\n            var pointsLimit = \"${pointsLimit:0}\";\n            pointsCount = pointsCount.length > 0 ? parseInt(pointsCount, 10) : 0;\n            pointsLimit = pointsLimit.length > 0 ? parseInt(pointsLimit, 10) : 0;\n            var pointsPercentElement = $('#api-usage-percent2', parentTag);\n            var pointsValueElement = $('#api-usage-value2', parentTag);\n            var pointsBarElement = $('#api-usage-bar2', parentTag);\n            if (Number.isFinite(pointsLimit) && pointsLimit > 0) {\n                var percent = Math.min(100, ((pointsCount / pointsLimit) * 100));\n                pointsBarElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                pointsPercentElement.text(percent + '%');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ' + toShortNumber(pointsLimit));\n            } else {\n                pointsBarElement.width('0%');\n                pointsPercentElement.text('');\n                pointsValueElement.text(toShortNumber(pointsCount) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>\n                    <span>${title}</span>\n                </div>\n                <div class='state'>${apiState}</div>\n            </div>\n            <div class=\"bars-row\">\n                <div class=\"bar-column\" style=\"margin-right: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.messages}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                        </div>\n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value\"></div>\n                        </div>\n                    </div>    \n                </div>\n                <div class=\"bar-column\" style=\"margin-left: 10px;\">\n                    <div class='bar-container'>\n                        <div class=\"unit\">{i18n:api-usage.data-points}</div>\n                        <div class='bar'>\n                            <div class=\"bar-fill\" id=\"api-usage-bar2\"></div>\n                        </div>    \n                        <div class='bar-labels'>\n                            <div id=\"api-usage-percent2\"></div>\n                            <div style=\"flex: 1;\"></div>\n                            <div id=\"api-usage-value2\"></div>\n                        </div>\n                    </div>    \n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"transport_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div>    \n</div>",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bars-row {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .bar-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 6px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n"
           },
           "title": "Transport",
           "dropShadow": true,
@@ -750,7 +750,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Email\";"
+                  "postFuncBody": "return \"{i18n:api-usage.email}\";"
                 },
                 {
                   "name": "emailApiState",
@@ -763,7 +763,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Messages\";"
+                  "postFuncBody": "return \"{i18n:api-usage.messages}\";"
                 }
               ]
             }
@@ -778,8 +778,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"email_messages_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"email_messages_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "Email messages",
           "dropShadow": true,
@@ -908,7 +908,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"SMS\";"
+                  "postFuncBody": "return \"{i18n:api-usage.sms}\";"
                 },
                 {
                   "name": "smsApiState",
@@ -921,7 +921,7 @@
                   "decimals": null,
                   "funcBody": null,
                   "usePostProcessing": true,
-                  "postFuncBody": "return \"Messages\";"
+                  "postFuncBody": "return \"{i18n:api-usage.messages}\";"
                 }
               ]
             }
@@ -936,8 +936,8 @@
           "color": "#666666",
           "padding": "0",
           "settings": {
-            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / unlimited');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"sms_messages_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">View details</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
-            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
+            "cardHtml": "<div class='card ${apiStateClass}'>\n    <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" onload=\"initializeCard_${cardId:0}(event);\">\n    <script type=\"text/javascript\">\n        function initializeCard_${cardId:0}(e) {\n            \n            function toShortNumber(number) {\n                var rounder = Math.pow(10, 1);\n                var powers = [\n                  {key: 'Q', value: Math.pow(10, 15)},\n                  {key: 'T', value: Math.pow(10, 12)},\n                  {key: 'B', value: Math.pow(10, 9)},\n                  {key: 'M', value: Math.pow(10, 6)},\n                  {key: 'K', value: 1000}\n                ];\n                \n                var key = '';\n                \n                for (var i = 0; i < powers.length; i++) {\n                    var reduced = number / powers[i].value;\n                    reduced = Math.round(reduced * rounder) / rounder;\n                    if (reduced >= 1) {\n                        number = reduced;\n                        key = powers[i].key;\n                        break;\n                    }\n                }\n                return number + key;\n            }\n            \n            var imgTag = e.target;\n            var parentTag = imgTag.parentNode;\n            var count = \"${count:0}\";\n            var limit = \"${limit:0}\";\n            count = count.length > 0 ? parseInt(count, 10) : 0;\n            limit = limit.length > 0 ? parseInt(limit, 10) : 0;\n            var percentElement = $('#api-usage-percent', parentTag);\n            var valueElement = $('#api-usage-value', parentTag);\n            var barElement = $('#api-usage-bar', parentTag);\n            if (Number.isFinite(limit) && limit > 0) {\n                var percent = Math.min(100, ((count / limit) * 100));\n                barElement.width(percent + '%');\n                percent = percent.toFixed(2);\n                percentElement.text(percent + '%');\n                valueElement.text(toShortNumber(count) + ' / ' + toShortNumber(limit));\n            } else {\n                barElement.width('0%');\n                percentElement.text('');\n                valueElement.text(toShortNumber(count) + ' / ∞');\n            }\n        }\n    </script>\n    <div class='content'>\n        <div class='column'>\n            <div class='title-row'>\n                <div class='title'>${title}</div>\n                <div class='state'>${apiState}</div>\n            </div>    \n            <div class='bar-container'>\n                <div class=\"unit\">${unit}</div>\n                <div class='bar'>\n                    <div class=\"bar-fill\" id=\"api-usage-bar\"></div>\n                </div>    \n                <div class='bar-labels'>\n                    <div id=\"api-usage-percent\"></div>\n                    <div style=\"flex: 1;\"></div>\n                    <div id=\"api-usage-value\"></div>\n                </div>\n            </div>    \n        </div>\n    </div>\n    <div role=\"separator\" class=\"mat-divider mat-divider-horizontal\" aria-orientation=\"horizontal\"></div>\n    <div class='action-row'>\n        <button id=\"sms_messages_details\" class=\"mat-focus-indicator mat-button mat-button-base mat-primary\">\n            <span class=\"mat-button-wrapper\">{i18n:api-usage.view-details}</span>\n            <span class=\"mat-ripple mat-button-ripple\"></span>\n            <span class=\"mat-button-focus-overlay\"></span>\n        </button>\n    </div> \n</div>",
+            "cardCss": ".card {\n   width: 100%;\n   height: 100%;\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n}\n\n.card > img {\n    height: 0;\n}\n\n.card .content {\n   flex: 1;    \n   padding: 13px 13px 0;\n   display: flex;\n   box-sizing: border-box;\n}\n\n.card .content .column {\n   display: flex;\n   flex-direction: column;    \n   justify-content: space-around;\n   flex: 1;\n}\n\n.card .content .title-row {\n    display: flex;\n    flex-direction: row;\n    padding-bottom: 10px;\n}\n\n.card .title {\n    flex: 1;\n    font-size: 20px;\n    font-weight: 400;\n    color: #666666;\n}\n\n.card .state {\n    text-transform: uppercase;\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.card.enabled .state {\n    color: #00B260;\n}\n\n.card.warning .state {\n    color: #FFAD6F;\n}\n\n.card.disabled .state {\n    color: #F73243;\n}\n\n.card .bar-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.card .bar {\n    flex: 1;\n    max-height: 30px;\n    margin-top: 3.5px;\n    margin-bottom: 4px;\n    background-color: #F0F0F0;\n    border: 1px solid #DADCDB;\n    border-radius: 2px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n    border-color: #00B260;\n    background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n    border-color: #FFAD6F;\n    background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n    border-color: #F73243;\n    background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n    background-color: #F0F0F0;\n    border-radius: 2px;\n    height: 100%;\n    width: 0%;\n}\n\n.card.enabled .bar-fill {\n    background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n    background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n    background-color: #FF9494;\n}\n\n.card .bar-labels {\n    height: 20px;\n    font-size: 16px;\n    color: #666;\n    display: flex;\n    flex-direction: row;\n}\n\n\n.card .mat-button {\n    text-transform: uppercase;\n}\n\n.card .mat-button-wrapper {\n    pointer-events: none;\n}\n\n.card .action-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    padding: 8px 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n  .card .title {\n      font-size: 12px;\n  }\n  .card .state {\n      font-size: 12px;\n  }\n  .card .unit {\n      font-size: 8px;\n  }\n  .card .bar-labels {\n      font-size: 8px;\n  }\n  .card .mat-button {\n      font-size: 8px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n  .card .title {\n      font-size: 14px;\n  }\n  .card .state {\n      font-size: 14px;\n  }\n  .card .unit {\n      font-size: 10px;\n  }\n  .card .bar-labels {\n      font-size: 10px;\n  }\n  .card .mat-button {\n      font-size: 10px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n  .card .title {\n      font-size: 16px;\n  }\n  .card .state {\n      font-size: 16px;\n  }\n  .card .unit {\n      font-size: 12px;\n  }\n  .card .bar-labels {\n      font-size: 12px;\n  }\n  .card .mat-button {\n      font-size: 12px;\n  }\n  .card .action-row {\n      padding: 0;\n  }\n}    \n\n\n"
           },
           "title": "SMS messages",
           "dropShadow": true,
@@ -993,7 +993,7 @@
                 {
                   "name": "ruleEngineExecutionCountHourly",
                   "type": "timeseries",
-                  "label": "Rule Engine executions",
+                  "label": "{i18n:api-usage.rule-engine-executions}",
                   "color": "#ab00ff",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1078,7 +1078,7 @@
               "showLabels": true
             }
           },
-          "title": "Rule Engine hourly activity",
+          "title": "{i18n:api-usage.rule-engine-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1091,7 +1091,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View statistics",
+                "name": "{i18n:api-usage.view-statistics}",
                 "icon": "show_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "rule_engine_statistics",
@@ -1101,7 +1101,7 @@
                 "id": "f9f08190-9ed9-d802-5b7a-c57ff84b5648"
               },
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "rule_engine_execution",
@@ -1150,7 +1150,7 @@
                 {
                   "name": "transportMsgCountHourly",
                   "type": "timeseries",
-                  "label": "Transport messages",
+                  "label": "{i18n:api-usage.transport-messages}",
                   "color": "#2196f3",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1185,7 +1185,7 @@
                 {
                   "name": "transportDataPointsCountHourly",
                   "type": "timeseries",
-                  "label": "Transport data points",
+                  "label": "{i18n:api-usage.transport-data-points}",
                   "color": "#4caf50",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1271,7 +1271,7 @@
             },
             "tooltipCumulative": false
           },
-          "title": "Transport hourly activity",
+          "title": "{i18n:api-usage.transport-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1284,7 +1284,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "transport",
@@ -1333,7 +1333,7 @@
                 {
                   "name": "jsExecutionCountHourly",
                   "type": "timeseries",
-                  "label": "JavaScript executions",
+                  "label": "{i18n:api-usage.javascript-executions}",
                   "color": "#ff9900",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1418,7 +1418,7 @@
               "showLabels": true
             }
           },
-          "title": "JavaScript functions hourly activity",
+          "title": "{i18n:api-usage.javascript-functions-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1431,7 +1431,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "javascript_functions",
@@ -1480,7 +1480,7 @@
                 {
                   "name": "storageDataPointsCountHourly",
                   "type": "timeseries",
-                  "label": "Data points storage days",
+                  "label": "{i18n:api-usage.data-points-storage-days}",
                   "color": "#1039ee",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1565,7 +1565,7 @@
               "showLabels": true
             }
           },
-          "title": "Telemetry persistence hourly activity",
+          "title": "{i18n:api-usage.telemetry-persistence-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1578,7 +1578,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "telemetry_persistence",
@@ -1627,7 +1627,7 @@
                 {
                   "name": "emailCountHourly",
                   "type": "timeseries",
-                  "label": "Email messages",
+                  "label": "{i18n:api-usage.email-messages}",
                   "color": "#d35a00",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1712,7 +1712,7 @@
               "showLabels": true
             }
           },
-          "title": "Email messages hourly activity",
+          "title": "{i18n:api-usage.email-messages-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1725,7 +1725,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "email_messages",
@@ -1774,7 +1774,7 @@
                 {
                   "name": "smsCountHourly",
                   "type": "timeseries",
-                  "label": "SMS messages",
+                  "label": "{i18n:api-usage.sms-messages}",
                   "color": "#f36021",
                   "settings": {
                     "excludeFromStacking": false,
@@ -1859,7 +1859,7 @@
               "showLabels": true
             }
           },
-          "title": "SMS messages hourly activity",
+          "title": "{i18n:api-usage.sms-messages-hourly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -1872,7 +1872,7 @@
           "actions": {
             "headerButton": [
               {
-                "name": "View details",
+                "name": "{i18n:api-usage.view-details}",
                 "icon": "insert_chart",
                 "type": "openDashboardState",
                 "targetDashboardStateId": "sms_messages",
@@ -1921,7 +1921,7 @@
                 {
                   "name": "ruleEngineExecutionCountHourly",
                   "type": "timeseries",
-                  "label": "Rule Engine executions",
+                  "label": "{i18n:api-usage.rule-engine-executions}",
                   "color": "#ab00ff",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2007,7 +2007,7 @@
               "showLabels": true
             }
           },
-          "title": "Rule Engine daily activity",
+          "title": "{i18n:api-usage.rule-engine-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2056,7 +2056,7 @@
                 {
                   "name": "ruleEngineExecutionCount",
                   "type": "timeseries",
-                  "label": "Rule Engine executions",
+                  "label": "{i18n:api-usage.rule-engine-executions}",
                   "color": "#ab00ff",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2142,7 +2142,7 @@
               "showLabels": true
             }
           },
-          "title": "Rule Engine monthly activity",
+          "title": "{i18n:api-usage.rule-engine-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2191,7 +2191,7 @@
                 {
                   "name": "jsExecutionCountHourly",
                   "type": "timeseries",
-                  "label": "JavaScript executions",
+                  "label": "{i18n:api-usage.javascript-executions}",
                   "color": "#ff9900",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2277,7 +2277,7 @@
               "showLabels": true
             }
           },
-          "title": "JavaScript functions daily activity",
+          "title": "{i18n:api-usage.javascript-functions-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2326,7 +2326,7 @@
                 {
                   "name": "jsExecutionCount",
                   "type": "timeseries",
-                  "label": "JavaScript executions",
+                  "label": "{i18n:api-usage.javascript-executions}",
                   "color": "#ff9900",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2412,7 +2412,7 @@
               "showLabels": true
             }
           },
-          "title": "JavaScript functions monthly activity",
+          "title": "{i18n:api-usage.javascript-functions-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2461,7 +2461,7 @@
                 {
                   "name": "transportMsgCountHourly",
                   "type": "timeseries",
-                  "label": "Transport messages",
+                  "label": "{i18n:api-usage.transport-messages}",
                   "color": "#2196f3",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2496,7 +2496,7 @@
                 {
                   "name": "transportDataPointsCountHourly",
                   "type": "timeseries",
-                  "label": "Transport data points",
+                  "label": "{i18n:api-usage.transport-data-points}",
                   "color": "#4caf50",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2583,7 +2583,7 @@
             },
             "tooltipCumulative": false
           },
-          "title": "Transport daily activity",
+          "title": "{i18n:api-usage.transport-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2632,7 +2632,7 @@
                 {
                   "name": "transportMsgCount",
                   "type": "timeseries",
-                  "label": "Transport messages",
+                  "label": "{i18n:api-usage.transport-messages}",
                   "color": "#2196f3",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2667,7 +2667,7 @@
                 {
                   "name": "transportDataPointsCount",
                   "type": "timeseries",
-                  "label": "Transport data points",
+                  "label": "{i18n:api-usage.transport-data-points}",
                   "color": "#4caf50",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2754,7 +2754,7 @@
             },
             "tooltipCumulative": false
           },
-          "title": "Transport monthly activity",
+          "title": "{i18n:api-usage.transport-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2803,7 +2803,7 @@
                 {
                   "name": "storageDataPointsCountHourly",
                   "type": "timeseries",
-                  "label": "Data points storage days",
+                  "label": "{i18n:api-usage.data-points-storage-days}",
                   "color": "#1039ee",
                   "settings": {
                     "excludeFromStacking": false,
@@ -2889,7 +2889,7 @@
               "showLabels": true
             }
           },
-          "title": "Telemetry persistence daily activity",
+          "title": "{i18n:api-usage.telemetry-persistence-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -2938,7 +2938,7 @@
                 {
                   "name": "storageDataPointsCount",
                   "type": "timeseries",
-                  "label": "Data points storage days",
+                  "label": "{i18n:api-usage.data-points-storage-days}",
                   "color": "#1039ee",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3024,7 +3024,7 @@
               "showLabels": true
             }
           },
-          "title": "Telemetry persistence monthly activity",
+          "title": "{i18n:api-usage.telemetry-persistence-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -3073,7 +3073,7 @@
                 {
                   "name": "emailCountHourly",
                   "type": "timeseries",
-                  "label": "Email messages",
+                  "label": "{i18n:api-usage.email-messages}",
                   "color": "#d35a00",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3159,7 +3159,7 @@
               "showLabels": true
             }
           },
-          "title": "Email messages daily activity",
+          "title": "{i18n:api-usage.email-messages-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -3208,7 +3208,7 @@
                 {
                   "name": "emailCount",
                   "type": "timeseries",
-                  "label": "Email messages",
+                  "label": "{i18n:api-usage.email-messages}",
                   "color": "#d35a00",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3294,7 +3294,7 @@
               "showLabels": true
             }
           },
-          "title": "Email messages monthly activity",
+          "title": "{i18n:api-usage.sms-messages-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -3343,7 +3343,7 @@
                 {
                   "name": "smsCountHourly",
                   "type": "timeseries",
-                  "label": "SMS messages",
+                  "label": "{i18n:api-usage.sms-messages}",
                   "color": "#f36021",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3429,7 +3429,7 @@
               "showLabels": true
             }
           },
-          "title": "SMS messages daily activity",
+          "title": "{i18n:api-usage.sms-messages-daily-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -3478,7 +3478,7 @@
                 {
                   "name": "smsCount",
                   "type": "timeseries",
-                  "label": "SMS messages",
+                  "label": "{i18n:api-usage.sms-messages}",
                   "color": "#f36021",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3564,7 +3564,7 @@
               "showLabels": true
             }
           },
-          "title": "SMS messages monthly activity",
+          "title": "{i18n:api-usage.sms-messages-monthly-activity}",
           "dropShadow": true,
           "enableFullscreen": true,
           "titleStyle": {
@@ -3610,7 +3610,7 @@
                 {
                   "name": "successfulMsgs",
                   "type": "timeseries",
-                  "label": "${entityName} Successful",
+                  "label": "{i18n:api-usage.successful}",
                   "color": "#4caf50",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3640,7 +3640,7 @@
                 {
                   "name": "failedMsgs",
                   "type": "timeseries",
-                  "label": "${entityName} Permanent Failures",
+                  "label": "{i18n:api-usage.permanent-failures}",
                   "color": "#ef5350",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3670,7 +3670,7 @@
                 {
                   "name": "tmpFailed",
                   "type": "timeseries",
-                  "label": "${entityName} Processing Failures",
+                  "label": "{i18n:api-usage.processing-failures}",
                   "color": "#ffc107",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3794,7 +3794,7 @@
                 {
                   "name": "timeoutMsgs",
                   "type": "timeseries",
-                  "label": "${entityName} Permanent Timeouts",
+                  "label": "{i18n:api-usage.permanent-timeouts}",
                   "color": "#4caf50",
                   "settings": {
                     "excludeFromStacking": false,
@@ -3824,7 +3824,7 @@
                 {
                   "name": "tmpTimeout",
                   "type": "timeseries",
-                  "label": "${entityName} Processing Timeouts",
+                  "label": "{i18n:api-usage.processing-timeouts}",
                   "color": "#9c27b0",
                   "settings": {
                     "excludeFromStacking": false,
@@ -4031,7 +4031,7 @@
     },
     "states": {
       "default": {
-        "name": "Api Usage",
+        "name": "{i18n:api-usage.api-usage}",
         "root": true,
         "layouts": {
           "main": {
@@ -4130,7 +4130,7 @@
         }
       },
       "transport": {
-        "name": "Transport",
+        "name": "{i18n:api-usage.transport}",
         "root": false,
         "layouts": {
           "main": {
@@ -4163,7 +4163,7 @@
         }
       },
       "rule_engine_execution": {
-        "name": "Rule Engine execution",
+        "name": "{i18n:api-usage.rule-engine-executions}",
         "root": false,
         "layouts": {
           "main": {
@@ -4196,7 +4196,7 @@
         }
       },
       "javascript_functions": {
-        "name": "JavaScript functions",
+        "name": "{i18n:api-usage.javascript-functions}",
         "root": false,
         "layouts": {
           "main": {
@@ -4229,7 +4229,7 @@
         }
       },
       "telemetry_persistence": {
-        "name": "Telemetry persistence",
+        "name": "{i18n:api-usage.telemetry-persistence}",
         "root": false,
         "layouts": {
           "main": {
@@ -4262,7 +4262,7 @@
         }
       },
       "email_messages": {
-        "name": "Email messages",
+        "name": "{i18n:api-usage.email-messages}",
         "root": false,
         "layouts": {
           "main": {
@@ -4295,7 +4295,7 @@
         }
       },
       "sms_messages": {
-        "name": "SMS messages",
+        "name": "{i18n:api-usage.sms-messages}",
         "root": false,
         "layouts": {
           "main": {
@@ -4328,7 +4328,7 @@
         }
       },
       "rule_engine_statistics": {
-        "name": "Rule Engine Statistics",
+        "name": "{i18n:api-usage.rule-engine-statistics}",
         "root": false,
         "layouts": {
           "main": {
@@ -4417,4 +4417,4 @@
     }
   },
   "name": "Api Usage"
-}
\ No newline at end of file
+}
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 2c8cc0641a..86ac20bf35 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",