UI implementation of Gateway Dashboard sync and migration to new tab

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

@@ -88,6 +88,7 @@ export enum MenuId {
   devices = 'devices',
   assets = 'assets',
   entity_views = 'entity_views',
+  gateways = 'gateways',
   profiles = 'profiles',
   device_profiles = 'device_profiles',
   asset_profiles = 'asset_profiles',
@@ -508,6 +509,16 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       icon: 'view_quilt'
     }
   ],
+  [
+    MenuId.gateways,
+    {
+      id: MenuId.gateways,
+      name: 'gateway.gateways',
+      type: 'link',
+      path: '/entities/gateways',
+      icon: 'device_hub'
+    }
+  ],
   [
     MenuId.profiles,
     {
@@ -725,7 +736,8 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
         pages: [
           {id: MenuId.devices},
           {id: MenuId.assets},
-          {id: MenuId.entity_views}
+          {id: MenuId.entity_views},
+          {id: MenuId.gateways}
         ]
       },
       {

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

@@ -0,0 +1,55 @@
+///
+/// Copyright © 2016-2024 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 { inject, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
+import { Authority } from '@shared/models/authority.enum';
+import { Dashboard } from '@shared/models/dashboard.models';
+import { ResourcesService } from '@core/services/resources.service';
+import { Observable } from 'rxjs';
+import { MenuId } from '@core/services/menu.models';
+import { GatewaysComponent } from '@home/pages/gateways/gateways.component';
+
+const gatewaysDashboardJson = '/api/resource/dashboard/system/gateways_dashboard.json';
+
+export const gatewaysDashboardResolver: ResolveFn<Dashboard> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  resourcesService = inject(ResourcesService)
+): Observable<Dashboard> => resourcesService.loadJsonResource(gatewaysDashboardJson);
+
+const routes: Routes = [
+  {
+    path: 'entities/gateways',
+    component: GatewaysComponent,
+    data: {
+      auth: [Authority.TENANT_ADMIN],
+      title: 'gateway.gateways',
+      breadcrumb: {
+        menuId: MenuId.gateways
+      }
+    },
+    resolve: {
+      gatewaysDashboard: gatewaysDashboardResolver
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GatewaysRoutingModule { }

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

@@ -14,5 +14,6 @@
  * limitations under the License.
  */
 :host {
+  width: 100%;
   height: 100%;
 }

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

@@ -0,0 +1,37 @@
+///
+/// Copyright © 2016-2024 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 } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { PageComponent } from '@shared/components/page.component';
+import { Dashboard } from '@shared/models/dashboard.models';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'tb-gateways',
+  templateUrl: './gateways.component.html',
+  styleUrls: ['./gateways.component.scss']
+})
+export class GatewaysComponent extends PageComponent {
+
+  gatewaysDashboard: Dashboard = this.route.snapshot.data.gatewaysDashboard;
+
+  constructor(protected store: Store<AppState>,
+              private route: ActivatedRoute) {
+    super(store);
+  }
+}

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

@@ -14,15 +14,24 @@
 /// limitations under the License.
 ///
 
-import { Pipe, PipeTransform } from '@angular/core';
+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 { GatewaysComponent } from '@home/pages/gateways/gateways.component';
+import { GatewaysRoutingModule } from '@home/pages/gateways/gateways-routing.module';
 
-@Pipe({
+
-  name: 'getRpcTemplateArrayView',
+@NgModule({
-  standalone: true,
+  declarations:
+    [
+      GatewaysComponent
+    ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    HomeComponentsModule,
+    GatewaysRoutingModule
+  ]
 })
-export class RpcTemplateArrayViewPipe implements PipeTransform {
+export class GatewaysModule { }
-
-  transform(values: {value: string | boolean | number}[]): string {
-    return values.map(({value}) => value.toString()).join(', ');
-  }
-}

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

@@ -44,6 +44,7 @@ import { FeaturesModule } from '@home/pages/features/features.module';
 import { NotificationModule } from '@home/pages/notification/notification.module';
 import { AccountModule } from '@home/pages/account/account.module';
 import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module';
+import { GatewaysModule } from '@home/pages/gateways/gateways.module';
 
 @NgModule({
   exports: [
@@ -70,6 +71,7 @@ import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module'
     DashboardModule,
     AuditLogModule,
     ApiUsageModule,
+    GatewaysModule,
     OtaUpdateModule,
     UserModule,
     VcModule,

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

@@ -2837,6 +2837,7 @@
         "function": "Function"
     },
     "gateway": {
+        "gateways": "Gateways",
         "address": "Address",
         "address-required": "Address required",
         "add-entry": "Add configuration",