fix(admin): minor fixes to facility hosts page

* removed double load of the facility entity
* added pointer cursor to the hosts list
* used one-entity-attribute-page.component on the hosts detail page

Author: xflord

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

@@ -2,35 +2,7 @@
   <h1 class="page-subtitle">
     {{'FACILITY_DETAIL.HOSTS.HOSTS_DETAIL.TITLE' | translate}} {{host.hostname}}
   </h1>
-  <perun-web-apps-refresh-button (refresh)="refreshTable()"></perun-web-apps-refresh-button>
-  <button (click)="addAttribute()" class="me-2" color="accent" mat-flat-button>
-    {{'FACILITY_DETAIL.HOSTS.HOSTS_DETAIL.ADD' | translate}}
-  </button>
-  <button
-    (click)="onSave()"
-    class="me-2"
-    color="accent"
-    [disabled]="selected.selected.length === 0"
-    mat-flat-button>
-    {{'FACILITY_DETAIL.HOSTS.HOSTS_DETAIL.SAVE' | translate}}
-  </button>
-  <button
-    (click)="removeAttribute()"
-    color="warn"
-    [disabled]="selected.selected.length === 0"
-    mat-flat-button>
-    {{'FACILITY_DETAIL.HOSTS.HOSTS_DETAIL.REMOVE' | translate}}
-  </button>
-  <ng-template #spinner>
-    <perun-web-apps-loading-table></perun-web-apps-loading-table>
-  </ng-template>
-  <div class="position-relative">
-    <perun-web-apps-attributes-list
-      [selection]="selected"
-      #list
-      *perunWebAppsLoader="loading; indicator: spinner"
-      [attributes]="attributes"
-      [tableId]="tableId">
-    </perun-web-apps-attributes-list>
-  </div>
+  <app-one-entity-attribute-page
+    [entityId]="hostId"
+    [entity]="'host'"></app-one-entity-attribute-page>
 </div>

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

@@ -1,117 +1,24 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { SelectionModel } from '@angular/cdk/collections';
-import {
-  Attribute,
-  AttributesManagerService,
-  FacilitiesManagerService,
-  Host,
-} from '@perun-web-apps/perun/openapi';
-import { MatDialog } from '@angular/material/dialog';
-import { TABLE_ATTRIBUTES_SETTINGS } from '@perun-web-apps/config/table-config';
+import { Component, OnInit } from '@angular/core';
+import { FacilitiesManagerService, Host } from '@perun-web-apps/perun/openapi';
 import { ActivatedRoute } from '@angular/router';
-import { filterCoreAttributes, getDefaultDialogConfig } from '@perun-web-apps/perun/utils';
-import { AttributesListComponent } from '@perun-web-apps/perun/components';
-import { DeleteAttributeDialogComponent } from '../../../../../shared/components/dialogs/delete-attribute-dialog/delete-attribute-dialog.component';
-import { EditAttributeDialogComponent } from '@perun-web-apps/perun/dialogs';
-import { CreateAttributeDialogComponent } from '../../../../../shared/components/dialogs/create-attribute-dialog/create-attribute-dialog.component';
 
 @Component({
   selector: 'app-facility-hosts-detail',
   templateUrl: './facility-hosts-detail.component.html',
   styleUrls: ['./facility-hosts-detail.component.scss'],
 })
 export class FacilityHostsDetailComponent implements OnInit {
-  @ViewChild('list')
-  list: AttributesListComponent;
-
-  attributes: Attribute[] = [];
-  selected = new SelectionModel<Attribute>(true, []);
   hostId: number;
   host: Host = { beanName: '', id: 0 };
-  loading: boolean;
-  tableId = TABLE_ATTRIBUTES_SETTINGS;
 
-  constructor(
-    private dialog: MatDialog,
-    private attributesManager: AttributesManagerService,
-    private facilityManager: FacilitiesManagerService,
-    private route: ActivatedRoute
-  ) {}
+  constructor(private facilityManager: FacilitiesManagerService, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
       this.hostId = Number(params['hostId']);
       this.facilityManager.getHostById(this.hostId).subscribe((host) => {
         this.host = host;
       });
-      this.refreshTable();
-    });
-  }
-
-  refreshTable(): void {
-    this.loading = true;
-    this.attributesManager.getHostAttributes(this.hostId).subscribe((attributes) => {
-      this.attributes = filterCoreAttributes(attributes);
-      this.selected.clear();
-      this.loading = false;
-    });
-  }
-
-  onSave(): void {
-    this.list.updateMapAttributes();
-
-    const config = getDefaultDialogConfig();
-    config.width = '450px';
-    config.data = {
-      entityId: this.hostId,
-      entity: 'host',
-      attributes: this.selected.selected,
-    };
-
-    const dialogRef = this.dialog.open(EditAttributeDialogComponent, config);
-
-    dialogRef.afterClosed().subscribe((result) => {
-      if (result) {
-        this.refreshTable();
-      }
-    });
-  }
-
-  addAttribute(): void {
-    const config = getDefaultDialogConfig();
-    config.width = '1050px';
-    config.data = {
-      entityId: this.hostId,
-      entity: 'host',
-      notEmptyAttributes: this.attributes,
-      style: 'facility-theme',
-    };
-
-    const dialogRef = this.dialog.open(CreateAttributeDialogComponent, config);
-
-    dialogRef.afterClosed().subscribe((result) => {
-      if (result === 'saved') {
-        this.refreshTable();
-      }
-    });
-  }
-
-  removeAttribute(): void {
-    const config = getDefaultDialogConfig();
-    config.width = '450px';
-    config.data = {
-      entityId: this.hostId,
-      entity: 'host',
-      attributes: this.selected.selected,
-      theme: 'facility-theme',
-    };
-
-    const dialogRef = this.dialog.open(DeleteAttributeDialogComponent, config);
-
-    dialogRef.afterClosed().subscribe((result) => {
-      if (result) {
-        this.refreshTable();
-      }
     });
   }
 }

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

@@ -43,10 +43,7 @@ export class FacilityHostsComponent implements OnInit {
     this.loading = true;
     this.facility = this.entityStorageService.getEntity();
     this.setAuthRights();
-    this.facilitiesManager.getFacilityById(this.facility.id).subscribe((facility) => {
-      this.facility = facility;
-      this.refreshTable();
-    });
+    this.refreshTable();
   }
 
   refreshTable(): void {

apps/admin-gui/src/app/shared/components/hosts-list/hosts-list.component.html

@@ -54,6 +54,7 @@
       <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
       <tr
         *matRowDef="let host; columns: displayedColumns;"
+        [class.cursor-pointer]="!disableRouting"
         [perunWebAppsMiddleClickRouterLink]="disableRouting ? null : ['/facilities', this.facilityId.toString(), 'hosts', host.id.toString()]"
         [routerLink]="disableRouting ? null : ['/facilities', this.facilityId, 'hosts', host.id]"
         class="dark-hover-list-item"

apps/admin-gui/src/app/shared/components/one-entity-attribute-page/one-entity-attribute-page.component.ts

@@ -85,6 +85,12 @@ export class OneEntityAttributePageComponent implements OnInit {
           this.loading = false;
         });
         break;
+      case 'host':
+        this.attributesManagerService.getHostAttributes(this.entityId).subscribe((attributes) => {
+          this.attributes = attributes;
+          this.selection.clear();
+          this.loading = false;
+        });
     }
   }