Merge pull request #94 from polypheny/docker-improvements

Various improvements to the Docker configuration

src/app/components/components.module.ts

@@ -91,15 +91,14 @@ import {JsonElemComponent} from './json/json-elem/json-elem.component';
 import {DataGraphComponent} from './data-view/data-graph/data-graph.component';
 import {DatesPipeModule} from './data-view/shared-module';
 import {LoadingScreenComponent} from './loading-screen/loading-screen.component';
-import {DockereditComponent} from './docker/dockeredit/dockeredit.component';
 import {DockerhandshakeComponent} from './docker/dockerhandshake/dockerhandshake.component';
-import {DockernewComponent} from './docker/dockernew/dockernew.component';
 import {DockersettingsComponent} from './docker/dockersettings/dockersettings.component';
 import {TreeModule} from '@ali-hm/angular-tree-component';
 import {ToastExposerComponent} from './toast-exposer/toast-exposer.component';
 import {ToastComponent as Toast} from './toast-exposer/toast/toast.component';
 import {ReloadButtonComponent} from '../views/util/reload-button/reload-button.component';
 import {ViewComponent} from './data-view/view/view.component';
+import {DockerInstanceComponent} from './docker/dockerinstance/dockerinstance.component';
 
 //import 'hammerjs';
 
@@ -192,14 +191,13 @@ import {ViewComponent} from './data-view/view/view.component';
         JsonTextComponent,
         JsonElemComponent,
         LoadingScreenComponent,
-        DockereditComponent,
         DockerhandshakeComponent,
-        DockernewComponent,
         DockersettingsComponent,
         ToastExposerComponent,
         Toast,
         ReloadButtonComponent,
-        ViewComponent
+        ViewComponent,
+        DockerInstanceComponent,
     ],
     exports: [
         BreadcrumbComponent,
@@ -217,13 +215,12 @@ import {ViewComponent} from './data-view/view/view.component';
         EditorComponent,
         DeleteConfirmComponent,
         LoadingScreenComponent,
-        DockereditComponent,
         DockerhandshakeComponent,
-        DockernewComponent,
         DockersettingsComponent,
         ToastExposerComponent,
         Toast,
-        ReloadButtonComponent
+        ReloadButtonComponent,
+        DockerInstanceComponent,
     ]
 })
 export class ComponentsModule {

src/app/components/docker/dockerhandshake/dockerhandshake.component.html

@@ -1,3 +1,11 @@
+<div *ngIf="handshake.status === 'NOT_RUNNING' || handshake.status === 'FAILED'" class="pt-3">
+    <div *ngIf="handshake.lastErrorMessage !== ''" class="alert alert-danger">
+        <strong>Connection attempt failed:</strong>
+        {{ handshake.lastErrorMessage }}
+    </div>
+    <button cButton (click)="redoHandshake()">Try again</button>
+</div>
+
 <div *ngIf="handshake.status === 'RUNNING' || handshake.status === 'NOT_RUNNING'" class="pt-3">
     <div *ngIf="handshake.status === 'RUNNING'" class="pb-3">
         <div class="d-flex align-items-center">
@@ -7,42 +15,36 @@
         </div>
     </div>
 
-    <div *ngIf="handshake.status === 'NOT_RUNNING' || handshake.status === 'FAILED'" class="pb-3">
-        <div *ngIf="handshake.lastErrorMessage != ''" class="alert alert-danger">
-            <strong>Connection attempt failed:</strong>
-            {{ handshake.lastErrorMessage }}
-        </div>
-        <button cButton color="primary" (click)="redoHandshake()">Try again</button>
-    </div>
-
-    Run the following command on <strong>{{ handshake.hostname }}:</strong><br>
-    <div *ngIf="handshake.containerExists === 'true'">
-        <div class="handshake-string p-3 mt-2">
-            <samp>{{ handshake.execCommand }}</samp><br>
+    <div *ngIf="handshake.status === 'RUNNING'">
+        Run the following command on <strong>{{ handshake.host.hostname }}:</strong><br>
+        <div *ngIf="handshake.containerExistsGuess">
+            <div class="handshake-string p-2 mt-2">
+                <samp>{{ handshake.execCommand }}</samp><br>
+            </div>
             <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.execCommand)">Copy</button>
+            <details>
+                <summary>No <tt>polypheny-docker-connector</tt> container exists?</summary>
+                Use this command:
+                <div class="handshake-string p-2">
+                    <samp>{{ handshake.runCommand }}</samp><br>
+                </div>
+                <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.runCommand)">Copy</button>
+            </details>
         </div>
-    </div>
-    <div *ngIf="handshake.containerExists === 'false'">
-        <div class="handshake-string p-3 mt-2">
-            <samp>{{ handshake.runCommand }}</samp><br>
-            <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.runCommand)">Copy</button>
-        </div>
-    </div><br>
 
-    <details *ngIf="handshake.containerExists === 'true'">
-        <summary>No <tt>polypheny-docker-connector</tt> container exists?</summary>
-        Use this command:<br>
-        <div class="handshake-string p-3">
-            <samp>{{ handshake.runCommand }}</samp><br>
+        <div *ngIf="!handshake.containerExistsGuess">
+            <div class="handshake-string p-2 mt-2">
+                <samp>{{ handshake.runCommand }}</samp><br>
+            </div>
             <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.runCommand)">Copy</button>
+            <details>
+                <summary>Is there a <tt>polypheny-docker-connector</tt> already running?</summary>
+                Use this command:
+                <div class="handshake-string p-2">
+                    <samp class="bg-secondary">{{ handshake.execCommand }}</samp><br>
+                </div>
+                <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.execCommand)">Copy</button>
+            </details>
         </div>
-    </details>
-    <details *ngIf="handshake.containerExists === 'false'">
-        <summary>Is there a <tt>polypheny-docker-connector</tt> already running?</summary>
-        Use this command:<br>
-        <div class="handshake-string p-3">
-            <samp>{{ handshake.execCommand }}</samp><br>
-            <button cButton color="secondary" class="mt-2" (click)="_util.clipboard(handshake.execCommand)">Copy</button>
-        </div>
-    </details>
+    </div>
 </div>

src/app/components/docker/dockerhandshake/dockerhandshake.component.scss

@@ -1,5 +1,5 @@
 .handshake-string {
-  background: var(--light);
-  word-break: break-word;
-  border-radius: 0.25rem;
+  background: var(--cui-light);
+  word-break: break-all;
+  border-radius: 0.2rem;
 }

src/app/components/docker/dockerhandshake/dockerhandshake.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
-import {Handshake} from '../../../models/docker.model';
+import {HandshakeInfo} from '../../../models/docker.model';
 import {UtilService} from '../../../services/util.service';
 
 @Component({
@@ -11,7 +11,7 @@ export class DockerhandshakeComponent implements OnInit {
 
     public readonly _util = inject(UtilService);
 
-    @Input() handshake: Handshake;
+    @Input() handshake: HandshakeInfo;
     @Output() cancel = new EventEmitter<void>();
     @Output() redo = new EventEmitter<void>();
 
@@ -21,11 +21,11 @@ export class DockerhandshakeComponent implements OnInit {
     ngOnInit(): void {
     }
 
-    cancelHandshake() {
-        this.cancel.emit();
+    redoHandshake(): void {
+        this.redo.emit();
     }
 
-    redoHandshake() {
-        this.redo.emit();
+    cancelHandshake(): void {
+        this.cancel.emit();
     }
 }