Add subpath to services (#151)

src/app/configuration/vmtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.html

@@ -1,71 +1,148 @@
-<button class="btn btn-table btn-link" (click)="selectVMServiceModalOpen = true">
-    <clr-icon shape="plus"></clr-icon> Add predefined Webinterface
+<button
+  class="btn btn-table btn-link"
+  (click)="selectVMServiceModalOpen = true"
+>
+  <clr-icon shape="plus"></clr-icon> Add predefined Service
 </button>
 <button class="btn btn-table btn-link" (click)="openNewVMServiceModal()">
-    <clr-icon shape="plus"></clr-icon> Add new Service
+  <clr-icon shape="plus"></clr-icon> Add new Service
 </button>
 <table class="table table-compact">
-    <th>Name</th>
-    <th>Port</th>
-    <th>Tab</th>
-    <th>Edit</th>
-    <th>Delete</th>
-    <tbody>
-        <tr *ngFor="let interface of cloudConfig.vmServices | keyvalue">
-            <td>{{ interface.value.name }}</td>
-            <td>{{ interface.value.port }}</td>
-            <td>{{ interface.value.hasOwnTab }}</td>
-            <td><button class="btn btn-table btn-link" (click)="editVMServiceClicked(interface.value)">EDIT</button>
-            </td>
-            <td><button class="btn btn-table btn-link"
-                    (click)="cloudConfig.removeVMService(interface.key)">DELETE</button></td>
-        </tr>
-    </tbody>
+  <th>Name</th>
+  <th>Port</th>
+  <th>Tab</th>
+  <th>Edit</th>
+  <th>Delete</th>
+  <tbody>
+    <tr *ngFor="let interface of cloudConfig.vmServices | keyvalue">
+      <td>{{ interface.value.name }}</td>
+      <td>{{ interface.value.port }}</td>
+      <td>{{ interface.value.hasOwnTab }}</td>
+      <td>
+        <button
+          class="btn btn-table btn-link"
+          (click)="editVMServiceClicked(interface.value)"
+        >
+          EDIT
+        </button>
+      </td>
+      <td>
+        <button
+          class="btn btn-table btn-link"
+          (click)="cloudConfig.removeVMService(interface.key)"
+        >
+          DELETE
+        </button>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-
 <clr-modal [(clrModalOpen)]="selectVMServiceModalOpen" [clrModalSize]="'sm'">
-    <h3 class="modal-title">Choose a Service</h3>
-    <div class="modal-body">
-        <select clrSelect [(ngModel)]="selectedNewInterface">
-            <option *ngFor="let interface of predefinedInterfaces" [ngValue]="interface">{{ interface.name }}
-            </option>
-        </select>
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="selectVMServiceModalOpen = false">Cancel</button>
-        <button type="button" class="btn btn-primary" (click)="selectModalClose()">Ok</button>
-    </div>
+  <h3 class="modal-title">Choose a Service</h3>
+  <div class="modal-body">
+    <select clrSelect [(ngModel)]="selectedNewInterface">
+      <option
+        *ngFor="let interface of predefinedInterfaces"
+        [ngValue]="interface"
+      >
+        {{ interface.name }}
+      </option>
+    </select>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-outline"
+      (click)="selectVMServiceModalOpen = false"
+    >
+      Cancel
+    </button>
+    <button type="button" class="btn btn-primary" (click)="selectModalClose()">
+      Ok
+    </button>
+  </div>
 </clr-modal>
 
 <clr-modal [(clrModalOpen)]="newVMServiceModalOpen">
-    <h3 class="modal-title">Create a new Sevice</h3>
-    <div class="modal-body">
-        <form clrForm [formGroup]="newVMServiceFormGroup">
-            <input clrInput placeholder="Name" name="name" formControlName="name" />
-            <clr-checkbox-container>
-                <clr-checkbox-wrapper>
-                    <input type="checkbox" clrCheckbox value="hasWebinterface" name="hasWebinterface"
-                        formControlName="hasWebinterface" />
-                    <label>Has a Webinterface</label>
-                </clr-checkbox-wrapper>
-            </clr-checkbox-container>
-            <ng-container *ngIf="newVMServiceFormGroup.value['hasWebinterface']">
-                <clr-checkbox-container>
-                    <clr-checkbox-wrapper>
-                        <input type="checkbox" clrCheckbox value="hasOwnTab" name="hasOwnTab"
-                            formControlName="hasOwnTab" />
-                        <label>Has it's own Tab in the UI</label>
-                    </clr-checkbox-wrapper>
-                </clr-checkbox-container>
-                <input type="number" clrInput placeholder="Port" name="input" formControlName="port" />
-            </ng-container>
-            <textarea clrTextarea style="width: 100%; height: 30vh; padding: 0;" name="cloudConfigString"
-                formControlName="cloudConfigString" required></textarea>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="newVMServiceModalOpen = false">Cancel</button>
-        <button type="button" class="btn btn-primary" (click)="newVMServiceClose()">Ok</button>
-    </div>
-</clr-modal>
+  <h3 class="modal-title">Create a new Sevice</h3>
+  <div class="modal-body">
+    <form clrForm [formGroup]="newVMServiceFormGroup">
+      <clr-input-container>
+        <label>Name</label>
+        <input
+          clrInput
+          placeholder="Webserver"
+          name="name"
+          formControlName="name"
+        />
+      </clr-input-container>
+      <clr-checkbox-container>
+        <clr-checkbox-wrapper>
+          <input
+            type="checkbox"
+            clrCheckbox
+            value="hasWebinterface"
+            name="hasWebinterface"
+            formControlName="hasWebinterface"
+            required
+          />
+          <label>Has a Webinterface</label>
+        </clr-checkbox-wrapper>
+      </clr-checkbox-container>
+      <ng-container *ngIf="newVMServiceFormGroup.value['hasWebinterface']">
+        <clr-checkbox-container>
+          <clr-checkbox-wrapper>
+            <input
+              type="checkbox"
+              clrCheckbox
+              value="hasOwnTab"
+              name="hasOwnTab"
+              formControlName="hasOwnTab"
+            />
+            <label>Has it's own Tab in the UI</label>
+          </clr-checkbox-wrapper>
+        </clr-checkbox-container>
+        <clr-input-container>
+          <label>Port</label>
+          <input
+            type="number"
+            clrInput
+            placeholder="80"
+            name="input"
+            formControlName="port"
+          />
+        </clr-input-container>
+        <clr-input-container>
+          <label>Path</label>
+          <input
+            type="text"
+            clrInput
+            placeholder="/dashboard"
+            name="input"
+            formControlName="path"
+          />
+        </clr-input-container>
+      </ng-container>
+      <textarea
+        clrTextarea
+        style="width: 100%; height: 30vh; padding: 0"
+        name="cloudConfigString"
+        formControlName="cloudConfigString"
+        required
+      ></textarea>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-outline"
+      (click)="newVMServiceModalOpen = false"
+    >
+      Cancel
+    </button>
+    <button type="button" class="btn btn-primary" (click)="newVMServiceClose()">
+      Ok
+    </button>
+  </div>
+</clr-modal>

src/app/configuration/vmtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.ts

@@ -1,112 +1,134 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { CloudInitConfig } from 'src/app/data/cloud-init-config';
-import { getCloudConfigString, VMTemplateServiceConfiguration } from 'src/app/data/vm-template-service-configuration';
+import {
+  getCloudConfigString,
+  VMTemplateServiceConfiguration,
+} from 'src/app/data/vm-template-service-configuration';
 
 @Component({
   selector: 'app-vmtemplate-service-form',
   templateUrl: './vmtemplate-service-form.component.html',
-  styleUrls: ['./vmtemplate-service-form.component.scss']
+  styleUrls: ['./vmtemplate-service-form.component.scss'],
 })
 export class VMTemplateServiceFormComponent implements OnInit {
-  public predefinedInterfaces: VMTemplateServiceConfiguration[] = PredefinedWebInterfaces //Placeholder until managed in Backend
+  public predefinedInterfaces: VMTemplateServiceConfiguration[] =
+    PredefinedWebInterfaces; //Placeholder until managed in Backend
 
   @Input()
   public cloudConfig: CloudInitConfig;
 
-
   public selectedNewInterface: VMTemplateServiceConfiguration = undefined;
   public newVMServiceFormGroup: FormGroup;
   public editVMService: VMTemplateServiceConfiguration;
 
   //Open/Close Modals
-  public editCloudConfigModalOpen: boolean = false
-  public selectVMServiceModalOpen: boolean = false
-  public newVMServiceModalOpen: boolean = false
+  public editCloudConfigModalOpen: boolean = false;
+  public selectVMServiceModalOpen: boolean = false;
+  public newVMServiceModalOpen: boolean = false;
+
+  private DEFAULT_PORT = 80;
+  private DEFAULT_PATH = '/';
 
-  constructor(
-    private fb: FormBuilder
-  ) { }
+  constructor(private fb: FormBuilder) {}
 
   ngOnInit(): void {
-    this.buildNewVMServiceDetails()
+    this.buildNewVMServiceDetails();
   }
 
   public buildNewVMServiceDetails(edit: boolean = false) {
     this.newVMServiceFormGroup = this.fb.group({
       name: [edit ? this.editVMService.name : ''],
-      port: [edit ? this.editVMService.port : undefined],
+      port: [
+        edit ? this.editVMService.port ?? this.DEFAULT_PORT : this.DEFAULT_PORT,
+      ],
+      path: [
+        edit ? this.editVMService.path ?? this.DEFAULT_PATH : this.DEFAULT_PATH,
+      ],
       hasOwnTab: [edit ? this.editVMService.hasOwnTab : false],
       cloudConfigString: [edit ? getCloudConfigString(this.editVMService) : ''],
-      hasWebinterface: [edit ? this.editVMService.hasWebinterface : false]
-    })
+      hasWebinterface: [edit ? this.editVMService.hasWebinterface : false],
+    });
   }
 
-
   openCloudInitSelect() {
-    this.selectVMServiceModalOpen = true
+    this.selectVMServiceModalOpen = true;
   }
 
   openNewVMServiceModal() {
-    this.buildNewVMServiceDetails()
-    this.newVMServiceModalOpen = true
+    this.buildNewVMServiceDetails();
+    this.newVMServiceModalOpen = true;
   }
 
-
-  newVMServiceClose() {   
-      let newVMService: VMTemplateServiceConfiguration = new VMTemplateServiceConfiguration()
-      newVMService.name = this.newVMServiceFormGroup.get('name').value;
-      newVMService.hasWebinterface = this.newVMServiceFormGroup.get('hasWebinterface').value;
-      newVMService.port = this.newVMServiceFormGroup.get('port').value;
-      newVMService.hasOwnTab = this.newVMServiceFormGroup.get('hasOwnTab').value;
-      newVMService.cloudConfigString = this.newVMServiceFormGroup.get('cloudConfigString').value;
-      newVMService.cloudConfigMap = this.cloudConfig.buildMapFromString(newVMService.cloudConfigString)
-      this.cloudConfig.addVMService(newVMService)
-      this.buildNewVMServiceDetails()
-      this.newVMServiceModalOpen = false
+  newVMServiceClose() {
+    let newVMService: VMTemplateServiceConfiguration =
+      new VMTemplateServiceConfiguration();
+    newVMService.name = this.newVMServiceFormGroup.get('name').value;
+    newVMService.hasWebinterface =
+      this.newVMServiceFormGroup.get('hasWebinterface').value;
+    newVMService.port = this.newVMServiceFormGroup.get('port').value;
+    newVMService.path = this.newVMServiceFormGroup.get('path').value;
+    newVMService.hasOwnTab = this.newVMServiceFormGroup.get('hasOwnTab').value;
+    newVMService.cloudConfigString =
+      this.newVMServiceFormGroup.get('cloudConfigString').value;
+    newVMService.cloudConfigMap = this.cloudConfig.buildMapFromString(
+      newVMService.cloudConfigString
+    );
+    this.cloudConfig.addVMService(newVMService);
+    this.buildNewVMServiceDetails();
+    this.newVMServiceModalOpen = false;
   }
 
   selectModalClose() {
-    this.selectedNewInterface.cloudConfigMap = this.cloudConfig.buildMapFromString(this.selectedNewInterface.cloudConfigString)
-    this.cloudConfig.addVMService(this.selectedNewInterface)
-    this.selectedNewInterface = undefined
-    this.selectVMServiceModalOpen = false
+    this.selectedNewInterface.cloudConfigMap =
+      this.cloudConfig.buildMapFromString(
+        this.selectedNewInterface.cloudConfigString
+      );
+    this.cloudConfig.addVMService(this.selectedNewInterface);
+    this.selectedNewInterface = undefined;
+    this.selectVMServiceModalOpen = false;
   }
 
   editVMServiceClicked(editVMService: VMTemplateServiceConfiguration) {
     this.editVMService = editVMService;
-    this.buildNewVMServiceDetails(true)
-    this.newVMServiceModalOpen = true
+    this.buildNewVMServiceDetails(true);
+    this.newVMServiceModalOpen = true;
   }
-
 }
 
-
-export const PredefinedWebInterfaces: VMTemplateServiceConfiguration[] = //This has to be modeled into a CRD and retrieved over the Backend
+export const PredefinedWebInterfaces: VMTemplateServiceConfiguration[] =
+  //This has to be modeled into a CRD and retrieved over the Backend
   [
     {
-      name: "VS Code IDE", port: 8080, hasOwnTab: true, cloudConfigMap: new Map(), hasWebinterface: true,
-      cloudConfigString:
-        `#cloud-config
+      name: 'VS Code IDE',
+      port: 8080,
+      path: '/?folder=/root',
+      hasOwnTab: true,
+      cloudConfigMap: new Map(),
+      hasWebinterface: true,
+      cloudConfigString: `#cloud-config
     runcmd:
         - export HOME=/root
         - curl -fsSL https://code-server.dev/install.sh > codeServerInstall.sh
         - /bin/sh codeServerInstall.sh && systemctl enable --now code-server@root
         - |
           sleep 5 && sed -i.bak 's/auth: password/auth: none/' ~/.config/code-server/config.yaml
         - sudo systemctl restart code-server@root
-    `
+    `,
     },
     {
-      name: "Test-Service without Webinterface", cloudConfigMap: new Map(), hasWebinterface: false,
-      cloudConfigString:
-        `#cloud-config
+      name: 'Test-Service without Webinterface',
+      cloudConfigMap: new Map(),
+      hasWebinterface: false,
+      cloudConfigString: `#cloud-config
     runcmd:
         - touch /root/test.txt
-    `
+    `,
     },
     {
-      name: "Test-Interface without Cloud Config", port: 8081, hasOwnTab: false, hasWebinterface: true,
-
-    }
-  ]
+      name: 'Test-Interface without Cloud Config',
+      port: 8081,
+      hasOwnTab: false,
+      hasWebinterface: true,
+    },
+  ];