From ec15cc7c9d36c665cd69c7d47b227354c14d4b42 Mon Sep 17 00:00:00 2001
From: Dragos <cojocaru.dragos@gmail.com>
Date: Thu, 3 Jun 2021 17:20:59 +0300
Subject: [PATCH] TRIX-29 deleting last VM has indefinite spinner

---
 .../machine-wizard.component.html             | 19 ++++++++-----------
 .../machine-wizard.component.ts               |  4 ++--
 app/src/app/machines/machines.component.html  |  2 +-
 app/src/app/machines/machines.component.ts    |  2 ++
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/src/app/machines/machine-wizard/machine-wizard.component.html b/app/src/app/machines/machine-wizard/machine-wizard.component.html
index 60b09e3..b3b36da 100644
--- a/app/src/app/machines/machine-wizard/machine-wizard.component.html
+++ b/app/src/app/machines/machine-wizard/machine-wizard.component.html
@@ -109,10 +109,12 @@
                       <div class="select-list" formArrayName="networks" tabindex="0">
                         <div class="form-check" *ngFor="let network of editorForm.get('networks')['controls']; let index = index" [formGroupName]="index">
                           <input class="form-check-input" type="checkbox" [value]="network.get('id')" id="network-{{ network.get('id').value }}" formControlName="selected">
-                          <label class="form-check-label text-truncate" for="network-{{ network.get('id').value }}">
-                            <small class="badge badge-discreet float-end" *ngIf="network.get('public').value">public</small>
-                            {{ network.get('name').value }}
-                            <small class="text-faded">{{ network.get('description').value }}</small>
+                          <label class="form-check-label text-truncate d-flex align-items-center justify-content-between" for="network-{{ network.get('id').value }}">
+                            <span>
+                              {{ network.get('name').value }}
+                              <small class="text-faded">{{ network.get('description').value }}</small>  
+                            </span>
+                            <small class="badge badge-discreet" *ngIf="network.get('public').value">public</small>
                           </label>
                         </div>
 
@@ -141,7 +143,7 @@
               </div>
 
               <!-- Volumes and disks -->
-              <div class="mt-3 d-flex flex-column">
+              <div *ngIf="!kvmRequired" class="mt-3 d-flex flex-column">
                 <button class="btn text-start mb-2" [class.btn-outline-info]="!showVolumes" [class.btn-info]="showVolumes" 
                 (click)="showVolumes = !showVolumes">
                   Volumes
@@ -183,16 +185,11 @@
                       </tbody>
                     </table>
                   </div>
-
-                  <p class="alert alert-info mt-3" *ngIf="kvmRequired">
-                    <fa-icon icon="info-circle" class="align-middle"></fa-icon>
-                    Volumes are disabled for KVM packages
-                  </p>
                 </div>
               </div>
 
               <!-- Affinity settings -->
-              <div class="mt-3 d-flex flex-column" *ngIf="machines && machines.length">
+              <div class="mt-3 d-flex flex-column">
                 <button class="btn text-start w-100 mb-2" [class.btn-outline-info]="!showAffinity" [class.btn-info]="showAffinity"
                   (click)="showAffinity = !showAffinity">
                   Affinity rules
diff --git a/app/src/app/machines/machine-wizard/machine-wizard.component.ts b/app/src/app/machines/machine-wizard/machine-wizard.component.ts
index 1dec3b5..688630b 100644
--- a/app/src/app/machines/machine-wizard/machine-wizard.component.ts
+++ b/app/src/app/machines/machine-wizard/machine-wizard.component.ts
@@ -88,7 +88,7 @@ export class MachineWizardComponent implements OnInit, OnDestroy
       {
         id: 3,
         title: 'Settings',
-        description: 'Name your machine, configure networks and setup volumes'
+        description: 'Name your machine and configure networks'
       },
       {
         id: 4,
@@ -606,7 +606,7 @@ export class MachineWizardComponent implements OnInit, OnDestroy
 
       this.currentStep = 2;
 
-      setTimeout(() => this.currentStep = 3, 300);
+      setTimeout(() => this.currentStep = 3, 0);
     }
 
     if (this.imageType <= 2)
diff --git a/app/src/app/machines/machines.component.html b/app/src/app/machines/machines.component.html
index 807cd6e..e50f214 100644
--- a/app/src/app/machines/machines.component.html
+++ b/app/src/app/machines/machines.component.html
@@ -9,7 +9,7 @@
 
       <span class="d-none d-lg-block flex-grow-1"></span>
 
-      <ng-container *ngIf="machines && machines.length">
+      <ng-container *ngIf="machines && machines.length > 1">
         <div class="input-group input-group-pill me-lg-3 mb-3 mb-lg-0 w-lg-auto w-100">
           <input type="text" class="form-control" placeholder="Search..." formControlName="searchTerm"
                  appAlphaOnly="^[A-Za-z0-9_-]+$" tooltip="Search by name, tag, metadata, operating system or brand"
diff --git a/app/src/app/machines/machines.component.ts b/app/src/app/machines/machines.component.ts
index c0530b4..1761853 100644
--- a/app/src/app/machines/machines.component.ts
+++ b/app/src/app/machines/machines.component.ts
@@ -383,6 +383,8 @@ export class MachinesComponent implements OnInit, OnDestroy
         this.diskFilterOptions.stepsArray[0].value,
         this.diskFilterOptions.stepsArray[this.diskFilterOptions.stepsArray.length - 1].value
       ]);
+
+    this.applyFiltersAndSort();
   }
 
   // ----------------------------------------------------------------------------------------------------------------