Skip to content

Commit

Permalink
Bugs corrected.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ligreman
ligreman committed Sep 19, 2022
1 parent 350b10d commit 6e57213
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 122 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "king",
"version": "3.0.0",
"version": "3.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand Down
43 changes: 24 additions & 19 deletions src/app/components/dialog-new-route/dialog-new-route.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,11 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {

btnExp(transform, field, op, value): void {
let out = '';

value = value.replace(/"/g, '').replace(/'/g, '');
// Si no tiene comillas dobles las añado
value = '"' + value + '"';

if (field && op && value) {
if (transform) {
out = transform;
Expand Down Expand Up @@ -525,25 +530,6 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {
body.tags = [];
}

// Si es http o https no admite sources y destionations
if (body.protocols.includes('http') || body.protocols.includes('https')) {
delete body.sources;
delete body.destinations;
}
// En caso de tcp, tls o udp no puede llevar methods, headers, paths o hosts
if (body.protocols.includes('tcp') || body.protocols.includes('tls') || body.protocols.includes('udp')) {
delete body.hosts;
delete body.methods;
delete body.paths;
delete body.headers;
}
// Para estos no hay que enviar strip_path, sources ni destinations
if (body.protocols.includes('grpc') || body.protocols.includes('grpcs')) {
delete body.strip_path;
delete body.sources;
delete body.destinations;
}

// Dependiendo del modo de router
if (!this.expressions) {
if (this.currentHosts && this.currentHosts.length > 0) {
Expand Down Expand Up @@ -585,6 +571,25 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {
}
}

// Si es http o https no admite sources y destionations
if (body.protocols.includes('http') || body.protocols.includes('https')) {
delete body.sources;
delete body.destinations;
}
// En caso de tcp, tls o udp no puede llevar methods, headers, paths o hosts
if (body.protocols.includes('tcp') || body.protocols.includes('tls') || body.protocols.includes('udp')) {
delete body.hosts;
delete body.methods;
delete body.paths;
delete body.headers;
}
// Para estos no hay que enviar strip_path, sources ni destinations
if (body.protocols.includes('grpc') || body.protocols.includes('grpcs')) {
delete body.strip_path;
delete body.sources;
delete body.destinations;
}

return body;
}
}
Expand Down
79 changes: 46 additions & 33 deletions src/app/components/dialog-new-rsu/dialog-new-rsu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,39 +83,6 @@ <h2 class="margin-bottom-5-i" fxLayout="row" fxLayoutAlign="space-between start"
</mat-error>
</mat-form-field>

<!--Métodos-->
<mat-form-field appearance="outline" color="accent" fxFlex="47">
<mat-label>{{'route.dialog.methods' | translate}}</mat-label>
<mat-select formControlName="methods" multiple>
<mat-option *ngFor="let method of validMethods" [value]="method">{{method}}</mat-option>
</mat-select>
<mat-icon matSuffix matTooltip="{{'route.dialog.methods_tooltip' | translate}}"
matTooltipClass="tooltip-teal">info_outline
</mat-icon>
</mat-form-field>
</div>

<div fxLayout="row" fxLayoutAlign="space-between center">
<!--Rutas-->
<mat-form-field appearance="outline" color="accent" fxFlex="73">
<mat-chip-list #chipList3 aria-label="">
<mat-chip (removed)="removePath(path)"
*ngFor="let path of currentPaths" removable="true">{{path}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input (matChipInputTokenEnd)="addPath($event)"
[matChipInputFor]="chipList3"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
formControlName="paths"
matChipInputAddOnBlur="true"
placeholder="{{'route.dialog.paths' | translate}}">
</mat-chip-list>
<mat-icon matSuffix matTooltip="{{'route.dialog.paths_tooltip' | translate}}"
matTooltipClass="tooltip-teal">info_outline
</mat-icon>
<mat-hint>{{'route.dialog.hosts_hint' | translate}}</mat-hint>
</mat-form-field>

<!-- Strip path-->
<div class="margin-bottom-10" fxFlex="23" fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox formControlName="strip_path">{{'route.dialog.strip_path' | translate}}</mat-checkbox>
Expand All @@ -124,6 +91,52 @@ <h2 class="margin-bottom-5-i" fxLayout="row" fxLayoutAlign="space-between start"
</mat-icon>
</div>
</div>

<div fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field appearance="standard" color="accent" fxFlex="15">
<mat-select #etransform placeholder="{{ 'route.dialog.transform' | translate}}">
<mat-option [value]=""></mat-option>
<mat-option *ngFor="let proto of validETransformsStrings" [fxShow]="eType==='string'"
[value]="proto">{{'route.dialog.transform_' + proto | translate}}</mat-option>
<mat-option *ngFor="let proto of validETransforms" [fxShow]="eType==='int'"
[value]="proto">{{'route.dialog.transform_' + proto | translate}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="standard" color="accent" fxFlex="15">
<mat-select #efield (selectionChange)="changeEField(efield.value)" placeholder="{{ 'route.dialog.field' | translate}}">
<mat-option *ngFor="let proto of validEFields" [value]="proto">{{ 'route.dialog.field_' + proto | translate}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="standard" color="accent" fxFlex="10">
<mat-select #eop placeholder="{{ 'route.dialog.operator' | translate}}">
<mat-option *ngFor="let proto of validEOpsStrings" [fxShow]="eType==='string'" [value]="proto">{{proto}}</mat-option>
<mat-option *ngFor="let proto of validEOpsIntegers" [fxShow]="eType==='int'" [value]="proto">{{proto}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="standard" color="accent" fxFlex="25">
<input #evalue aria-label="" matInput placeholder="{{ 'route.dialog.value' | translate}}" type="text"/>
</mat-form-field>
<button (click)="btnExp(etransform.value,efield.value,eop.value,evalue.value)" color="accent" mat-icon-button>
<mat-icon>add</mat-icon>
</button>
<button (click)="btnAppend('(')" aria-label="" color="accent" mat-icon-button>(</button>
<button (click)="btnAppend(')')" aria-label="" color="accent" mat-icon-button>)</button>
<button (click)="btnAppend(' && ')" aria-label="" color="accent" mat-icon-button>AND</button>
<button (click)="btnAppend(' || ')" aria-label="" color="accent" mat-icon-button>OR</button>
<mat-icon matSuffix matTooltip="{{'route.dialog.expression_tooltip' | translate}}"
matTooltipClass="tooltip-teal tooltip-multi">info_outline
</mat-icon>
</div>
<div class="margin-bottom-10" fxLayout="row" fxLayoutAlign="space-between start">
<!--Expresión-->
<mat-form-field appearance="outline" color="accent" fxFlex="100">
<mat-label>{{'route.dialog.expression' | translate}}</mat-label>
<input aria-label="" formControlName="expression" matInput required type="text"/>
<mat-error *ngIf="routeExpressionField.invalid">
{{ 'error.field_required' | translate }}
</mat-error>
</mat-form-field>
</div>
</div>

<p class="margin-top-20-i">{{'service.label' | translate}}</p>
Expand Down
99 changes: 50 additions & 49 deletions src/app/components/dialog-new-rsu/dialog-new-rsu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { isEmpty as _isEmpty, max as _max, min as _min, sortedUniq as _sortedUni
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { forkJoin } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { DialogHelperService } from '../../services/dialog-helper.service';
import { GlobalsService } from '../../services/globals.service';
import { ToastService } from '../../services/toast.service';
import { CustomValidators } from '../../shared/custom-validators';

Expand All @@ -21,20 +23,25 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
// Uso la variable para el estado del formulario
formValid = false;
validProtocols = ['http', 'https'];
validMethods = ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'HEAD', 'CONNECT', 'OPTIONS', 'TRACE'];
allTags = [];
currentTags = [];
currentPaths = [];
expressions = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];

validETransforms = [];
validETransformsStrings = ['lower'];
validEFields = ['http.method', 'http.host', 'http.path', 'http.headers.header_name', 'net.protocol', 'net.port', 'tls.sni'];
validEOpsStrings = ['==', '!=', '~', '^=', '=^', 'in', 'not in'];
validEOpsIntegers = ['==', '!=', '>', '>=', '<', '<='];
eType = 'string';


form = this.fb.group({
name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9\-._~]+$/)]],
tags: [''],
route: this.fb.group({
protocols: ['', [Validators.required, CustomValidators.isProtocolListValidForRoute(this.validProtocols)]],
methods: ['', []],
paths: [''],
expression: ['', [Validators.required]],
strip_path: [true]
}),
service: this.fb.group({
Expand All @@ -52,8 +59,7 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
paths_validation: ['']
}, {validators: [FinalFormValidator()]});

constructor(@Inject(MAT_DIALOG_DATA) public routeIdEdit: any, private fb: FormBuilder, private api: ApiService, private toast: ToastService,
public dialogRef: MatDialogRef<DialogNewRsuComponent>) { }
constructor(@Inject(MAT_DIALOG_DATA) public routeIdEdit: any, private fb: FormBuilder, private api: ApiService, private globals: GlobalsService, private toast: ToastService, public dialogRef: MatDialogRef<DialogNewRsuComponent>, private dialogHelper: DialogHelperService) { }

/*
Getters de campos del formulario
Expand All @@ -74,21 +80,27 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {

get routeProtocolsField() { return this.form.get('route.protocols'); }

get routeMethodsField() { return this.form.get('route.methods'); }
get routeExpressionField() { return this.form.get('route.expression'); }

get targetsField() { return this.form.get('upstream.targets');}

ngOnInit(): void {
// Lista de tags
this.api.getTags()
.subscribe((res) => {
// Recojo las tags
res['data'].forEach(data => {
this.allTags.push(data.tag);
this.dialogHelper.getRouterMode().then(() => {
// Si no estoy en modo expressions cambio la tabla
if (this.globals.ROUTER_MODE !== 'expressions') {
this.expressions = false;
}
// Lista de tags
this.api.getTags()
.subscribe((res) => {
// Recojo las tags
res['data'].forEach(data => {
this.allTags.push(data.tag);
});
this.allTags.sort();
this.allTags = _sortedUniq(this.allTags);
});
this.allTags.sort();
this.allTags = _sortedUniq(this.allTags);
});
}).catch(() => this.toast.error('error.route_mode'));
}

ngOnDestroy(): void {
Expand Down Expand Up @@ -147,33 +159,33 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
this.currentTags.push($event.option.viewValue);
}

/*
Gestión de rutas
*/
addPath(event: MatChipInputEvent): void {
const input = event.chipInput.inputElement;
const value = event.value.trim();
btnAppend(txt): void {
if (txt) {
this.form.get('route.expression').setValue(this.form.get('route.expression').value + txt);
}
}

// Add
if ((value || '') && /^\//.test(value) && !/\/\//.test(value)) {
this.currentPaths.push(value);
this.form.get('paths_validation').setValue('true');
btnExp(transform, field, op, value): void {
let out = '';

// Reset the input value
if (input) {
input.value = '';
value = value.replace(/"/g, '').replace(/'/g, '');
// Si no tiene comillas dobles las añado
value = '"' + value + '"';

if (field && op && value) {
if (transform) {
out = transform;
}
out += field + ' ' + op + ' ' + value;
this.form.get('route.expression').setValue(this.form.get('route.expression').value + out);
}
}

removePath(host): void {
const index = this.currentPaths.indexOf(host);
if (index >= 0) {
this.currentPaths.splice(index, 1);
if (this.currentPaths.length === 0) {
// Para poder consultar este campo en la validación final del formulario y saber si tiene algo
this.form.get('paths_validation').setValue(null);
}
changeEField(newField) {
if (newField === 'net.port') {
this.eType = 'int';
} else {
this.eType = 'string';
}
}

Expand All @@ -184,16 +196,6 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
body.tags = [];
}

if (this.currentPaths && this.currentPaths.length > 0) {
body.route.paths = this.currentPaths;
} else {
body.route.paths = [];
}

if (_isEmpty(this.routeMethodsField.value)) {
body.route.methods = [];
}

// Cálculo de slots del upstream
let slotis = body.upstream.targets * 100;
slotis = _max([10, slotis]);
Expand All @@ -216,8 +218,7 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
name: body.name,
service: {id: ''},
protocols: body.route.protocols,
methods: body.route.methods,
paths: body.route.paths,
expression: body.route.expression,
strip_path: body.route.strip_path,
tags: body.tags
},
Expand Down
2 changes: 1 addition & 1 deletion src/app/routes/architect/architect.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
<div fxFlex="25" id="graph-actions">
<mat-list>
<div class="subheader" mat-subheader>{{'architect.global_actions' | translate}}</div>
<mat-list-item>
<mat-list-item *ngIf="expressions">
<div mat-line>
<button (click)="addEdit(null, 'rsu')" mat-button>
<mat-icon class="color-route">timeline</mat-icon>&nbsp;
Expand Down
Loading

0 comments on commit 6e57213

Please sign in to comment.