Show VM Name and fix icon position on task progress modal

hobbyfarm · Apr 11, 2024 · 0ae382d · 0ae382d
1 parent feddc6a
commit 0ae382d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/src/app/scenario/task-modal/task-modal.component.html b/src/app/scenario/task-modal/task-modal.component.html
@@ -3,8 +3,8 @@
 </ng-container>
 
 <ng-template #loadingSpinner>
-  <div style="width: 100%; min-height: 20vh">
-    <clr-spinner style="position: absolute; left: 45%; top: 40%"></clr-spinner>
+  <div class="spinner-container">
+    <clr-spinner class="spinner"></clr-spinner>
   </div>
 </ng-template>
 
@@ -21,19 +21,22 @@ <h3 class="modal-title">Task Progress:</h3>
       *ngIf="!loading; else loadingSpinner"
     >
       <clr-accordion-panel *ngFor="let task of tasks">
-        <clr-accordion-title style="width: 100%" inverse>
-          <div
-            style="display: flex; justify-content: space-between; width: 100%"
-          >
+        <clr-accordion-title class="accordion-title" inverse>
+          <div class="accordion-flex-title">
             <div>
               <b>{{ task.name }}</b>
-              <span *ngIf="task.success" class="label label-success">
-                <cds-icon shape="check" inverse></cds-icon>
-              </span>
-              <span *ngIf="!task.success" class="label label-danger">
-                <cds-icon shape="times" inverse></cds-icon>
-              </span>
             </div>
+            <span *ngIf="task.success" class="label label-success">
+              <cds-icon shape="check" inverse></cds-icon>
+            </span>
+            <span *ngIf="!task.success" class="label label-danger">
+              <cds-icon shape="times" inverse></cds-icon>
+            </span>
+          </div>
+          <div>
+            <sub
+              ><i> on {{ task.vm_name }}</i></sub
+            >
           </div>
         </clr-accordion-title>
         <clr-accordion-content *clrIfExpanded>

diff --git a/src/app/scenario/task-modal/task-modal.component.scss b/src/app/scenario/task-modal/task-modal.component.scss
@@ -10,7 +10,27 @@ cds-icon.clr-accordion-angle {
   fill: var(--clr-icon-color-inverse);
 }
 
-.label {
+.accordion-flex-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.spinner-container {
+  width: 100%;
+  min-height: 20vh;
+}
+
+.spinner {
   position: absolute;
-  right: 25px;
+  left: 45%;
+  top: 40%;
+}
+
+.accordion-title {
+  width: 100%;
+}
+
+.label {
+  transform: translateY(0.7rem);
 }
diff --git a/src/app/scenario/task-modal/task-modal.component.ts b/src/app/scenario/task-modal/task-modal.component.ts
@@ -5,6 +5,9 @@ import { Task, TaskVerification } from '../taskVerification.type';
 import { take, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
+interface TaskWithNodeName extends Task {
+  vm_name?: string;
+}
 @Component({
   selector: 'app-task-modal',
   templateUrl: './task-modal.component.html',
@@ -14,7 +17,7 @@ export class TaskModalComponent implements OnInit, OnDestroy {
   @Input()
   vms: Map<string, VM>;
 
-  tasks: Task[] = [];
+  tasks: TaskWithNodeName[] = [];
 
   modalOpen = false;
 
@@ -32,10 +35,10 @@ export class TaskModalComponent implements OnInit, OnDestroy {
     this.verificationService.currentVerifications
       .pipe(takeUntil(this.unsubscribe))
       .subscribe((currentVeriications: Map<string, TaskVerification>) => {
-        const updatedTasks: Task[] = [];
+        const updatedTasks: TaskWithNodeName[] = [];
         currentVeriications.forEach((taskVerification) => {
           taskVerification.tasks?.forEach((task) => {
-            updatedTasks.push(task);
+            updatedTasks.push({ ...task, vm_name: taskVerification.vm_name });
           });
         });
         if (