feat: Convey more info via volume status column

Switch to a tristate PVC status so that the volume management table can
indicate whether a volume is mounted, unmounted, or being deleted.

Author: brendangadd

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

@@ -8,19 +8,27 @@
     <!-- Status Column -->
     <ng-container matColumnDef="status">
       <th mat-header-cell *matHeaderCellDef>Status</th>
-      <td mat-cell *matCellDef="let elem">
-        <!-- Running -->
+      <td mat-cell *matCellDef="let elem" [ngSwitch]="pvcStatus(elem)">
+        <!-- Mounted -->
         <mat-icon
-          *ngIf="!checkDeletionStatus(elem)"
+          *ngSwitchCase="PvcStatus.MOUNTED"
           [ngClass]="['running', 'status']"
-          matTooltip="Running"
-          >check_circle
+          matTooltip="Attached"
+          >link
+        </mat-icon>
+
+        <!-- Unmounted -->
+        <mat-icon
+          *ngSwitchCase="PvcStatus.UNMOUNTED"
+          [ngClass]="['warning', 'status']"
+          matTooltip="Unattached"
+          >link_off
         </mat-icon>
 
-        <!-- Waiting -->
+        <!-- Deleting -->
         <mat-spinner
-          *ngIf="checkDeletionStatus(elem)"
-          matTooltip="Deleting Volume"
+          *ngSwitchCase="PvcStatus.DELETING"
+          matTooltip="Deleting"
           diameter="24"
           class="inline"
         >
@@ -54,7 +62,7 @@
       <td mat-cell *matCellDef="let elem">
         <button
           mat-icon-button
-          [disabled]="checkDeletionStatus(elem) || elem.mountedBy"
+          [disabled]="pvcStatus(elem) !== PvcStatus.UNMOUNTED"
           (click)="deletePvc(elem)"
         >
           <mat-icon>delete</mat-icon>

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

@@ -10,6 +10,12 @@ export type PvcWithStatus = {
   mountedBy: string | null;
 }
 
+enum PvcStatus {
+  DELETING,
+  MOUNTED,
+  UNMOUNTED
+}
+
 @Component({
   selector: "app-volume-table",
   templateUrl: "./volume-table.component.html",
@@ -19,23 +25,29 @@ export class VolumeTableComponent implements OnChanges {
   @Input() pvcProperties: PvcWithStatus[];
   @Output() deletePvcEvent = new EventEmitter<PvcWithStatus>();
 
+  PvcStatus = PvcStatus;
+
   // Table data
-  displayedColumns: string[] = ["status", "name", "size", "mountedBy", "actions"];
+  displayedColumns: string[] = [
+    "status",
+    "name",
+    "size",
+    "mountedBy",
+    "actions"
+  ];
   dataSource = new MatTableDataSource();
 
-  deleteStatus: Set<string> = new Set<string>();
+  deletionStatus: Set<string> = new Set<string>();
 
-  constructor(
-    private dialog: MatDialog
-  ) {}
+  constructor(private dialog: MatDialog) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.pvcProperties) {
       const pvcNames = (changes.pvcProperties
         .currentValue as PvcWithStatus[]).map(p => p.pvc.name);
-      this.deleteStatus.forEach(name => {
+      this.deletionStatus.forEach(name => {
         if (!pvcNames.includes(name)) {
-          this.deleteStatus.delete(name);
+          this.deletionStatus.delete(name);
         }
       });
     }
@@ -61,12 +73,15 @@ export class VolumeTableComponent implements OnChanges {
         if (result !== "delete") {
           return;
         }
-        this.deleteStatus.add(pvc.pvc.name);
+        this.deletionStatus.add(pvc.pvc.name);
         this.deletePvcEvent.emit(pvc);
       });
   }
 
-  checkDeletionStatus(pvc: PvcWithStatus): boolean {
-    return this.deleteStatus.has(pvc.pvc.name);
+  pvcStatus(pvc: PvcWithStatus): PvcStatus {
+    if (this.deletionStatus.has(pvc.pvc.name)) {
+      return PvcStatus.DELETING;
+    }
+    return pvc.mountedBy ? PvcStatus.MOUNTED : PvcStatus.UNMOUNTED;
   }
 }