-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add cloud-init & Webservices to Admin-UI (#149)
* WIP: edit webinterfaces in own component * reafctor to vm template service comfiguration/form * fix json parse/stringify for vm-template-services * remove unused component, add get funcion for config string * refactor object to map --------- Co-authored-by: Philip Prinz <Philip.Prinz@sva.de>
- Loading branch information
Showing
13 changed files
with
408 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
...mtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <button class="btn btn-table btn-link" (click)="selectVMServiceModalOpen = true"> | ||
| <clr-icon shape="plus"></clr-icon> Add predefined Webinterface | ||
| </button> | ||
| <button class="btn btn-table btn-link" (click)="openNewVMServiceModal()"> | ||
| <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> | ||
| </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> | ||
| </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> |
Empty file.
25 changes: 25 additions & 0 deletions
25
...mplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { VMTemplateServiceFormComponent } from './vmtemplate-service-form.component'; | ||
|
|
||
| describe('VMTemplateServiceFormComponent', () => { | ||
| let component: VMTemplateServiceFormComponent; | ||
| let fixture: ComponentFixture<VMTemplateServiceFormComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ VMTemplateServiceFormComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(VMTemplateServiceFormComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
112 changes: 112 additions & 0 deletions
112
.../vmtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| 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'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-vmtemplate-service-form', | ||
| templateUrl: './vmtemplate-service-form.component.html', | ||
| styleUrls: ['./vmtemplate-service-form.component.scss'] | ||
| }) | ||
| export class VMTemplateServiceFormComponent implements OnInit { | ||
| 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 | ||
|
|
||
| constructor( | ||
| private fb: FormBuilder | ||
| ) { } | ||
|
|
||
| ngOnInit(): void { | ||
| this.buildNewVMServiceDetails() | ||
| } | ||
|
|
||
| public buildNewVMServiceDetails(edit: boolean = false) { | ||
| this.newVMServiceFormGroup = this.fb.group({ | ||
| name: [edit ? this.editVMService.name : ''], | ||
| port: [edit ? this.editVMService.port : undefined], | ||
| hasOwnTab: [edit ? this.editVMService.hasOwnTab : false], | ||
| cloudConfigString: [edit ? getCloudConfigString(this.editVMService) : ''], | ||
| hasWebinterface: [edit ? this.editVMService.hasWebinterface : false] | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| openCloudInitSelect() { | ||
| this.selectVMServiceModalOpen = true | ||
| } | ||
|
|
||
| openNewVMServiceModal() { | ||
| 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 | ||
| } | ||
|
|
||
| selectModalClose() { | ||
| 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 | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
| 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 | ||
| 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 | ||
| runcmd: | ||
| - touch /root/test.txt | ||
| ` | ||
| }, | ||
| { | ||
| name: "Test-Interface without Cloud Config", port: 8081, hasOwnTab: false, hasWebinterface: true, | ||
|
|
||
| } | ||
| ] |
Oops, something went wrong.