Skip to content

Commit

Permalink
- Usability improvements
Browse files Browse the repository at this point in the history 
- Architect: Wildcards in tag filters
  • Loading branch information
@ligreman
ligreman committed Nov 3, 2022
1 parent 6b5efca commit 6678bcb
Show file tree
Hide file tree
Showing 20 changed files with 1,316 additions and 1,243 deletions.
2,203 changes: 1,034 additions & 1,169 deletions package-lock.json
View file

Large diffs are not rendered by default.

50 changes: 25 additions & 25 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "king",
"version": "3.0.3",
"version": "3.0.4",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand All @@ -13,48 +13,48 @@
},
"private": true,
"dependencies": {
"@angular/animations": "14.2.3",
"@angular/cdk": "14.2.2",
"@angular/common": "14.2.3",
"@angular/compiler": "14.2.3",
"@angular/core": "14.2.3",
"@angular/flex-layout": "14.0.0-beta.40",
"@angular/forms": "14.2.3",
"@angular/material": "14.2.2",
"@angular/platform-browser": "14.2.3",
"@angular/platform-browser-dynamic": "14.2.3",
"@angular/router": "14.2.3",
"@angular/animations": "14.2.8",
"@angular/cdk": "14.2.6",
"@angular/common": "14.2.8",
"@angular/compiler": "14.2.8",
"@angular/core": "14.2.8",
"@angular/flex-layout": "14.0.0-beta.41",
"@angular/forms": "14.2.8",
"@angular/material": "14.2.6",
"@angular/platform-browser": "14.2.8",
"@angular/platform-browser-dynamic": "14.2.8",
"@angular/router": "14.2.8",
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@swimlane/ngx-charts": "20.1.0",
"file-saver": "2.0.5",
"hammerjs": "2.0.8",
"joi": "17.6.1",
"joi": "17.7.0",
"lodash": "4.17.21",
"luxon": "3.0.4",
"luxon": "3.1.0",
"moment": "2.29.4",
"ngx-auto-unsubscribe": "3.0.1",
"ngx-json-viewer": "3.1.0",
"ngx-toastr": "15.0.0",
"rxjs": "7.5.6",
"tslib": "2.4.0",
"ngx-json-viewer": "3.2.1-alpha.0",
"ngx-toastr": "15.2.1",
"rxjs": "7.5.7",
"tslib": "2.4.1",
"vis-data": "7.1.4",
"vis-network": "9.1.2",
"vis-util": "5.0.3",
"zone.js": "0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "14.2.3",
"@angular/cli": "14.2.3",
"@angular/compiler-cli": "14.2.3",
"@angular-devkit/build-angular": "14.2.8",
"@angular/cli": "14.2.8",
"@angular/compiler-cli": "14.2.8",
"@types/hammerjs": "2.0.41",
"@types/jasmine": "4.3.0",
"@types/jasminewd2": "2.0.10",
"@types/lodash": "4.14.185",
"@types/luxon": "3.0.1",
"@types/node": "18.7.20",
"@types/lodash": "4.14.187",
"@types/luxon": "3.0.2",
"@types/node": "18.11.9",
"codelyzer": "6.0.2",
"jasmine-core": "4.4.0",
"jasmine-core": "4.5.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.4.1",
"karma-chrome-launcher": "3.1.1",
Expand Down
14 changes: 13 additions & 1 deletion 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 @@ -129,13 +129,25 @@ <h2 class="margin-bottom-5-i" fxLayout="row" fxLayoutAlign="space-between start"
</div>
<div class="margin-bottom-10" fxLayout="row" fxLayoutAlign="space-between start">
<!--Expresión-->
<mat-form-field appearance="outline" color="accent" fxFlex="100">
<mat-form-field appearance="outline" color="accent" fxFlex="80">
<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>

<!--Priority-->
<mat-form-field appearance="outline" color="accent" fxFlex="20">
<mat-label>{{'route.dialog.priority' | translate}}</mat-label>
<input aria-label="" formControlName="priority" matInput required type="number"/>
<mat-error *ngIf="routePriorityField.hasError('required')">
{{ 'error.field_required' | translate }}
</mat-error>
<mat-error *ngIf="routePriorityField.invalid">
{{ 'route.dialog.error.regex_min_max' | translate }}
</mat-error>
</mat-form-field>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 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 @@ -42,6 +42,7 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
route: this.fb.group({
protocols: ['', [Validators.required, CustomValidators.isProtocolListValidForRoute(this.validProtocols)]],
expression: ['', [Validators.required]],
priority: [0, [CustomValidators.isNumber(), Validators.min(0), Validators.max(999999)]],
strip_path: [true]
}),
service: this.fb.group({
Expand Down Expand Up @@ -80,6 +81,8 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {

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

get routePriorityField() { return this.form.get('route.priority'); }

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

ngOnInit(): void {
Expand Down Expand Up @@ -218,6 +221,7 @@ export class DialogNewRsuComponent implements OnInit, OnDestroy {
service: {id: ''},
protocols: body.route.protocols,
expression: body.route.expression,
priority: body.route.priority,
strip_path: body.route.strip_path,
tags: body.tags
},
Expand Down
11 changes: 8 additions & 3 deletions src/app/routes/access/access-acls/access-acls.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,11 @@ export class AccessAclsComponent implements OnInit, OnDestroy {
/**
* Recarga los datos de consumidores
*/
reloadData() {
reloadData(cleanFilter = false) {
this.loading = true;
this.filter = '';
if (cleanFilter) {
this.filter = '';
}

this.getAcls();
this.getConsumers();
Expand Down Expand Up @@ -73,7 +75,10 @@ export class AccessAclsComponent implements OnInit, OnDestroy {
this.dataSource.sort = this.sort;
},
error: () => this.toast.error('error.node_connection'),
complete: () => this.loading = false
complete: () => {
this.loading = false;
this.applyFilter();
}
});
}

Expand Down
11 changes: 8 additions & 3 deletions src/app/routes/access/access-jwt/access-jwt.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ export class AccessJwtComponent implements OnInit, OnDestroy {
/**
* Recarga los datos de consumidores
*/
reloadData() {
reloadData(cleanFilter = false) {
this.loading = true;
this.filter = '';
if (cleanFilter) {
this.filter = '';
}

this.getJwtTokens();
this.getConsumers();
Expand Down Expand Up @@ -104,7 +106,10 @@ export class AccessJwtComponent implements OnInit, OnDestroy {
this.dataSource.sort = this.sort;
},
error: () => this.toast.error('error.node_connection'),
complete: () => this.loading = false
complete: () => {
this.loading = false;
this.applyFilter();
}
});
}

Expand Down
11 changes: 8 additions & 3 deletions src/app/routes/access/access-key/access-key.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ export class AccessKeyComponent implements OnInit, OnDestroy {
/**
* Recarga los datos de consumidores
*/
reloadData() {
reloadData(cleanFilter = false) {
this.loading = true;
this.filter = '';
if (cleanFilter) {
this.filter = '';
}

this.getApiKeys();
this.getConsumers();
Expand Down Expand Up @@ -104,7 +106,10 @@ export class AccessKeyComponent implements OnInit, OnDestroy {
this.dataSource.sort = this.sort;
},
error: () => this.toast.error('error.node_connection'),
complete: () => this.loading = false
complete: () => {
this.loading = false;
this.applyFilter();
}
});
}

Expand Down
21 changes: 17 additions & 4 deletions src/app/routes/access/element-consumer/element-consumer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,11 @@ export class ElementConsumerComponent implements OnInit, OnDestroy {
/**
* Recarga los datos de consumidores
*/
reloadData() {
reloadData(cleanFilter = false) {
this.loading = true;
this.filter = '';
if (cleanFilter) {
this.filter = '';
}

this.getConsumers();
this.getNodeInformation();
Expand All @@ -61,7 +63,10 @@ export class ElementConsumerComponent implements OnInit, OnDestroy {
this.dataSource.sort = this.sort;
},
error: () => this.toast.error('error.node_connection'),
complete: () => this.loading = false
complete: () => {
this.loading = false;
this.applyFilter();
}
});
}

Expand Down Expand Up @@ -97,7 +102,15 @@ export class ElementConsumerComponent implements OnInit, OnDestroy {
*/
addEditConsumer(selected = null) {
this.dialogHelper.addEdit(selected, 'consumer')
.then(() => { this.reloadData(); })
.then(() => {
if (selected) {
// Edición
this.reloadData();
} else {
// Creación
this.reloadData(true);
}
})
.catch(error => {});
}

Expand Down
3 changes: 2 additions & 1 deletion src/app/routes/architect/architect.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
<span *ngIf="!netFilter.mode">OR</span>
</mat-slide-toggle>
<mat-label>{{ 'architect.filter' | translate}}</mat-label>
<input (keyup.enter)="filterGraphByTag()" [(ngModel)]="netFilter.tag" matInput type="text">
<input (keyup.enter)="filterGraphByTag()" [(ngModel)]="netFilter.tag" matInput matTooltip="{{ 'architect.filter_hint' | translate }}"
matTooltipClass="tooltip-teal" type="text">
<button (click)="netFilter.tag=''; filterGraphByTag()" mat-icon-button matSuffix>
<mat-icon>close</mat-icon>
</button>
Expand Down
64 changes: 61 additions & 3 deletions src/app/routes/architect/architect.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class ArchitectComponent implements OnInit, OnDestroy, AfterViewInit {
// Plugins activos
enabledPlugins = [];
// Filtros del grafo
netFilter = {tag: '', element: 'all', mode: true};
netFilter = {tag: '', element: 'all', mode: false};
// Posibles tipos de nodos que tienen acciones propias
groupsInfo = ['service', 'route', 'upstream', 'target', 'plugin'];
othersInfo = ['acl', 'key', 'jwt'];
Expand Down Expand Up @@ -286,16 +286,42 @@ export class ArchitectComponent implements OnInit, OnDestroy, AfterViewInit {
newData.upstreams = newData.upstreams.concat(_filter(this.dataApi.upstreams, {tags: theTags}));
newData.consumers = newData.consumers.concat(_filter(this.dataApi.consumers, {tags: theTags}));
newData.plugins = newData.plugins.concat(_filter(this.dataApi.plugins, {tags: theTags}));

// Ahora añado las tags que son regExp
let regexpTags = [];
for (const tag of theTags) {
if (tag.indexOf('*') !== -1) {
regexpTags.push('#-#' + tag.replace(/\*/g, '(.*)'));
}
}

for (const rTag of regexpTags) {
newData.services = newData.services.concat(_filter(this.dataApi.services, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.routes = newData.routes.concat(_filter(this.dataApi.routes, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.upstreams = newData.upstreams.concat(_filter(this.dataApi.upstreams, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.consumers = newData.consumers.concat(_filter(this.dataApi.consumers, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.plugins = newData.plugins.concat(_filter(this.dataApi.plugins, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
}
}
// OR
else {
theTags.forEach(tag => {
for (const tag of theTags) {
newData.services = newData.services.concat(_filter(this.dataApi.services, {tags: [tag]}));
newData.routes = newData.routes.concat(_filter(this.dataApi.routes, {tags: [tag]}));
newData.upstreams = newData.upstreams.concat(_filter(this.dataApi.upstreams, {tags: [tag]}));
newData.consumers = newData.consumers.concat(_filter(this.dataApi.consumers, {tags: [tag]}));
newData.plugins = newData.plugins.concat(_filter(this.dataApi.plugins, {tags: [tag]}));
});

if (tag.indexOf('*') !== -1) {
const rTag = '#-#' + tag.replace(/\*/g, '(.*)');

newData.services = newData.services.concat(_filter(this.dataApi.services, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.routes = newData.routes.concat(_filter(this.dataApi.routes, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.upstreams = newData.upstreams.concat(_filter(this.dataApi.upstreams, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.consumers = newData.consumers.concat(_filter(this.dataApi.consumers, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
newData.plugins = newData.plugins.concat(_filter(this.dataApi.plugins, function (o) { return (new RegExp(rTag).test('#-#' + o.tags.join('#-#'))); }));
}
}

// Elimino duplicados
newData.services = _uniq(newData.services);
Expand Down Expand Up @@ -1005,3 +1031,35 @@ function generateElement(arrayOfP) {

return element;
}

function filterRegExpTags(source, tags) {
// {tags: [tag]}
// obj = {tags:[na, dos, tres]}
// return true/false
// Si obj.tags contiene las tags que le
let newSource = [];

let regexpTags = [];
for (const tag of tags) {
if (tag.indexOf('*') !== -1) {
regexpTags.push('/^' + tag.replace(/\*/g, '.*') + '/');
}
}
for (const rTag of regexpTags) {
_filter(source, function (o) {
return (new RegExp(rTag).test(o.tags));
});
}

for (const elem of source) {
for (const tag of tags) {
if (elem.tags.includes(tag)) {
_filter(elem.tags, function (o) {
return (new RegExp('/^hh/').test(o.tags));
});
}
}
}

return newSource;
}
21 changes: 17 additions & 4 deletions src/app/routes/certificates/certificate-cacert/certificate-cacert.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ export class CertificateCacertComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
}

reloadData() {
reloadData(cleanFilter = false) {
this.loading = true;
this.filter = '';
if (cleanFilter) {
this.filter = '';
}

this.getCerts();
}
Expand All @@ -52,7 +54,10 @@ export class CertificateCacertComponent implements OnInit, OnDestroy {
this.dataSource.sort = this.sort;
},
error: () => this.toast.error('error.node_connection'),
complete: () => this.loading = false
complete: () => {
this.loading = false;
this.applyFilter();
}
});
}

Expand All @@ -70,7 +75,15 @@ export class CertificateCacertComponent implements OnInit, OnDestroy {
*/
addEditCert(selected = null) {
this.dialogHelper.addEdit(selected, 'cacert')
.then(() => { this.reloadData(); })
.then(() => {
if (selected) {
// Edición
this.reloadData();
} else {
// Creación
this.reloadData(true);
}
})
.catch(() => {});
}

Expand Down
Loading

0 comments on commit 6678bcb

Please sign in to comment.