feat: Add icons to main tables + refactor

* Add icons to headers of the two tables under the main-table component
* Refactor code for cleaner use of promises
* Show user size of volumes in table
* Show user what notebooks volumes are mounted to

Author: brendangadd

frontend/src/app/main-table/main-table.component.scss

@@ -28,6 +28,10 @@ table {
   height: 64px;
 }
 
+.header mat-icon {
+  margin: 3px 10px 0 0;
+}
+
 .header p {
   font-weight: 400;
   font-size: 20px;

frontend/src/app/main-table/main-table.component.ts

@@ -1,16 +1,15 @@
-import { Component, OnInit } from "@angular/core";
-import { NamespaceService } from "../services/namespace.service";
-import { KubernetesService } from "src/app/services/kubernetes.service";
+import {Component, OnInit} from "@angular/core";
+import {NamespaceService} from "../services/namespace.service";
+import {KubernetesService} from "src/app/services/kubernetes.service";
 
-import { Subscription } from "rxjs";
-import { isEqual } from "lodash";
-import { first } from "rxjs/operators";
-
-import { ExponentialBackoff } from "src/app/utils/polling";
-import { MatDialog } from "@angular/material/dialog";
-import { ConfirmDialogComponent } from "./confirm-dialog/confirm-dialog.component";
-import { Pvc, Volume, Resource } from "../utils/types";
+import {Subscription} from "rxjs";
+import {isEqual} from "lodash";
+import {first} from "rxjs/operators";
 
+import {ExponentialBackoff} from "src/app/utils/polling";
+import {MatDialog} from "@angular/material/dialog";
+import {ConfirmDialogComponent} from "./confirm-dialog/confirm-dialog.component";
+import {Pvc, Volume, Resource} from "../utils/types";
 
 @Component({
   selector: "app-main-table",
@@ -35,47 +34,36 @@ export class MainTableComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.poller = new ExponentialBackoff({ interval: 2000, retries: 3 });
+    this.poller = new ExponentialBackoff({interval: 2000, retries: 3});
     const resourcesSub = this.poller.start().subscribe(() => {
       if (!this.currNamespace) {
         return;
-      } 
+      }
 
-      let getVolumes = this.k8s.getVolumes(this.currNamespace).toPromise().then(
-       pvcs => {
-        if(isEqual(this.pvcs, pvcs)){
-          return;
-        }
-         this.pvcs = pvcs; 
-       }
-      ); 
-      
-      let getResource = this.k8s.getResource(this.currNamespace).toPromise().then(
-        resources => {
-        if (isEqual(this.resources, resources)){
-          return;
+      Promise.all([
+        this.k8s.getResource(this.currNamespace).toPromise(),
+        this.k8s.getVolumes(this.currNamespace).toPromise()
+      ]).then(([notebooks, volumes]) => {
+        if (!isEqual(notebooks, this.resources) || !isEqual(volumes, this.pvcs)) {
+          this.poller.reset();
         }
-        this.resources = resources;
-        this.usedPVCs.clear();
-        this.resources.forEach(res => {this.usedPVCs.add(res.volumes.forEach(element => {this.usedPVCs.add(element);}))})  
-      });
-      
-      Promise.all([getVolumes, getResource])
-      .then(val => {
-        this.customPvcs = [];
-        this.pvcs.forEach(vol => {
-          this.customPvcs.push({pvc:vol, ismounted:this.usedPVCs.has(vol.name)});
-        });
+        this.resources = notebooks;
+        this.pvcs = volumes;
+        let mounts = Object.fromEntries(
+          notebooks.flatMap(nb => nb.volumes.map(v => [v, nb]))
+        );
+        this.customPvcs = volumes.map(v => ({
+          pvc: v,
+          mountedBy: mounts[v.name]?.name
+        }));
       });
     });
 
     // Keep track of the selected namespace
-    const namespaceSub = this.ns
-      .getSelectedNamespace()
-      .subscribe(namespace => {
-        this.currNamespace = namespace;
-        this.poller.reset();
-      });
+    const namespaceSub = this.ns.getSelectedNamespace().subscribe(namespace => {
+      this.currNamespace = namespace;
+      this.poller.reset();
+    });
 
     this.subscriptions.add(resourcesSub);
     this.subscriptions.add(namespaceSub);
@@ -115,29 +103,29 @@ export class MainTableComponent implements OnInit {
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       width: "fit-content",
       data: {
-        title: "You are about to delete the PVC: " + p.pvc.name,
+        title: "You are about to delete the volume: " + p.pvc.name,
         message:
-          "Are you sure you want to delete this Persistent Volume Claim? ",
+          "Are you sure you want to delete this volume? " +
+          "This action can't be undone.",
         yes: "delete",
         no: "cancel"
       }
     });
 
     dialogRef
-    .afterClosed()
-    .pipe(first())
-    .subscribe(result => {
-      if (result !== "delete") {
-        return;
-      }
+      .afterClosed()
+      .pipe(first())
+      .subscribe(result => {
+        if (result !== "delete") {
+          return;
+        }
 
-      this.k8s
-        .deletePersistentStorageClaim(p.pvc.namespace, p.pvc.name)
-        .pipe(first())
-        .subscribe(r => {
-          this.poller.reset();
-        });
-    });
+        this.k8s
+          .deletePersistentStorageClaim(p.pvc.namespace, p.pvc.name)
+          .pipe(first())
+          .subscribe(_ => {
+            this.poller.reset();
+          });
+      });
   }
-
 }

frontend/src/app/main-table/resource-table/resource-table.component.html

@@ -1,5 +1,6 @@
 <div class="card mat-elevation-z2">
   <div class="header">
+    <mat-icon>computer</mat-icon>
     <p>Notebook Servers</p>
 
     <div class="spacer"></div>

frontend/src/app/main-table/volumes-table/volume-table.component.html

@@ -1,5 +1,6 @@
 <div class="card mat-elevation-z2">
   <div class="header">
+    <mat-icon>storage</mat-icon>
     <p>Notebook Volumes</p>
   </div>
   <table mat-table [dataSource]="custompvcs" matSort>
@@ -9,15 +10,17 @@
       <td mat-cell *matCellDef="let elem">{{ elem.pvc.name }}</td>
     </ng-container>
 
-    <ng-container matColumnDef="namespace">
-      <th mat-header-cell *matHeaderCellDef>Namespace</th>
-      <td mat-cell *matCellDef="let elem">{{ elem.pvc.namespace }}</td>
+    <ng-container matColumnDef="size">
+      <th mat-header-cell *matHeaderCellDef>Size</th>
+      <td mat-cell *matCellDef="let elem">
+        {{ elem.pvc.size }}
+      </td>
     </ng-container>
 
-    <ng-container matColumnDef="isMounted">
-      <th mat-header-cell *matHeaderCellDef>Is Mounted?</th>
+    <ng-container matColumnDef="mountedBy">
+      <th mat-header-cell *matHeaderCellDef>Used By</th>
       <td mat-cell *matCellDef="let elem">
-        {{ elem.ismounted ? 'Yes' : 'No' }}
+        {{ elem.mountedBy || '(None)' }}
       </td>
     </ng-container>
 
@@ -27,7 +30,7 @@
       <td mat-cell *matCellDef="let elem">
         <button
           mat-icon-button
-          [disabled]="elem.ismounted === true"
+          [disabled]="elem.mountedBy"
           (click)="deletePvc(elem)"
         >
           <mat-icon>delete</mat-icon>

frontend/src/app/main-table/volumes-table/volume-table.component.ts

@@ -1,33 +1,21 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
-import { MatTableDataSource } from "@angular/material/table";
-import { Pvc } from "../../utils/types";
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {MatTableDataSource} from "@angular/material/table";
+import {Pvc} from "../../utils/types";
 
 @Component({
   selector: "app-volume-table",
   templateUrl: "./volume-table.component.html",
-  styleUrls: ["./volume-table.component.scss","../main-table.component.scss"]
+  styleUrls: ["./volume-table.component.scss", "../main-table.component.scss"]
 })
-
-export class VolumeTableComponent implements OnInit {
+export class VolumeTableComponent {
   @Input() custompvcs: Pvc[];
   @Output() deletePvcEvent = new EventEmitter<Pvc>();
 
   // Table data
-  displayedColumns: string[] = [
-    "name",
-    "namespace",
-    "isMounted",
-    "actions"
-  ];
+  displayedColumns: string[] = ["name", "size", "mountedBy", "actions"];
   dataSource = new MatTableDataSource();
 
-  constructor() { }
-
-  ngOnInit() {  }
-
-  ngOnDestroy() {  }
-
-  deletePvc(pvc: Pvc){
+  deletePvc(pvc: Pvc) {
     this.deletePvcEvent.emit(pvc);
   }
 }

frontend/src/app/utils/types.ts

@@ -139,7 +139,7 @@ export enum SnackType {
   Info
 }
 
-export interface Pvc {
+export type Pvc = {
   pvc: Volume;
-  ismounted: boolean
+  mountedBy: string | null;
 }

frontend/tsconfig.json

@@ -15,7 +15,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2018",
+      "es2020",
       "dom"
     ]
   }