Ability to embed dashboard page. Implement Api Usage page.

ui-ngx/src/app/core/services/menu.models.ts

@@ -23,6 +23,7 @@ export interface MenuSection extends HasUUID{
   type: MenuSectionType;
   path: string;
   icon: string;
+  notExact?: boolean;
   isMdiIcon?: boolean;
   height?: string;
   pages?: Array<MenuSection>;

ui-ngx/src/app/core/services/menu.service.ts

@@ -288,6 +288,14 @@ export class MenuService {
         type: 'link',
         path: '/auditLogs',
         icon: 'track_changes'
+      },
+      {
+        id: guid(),
+        name: 'api-usage.api-usage',
+        type: 'link',
+        path: '/usage',
+        icon: 'insert_chart',
+        notExact: true
       }
     );
     return sections;
@@ -374,6 +382,11 @@ export class MenuService {
             name: 'audit-log.audit-logs',
             icon: 'track_changes',
             path: '/auditLogs'
+          },
+          {
+            name: 'api-usage.api-usage',
+            icon: 'insert_chart',
+            path: '/usage'
           }
         ]
       }

ui-ngx/src/app/core/services/utils.service.ts

@@ -26,12 +26,12 @@ import {
   deleteNullProperties,
   guid,
   isDefined,
-  isDefinedAndNotNull,
+  isDefinedAndNotNull, isString,
   isUndefined
 } from '@core/utils';
 import { WindowMessage } from '@shared/models/window-message.model';
 import { TranslateService } from '@ngx-translate/core';
-import { customTranslationsPrefix } from '@app/shared/models/constants';
+import { customTranslationsPrefix, i18nPrefix } from '@app/shared/models/constants';
 import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models';
@@ -42,6 +42,8 @@ import jsonSchemaDefaults from 'json-schema-defaults';
 import materialIconsCodepoints from '!raw-loader!material-design-icons/iconfont/codepoints';
 import { Observable, of, ReplaySubject } from 'rxjs';
 
+const i18nRegExp = new RegExp(`{${i18nPrefix}:[^{}]+}`, 'g');
+
 const predefinedFunctions: { [func: string]: string } = {
   Sin: 'return Math.round(1000*Math.sin(time/5000));',
   Cos: 'return Math.round(1000*Math.cos(time/5000));',
@@ -107,8 +109,8 @@ export class UtilsService {
   materialIcons: Array<string> = [];
 
   constructor(@Inject(WINDOW) private window: Window,
-    private zone: NgZone,
-    private translate: TranslateService) {
+              private zone: NgZone,
+              private translate: TranslateService) {
     let frame: Element = null;
     try {
       frame = window.frameElement;
@@ -221,8 +223,31 @@ export class UtilsService {
   }
 
   public customTranslation(translationValue: string, defaultValue: string): string {
+    if (translationValue && isString(translationValue)) {
+      if (translationValue.includes(`{${i18nPrefix}`)) {
+        const matches = translationValue.match(i18nRegExp);
+        let result = translationValue;
+        for (const match of matches) {
+          const translationId = match.substring(6, match.length - 1);
+          result = result.replace(match, this.doTranslate(translationId, match));
+        }
+        return result;
+      } else {
+        return this.doTranslate(translationValue, defaultValue, customTranslationsPrefix);
+      }
+    } else {
+      return translationValue;
+    }
+  }
+
+  private doTranslate(translationValue: string, defaultValue: string, prefix?: string): string {
     let result: string;
-    const translationId = customTranslationsPrefix + translationValue;
+    let translationId;
+    if (prefix) {
+      translationId = prefix + translationValue;
+    } else {
+      translationId = translationValue;
+    }
     const translation = this.translate.instant(translationId);
     if (translation !== translationId) {
       result = translation + '';

ui-ngx/src/app/modules/home/components/widget/action/custom-action.models.ts

@@ -71,7 +71,7 @@ const customPrettyActionCompletions: TbEditorCompletions = {
     }
   },
   ...customActionCompletions
-}
+};
 
 export const CustomActionEditorCompleter = new TbEditorCompleter(customActionCompletions);
 export const CustomPrettyActionEditorCompleter = new TbEditorCompleter(customPrettyActionCompletions);

ui-ngx/src/app/modules/home/menu/menu-link.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
+<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: !section.notExact}" routerLink="{{section.path}}">
   <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
   <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
   <span>{{section.name | translate}}</span>

ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts

@@ -0,0 +1,41 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Authority } from '@shared/models/authority.enum';
+import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
+
+const routes: Routes = [
+  {
+    path: 'usage',
+    component: ApiUsageComponent,
+    data: {
+      auth: [Authority.TENANT_ADMIN],
+      title: 'api-usage.api-usage',
+      breadcrumb: {
+        label: 'api-usage.api-usage',
+        icon: 'insert_chart'
+      }
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ApiUsageRoutingModule { }

ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.html

@@ -0,0 +1,18 @@
+<!--
+
+    Copyright © 2016-2020 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<tb-dashboard-page [embedded]="true" [dashboard]="apiUsageDashboard"></tb-dashboard-page>

ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  width: 100%;
+  height: 100%;
+}

ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts

@@ -0,0 +1,41 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { PageComponent } from '@shared/components/page.component';
+import apiUsageDashboardJson from '!raw-loader!./api_usage_json.raw';
+import { Dashboard } from '@shared/models/dashboard.models';
+
+@Component({
+  selector: 'tb-api-usage',
+  templateUrl: './api-usage.component.html',
+  styleUrls: ['./api-usage.component.scss']
+})
+export class ApiUsageComponent extends PageComponent implements OnInit {
+
+  apiUsageDashboard: Dashboard;
+
+  constructor(protected store: Store<AppState>) {
+    super(store);
+  }
+
+  ngOnInit() {
+    this.apiUsageDashboard = JSON.parse(apiUsageDashboardJson);
+  }
+
+}

ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts

@@ -0,0 +1,38 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@app/shared/shared.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
+import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
+import { DashboardModule } from '@home/pages/dashboard/dashboard.module';
+import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.module';
+
+@NgModule({
+  declarations:
+    [
+      ApiUsageComponent
+    ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    HomeComponentsModule,
+    DashboardModule,
+    ApiUsageRoutingModule
+  ]
+})
+export class ApiUsageModule { }

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

@@ -196,7 +196,7 @@
                   matTooltipPosition="above">
             <mat-icon>done</mat-icon>
           </button>
-          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen"
+          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen && !embedded"
                   mat-fab color="accent" class="tb-btn-footer"
                   [ngClass]="{'tb-hide': isAddingWidget || (isLoading$ | async)}"
                   [disabled]="isLoading$ | async"

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

@@ -14,7 +14,17 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Inject, NgZone, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -98,12 +108,16 @@ import { Filters } from '@shared/models/query/query.models';
   encapsulation: ViewEncapsulation.None,
   // changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardPageComponent extends PageComponent implements IDashboardController, OnDestroy {
+export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, OnDestroy {
 
   authState: AuthState = getCurrentAuthState(this.store);
 
   authUser: AuthUser = this.authState.authUser;
 
+  @Input()
+  embedded = false;
+
+  @Input()
   dashboard: Dashboard;
   dashboardConfiguration: DashboardConfiguration;
 
@@ -239,19 +253,26 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private cd: ChangeDetectorRef) {
     super(store);
 
+  }
+
+  ngOnInit() {
     this.rxSubscriptions.push(this.route.data.subscribe(
       (data) => {
+        if (this.embedded) {
+          data.dashboard = this.dashboard;
+          data.widgetEditMode = false;
+          data.singlePageMode = false;
+        }
         this.init(data);
         this.runChangeDetection();
       }
     ));
-
     this.rxSubscriptions.push(this.breakpointObserver
       .observe(MediaBreakpoints['gt-sm'])
       .subscribe((state: BreakpointState) => {
-        this.isMobile = !state.matches;
+          this.isMobile = !state.matches;
         }
-      ));
+    ));
   }
 
   private init(data: any) {

ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts

@@ -53,6 +53,9 @@ import { DashboardStateDialogComponent } from './states/dashboard-state-dialog.c
     ManageDashboardStatesDialogComponent,
     DashboardStateDialogComponent
   ],
+  exports: [
+    DashboardPageComponent
+  ],
   imports: [
     CommonModule,
     SharedModule,

ui-ngx/src/app/modules/home/pages/dashboard/states/state-controller.component.ts

@@ -98,7 +98,7 @@ export abstract class StateControllerComponent implements IStateControllerCompon
 
   ngOnInit(): void {
     this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
-      const dashboardId = this.route.snapshot.params.dashboardId;
+      const dashboardId = this.route.snapshot.params.dashboardId || '';
       if (this.dashboardId === dashboardId) {
         const newState = this.decodeStateParam(paramMap.get('state'));
         if (this.currentState !== newState) {

ui-ngx/src/app/modules/home/pages/home-pages.module.ts

@@ -33,6 +33,7 @@ import { TenantProfileModule } from './tenant-profile/tenant-profile.module';
 import { MODULES_MAP } from '@shared/public-api';
 import { modulesMap } from '../../common/modules-map';
 import { DeviceProfileModule } from './device-profile/device-profile.module';
+import { ApiUsageModule } from '@home/pages/api-usage/api-usage.module';
 
 @NgModule({
   exports: [
@@ -50,6 +51,7 @@ import { DeviceProfileModule } from './device-profile/device-profile.module';
     WidgetLibraryModule,
     DashboardModule,
     AuditLogModule,
+    ApiUsageModule,
     UserModule
   ],
   providers: [

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

@@ -221,5 +221,6 @@ export const contentTypesMap = new Map<ContentType, ContentTypeData>(
 );
 
 export const customTranslationsPrefix = 'custom.';
+export const i18nPrefix = 'i18n';
 
 export const MODULES_MAP = new InjectionToken<{[key: string]: any}>('ModulesMap');

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

@@ -432,6 +432,9 @@
         "no-attributes-text": "No attributes found",
         "no-telemetry-text": "No telemetry found"
     },
+    "api-usage": {
+        "api-usage": "Api Usage"
+    },
     "audit-log": {
         "audit": "Audit",
         "audit-logs": "Audit Logs",