feat(admin): displaying children of items on entity detail

* On overview tiles with children were replaced by expandable section that containst the children instead of new page
* In side menu items with children will expand on click instead of navigating to new page
* Refactored side-menu and overview pages to reflect current standards
* Removed side menu root item component as it was just a duplicate of side menu item
* Information about parent of group was moved from overview to detail and is now present for all pages

Author: bodnara

apps/admin-gui/src/app/admin/pages/admin-page/admin-overview/admin-overview.component.html

@@ -1,9 +1,7 @@
 <div>
-  <perun-web-apps-menu-buttons-field
-    [items]="navItems"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
-
-  <!--  <h1 class="page-subtitle">Quick actions</h1>-->
-  <!--  <app-menu-buttons-field [items]="items" [size]="'medium'">-->
-  <!--  </app-menu-buttons-field>-->
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-expandable-tiles
+    [items]="visualizerItems"
+    [sectionId]="'visualizer'"
+    [title]="'MENU_ITEMS.ADMIN.VISUALIZER'"></perun-web-apps-expandable-tiles>
 </div>

apps/admin-gui/src/app/admin/pages/admin-page/admin-overview/admin-overview.component.ts

@@ -9,7 +9,7 @@ import { MenuItem } from '@perun-web-apps/perun/models';
 export class AdminOverviewComponent {
   @HostBinding('class.router-component') true;
 
-  navItems: MenuItem[] = [
+  items: MenuItem[] = [
     {
       cssIcon: 'perun-attributes',
       url: '/admin/attributes',
@@ -34,12 +34,6 @@ export class AdminOverviewComponent {
       label: 'MENU_ITEMS.ADMIN.SERVICES',
       style: 'admin-btn',
     },
-    {
-      cssIcon: 'perun-preview',
-      url: '/admin/visualizer',
-      label: 'MENU_ITEMS.ADMIN.VISUALIZER',
-      style: 'admin-btn',
-    },
     {
       cssIcon: 'perun-external-sources',
       url: '/admin/ext_sources',
@@ -71,4 +65,18 @@ export class AdminOverviewComponent {
       style: 'admin-btn',
     },
   ];
+  visualizerItems: MenuItem[] = [
+    {
+      cssIcon: 'perun-module-dependencies',
+      url: `/admin/visualizer/attrDependencies`,
+      label: 'MENU_ITEMS.VISUALIZER.ATTR_DEPENDENCIES',
+      style: 'admin-btn',
+    },
+    {
+      cssIcon: 'perun-user-destination-relationship',
+      url: '/admin/visualizer/userDestinationRelationship',
+      label: 'MENU_ITEMS.VISUALIZER.USER_DESTINATION',
+      style: 'admin-btn',
+    },
+  ];
 }

apps/admin-gui/src/app/admin/pages/admin-page/admin-services/service-detail-page/service-overview/service-overview.component.html

@@ -1,3 +1 @@
-<perun-web-apps-menu-buttons-field
-  [items]="navItems"
-  [size]="'small'"></perun-web-apps-menu-buttons-field>
+<perun-web-apps-menu-buttons-field [items]="navItems"></perun-web-apps-menu-buttons-field>

apps/admin-gui/src/app/admin/pages/admin-page/admin-visualizer/visualizer-overview/visualizer-overview.component.html

@@ -1,5 +1,3 @@
 <div>
-  <perun-web-apps-menu-buttons-field
-    [items]="items"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
 </div>

apps/admin-gui/src/app/facilities/pages/facility-detail-page/facility-overview/facility-overview.component.html

@@ -1,6 +1,9 @@
 <mat-spinner *ngIf="loading" class="me-auto ms-auto"></mat-spinner>
 <div *ngIf="!loading">
-  <perun-web-apps-menu-buttons-field
-    [items]="navItems"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-expandable-tiles
+    [items]="settingItems"
+    [title]="'MENU_ITEMS.FACILITY.SETTINGS'"
+    [sectionId]="'settings'">
+  </perun-web-apps-expandable-tiles>
 </div>

apps/admin-gui/src/app/facilities/pages/facility-detail-page/facility-overview/facility-overview.component.ts

@@ -15,7 +15,8 @@ import {
 export class FacilityOverviewComponent implements OnInit {
   // class used for animation
   @HostBinding('class.router-component') true;
-  navItems: MenuItem[] = [];
+  items: MenuItem[] = [];
+  settingItems: MenuItem[] = [];
   facility: Facility;
   loading = false;
 
@@ -29,16 +30,17 @@ export class FacilityOverviewComponent implements OnInit {
   ngOnInit(): void {
     this.loading = true;
     this.facility = this.entityStorageService.getEntity();
-    this.initItems();
+    this.setItems();
+    this.setSettingsItems();
     this.loading = false;
   }
 
-  private initItems(): void {
-    this.navItems = [];
+  private setItems(): void {
+    this.items = [];
 
     // Resources
     if (this.routePolicyService.canNavigate('facilities-resources', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-manage-facility',
         url: `/facilities/${this.facility.id}/resources`,
         label: 'MENU_ITEMS.FACILITY.RESOURCES',
@@ -47,7 +49,7 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Allowed users
     if (this.routePolicyService.canNavigate('facilities-allowed-users', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-user',
         url: `/facilities/${this.facility.id}/allowed-users`,
         label: 'MENU_ITEMS.FACILITY.ALLOWED_USERS',
@@ -56,7 +58,7 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Allowed groups
     if (this.routePolicyService.canNavigate('facilities-allowed-groups', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-group',
         url: `/facilities/${this.facility.id}/allowed-groups`,
         label: 'MENU_ITEMS.FACILITY.ALLOWED_GROUPS',
@@ -65,7 +67,7 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Service state
     if (this.routePolicyService.canNavigate('facilities-services-status', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-service-status',
         url: `/facilities/${this.facility.id}/services-status`,
         label: 'MENU_ITEMS.FACILITY.SERVICES_STATUS',
@@ -74,7 +76,7 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Service destination
     if (this.routePolicyService.canNavigate('facilities-services-destinations', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-service_destination',
         url: `/facilities/${this.facility.id}/services-destinations`,
         label: 'MENU_ITEMS.FACILITY.SERVICES_DESTINATIONS',
@@ -83,7 +85,7 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Hosts
     if (this.routePolicyService.canNavigate('facilities-hosts', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-hosts',
         url: `/facilities/${this.facility.id}/hosts`,
         label: 'MENU_ITEMS.FACILITY.HOSTS',
@@ -92,20 +94,60 @@ export class FacilityOverviewComponent implements OnInit {
     }
     // Attributes
     if (this.routePolicyService.canNavigate('facilities-attributes', this.facility)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-attributes',
         url: `/facilities/${this.facility.id}/attributes`,
         label: 'MENU_ITEMS.FACILITY.ATTRIBUTES',
         style: 'facility-btn',
       });
     }
+  }
+
+  private setSettingsItems(): void {
+    this.settingItems = [];
 
-    // Settings
-    if (this.routePolicyService.canNavigate('facilities-settings', this.facility)) {
-      this.navItems.push({
-        cssIcon: 'perun-settings2',
-        url: `/facilities/${this.facility.id}/settings`,
-        label: 'MENU_ITEMS.FACILITY.SETTINGS',
+    // Owners
+    if (this.routePolicyService.canNavigate('facilities-settings-owners', this.facility)) {
+      this.settingItems.push({
+        cssIcon: 'perun-owner-grey',
+        url: `/facilities/${this.facility.id}/settings/owners`,
+        label: 'MENU_ITEMS.FACILITY.OWNERS',
+        style: 'facility-btn',
+      });
+    }
+    // Managers
+    if (this.routePolicyService.canNavigate('facilities-settings-managers', this.facility)) {
+      this.settingItems.push({
+        cssIcon: 'perun-manager',
+        url: `/facilities/${this.facility.id}/settings/managers`,
+        label: 'MENU_ITEMS.FACILITY.MANAGERS',
+        style: 'facility-btn',
+      });
+    }
+    // Security teams
+    if (this.routePolicyService.canNavigate('facilities-settings-security-teams', this.facility)) {
+      this.settingItems.push({
+        cssIcon: 'perun-security-teams',
+        url: `/facilities/${this.facility.id}/settings/security-teams`,
+        label: 'MENU_ITEMS.FACILITY.SECURITY_TEAMS',
+        style: 'facility-btn',
+      });
+    }
+    // Blacklist
+    if (this.routePolicyService.canNavigate('facilities-settings-blacklist', this.facility)) {
+      this.settingItems.push({
+        cssIcon: 'perun-black-list',
+        url: `/facilities/${this.facility.id}/settings/blacklist`,
+        label: 'MENU_ITEMS.FACILITY.BLACKLIST',
+        style: 'facility-btn',
+      });
+    }
+    // Bans
+    if (this.routePolicyService.canNavigate('facilities-settings-bans', this.facility)) {
+      this.settingItems.push({
+        cssIcon: 'perun-ban',
+        url: `/facilities/${this.facility.id}/settings/bans`,
+        label: 'MENU_ITEMS.FACILITY.BANS',
         style: 'facility-btn',
       });
     }

apps/admin-gui/src/app/facilities/pages/facility-detail-page/facility-settings/facility-settings-overview/facility-settings-overview.component.html

@@ -1,6 +1,4 @@
 <mat-spinner *ngIf="loading" class="me-auto ms-auto"></mat-spinner>
 <div *ngIf="!loading">
-  <perun-web-apps-menu-buttons-field
-    [items]="items"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
 </div>

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-overview/resource-overview.component.html

@@ -1,6 +1,9 @@
 <mat-spinner *ngIf="loading" class="me-auto ms-auto"></mat-spinner>
 <div *ngIf="!loading">
-  <perun-web-apps-menu-buttons-field
-    [items]="navItems"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-expandable-tiles
+    [items]="settingsItems"
+    [title]="'MENU_ITEMS.RESOURCE.SETTINGS'"
+    [sectionId]="'settings'">
+  </perun-web-apps-expandable-tiles>
 </div>

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-overview/resource-overview.component.ts

@@ -16,7 +16,8 @@ import {
 export class ResourceOverviewComponent implements OnInit {
   // class used for animation
   @HostBinding('class.router-component') true;
-  navItems: MenuItem[] = [];
+  items: MenuItem[] = [];
+  settingsItems: MenuItem[] = [];
   resource: Resource;
   loading = false;
 
@@ -31,46 +32,44 @@ export class ResourceOverviewComponent implements OnInit {
   ngOnInit(): void {
     this.loading = true;
     this.resource = this.entityStorageService.getEntity();
-    if (this.route.parent.parent.snapshot.url[0].path === 'facilities') {
-      this.initItems(false);
-    } else {
-      this.initItems(true);
-    }
+    const inVo = this.route.parent.parent.snapshot.url[0].path === 'facilities';
+    this.setItems(inVo);
+    this.setSettingsItems(inVo);
     this.loading = false;
   }
 
-  private initItems(inVo: boolean): void {
+  private setItems(inVo: boolean): void {
     const urlStart = inVo
       ? `/organizations/${this.resource.voId}`
       : `/facilities/${this.resource.facilityId}`;
-    this.navItems = [];
+    this.items = [];
 
     if (this.routePolicyService.canNavigate('resources-groups', this.resource)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-group',
         url: `${urlStart}/resources/${this.resource.id}/groups`,
         label: 'MENU_ITEMS.RESOURCE.ASSIGNED_GROUPS',
         style: 'resource-btn',
       });
     }
     if (this.routePolicyService.canNavigate('resources-services', this.resource)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-service',
         url: `${urlStart}/resources/${this.resource.id}/services`,
         label: 'MENU_ITEMS.RESOURCE.ASSIGNED_SERVICES',
         style: 'resource-btn',
       });
     }
     if (this.routePolicyService.canNavigate('resources-members', this.resource)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-user',
         url: `${urlStart}/resources/${this.resource.id}/members`,
         label: 'MENU_ITEMS.RESOURCE.ASSIGNED_MEMBERS',
         style: 'resource-btn',
       });
     }
     if (this.routePolicyService.canNavigate('resources-tags', this.resource)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-resource-tags',
         url: `${urlStart}/resources/${this.resource.id}/tags`,
         label: 'MENU_ITEMS.RESOURCE.RESOURCE_TAGS',
@@ -79,19 +78,36 @@ export class ResourceOverviewComponent implements OnInit {
     }
 
     if (this.routePolicyService.canNavigate('resources-attributes', this.resource)) {
-      this.navItems.push({
+      this.items.push({
         cssIcon: 'perun-attributes',
         url: `${urlStart}/resources/${this.resource.id}/attributes`,
         label: 'MENU_ITEMS.RESOURCE.ATTRIBUTES',
         style: 'resource-btn',
       });
     }
+  }
+
+  private setSettingsItems(inVo: boolean): void {
+    this.settingsItems = [];
+
+    if (this.routePolicyService.canNavigate('resources-settings-managers', this.resource)) {
+      this.settingsItems.push({
+        cssIcon: 'perun-manager',
+        url: `${
+          inVo ? `/organizations/${this.resource.voId}` : `/facilities/${this.resource.facilityId}`
+        }/resources/${this.resource.id}/settings/managers`,
+        label: 'MENU_ITEMS.RESOURCE.MANAGERS',
+        style: 'resource-btn',
+      });
+    }
 
-    if (this.routePolicyService.canNavigate('resources-settings', this.resource)) {
-      this.navItems.push({
-        cssIcon: 'perun-settings2',
-        url: `${urlStart}/resources/${this.resource.id}/settings`,
-        label: 'MENU_ITEMS.RESOURCE.SETTINGS',
+    if (this.routePolicyService.canNavigate('resources-settings-bans', this.resource)) {
+      this.settingsItems.push({
+        cssIcon: 'perun-ban',
+        url: `${
+          inVo ? `/organizations/${this.resource.voId}` : `/facilities/${this.resource.facilityId}`
+        }/resources/${this.resource.id}/settings/bans`,
+        label: 'MENU_ITEMS.RESOURCE.BANS',
         style: 'resource-btn',
       });
     }

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-settings/resource-settings-overview/resource-settings-overview.component.html

@@ -1,6 +1,4 @@
 <mat-spinner *ngIf="loading" class="me-auto ms-auto"></mat-spinner>
 <div *ngIf="!loading">
-  <perun-web-apps-menu-buttons-field
-    [items]="items"
-    [size]="'small'"></perun-web-apps-menu-buttons-field>
+  <perun-web-apps-menu-buttons-field [items]="items"></perun-web-apps-menu-buttons-field>
 </div>

apps/admin-gui/src/app/shared/shared.module.ts

@@ -46,7 +46,6 @@ import { ApplicationRejectDialogComponent } from './components/dialogs/applicati
 import { AnyToStringPipe } from './pipes/any-to-string.pipe';
 import { DeleteAttributeDialogComponent } from './components/dialogs/delete-attribute-dialog/delete-attribute-dialog.component';
 import { RemoveMembersDialogComponent } from './components/dialogs/remove-members-dialog/remove-members-dialog.component';
-import { SideMenuRootItemComponent } from './side-menu/side-menu-root-item/side-menu-root-item.component';
 import { DebuggerPageComponent } from './debugger-page/debugger-page.component';
 import { RemoveResourceDialogComponent } from './components/dialogs/remove-resource-dialog/remove-resource-dialog.component';
 import { AddManagerDialogComponent } from './components/dialogs/add-manager-dialog/add-manager-dialog.component';
@@ -306,7 +305,6 @@ import { AddGroupToGroupRegistrationComponent } from './components/dialogs/add-g
     ExtSourcesListComponent,
     ExtSourceTypePipe,
     ConfigTableConfigModule,
-    SideMenuRootItemComponent,
     DestinationListComponent,
     TwoEntityAttributePageComponent,
     HostsListComponent,
@@ -352,7 +350,6 @@ import { AddGroupToGroupRegistrationComponent } from './components/dialogs/add-g
     ApplicationFormCopyItemsDialogComponent,
     AddApplicationFormItemDialogComponent,
     EditApplicationFormItemDialogComponent,
-    SideMenuRootItemComponent,
     AnyToStringPipe,
     DeleteAttributeDialogComponent,
     AddMemberDialogComponent,