UI: continue side-menu structure work — new menu sections, refreshed translations, widget-library route data

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

@@ -18,7 +18,7 @@ import { AuthState } from '@core/auth/auth.models';
 import { Authority } from '@shared/models/authority.enum';
 import { deepClone } from '@core/utils';
 
-export declare type MenuSectionType = 'link' | 'toggle';
+export declare type MenuSectionType = 'link' | 'toggle' | 'divider';
 
 export interface MenuSection {
   id: MenuId | string;
@@ -88,6 +88,7 @@ export enum MenuId {
   domains = 'domains',
   clients = 'clients',
   audit_log = 'audit_log',
+  monitor = 'monitor',
   alarms_center = 'alarms_center',
   alarms = 'alarms',
   alarm_rules = 'alarm_rules',
@@ -113,7 +114,8 @@ export enum MenuId {
   api_usage = 'api_usage',
   trendz_settings = 'trendz_settings',
   ai_models = 'ai_models',
-  iot_hub = 'iot_hub'
+  iot_hub = 'iot_hub',
+  divider = 'divider'
 }
 
 declare type MenuFilter = (authState: AuthState) => boolean;
@@ -521,6 +523,16 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       icon: 'track_changes'
     }
   ],
+  [
+    MenuId.monitor,
+    {
+      id: MenuId.monitor,
+      name: 'monitor.monitor',
+      type: 'toggle',
+      path: '/monitor',
+      icon: 'mdi:view-dashboard-outline'
+    }
+  ],
   [
     MenuId.alarms_center,
     {
@@ -772,9 +784,19 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'iot-hub.iot-hub',
       type: 'link',
       path: '/iot-hub',
-      icon: 'hub',
+      icon: 'mdi:hub-outline',
       isNew: true
     }
+  ],
+  [
+    MenuId.divider,
+    {
+      id: MenuId.divider,
+      name: '',
+      type: 'divider',
+      path: 'divider',
+      icon: ''
+    }
   ]
 ]);
 
@@ -866,15 +888,31 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
     Authority.TENANT_ADMIN,
     [
       {id: MenuId.home},
+      {id: MenuId.iot_hub},
+      {id: MenuId.divider},
       {
-        id: MenuId.alarms_center,
+        id: MenuId.monitor,
         pages: [
-          {id: MenuId.alarms},
-          {id: MenuId.alarm_rules}
+          {id: MenuId.dashboards},
+          {
+            id: MenuId.alarms_center,
+            pages: [
+              {id: MenuId.alarms},
+              {id: MenuId.alarm_rules}
+            ]
+          },
+          {
+            id: MenuId.notifications_center,
+            pages: [
+              {id: MenuId.notification_inbox},
+              {id: MenuId.notification_sent},
+              {id: MenuId.notification_recipients},
+              {id: MenuId.notification_templates},
+              {id: MenuId.notification_rules}
+            ]
+          }
         ]
       },
-      {id: MenuId.dashboards},
-      {id: MenuId.iot_hub},
       {
         id: MenuId.entities,
         pages: [
@@ -924,16 +962,6 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
           {id: MenuId.resources_library}
         ]
       },
-      {
-        id: MenuId.notifications_center,
-        pages: [
-          {id: MenuId.notification_inbox},
-          {id: MenuId.notification_sent},
-          {id: MenuId.notification_recipients},
-          {id: MenuId.notification_templates},
-          {id: MenuId.notification_rules}
-        ]
-      },
       {
         id: MenuId.mobile_center,
         pages: [

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

@@ -74,7 +74,7 @@ export class MenuService {
     const openedMenuSections = getCurrentOpenedMenuSections(this.store);
     if (this.currentMenuSections?.length) {
       this.currentMenuSections.filter(section => section.type === 'toggle' &&
-        (url.startsWith(section.path) || openedMenuSections.includes(section.path))).forEach(
+        (url.startsWith(section.path) || openedMenuSections.includes(section.path) || section.pages.some(page => url.startsWith(page.path)) )).forEach(
         section => section.opened = true
       );
     }

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

@@ -18,13 +18,16 @@
 <ul class="tb-side-menu flex flex-col items-stretch justify-start" [class.tb-collapsed]="collapsed">
   @for (section of menuSections$ | async; track section.id) {
     <li>
-      @switch (section.type === 'link') {
-        @case (true) {
+      @switch (section.type) {
+        @case ('link') {
           <tb-menu-link [section]="section" [collapsed]="collapsed"></tb-menu-link>
         }
-        @case (false) {
+        @case ('toggle') {
           <tb-menu-toggle [section]="section" [collapsed]="collapsed"></tb-menu-toggle>
         }
+        @case ('divider') {
+          <mat-divider></mat-divider>
+        }
       }
     </li>
   }

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -39,6 +39,10 @@
         }
       }
     }
+    .mat-divider.mat-divider-horizontal {
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
   }
 
   .tb-side-menu ul {

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

@@ -244,7 +244,8 @@ export const widgetsLibraryRoutes: Routes = [
     data: {
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
       breadcrumb: {
-        menuId: MenuId.widget_library
+        menuId: MenuId.widget_library,
+        skip: true
       }
     },
     children: [

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

@@ -4769,6 +4769,9 @@
             "getting-started": "Getting Started"
         }
     },
+    "monitor": {
+        "monitor": "Monitor"
+    },
     "notification": {
         "action-button": "Action button",
         "action-type": "Action type",