From 0a6a8b1eeb67207c86d19f3f8f8162d778af2071 Mon Sep 17 00:00:00 2001
From: Dragos <cojocaru.dragos@gmail.com>
Date: Mon, 31 May 2021 17:19:33 +0300
Subject: [PATCH] TRIX-22 fixed illegible memory/disk filters

---
 .../instance-wizard.component.html            | 74 +++++++------------
 .../instance-wizard.component.ts              |  2 +
 .../app/instances/instances.component.html    | 17 +++--
 .../app/instances/instances.component.scss    |  5 ++
 4 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/app/src/app/instances/instance-wizard/instance-wizard.component.html b/app/src/app/instances/instance-wizard/instance-wizard.component.html
index 03f7540..6fbaecc 100644
--- a/app/src/app/instances/instance-wizard/instance-wizard.component.html
+++ b/app/src/app/instances/instance-wizard/instance-wizard.component.html
@@ -142,7 +142,8 @@
 
               <!-- Volumes and disks -->
               <div class="mt-3 d-flex flex-column">
-                <button class="btn btn-outline-info text-start mb-2" (click)="showVolumes = !showVolumes">
+                <button class="btn text-start mb-2" [class.btn-outline-info]="!showVolumes" [class.btn-info]="showVolumes" 
+                (click)="showVolumes = !showVolumes">
                   Volumes
                   <fa-icon icon="angle-right" [fixedWidth]="true" [rotate]="showVolumes ? 90 : 0" class="float-end"></fa-icon>
                 </button>
@@ -192,60 +193,37 @@
 
               <!-- Affinity settings -->
               <div class="mt-3 d-flex flex-column" *ngIf="instances && instances.length">
-                <button class="btn btn-outline-info text-start w-100 mb-2" (click)="showAffinity = !showAffinity">
-                  Affinity
+                <button class="btn text-start w-100 mb-2" [class.btn-outline-info]="!showAffinity" [class.btn-info]="showAffinity"
+                  (click)="showAffinity = !showAffinity">
+                  Affinity rules
                   <fa-icon icon="angle-right" [fixedWidth]="true" [rotate]="showAffinity ? 90 : 0" class="float-end"></fa-icon>
                 </button>
 
                 <div [collapse]="!showAffinity">
                   <div class="row">
-                    <div class="col-sm-6" formGroupName="affinity">
-                      <h5>Place close to</h5>
-
-                      <div class="select-list" tabindex="0">
-                        <div class="form-check">
-                          <input class="form-check-input" type="radio" id="closeTo" [value]="null" formControlName="closeTo">
-                          <label class="form-check-label" for="closeTo">
-                            (no preference)
-                          </label>
-                        </div>
-
-                        <div class="form-check" *ngFor="let instance of instances">
-                          <input class="form-check-input" type="radio" id="closeTo-{{ instance.id }}" [value]="instance.id" formControlName="closeTo">
-                          <label class="form-check-label" for="closeTo-{{ instance.id }}">
-                            {{ instance.name }}
-                          </label>
-                        </div>
-                      </div>
+                    <div class="col-sm-4">
+                      <select class="form-select" name="operator">
+                        <option></option>
+                        <option value="==">Must be close to instances</option>
+                        <option value="==~">Should be close to instances</option>
+                        <option value="!=">Must be far from instances</option>
+                        <option value="!=~">Should be far from instances</option>
+                      </select>
                     </div>
-
-                    <div class="col-sm-6" formGroupName="affinity">
-                      <h5>Place far from</h5>
-
-                      <div class="select-list" tabindex="0">
-                        <div class="form-check">
-                          <input class="form-check-input" type="radio" id="farFrom" [value]="null" formControlName="farFrom">
-                          <label class="form-check-label" for="farFrom">
-                            (no preference)
-                          </label>
-                        </div>
-
-                        <div class="form-check" *ngFor="let instance of instances">
-                          <input class="form-check-input" type="radio" id="farFrom-{{ instance.id }}" [value]="instance.id" formControlName="farFrom">
-                          <label class="form-check-label" for="farFrom-{{ instance.id }}">
-                            {{ instance.name }}
-                          </label>
-                        </div>
-                      </div>
+                    <div class="col-sm-3">
+                      <select class="form-select" name="target">
+                        <option></option>
+                        <option value="instance">Named like</option>
+                        <option value="tagName">Tagged with</option>
+                      </select>
                     </div>
-
-                    <div class="col-sm" formGroupName="affinity">
-                      <div class="form-check ms-0">
-                        <input class="form-check-input" type="checkbox" id="strict" formControlName="strict">
-                        <label class="form-check-label" for="strict">
-                          Provision only when the affinity criteria are met
-                        </label>
-                      </div>
+                    <div class="col-sm-4">
+                      <input type="text" class="form-control" placeholder="Value">
+                    </div>
+                    <div class="col-sm-1">
+                      <button class="btn btn-outline-info">
+                        <fa-icon icon="plus"></fa-icon>
+                      </button>
                     </div>
                   </div>
                 </div>
diff --git a/app/src/app/instances/instance-wizard/instance-wizard.component.ts b/app/src/app/instances/instance-wizard/instance-wizard.component.ts
index 0889be8..f7282bd 100644
--- a/app/src/app/instances/instance-wizard/instance-wizard.component.ts
+++ b/app/src/app/instances/instance-wizard/instance-wizard.component.ts
@@ -372,6 +372,8 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
           mountpoint: volume.mountpoint
         }));
 
+    console.log(this.editorForm.get('affinity'));
+
     this.instancesService.add(instance)
       .subscribe(x =>
       {
diff --git a/app/src/app/instances/instances.component.html b/app/src/app/instances/instances.component.html
index 50ebdb3..3cfd595 100644
--- a/app/src/app/instances/instances.component.html
+++ b/app/src/app/instances/instances.component.html
@@ -276,7 +276,7 @@
   <fieldset class="filters">
     <ng-container formGroupName="filters">
       <div class="dropdown-header">{{ 'dashboard.list.filterByState' | translate }}</div>
-      <div class="btn-group w-100 mb-3" dropdown>
+      <div class="btn-group w-100" dropdown>
         <button class="btn btn-state-filter dropdown-toggle d-flex justify-content-between align-items-center"
                 dropdownToggle>
           <span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">
@@ -313,13 +313,18 @@
         </ul>
       </div>
 
-      <div class="dropdown-header">{{ 'dashboard.list.filterByMemory' | translate }}</div>
-      <ngx-slider class="mb-4" formControlName="memoryFilter" [options]="memoryFilterOptions"></ngx-slider>
+      <ng-container *ngIf="memoryFilterOptions.stepsArray.length > 1">
+        <div class="dropdown-header">{{ 'dashboard.list.filterByMemory' | translate }}</div>
+        <ngx-slider class="mb-4" formControlName="memoryFilter" [options]="memoryFilterOptions"></ngx-slider>
+      </ng-container>
 
-      <div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
-      <ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
+      <ng-container *ngIf="diskFilterOptions.stepsArray.length > 1">
+        <div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
+        <ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
+      </ng-container>
 
-      <button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
+      <button *ngIf="memoryFilterOptions.stepsArray.length > 1 && diskFilterOptions.stepsArray.length > 1" 
+        class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
         {{ 'dashboard.list.resetFilters' | translate }}
       </button>
     </ng-container>
diff --git a/app/src/app/instances/instances.component.scss b/app/src/app/instances/instances.component.scss
index 7285ab6..4363ec5 100644
--- a/app/src/app/instances/instances.component.scss
+++ b/app/src/app/instances/instances.component.scss
@@ -109,6 +109,11 @@
 .filters
 {
   width: 240px;
+
+  .btn-group + *
+  {
+    margin-top: 1rem;
+  }
 }
 
 .form-check-label