Skip to content

Commit

Permalink
Settings for WebServices (#158)
Browse files Browse the repository at this point in the history 
* More service settings for proxy

* Add proxy settings for headers, disallow iframe

* Retreive data from the backend

* handle service config data from the backend

* only add webinterface settings if service has webinterface

---------

Co-authored-by: Philip Prinz <[email protected]>
  • Loading branch information
@jggoebel
jggoebel and Philip Prinz authored Mar 16, 2023
1 parent 27fbedd commit 2850f4a
Show file tree
Hide file tree
Showing 6 changed files with 354 additions and 35 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import { DynamicHooksModule } from 'ngx-dynamic-hooks';
import { CtrComponent } from './step/ctr.component';
import { TerminalComponent } from './step/terminal/terminal.component';
import { ProgressService } from './data/progress.service';
import { PredefinedServiceService } from './data/predefinedservice.service';
import { RbacService } from './data/rbac.service';
import { RbacDirective } from './directives/rbac.directive';
import { ClarityDisableSelectionDirective } from './directives/clarity-disable-selection.directive';
Expand Down Expand Up @@ -205,6 +206,7 @@ export function jwtOptionsFactory() {
GargantuaClientFactory,
AppConfigService,
ProgressService,
PredefinedServiceService,
{
provide: APP_INITIALIZER,
useFactory: appInitializerFn,
Expand Down
190 changes: 173 additions & 17 deletions ...mtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<button class="btn btn-table btn-link" (click)="selectVMServiceModalOpen = true">
<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()">
Expand All @@ -13,15 +16,23 @@
<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)">
{{ interface.value.hasWebinterface ? interface.value.port : "-" }}
</td>
<td>{{ interface.value.hasOwnTab ? 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)">
<button
class="btn btn-table btn-link"
(click)="cloudConfig.removeVMService(interface.key)"
>
DELETE
</button>
</td>
Expand All @@ -33,13 +44,20 @@
<h3 class="modal-title">Choose a Service</h3>
<div class="modal-body">
<select clrSelect [(ngModel)]="selectedNewInterface">
<option *ngFor="let interface of predefinedInterfaces" [ngValue]="interface">
<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">
<button
type="button"
class="btn btn-outline"
(click)="selectVMServiceModalOpen = false"
>
Cancel
</button>
<button type="button" class="btn btn-primary" (click)="selectModalClose()">
Expand All @@ -54,41 +72,179 @@ <h3 class="modal-title">Create a new Sevice</h3>
<form clrForm [formGroup]="newVMServiceFormGroup">
<clr-input-container>
<label>Name</label>
<input clrInput placeholder="Webserver" name="name" formControlName="name" />
<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 />
<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" />
<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" />
<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" />
<input
type="text"
clrInput
placeholder="/dashboard"
name="input"
formControlName="path"
/>
</clr-input-container>
<clr-accordion class="advanced-settings">
<clr-accordion-panel>
<clr-accordion-title>Advanced Proxy Options</clr-accordion-title>
<clr-accordion-content *clrIfExpanded>
Some applications may require these proxy settings to be set
differently.
<clr-checkbox-container>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
value="noPathRewriting"
name="noPathRewriting"
formControlName="noPathRewriting"
/>
<label
>Disable Path Rewriting
<a
role="tooltip"
aria-haspopup="true"
class="tooltip tooltip-md tooltip-right"
>
<cds-icon shape="info-circle" size="24"></cds-icon>
<span class="tooltip-content"
>Disable path rewriting from /p/[vmid]/80/path to
/path.</span
>
</a>
</label>
</clr-checkbox-wrapper>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
value="proxyHostHeaderRewriting"
name="proxyHostHeaderRewriting"
formControlName="proxyHostHeaderRewriting"
/>
<label
>Host Header Rewriting
<a
role="tooltip"
aria-haspopup="true"
class="tooltip tooltip-md tooltip-top-right"
>
<cds-icon shape="info-circle" size="24"></cds-icon>
<span class="tooltip-content"
>Rewrite Host Header to the proxy server host</span
>
</a>
</label>
</clr-checkbox-wrapper>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
value="proxyOriginHeaderRewriting"
name="proxyOriginHeaderRewriting"
formControlName="proxyOriginHeaderRewriting"
/>
<label
>Origin Header Rewriting to localhost
<a
role="tooltip"
aria-haspopup="true"
class="tooltip tooltip-md tooltip-top-right"
>
<cds-icon shape="info-circle" size="24"></cds-icon>
<span class="tooltip-content"
>Rewrite Origin Header to localhost instead of proxy
Host</span
>
</a>
</label>
</clr-checkbox-wrapper>
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
value="disallowIFrame"
name="disallowIFrame"
formControlName="disallowIFrame"
/>
<label
>Disallow iFrame
<a
role="tooltip"
aria-haspopup="true"
class="tooltip tooltip-md tooltip-top-right"
>
<cds-icon shape="info-circle" size="24"></cds-icon>
<span class="tooltip-content"
>Force opening inside a new tab</span
>
</a>
</label>
</clr-checkbox-wrapper>
</clr-checkbox-container>
</clr-accordion-content>
</clr-accordion-panel>
</clr-accordion>
</ng-container>
<app-code-with-syntax-highlighting [textValue]="newVMServiceFormGroup.value['cloudConfigString']"
(textChanged)="newVMServiceFormGroup.controls.cloudConfigString.setValue($event)"></app-code-with-syntax-highlighting>
<app-code-with-syntax-highlighting
[textValue]="newVMServiceFormGroup.value['cloudConfigString']"
(textChanged)="
newVMServiceFormGroup.controls.cloudConfigString.setValue($event)
"
></app-code-with-syntax-highlighting>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="newVMServiceModalOpen = false">
<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>
</clr-modal>
3 changes: 3 additions & 0 deletions ...mtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.advanced-settings {
margin-top: 10px;
}
30 changes: 27 additions & 3 deletions .../vmtemplates/edit-vmtemplate/vmtemplate-service-form/vmtemplate-service-form.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { CloudInitConfig } from 'src/app/data/cloud-init-config';
import { PredefinedServiceService } from 'src/app/data/predefinedservice.service';
import {
getCloudConfigString,
VMTemplateServiceConfiguration,
Expand All @@ -12,8 +13,7 @@ import {
styleUrls: ['./vmtemplate-service-form.component.scss'],
})
export class VMTemplateServiceFormComponent implements OnInit {
public predefinedInterfaces: VMTemplateServiceConfiguration[] =
PredefinedWebInterfaces; //Placeholder until managed in Backend
public predefinedInterfaces: VMTemplateServiceConfiguration[];

@Input()
public cloudConfig: CloudInitConfig;
Expand All @@ -30,10 +30,13 @@ export class VMTemplateServiceFormComponent implements OnInit {
private DEFAULT_PORT = 80;
private DEFAULT_PATH = '/';

constructor(private fb: FormBuilder) {}
constructor(private fb: FormBuilder, private pdsService: PredefinedServiceService) {}

ngOnInit(): void {
this.buildNewVMServiceDetails();
this.pdsService.list().subscribe((vmtsc: VMTemplateServiceConfiguration[]) => {
this.predefinedInterfaces = vmtsc;
});
}

public buildNewVMServiceDetails(edit: boolean = false) {
Expand All @@ -46,6 +49,16 @@ export class VMTemplateServiceFormComponent implements OnInit {
edit ? this.editVMService.path ?? this.DEFAULT_PATH : this.DEFAULT_PATH,
],
hasOwnTab: [edit ? this.editVMService.hasOwnTab : false],
noPathRewriting: [edit ? this.editVMService.noRewriteRootPath : false],
proxyHostHeaderRewriting: [
edit ? this.editVMService.rewriteHostHeader : true,
],
proxyOriginHeaderRewriting: [
edit ? this.editVMService.rewriteOriginHeader : false,
],
disallowIFrame: [
edit ? this.editVMService.disallowIFrame : true,
],
cloudConfigString: [edit ? getCloudConfigString(this.editVMService) : ''],
hasWebinterface: [edit ? this.editVMService.hasWebinterface : false],
});
Expand All @@ -69,6 +82,17 @@ export class VMTemplateServiceFormComponent implements OnInit {
newVMService.port = this.newVMServiceFormGroup.get('port').value;
newVMService.path = this.newVMServiceFormGroup.get('path').value;
newVMService.hasOwnTab = this.newVMServiceFormGroup.get('hasOwnTab').value;
newVMService.noRewriteRootPath =
this.newVMServiceFormGroup.get('noPathRewriting').value;
newVMService.rewriteHostHeader = this.newVMServiceFormGroup.get(
'proxyHostHeaderRewriting'
).value;
newVMService.rewriteOriginHeader = this.newVMServiceFormGroup.get(
'proxyOriginHeaderRewriting'
).value;
newVMService.disallowIFrame = this.newVMServiceFormGroup.get(
'disallowIFrame'
).value;
newVMService.cloudConfigString =
this.newVMServiceFormGroup.get('cloudConfigString').value;
newVMService.cloudConfigMap = this.cloudConfig.buildMapFromString(
Expand Down
Loading

0 comments on commit 2850f4a

Please sign in to comment.