UI: Move API usage dashboard to assets. Update deprecated dashboards resolvers by resolver functions.

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

@@ -14,10 +14,21 @@
 /// limitations under the License.
 ///
 
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
+import { Dashboard } from '@shared/models/dashboard.models';
+import { ResourcesService } from '@core/services/resources.service';
+import { Observable } from 'rxjs';
+
+const apiUsageDashboardJson = '/assets/dashboard/api_usage.json';
+
+export const apiUsageDashboardResolver: ResolveFn<Dashboard> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  resourcesService = inject(ResourcesService)
+): Observable<Dashboard> => resourcesService.loadJsonResource(apiUsageDashboardJson);
 
 const routes: Routes = [
   {
@@ -30,6 +41,9 @@ const routes: Routes = [
         label: 'api-usage.api-usage',
         icon: 'insert_chart'
       }
+    },
+    resolve: {
+      apiUsageDashboard: apiUsageDashboardResolver
     }
   }
 ];

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

@@ -14,28 +14,24 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component } 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';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'tb-api-usage',
   templateUrl: './api-usage.component.html',
   styleUrls: ['./api-usage.component.scss']
 })
-export class ApiUsageComponent extends PageComponent implements OnInit {
+export class ApiUsageComponent extends PageComponent {
 
-  apiUsageDashboard: Dashboard;
+  apiUsageDashboard: Dashboard = this.route.snapshot.data.apiUsageDashboard;
 
-  constructor(protected store: Store<AppState>) {
+  constructor(protected store: Store<AppState>,
+              private route: ActivatedRoute) {
     super(store);
   }
-
-  ngOnInit() {
-    this.apiUsageDashboard = JSON.parse(apiUsageDashboardJson);
-  }
-
 }

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

@@ -14,8 +14,8 @@
 /// limitations under the License.
 ///
 
-import { Injectable, NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 
 import { HomeLinksComponent } from './home-links.component';
 import { Authority } from '@shared/models/authority.enum';
@@ -33,29 +33,44 @@ const sysAdminHomePageJson = '/assets/dashboard/sys_admin_home_page.json';
 const tenantAdminHomePageJson = '/assets/dashboard/tenant_admin_home_page.json';
 const customerUserHomePageJson = '/assets/dashboard/customer_user_home_page.json';
 
-@Injectable()
+const updateDeviceActivityKeyFilterIfNeeded = (store: Store<AppState>,
-export class HomeDashboardResolver implements Resolve<HomeDashboard> {
+                                               dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> =>
-
+  store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe(
-  constructor(private dashboardService: DashboardService,
+    mergeMap((persistToTelemetry) => dashboard$.pipe(
-              private resourcesService: ResourcesService,
+      map((dashboard) => {
-              private store: Store<AppState>) {
+        if (persistToTelemetry) {
+          for (const filterId of Object.keys(dashboard.configuration.filters)) {
+            if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) {
+              dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES;
             }
+          }
+        }
+        return dashboard;
+      })
+    ))
+  );
 
-  resolve(): Observable<HomeDashboard> {
+export const homeDashboardResolver: ResolveFn<HomeDashboard> = (
-    return this.dashboardService.getHomeDashboard().pipe(
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  dashboardService = inject(DashboardService),
+  resourcesService = inject(ResourcesService),
+  store: Store<AppState> = inject(Store<AppState>)
+): Observable<HomeDashboard> =>
+  dashboardService.getHomeDashboard().pipe(
     mergeMap((dashboard) => {
       if (!dashboard) {
         let dashboard$: Observable<HomeDashboard>;
-          const authority = getCurrentAuthUser(this.store).authority;
+        const authority = getCurrentAuthUser(store).authority;
         switch (authority) {
           case Authority.SYS_ADMIN:
-              dashboard$ = this.resourcesService.loadJsonResource(sysAdminHomePageJson);
+            dashboard$ = resourcesService.loadJsonResource(sysAdminHomePageJson);
             break;
           case Authority.TENANT_ADMIN:
-              dashboard$ = this.updateDeviceActivityKeyFilterIfNeeded(this.resourcesService.loadJsonResource(tenantAdminHomePageJson));
+            dashboard$ = updateDeviceActivityKeyFilterIfNeeded(store, resourcesService.loadJsonResource(tenantAdminHomePageJson));
             break;
           case Authority.CUSTOMER_USER:
-              dashboard$ = this.updateDeviceActivityKeyFilterIfNeeded(this.resourcesService.loadJsonResource(customerUserHomePageJson));
+            dashboard$ = updateDeviceActivityKeyFilterIfNeeded(store, resourcesService.loadJsonResource(customerUserHomePageJson));
             break;
         }
         if (dashboard$) {
@@ -70,25 +85,6 @@ export class HomeDashboardResolver implements Resolve<HomeDashboard> {
       return of(dashboard);
     })
   );
-  }
-
-  private updateDeviceActivityKeyFilterIfNeeded(dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> {
-    return this.store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe(
-      mergeMap((persistToTelemetry) => dashboard$.pipe(
-          map((dashboard) => {
-            if (persistToTelemetry) {
-              for (const filterId of Object.keys(dashboard.configuration.filters)) {
-                if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) {
-                  dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES;
-                }
-              }
-            }
-            return dashboard;
-          })
-        ))
-    );
-  }
-}
 
 const routes: Routes = [
   {
@@ -103,16 +99,13 @@ const routes: Routes = [
       }
     },
     resolve: {
-      homeDashboard: HomeDashboardResolver
+      homeDashboard: homeDashboardResolver
     }
   }
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
+  exports: [RouterModule]
-  providers: [
-    HomeDashboardResolver
-  ]
 })
 export class HomeLinksRoutingModule { }