From 386b3593ebe84a84ce11cb7b48355fda4ea44b47 Mon Sep 17 00:00:00 2001
From: Dragos <cojocaru.dragos@gmail.com>
Date: Mon, 31 May 2021 12:18:19 +0300
Subject: [PATCH] TRIX-16 display a button to toggle instance details

---
 .../app/instances/instances.component.html    | 15 ++++++++---
 app/src/app/instances/instances.component.ts  |  7 +++++
 app/src/app/shared.module.ts                  | 26 +++++++++----------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/app/src/app/instances/instances.component.html b/app/src/app/instances/instances.component.html
index 0064b05..50ebdb3 100644
--- a/app/src/app/instances/instances.component.html
+++ b/app/src/app/instances/instances.component.html
@@ -101,10 +101,19 @@
             <div class="row g-0">
               <div class="card-info" [ngClass]="showMachineDetails ? 'col-lg-4' : 'col'">
                 <div>
-                  <h5 class="card-title text-truncate" [tooltip]="instance.name" container="body" placement="top left"
+                  <div class="d-flex justify-content-between">
+                    <h5 class="card-title text-truncate" [tooltip]="instance.name" container="body" placement="top left"
                       [adaptivePosition]="false">
-                    {{ instance.name }}
-                  </h5>
+                      {{ instance.name }}
+                    </h5>
+
+                    <div class="btn-group btn-group-sm">
+                      <button class="btn btn-link text-info" tooltip="Toggle instances details" container="body"
+                        placement="top" [adaptivePosition]="false" (click)="toggleMachineDetails()">
+                        <fa-icon icon="expand-alt" [fixedWidth]="true" size="sm"></fa-icon>
+                      </button>
+                    </div>
+                  </div>
 
                   <div *ngIf="!instance.loading && instance.imageDetails"
                        class="text-truncate small text-info text-faded mb-1" [tooltip]="instance.imageDetails.description"
diff --git a/app/src/app/instances/instances.component.ts b/app/src/app/instances/instances.component.ts
index 2e018e7..20a0864 100644
--- a/app/src/app/instances/instances.component.ts
+++ b/app/src/app/instances/instances.component.ts
@@ -859,6 +859,13 @@ export class InstancesComponent implements OnInit, OnDestroy
     instance.refreshInfo = true;
   }
 
+  // ----------------------------------------------------------------------------------------------------------------
+  toggleMachineDetails()
+  {
+    this.showMachineDetails = !this.showMachineDetails;
+    this.editorForm.get('showMachineDetails').setValue(this.showMachineDetails);
+  }
+
   // ----------------------------------------------------------------------------------------------------------------
   private fillInInstanceDetails(instance: Instance)
   {
diff --git a/app/src/app/shared.module.ts b/app/src/app/shared.module.ts
index 28be3dd..d667ec3 100644
--- a/app/src/app/shared.module.ts
+++ b/app/src/app/shared.module.ts
@@ -23,6 +23,16 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import { ClipboardModule } from 'ngx-clipboard';
+import { AutofocusDirective } from './directives/autofocus.directive';
+import { InlineEditorComponent } from './components/inline-editor/inline-editor.component';
+import { PackagesComponent } from './catalog/packages/packages.component';
+import { FileSizePipe } from './pipes/file-size.pipe';
+import { AutosizeModule } from 'ngx-autosize';
+import { AlphaOnlyDirective } from './directives/alpha-only.directive';
+import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
+import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
+import { CustomImageEditorComponent } from './catalog/custom-image-editor/custom-image-editor.component';
+import { LazyLoadDirective } from './directives/lazy-load.directive';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -33,22 +43,10 @@ import
   faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
   faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
   faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
-  faUndo, faQuestionCircle
+  faUndo, faQuestionCircle, faExpandAlt
 } from '@fortawesome/free-solid-svg-icons';
 import { faDocker } from '@fortawesome/free-brands-svg-icons';
 
-import { AutofocusDirective } from './directives/autofocus.directive';
-
-import { InlineEditorComponent } from './components/inline-editor/inline-editor.component';
-import { PackagesComponent } from './catalog/packages/packages.component';
-import { FileSizePipe } from './pipes/file-size.pipe';
-import { AutosizeModule } from 'ngx-autosize';
-import { AlphaOnlyDirective } from './directives/alpha-only.directive';
-import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
-import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
-import { CustomImageEditorComponent } from './catalog/custom-image-editor/custom-image-editor.component';
-import { LazyLoadDirective } from './directives/lazy-load.directive';
-
 @NgModule({
   declarations: [
     AutofocusDirective,
@@ -149,7 +147,7 @@ export class SharedModule
       faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
       faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
       faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
-      faUndo, faQuestionCircle
+      faUndo, faQuestionCircle, faExpandAlt
     );
   }
 }