Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FOGL-8115: Add Control Entry-points API Flow #332

Merged
merged 9 commits into from
Oct 3, 2023
Merged

FOGL-8115: Add Control Entry-points API Flow #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3aace8e
form validation related changes and other css fixes
MonikaSharma06 Sep 28, 2023
61657bd
changes wrt FOGL-8070
MonikaSharma06 Sep 28, 2023
5dd4504
removed bootstrap icon changes
MonikaSharma06 Sep 29, 2023
b5e1958
code refactoring as per feedback
MonikaSharma06 Sep 29, 2023
e9644a3
changes in variables modal to fix alignment issue and other feedback …
MonikaSharma06 Oct 3, 2023
e245770
changes in icon css
MonikaSharma06 Oct 3, 2023
6ecc939
Merge branch 'develop' into FOGL-8115
MonikaSharma06 Oct 3, 2023
98435b9
revert bootstrap icon css as same changes done in another branch
MonikaSharma06 Oct 3, 2023
812523a
minor change in variable override modal
MonikaSharma06 Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions ...onents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,8 @@ span.is-small {
[hidden] {
display: none !important;
}

.allow-list-text {
font-size: 0.7em;
color: gray;
}
45 changes: 21 additions & 24 deletions ...nents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,13 @@
<div class="field-body">
<div class="field">
<div class="control">
<input #name=ngModel name="af.name" class="input" type="text" placeholder="Name" required
[(ngModel)]="af.name" title="No single quotes and double quotes!" [ngModelOptions]="{standalone: true}"
<input formControlName="name" class="input" type="text" placeholder="Name" required title="No single quotes and double quotes!"
[pattern]="QUOTATION_VALIDATION_PATTERN" autocomplete="off"
[ngClass]="{'is-small':rolesService.hasControlAccess(), 'is-static static-field pb-4':!rolesService.hasControlAccess()}"
[readonly]="!rolesService.hasControlAccess()">
</div>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="help is-danger">
<div *ngIf="name.errors?.['required']">
<div *ngIf="apiFlowForm.controls['name'].invalid" class="help is-danger">
<div *ngIf=" apiFlowForm.controls['name'].touched && apiFlowForm.controls['name'].errors?.['required']">
*required
</div>
</div>
Expand Down Expand Up @@ -77,15 +76,13 @@
<div class="field">
<ngContainer *ngIf="selectedType === 'operation' && rolesService.hasControlAccess()">
<div class="control">
<input #operation_name=ngModel name="af.operation_name" class="input is-small" type="text" placeholder="Operation name" required
[(ngModel)]="af.operation_name" title="No single quotes and double quotes!" [ngModelOptions]="{standalone: true}"
<input formControlName="operation_name" class="input is-small" type="text" placeholder="Operation name"
title="No single quotes and double quotes!"
[pattern]="QUOTATION_VALIDATION_PATTERN" autocomplete="off">
</div>
<div *ngIf="operation_name.invalid && (operation_name.dirty || operation_name.touched)" class="help is-danger">
<div *ngIf="operation_name.errors?.['required']">
<div *ngIf="selectedType === 'operation' && apiFlowForm.controls.operation_name.value === ''" class="help is-danger">
*required
</div>
</div>
</ngContainer>
</div>

Expand Down Expand Up @@ -197,7 +194,7 @@
<label class="label is-small has-text-left">Variables</label>
</div>
<div class="field-body">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<button class="button px-0 pt-1 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand Down Expand Up @@ -240,7 +237,7 @@
<div class="columns">
<div class="column is-one-fifth"></div>
<div class="btn-column pt-2 pb-0 pl-2">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<button class="button px-0 pt-2 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand All @@ -257,7 +254,7 @@
<label class="label is-small has-text-left">Constants</label>
</div>
<div class="field-body">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('constants')">
<button class="button px-0 pt-1 is-small is-link is-light has-background-white" (click)="addValueControl('constants')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand Down Expand Up @@ -300,7 +297,7 @@
<div class="columns">
<div class="column is-one-fifth"></div>
<div class="btn-column pt-2 pb-0 pl-2">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white"
<button class="button px-0 pt-2 is-small is-link is-light has-background-white"
(click)="addValueControl('constants')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
Expand Down Expand Up @@ -371,7 +368,7 @@
[ngClass]="{'is-static pb-4':!rolesService.hasControlAccess()}"
[readonly]="!rolesService.hasControlAccess()">
</ng-template>
<p class="help">*Allow list will only be applicable when the anonymous access is disabled.</p>
<p class="help allow-list-text">*Allow list will only be applicable when the anonymous access is disabled.</p>
</div>
</div>
</div>
Expand All @@ -394,11 +391,11 @@
<div class="field">
<ng-container *ngIf="rolesService.hasControlAccess(); else staticDescription">
<div class="control">
<textarea rows="2" type="text" class="textarea is-small" placeholder="description" name="af.description" required
[(ngModel)]="af.description" trim="blur" #description="ngModel" [ngModelOptions]="{standalone: true}"></textarea>
<textarea rows="2" type="text" formControlName="description" class="textarea is-small" placeholder="description" required
trim="blur"></textarea>
</div>
<div *ngIf="description.invalid && (description.dirty || description.touched)" class="help is-danger">
<div *ngIf="description.errors?.['required']">
<div *ngIf="apiFlowForm.controls['description'].invalid" class="help is-danger">
<div *ngIf="apiFlowForm.controls['description'].touched && apiFlowForm.controls['description'].errors?.['required']">
*required
</div>
</div>
Expand All @@ -419,7 +416,7 @@
<div class="field">
<div class="columns">
<div class="column is-2">
<div *ngIf="editMode && allowExecute" class="field has-addons is-fullwidth">
<div *ngIf="editMode && af.permitted" class="field has-addons is-fullwidth">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All conditionals stuff with edit mode for permitted needs proper testing; for each role based user; and not auth mode.

<p class="control is-expanded">
<a class="button is-small is-fullwidth" (click)="checkAndRequestAPIFlow()">Execute</a>
</p>
Expand All @@ -439,7 +436,7 @@
</div>
</div>
</div>
<p *ngIf="editMode && !allowExecute && rolesService.hasControlAccess()" class="control">
<p *ngIf="editMode && !af.permitted && rolesService.hasControlAccess()" class="control">
<button class="button is-small is-danger is-outlined" type="button" (click)="openModal('confirmation-delete-dialog')">Delete</button>
</p>
</div>
Expand All @@ -450,7 +447,7 @@
</p>
<p class="control">
<button (click)="saveAPIFlow(apiFlowForm.value)" type="submit" class="button is-small is-link"
[disabled]="apiFlowForm?.invalid">Save</button>
[disabled]="apiFlowForm?.invalid || (selectedType === 'operation' && apiFlowForm.controls.operation_name.value.trim() === '')">Save</button>
</p>
</div>
</div>
Expand All @@ -476,8 +473,8 @@
</header>
<section class="modal-card-body">
<div class="columns">
<div class="column is-3"></div>
<div class="column pt-5">
<div class="column is-1"></div>
<div class="column py-5">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
Expand All @@ -489,7 +486,7 @@
<label class="label"></label>
</div>
<div class="field-body columns" [formGroupName]="i">
<div class="column is-3">
<div class="column is-4">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
Expand Down
26 changes: 19 additions & 7 deletions ...ponents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ export class AddEditAPIFlowComponent implements OnInit {
destinationNames = [];

editMode = false;
allowExecute = false;

apiFlowName: string;
af: APIFlow;

apiFlowForm: FormGroup;

allUsers: User[];
Expand All @@ -73,6 +73,9 @@ export class AddEditAPIFlowComponent implements OnInit {
private controlUtilsService: ControlUtilsService,
private router: Router) {
this.apiFlowForm = this.fb.group({
name: ['', Validators.required],
description: ['', Validators.required],
operation_name: [''],
variables: this.fb.array([]),
constants: this.fb.array([])
});
Expand All @@ -89,6 +92,7 @@ export class AddEditAPIFlowComponent implements OnInit {
type: 'write',
description: '',
operation_name: '',
permitted: false,
destination: 'broadcast',
constants: {},
variables: {},
Expand Down Expand Up @@ -170,17 +174,20 @@ export class AddEditAPIFlowComponent implements OnInit {
this.editMode = true;
this.ngProgress.done();
this.af = data;

this.apiFlowForm.get('name').setValue(data.name);
this.apiFlowForm.get('description').setValue(data.description);
if (data.type === 'operation') {
this.apiFlowForm.get('operation_name').setValue(data.operation_name);
}

if (this.af.destination !== 'broadcast') {
this.selectedDestinationName = this.af[this.af.destination];
}
this.selectedType = data.type;

// TODO: FOGL-8070
this.af.anonymous = data.anonymous === 't' || data.anonymous === true ? true : false;

this.fillParameters(data.variables, 'variables');
this.fillParameters(data.constants, 'constants');
this.allowExecute = data.anonymous === true || (data.anonymous === false && data.allow.includes(this.loggedInUsername));
}, error => {
/** request completed */
this.ngProgress.done();
Expand All @@ -194,9 +201,14 @@ export class AddEditAPIFlowComponent implements OnInit {

saveAPIFlow(data) {
let payload = this.af;


payload.name = data.name;
payload.description = data.description;
payload.type = this.selectedType;

if (payload.type === 'operation') {
payload.operation_name = data.operation_name;
}

const destination = this.af.destination.toLowerCase();
payload.destination = destination;
if (destination !== 'broadcast') {
Expand Down
60 changes: 32 additions & 28 deletions src/app/components/core/control-dispatcher/api-flow/api-flow.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
<ng-container *ngFor="let ep of apiFlows; let i = index">
<tr id="select{{i}}">
<td class="align-content">
<!-- TODO: 8070, this requires check the same way, we have in details page for this.allowExecute; Here we need to check for each record while rendering -->
<a *ngIf="ep.permitted" class="button is-ghost ep-name mx-0 px-0"
(click)="getAndExecuteAPIFlow(ep.name);">
{{ep.name}}
Expand Down Expand Up @@ -93,37 +92,42 @@
<button type="button" class="delete" aria-label="close" (click)="closeModal('confirmation-execute-dialog')"></button>
</header>
<section class="modal-card-body">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
<div class="field">
<ng-container formArrayName="variables">
<div *ngIf="getFormControls('variables').length === 0" class="has-text-centered">
<small class="text-secondary has-text-grey-light">
There are no variable parameters associated with this entry point.
</small>
</div>
<ng-container *ngFor="let v of getFormControls('variables'); let i = index">
<div class="field is-horizontal">
<div class="field-body columns" [formGroupName]="i">
<div class="column is-3">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
</div>
<div class="column is-4">
<div class="control">
<input formControlName="vValue" placeholder="Variable value" class="input is-small" name="value" type="text">
<div class="columns">
<div class="column is-1"></div>
<div class="column py-5">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
<div class="field">
<ng-container formArrayName="variables">
<div *ngIf="getFormControls('variables').length === 0" class="has-text-centered">
<small class="text-secondary has-text-grey-light">
There are no variable parameters associated with this entry point.
</small>
</div>
<ng-container *ngFor="let v of getFormControls('variables'); let i = index">
<div class="field is-horizontal">
<div class="field-body columns" [formGroupName]="i">
<div class="column is-4">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
</div>
<div class="column is-4">
<div class="control">
<input formControlName="vValue" placeholder="Variable value" class="input is-small" name="value" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
</section>
<footer class="modal-card-foot p-3">
<button class="button is-small" type="button" (click)="closeModal('confirmation-execute-dialog')">Cancel</button>
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/layout/side-menu/side-menu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@
ACLs
</a>
</li>
<!-- <li>
<li>
<a id="entry-point" routerLinkActive="is-active" routerLink='control-dispatcher/entry-points'>
API Entry Points
</a>
</li> -->
</li>
<li>
<a id="pipelines" routerLinkActive="is-active" routerLink='control-dispatcher/pipelines'>Pipelines</a>
</li>
Expand Down
1 change: 1 addition & 0 deletions src/app/models/control/api-flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
export class APIFlow {
name: string;
description: string;
permitted: boolean;
type: string;
operation_name?: string;
destination: string;
Expand Down
6 changes: 5 additions & 1 deletion src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,11 @@ a.dropdown-item:hover {
}

.plus-icon {
font-size: 0.70rem;
font-size: 0.80rem;
}

.bi:hover {
color: rgb(91, 89, 89);
}

.desc-text{
Expand Down