diff options
Diffstat (limited to 'cds-ui')
28 files changed, 933 insertions, 366 deletions
diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json index 59ad17a7a..9c6f59ec1 100644 --- a/cds-ui/designer-client/angular.json +++ b/cds-ui/designer-client/angular.json @@ -82,8 +82,8 @@ }, { "type": "anyComponentStyle", - "maximumWarning": "16kb", - "maximumError": "20kb" + "maximumWarning": "25kb", + "maximumError": "30kb" } ] } @@ -155,4 +155,4 @@ } }, "defaultProject": "designer-client" -}
\ No newline at end of file +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index a281aafae..4ce93057a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -82,7 +82,7 @@ <div class="container-fluid body-container"> - + <ngx-ui-loader></ngx-ui-loader> <div class="container"> <div class="creat-action-container"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 7ca429dff..8ba7ea030 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -1,25 +1,26 @@ -import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; -import {PackageCreationStore} from '../package-creation/package-creation.store'; -import {FilesContent, FolderNodeElement} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; -import {MetadataTabComponent} from '../package-creation/metadata-tab/metadata-tab.component'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { PackageCreationStore } from '../package-creation/package-creation.store'; +import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import { MetadataTabComponent } from '../package-creation/metadata-tab/metadata-tab.component'; import * as JSZip from 'jszip'; -import {ConfigurationDashboardService} from './configuration-dashboard.service'; -import {TemplateTopology, CBADefinition} from '../package-creation/mapping-models/definitions/CBADefinition'; -import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; -import {PackageCreationUtils} from '../package-creation/package-creation.utils'; -import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; -import {saveAs} from 'file-saver'; -import {DesignerStore} from '../designer/designer.store'; -import {ToastrService} from 'ngx-toastr'; -import {NgxFileDropEntry} from 'ngx-file-drop'; -import {PackageCreationService} from '../package-creation/package-creation.service'; -import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; -import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service'; -import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; -import {Subject, throwError} from 'rxjs'; +import { ConfigurationDashboardService } from './configuration-dashboard.service'; +import { TemplateTopology, CBADefinition } from '../package-creation/mapping-models/definitions/CBADefinition'; +import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model'; +import { PackageCreationUtils } from '../package-creation/package-creation.utils'; +import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder'; +import { saveAs } from 'file-saver'; +import { DesignerStore } from '../designer/designer.store'; +import { ToastrService } from 'ngx-toastr'; +import { NgxFileDropEntry } from 'ngx-file-drop'; +import { PackageCreationService } from '../package-creation/package-creation.service'; +import { ComponentCanDeactivate } from '../../../../common/core/canDactivate/ComponentCanDeactivate'; +import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { Subject, throwError } from 'rxjs'; +import { NgxUiLoaderService } from 'ngx-ui-loader'; @Component({ selector: 'app-configuration-dashboard', @@ -28,13 +29,13 @@ import {Subject, throwError} from 'rxjs'; }) export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); - @ViewChild(MetadataTabComponent, {static: false}) + @ViewChild(MetadataTabComponent, { static: false }) metadataTabComponent: MetadataTabComponent; public customActionName = ''; entryDefinitionKeys: string[] = ['template_tags', 'user-groups', 'author-email', 'template_version', 'template_name', 'template_author', 'template_description']; - @ViewChild('nameit', {static: true}) + @ViewChild('nameit', { static: true }) elementRef: ElementRef; uploadedFiles = []; zipFile: JSZip = new JSZip(); @@ -61,6 +62,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl private router: Router, private designerStore: DesignerStore, private toastService: ToastrService, + private ngxService: NgxUiLoaderService, private packageCreationExtractionService: PackageCreationExtractionService ) { super(); @@ -69,6 +71,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } ngOnInit() { + this.ngxService.start(); this.vlbDefinition.topology_template = new TemplateTopology(); this.packageCreationStore.state$ .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), @@ -112,19 +115,26 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl this.downloadCBAPackage(bluePrintDetailModels); this.packageCreationStore.clear(); } + }, err => { }, + () => { + // this.ngxService.stop(); }); } private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) { this.configurationDashboardService.downloadResource( this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); - this.currentBlob = blob; - this.packageCreationExtractionService.extractBlobToStore(blob); - }); + const blob = new Blob([response], { type: 'application/octet-stream' }); + this.currentBlob = blob; + this.packageCreationExtractionService.extractBlobToStore(blob); + }, err => { }, + () => { + this.ngxService.stop(); + }); } editBluePrint() { + this.ngxService.start(); this.configurationDashboardService.deletePackage(this.viewedPackage.id).subscribe(res => { this.formTreeData(); this.saveBluePrintToDataBase(); @@ -148,7 +158,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.savePackage(blob).subscribe( bluePrintDetailModels => { @@ -162,6 +172,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl }, error => { this.toastService.error('error happened when editing ' + error.message); console.log('Error -' + error.message); + }, () => { + this.ngxService.stop(); }); }); } @@ -191,20 +203,23 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } downloadPackage(artifactName: string, artifactVersion: string) { + this.ngxService.start(); this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + const blob = new Blob([response], { type: 'application/octet-stream' }); saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip'); + this.ngxService.stop(); }); } deployCurrentPackage() { + this.ngxService.start(); this.formTreeData(); this.deployPackage(); } goToDesignerMode(id) { - this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]); + this.router.navigate(['/packages/designer', id, { actionName: this.customActionName }]); } public dropped(files: NgxFileDropEntry[]) { @@ -226,6 +241,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } enrichBluePrint() { + this.ngxService.start(); this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology); this.formTreeData(); this.enrichPackage(); @@ -236,11 +252,11 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl private enrichPackage() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.enrichPackage(blob).subscribe(response => { console.log('success'); - const blobInfo = new Blob([response], {type: 'application/octet-stream'}); + const blobInfo = new Blob([response], { type: 'application/octet-stream' }); this.currentBlob = blobInfo; this.packageCreationStore.clear(); this.packageCreationExtractionService.extractBlobToStore(this.currentBlob); @@ -250,12 +266,14 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl }, error => { this.toastService.error('error happened when enrich ' + error.message); console.error('Error -' + error.message); + }, () => { + this.ngxService.stop(); }); } private deployPackage() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.deploy(blob).subscribe(response => { this.toastService.info('deployed successfully '); @@ -265,6 +283,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl }); }, error => { this.handleError(error); + }, () => { + this.ngxService.stop(); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html index f7ba40ce1..65703ee2c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html @@ -3,7 +3,7 @@ <div class="col"> <div class="form-group"> <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action Name" value="resource-assignment"> + <input type="text" class="form-control" placeholder="Action Name" readonly [value]="actionName"> </div> </div> </div> @@ -14,13 +14,14 @@ <div class="row"> <div class="col pr-0 text-center"> <button type="button" data-toggle="modal" data-target="#exampleModalScrollable" - class="btn btn-secondary"><i class="icon-custom-attribute" type="button" - aria-hidden="true"></i></button> + class="btn btn-secondary"><i class="icon-custom-attribute" type="button" + aria-hidden="true"></i></button> <span>Custom Attribute</span> </div> <div class="col text-center"> - <button type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button" - aria-hidden="true"></i></button> + <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button" + data-toggle="modal" data-target="#exampleModalScrollable3" class="btn btn-secondary"><i + class="icon-function-attribute" type="button" aria-hidden="true"></i></button> <span>Function Attribute</span> </div> </div> @@ -32,7 +33,7 @@ <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" - aria-expanded="true" aria-controls="collapseOne"> + aria-expanded="true" aria-controls="collapseOne"> Inputs </button> </h2> @@ -44,15 +45,16 @@ <div class="form-group" *ngFor="let input of inputs"> <label for="exampleFormControlTextarea1">{{input.name}} <i [hidden]="!input.required" class="icon-required-star" type="button" - aria-hidden="true"></i> - <i [hidden]="input.required" type="button" aria-hidden="true"></i> + aria-hidden="true"></i> + <i [hidden]="input.required" class="icon-required-star optional-attribute" + type="button" aria-hidden="true"></i> </label> <div class="attributeOptions"> <a data-toggle="modal" data-target="#exampleModalScrollable2" - class="accordion-delete editAttribute" tooltip="Edit Attribute" - placement="bottom"><i class="icon-edit"></i></a> + class="accordion-delete editAttribute" tooltip="Edit Attribute" + placement="bottom"><i class="icon-edit"></i></a> <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute" - placement="bottom"><i class="icon-delete-sm"></i></a> + placement="bottom"><i class="icon-delete-sm"></i></a> </div> </div> </div> @@ -67,7 +69,7 @@ <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" - aria-expanded="true" aria-controls="collapseTwo"> + aria-expanded="true" aria-controls="collapseTwo"> Outputs </button> </h2> @@ -79,10 +81,10 @@ <div class="col"> <div class="form-group" *ngFor="let output of outputs"> <label for="exampleFormControlTextarea1">{{output.name}} - <i [hidden]="output.required" class="icon-required-star" type="button" - aria-hidden="true"></i> - <i [hidden]="!output.required" class="optional-attribute" type="button" - aria-hidden="true"></i> + <i [hidden]="!output.required" class="icon-required-star" type="button" + aria-hidden="true"></i> + <i [hidden]="output.required" class="icon-required-star optional-attribute" + type="button" aria-hidden="true"></i> </label> </div> @@ -95,14 +97,14 @@ </div> <!--Action - Add Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> + aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle"> Add Custom Attributes</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body createAttributeTabs"> @@ -110,29 +112,29 @@ <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" - aria-controls="home" aria-selected="true">Inputs</a> + aria-controls="home" aria-selected="true">Inputs</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" - aria-controls="profile" aria-selected="false">Outputs</a> + aria-controls="profile" aria-selected="false">Outputs</a> </li> </ul> <div class="tab-content" id="myTabContent"> <!--INPUTS Tab--> <div class="tab-pane fade show active create-form" id="home" role="tabpanel" - aria-labelledby="home-tab"> + aria-labelledby="home-tab"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control" - id="inputEmail3" placeholder="Attribute name"> + id="inputEmail3" placeholder="Attribute name"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control" - id="inputPassword3" placeholder="Add some description"> + id="inputPassword3" placeholder="Add some description"> </div> </div> <div class="form-group row"> @@ -140,25 +142,26 @@ <div class="col-sm-9"> <div class="list-group list-group-horizontal"> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('String')"> + (click)="setInputType('String')"> String </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('Integer')">Integer + (click)="setInputType('Integer')">Integer </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('Boolean')">Boolean + (click)="setInputType('Boolean')">Boolean </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('List')">List + (click)="setInputType('List')">List </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setInputType('Other')">Other + (click)="setInputType('Other')">Other </button> </div> <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2" - id="inputPassword4" placeholder="Add Other type name" [(ngModel)]="inputOtherType" - (change)="setInputType(inputOtherType)"> + id="inputPassword4" placeholder="Add Other type name" + [(ngModel)]="inputOtherType" + (change)="setInputType(inputOtherType)"> </div> </div> @@ -167,12 +170,12 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" - class="custom-control-input" (click)="setInputRequired(true)"> + class="custom-control-input" (click)="setInputRequired(true)"> <label class="custom-control-label" for="customRadioInline1">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" - class="custom-control-input" (click)="setInputRequired(false)"> + class="custom-control-input" (click)="setInputRequired(false)"> <label class="custom-control-label" for="customRadioInline2">False</label> </div> </div> @@ -184,41 +187,44 @@ <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control" - id="inputEmail3" placeholder="Attribute name"> + id="inputEmail3" placeholder="Attribute name"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control" - id="inputPassword3" placeholder="Add some description"> + id="inputPassword3" placeholder="Add some description"> </div> </div> <div class="form-group row"> <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label> <div class="col-sm-9"> <div class="list-group list-group-horizontal"> - <button type="button" class="list-group-item list-group-item-action">String</button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('Integer')"> + (click)="setOutputType('String')">String + </button> + <button type="button" class="list-group-item list-group-item-action" + (click)="setOutputType('Integer')"> Integer </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('Boolean')"> + (click)="setOutputType('Boolean')"> Boolean </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('List')"> + (click)="setOutputType('List')"> List </button> <button type="button" class="list-group-item list-group-item-action" - (click)="setOutputType('Other')"> + (click)="setOutputType('Other')"> Other </button> </div> <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2" - id="inputPassword3" placeholder="Add Other type name" [(ngModel)]="outputOtherType" - (change)="setOutputType(outputOtherType)"> + id="inputPassword3" placeholder="Add Other type name" + [(ngModel)]="outputOtherType" + (change)="setOutputType(outputOtherType)"> </div> </div> <div class="form-group row"> @@ -226,14 +232,14 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3" name="customRadioInline3" - class="custom-control-input" (click)="setOutputRequired(true)"> + class="custom-control-input" (click)="setOutputRequired(true)"> <label class="custom-control-label" for="customRadioInline3">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4" name="customRadioInline3" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline4" - (click)="setOutputRequired(false)">False</label> + (click)="setOutputRequired(false)">False</label> </div> </div> </div> @@ -247,16 +253,157 @@ </div> </div> </div> + +<!--Action - Add Attribute From Function - Modal--> +<div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog" + aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalScrollableTitle3"> + Add Attributes from Function</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <img src="assets/img/icon-close.svg"/> + </button> + </div> + <div class="modal-body createAttributeTabs"> + <!--Action - Inputs & Outputs Attribute--> + <ul class="nav nav-tabs" id="myTab" role="tablist"> + <li class="nav-item"> + <a class="nav-link active" id="home-tab" data-toggle="tab" href="#input" role="tab" + aria-controls="home" aria-selected="true">Inputs</a> + </li> + <li class="nav-item"> + <a class="nav-link" id="profile-tab" data-toggle="tab" href="#output" role="tab" + aria-controls="profile" aria-selected="false">Outputs</a> + </li> + </ul> + <div class="tab-content border-0 mt-2" id="myTabContent"> + <!--INPUTS Tab--> + <div class="tab-pane fade show active create-form" id="input" role="tabpanel" + aria-labelledby="input-tab"> + <div class="form-group row"> + <div class="col"> + <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes"> + <div class="container"> + <div *ngFor="let tempInput of tempInputs">{{tempInput}}</div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-6"> + <b class="listBoxTitle">1. Choose Function Name</b> + <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> + <input type="text" class="form-control input-search-controller" + placeholder="Functions"> + <div class="scrollWrapper" *ngFor="let step of steps"> + <a class="list-group-item list-group-item-action active" id="list-home-list" + data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i + class="icon-resource_resolution mr-1" aria-hidden="true"></i> + {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs( + this.designerState.template.workflows[actionName]['steps'][step]['target'] + )"></i></a> + </div> + </div> + </div> + <div class="col-6"> + <b class="listBoxTitle">2. Choose Input Attribute Name</b> + <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> + <input type="text" class="form-control input-search-controller" + placeholder="Attributes"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" + aria-labelledby="list-home-list"> + <div class="scrollWrapper"> + <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle" + data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedInput of suggestedInputs" (click)="addTempInput(suggestedInput)"> + <input type="radio" name="options" [id]="suggestedInput" + autocomplete="off" + (click)="addTempInput(suggestedInput)"> {{suggestedInput}} + </label> + </div> + <div *ngIf="suggestedInputs.length == 0">you don't have data</div> + </div> + </div> + </div> + </div> + </div> + </div> + <!--OUTPUTS Tab--> + <div class="tab-pane fade create-form" id="output" role="tabpanel" aria-labelledby="output-tab"> + <div class="form-group row"> + <div class="col"> + <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes"> + <div class="container"> + <div *ngFor="let tempOutput of tempOutputs">{{tempOutput}}</div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-6"> + <b class="listBoxTitle">1. Choose Function Name</b> + <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> + <input type="text" class="form-control input-search-controller" + placeholder="Functions"> + <div class="scrollWrapper" *ngFor="let step of steps"> + <a class="list-group-item list-group-item-action active" id="list-home-list" + data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i + class="icon-resource_resolution mr-1" aria-hidden="true"></i> + {{step}} <i class="icon-next_arrow" aria-hidden="true" + (click)="setInputAndOutputs( + this.designerState.template.workflows[actionName]['steps'][step]['target'] + )"></i></a> + </div> + </div> + </div> + <div class="col-6"> + <b class="listBoxTitle">2. Choose output Attribute Name</b> + <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> + <input type="text" class="form-control input-search-controller" + placeholder="Attributes"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" + aria-labelledby="list-home-list"> + <div class="scrollWrapper"> + <div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle" + data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedOutput of suggestedOutputs"> + <input type="radio" name="options" [id]="suggestedOutput" + autocomplete="off" + (dblclick)="addTempOutput(suggestedOutput)"> {{suggestedOutput}} + </label> + + </div> + <div *ngIf="suggestedOutputs.length == 0">you don't have data</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" (click)="submitTempAttributes()">Submit Attributes</button> + </div> + </div> + </div> +</div> + <!--Delete Action - Modal--> <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true"> + aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle1"> Delete Action</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body"> @@ -271,14 +418,14 @@ </div> <!--Action - Edit Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog" - aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true"> + aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle2"> Edit Custom Attributes</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <img src="assets/img/icon-close.svg" /> + <img src="assets/img/icon-close.svg"/> </button> </div> <div class="modal-body createAttributeTabs"> @@ -287,15 +434,15 @@ <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name" - value="resource-assignment-properties"> + value="resource-assignment-properties"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputPassword3" - placeholder="Add some description" - value="Dynamic PropertyDefinition for workflow(resource-assignment)."> + placeholder="Add some description" + value="Dynamic PropertyDefinition for workflow(resource-assignment)."> </div> </div> <div class="form-group row"> @@ -311,7 +458,7 @@ </button> </div> <input type="text" class="form-control mt-2 mb-2" id="inputPassword3" - placeholder="Add Other type name" value="dt-resource-assignment-properties"> + placeholder="Add Other type name" value="dt-resource-assignment-properties"> </div> </div> <div class="form-group row"> @@ -319,12 +466,12 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" - class="custom-control-input" checked> + class="custom-control-input" checked> <label class="custom-control-label" for="customRadioInline1">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline2">False</label> </div> </div> @@ -337,4 +484,4 @@ </div> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts index ee4b19930..11429ead6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.ts @@ -1,6 +1,10 @@ import {Component, OnInit} from '@angular/core'; import {InputActionAttribute, OutputActionAttribute} from './models/InputActionAttribute'; import {DesignerStore} from '../designer.store'; +import {DesignerDashboardState} from '../model/designer.dashboard.state'; +import {Action} from './models/Action'; +import {FunctionsStore} from '../functions.store'; +import {FunctionsState} from '../model/functions.state'; @Component({ selector: 'app-action-attributes', @@ -18,12 +22,76 @@ export class ActionAttributesComponent implements OnInit { isOutputOtherType: boolean; outputOtherType = ''; inputOtherType = ''; + actionName = ''; + designerState: DesignerDashboardState; + isFunctionAttributeActive = false; + functions: FunctionsState; + steps: string[]; + suggestedInputs: string[] = []; + suggestedOutputs: string[] = []; - constructor(private designerStore: DesignerStore) { + tempInputs: string[] = []; + tempOutputs: string[] = []; + currentInterfaceName: string; + + constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore) { } ngOnInit() { + this.designerStore.state$.subscribe(designerState => { + this.designerState = designerState; + if (this.designerState && this.designerState.actionName) { + this.actionName = this.designerState.actionName; + const action = this.designerState.template.workflows[this.actionName] as Action; + if (action.steps) { + const steps = Object.keys(action.steps); + if (steps && steps.length > 0) { + this.isFunctionAttributeActive = true; + } else { + this.isFunctionAttributeActive = false; + } + this.steps = steps; + this.suggestedOutputs = []; + this.suggestedInputs = []; + /*steps.forEach(step => { + const target = action.steps[step].target; + this.getInputs(target); + });*/ + } + + + this.inputs = []; + if (action.inputs) { + const namesOfInput = Object.keys(action.inputs); + this.inputs = this.extractFields(namesOfInput, action.inputs); + } + this.outputs = []; + if (action.outputs) { + const namesOfOutput = Object.keys(action.outputs); + this.outputs = this.extractFields(namesOfOutput, action.outputs); + } + } + }); + + this.functionsStore.state$.subscribe(functions => { + this.functions = functions; + }); + } + + + private extractFields(namesOfOutput: string[], container: {}) { + const fields = []; + for (const nameOutput of namesOfOutput) { + const fieldAttribute = new OutputActionAttribute(); + fieldAttribute.name = nameOutput; + fieldAttribute.description = container[nameOutput].description; + fieldAttribute.required = container[nameOutput].required; + fieldAttribute.type = container[nameOutput].type; + const insertedOutputActionAttribute = Object.assign({}, fieldAttribute); + fields.push(insertedOutputActionAttribute); + } + return fields; } addInput(input: InputActionAttribute) { @@ -34,6 +102,7 @@ export class ActionAttributesComponent implements OnInit { } addOutput(output: OutputActionAttribute) { + console.log(output); if (output && output.type && output.name) { const insertedOutputActionAttribute = Object.assign({}, output); this.outputs.push(insertedOutputActionAttribute); @@ -63,14 +132,11 @@ export class ActionAttributesComponent implements OnInit { } submitAttributes() { - console.log(this.inputActionAttribute); - console.log(this.outputActionAttribute); this.addInput(this.inputActionAttribute); this.addOutput(this.outputActionAttribute); this.clearFormInputs(); - console.log(this.storeInputs(this.inputs)); - this.designerStore.setInputsToSpecificWorkflow(this.storeInputs(this.inputs)); - console.log(this.storeOutputs(this.outputs)); + this.designerStore.setInputsAndOutputsToSpecificWorkflow(this.storeInputs(this.inputs) + , this.storeOutputs(this.outputs), this.actionName); } private clearFormInputs() { @@ -87,9 +153,10 @@ export class ActionAttributesComponent implements OnInit { inputs += this.appendAttributes(input); }); - const returnedInputMap = new Map<string, string>(); - returnedInputMap.set('inputs', inputs); - return returnedInputMap; + if (inputs.endsWith(',')) { + inputs = inputs.substr(0, inputs.length - 1); + } + return JSON.parse('{' + inputs + '}'); } private storeOutputs(OutputActionAttributes: OutputActionAttribute[]) { @@ -97,16 +164,120 @@ export class ActionAttributesComponent implements OnInit { OutputActionAttributes.forEach(output => { outputs += this.appendAttributes(output); }); - const returnedOutputMap = new Map<string, string>(); - returnedOutputMap.set('outputs', outputs); - return returnedOutputMap; + if (outputs.endsWith(',')) { + outputs = outputs.substr(0, outputs.length - 1); + } + return JSON.parse('{' + outputs + '}'); } private appendAttributes(output: OutputActionAttribute) { - return '"' + output.name + '":{\n' + - ' \'required\': ' + output.required + ',\n' + - ' \'type\': "' + output.type + '",\n' + - ' \'description\': "' + output.description + '"\n' + - ' }' + '\n'; + return '"' + output.name + '" : {\n' + + ' "required" : ' + output.required + ',\n' + + ' "type" : "' + output.type + '",\n' + + ' "description" : "' + output.description + '"\n' + + ' },'; + } + + setInputAndOutputs(targetName) { + console.log(targetName); + const nodeTemplate = this.designerState.template.node_templates[targetName]; + console.log(this.designerState.template.node_templates); + console.log(nodeTemplate); + /* tslint:disable:no-string-literal */ + console.log(nodeTemplate['type']); + this.functions.serverFunctions + /* tslint:disable:no-string-literal */ + .filter(currentFunction => currentFunction.modelName.includes(nodeTemplate['type'])) + .forEach(currentFunction => { + console.log(currentFunction); + /* tslint:disable:no-string-literal */ + if (currentFunction['definition'] && currentFunction['definition']['interfaces']) { + const interfaces = Object.keys(currentFunction['definition']['interfaces']); + if (interfaces && interfaces.length > 0) { + const interfaceName = interfaces[0]; + console.log(interfaceName); + this.currentInterfaceName = interfaceName; + + if (nodeTemplate['interfaces'] && + nodeTemplate['interfaces'][interfaceName]['operations'] && + nodeTemplate['interfaces'][interfaceName]['operations']['process'] + ) { + console.log('here'); + if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['inputs']) { + /* tslint:disable:no-string-literal */ + this.suggestedInputs = Object.keys(nodeTemplate['interfaces'] + [interfaceName]['operations']['process']['inputs']); + console.log(this.suggestedInputs); + } + if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']) { + /* tslint:disable:no-string-literal */ + this.suggestedOutputs = Object.keys(nodeTemplate['interfaces'] + [interfaceName]['operations']['process']['outputs']); + console.log(this.suggestedInputs); + } + + } + } + } + }); + console.log(nodeTemplate); + } + + printSomethings() { + console.log('something'); + } + + addTempInput(suggestedInput: string) { + this.addAttribute(this.tempInputs, suggestedInput); + this.deleteAttribute(this.suggestedInputs, suggestedInput); + } + + addTempOutput(suggestedOutput: string) { + this.addAttribute(this.tempOutputs, suggestedOutput); + this.deleteAttribute(this.suggestedOutputs, suggestedOutput); + } + + deleteAttribute(container: string[], suggestedAttribute: string) { + if (container && suggestedAttribute && container.includes(suggestedAttribute)) { + const index: number = container.indexOf(suggestedAttribute); + if (index !== -1) { + container.splice(index, 1); + } + } + } + + addAttribute(container: string[], suggestedAttribute: string) { + if (container && suggestedAttribute && !container.includes(suggestedAttribute)) { + container.push(suggestedAttribute); + } + } + + + submitTempAttributes() { + if (this.tempInputs && this.tempInputs.length > 0) { + let newInputs = ''; + this.tempInputs.forEach(tempAttribute => { + const currentInputNode: string = this.designerState.template.node_templates[this.actionName]['interfaces'] + [this.currentInterfaceName]['operations']['process']['inputs'][tempAttribute]; + const currentInputNodeAsString = JSON.stringify(currentInputNode); + newInputs += '"' + tempAttribute + '": ' + currentInputNodeAsString + ','; + + }); + if (newInputs.endsWith(',')) { + newInputs = newInputs.substr(0, newInputs.length - 1); + } + const originalInputs = JSON.stringify(this.designerState.template.workflows[this.actionName]['inputs']); + console.log(originalInputs.substr(0, originalInputs.length - 1) + ',' + newInputs + '}'); + this.designerState.template.workflows[this.actionName]['inputs'] = + JSON.parse(originalInputs.substr(0, originalInputs.length - 1) + ',' + newInputs + '}'); + } + + if (this.tempOutputs && this.tempOutputs.length > 0) { + this.tempOutputs.forEach(tempAttribute => { + const currentOutputNode = this.designerState.template.node_templates[this.actionName]['interfaces'] + [this.currentInterfaceName]['operations']['process']['outputs'][tempAttribute]; + console.log(currentOutputNode); + }); + } } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts new file mode 100644 index 000000000..52e555617 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/Action.ts @@ -0,0 +1,5 @@ +export class Action { + steps: {}; + inputs: {}; + outputs: {}; +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index f15d735f6..1fee353e3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -1106,6 +1106,7 @@ ul.editor{ max-width: 50%; } .modal-body{ + padding: 18px 24px !important; font-size: 14px; } .createAttributeTabs .nav-link{ @@ -1132,6 +1133,88 @@ ul.editor{ padding: 20px 50px; border: solid 1px #F4F9FE; } +.createAttributeTabs .listBoxTitle{ + font-size: 11px; + line-height: 29px; +} +.addedFunctionsList, +.nestedAttributes{ + background: #F4F9FE; + border: solid 1px #D0DFF1 !important; +} +.addedFunctionsList .scrollWrapper, +.nestedAttributes .scrollWrapper{ + height: 150px; + max-height: 260px; + overflow-y: auto; +} +.addedFunctionsList .input-search-controller, +.nestedAttributes .input-search-controller{ + height: 32px; + padding-left: 28px !important; + background-position: 9px; +} +.addedFunctionsList .input-search-controller::placeholder, +.nestedAttributes .input-search-controller::placeholder{ + font-weight: bold; +} +.create-form .addedFunctionsList .input-search-controller:focus, +.create-form .nestedAttributes .input-search-controller:focus{ + background-color: #fff !important; +} +.addedFunctionsList .list-group-item{ + margin-bottom: 0; + padding-left: 10px; + padding-right: 12px; + text-align: left; + font-size: 12px; + border: 0 !important; + border-radius: 0 !important; + background-color: transparent !important; +} +.addedFunctionsList .list-group-item:hover{ + background-color: #fff !important; + color: #1B3E6F; +} +.addedFunctionsList .list-group-item.active{ + background-color: #E0E8F2 !important; +} +.addedFunctionsList .list-group-item i{ + font-size: 18px; + vertical-align: middle; +} +.addedFunctionsList .list-group-item i:last-child{ + float: right; + font-size: 15px; + line-height: 17px; +} +.nestedAttributes .btn-group{ + display: grid; +} +.nestedAttributes .btn-group .btn{ + padding-left: 10px !important; + padding-right: 10px !important; + height: 36px; + border-radius: 0; + background-color: transparent; + border: 0; + color: #1B3E6F !important; + text-align: left; + font-weight: normal; + line-height: 24px; +} +.nestedAttributes .btn-group .btn:hover{ + background-color: #fff !important; +} +.nestedAttributes .btn-group .btn.active, +.nestedAttributes .btn-group .btn.active:hover{ + background-color: #E0E8F2 !important; + outline: 0; +} +.nestedAttributes .btn-group .btn.active:focus{ + box-shadow: none; + border: 0; +} /*FORM*/ .create-form .col-form-label{ color: #1B3E6F; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 76717b03c..61cc1b453 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -196,15 +196,15 @@ <div class="row temp-buttons"> <div class="col text-center"> - <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> - Action Attributes - </button> + <!-- <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary"> + Action Attributes + </button> --> </div> - <div class="col text-center"> + <!-- <div class="col text-center"> <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary"> Function Attributes </button> - </div> + </div> --> </div> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action"> + New Action @@ -217,11 +217,19 @@ <div *ngIf="!showAction" class="custom-control"> <ul> <li *ngFor="let customActionName of actions"> - <label> + <label [attr.for]="customActionName"> <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openFunctionAttributes(customActionName)"></i> + (click)="openActionAttributes(customActionName)"></i> {{customActionName}} </label> + + <ul *ngIf="customActionName.includes(this.currentActionName)"> + <li [attr.for]="customActionName" *ngFor="let currentFunction of steps"> + <span + (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span> + </li> + </ul> </li> + </ul> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index d0af828e8..7d5a72735 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -51,6 +51,7 @@ import {PackageCreationExtractionService} from '../package-creation/package-crea import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; import {TopologyTemplate} from './model/designer.topologyTemplate.model'; import {ToastrService} from 'ngx-toastr'; +import {DesignerDashboardState} from './model/designer.dashboard.state'; @Component({ selector: 'app-designer', @@ -81,6 +82,9 @@ export class DesignerComponent implements OnInit, OnDestroy { cbaPackage: CBAPackage; actions: string[] = []; dataTarget: string; + steps: string[]; + designerState: DesignerDashboardState; + currentActionName: string; constructor( private designerStore: DesignerStore, @@ -207,6 +211,7 @@ export class DesignerComponent implements OnInit, OnDestroy { distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.ngUnsubscribe)) .subscribe(state => { + this.designerState = state; if (state.sourceContent) { console.log('inside desinger.component---> ', state); // generate graph from store objects if exist @@ -231,6 +236,7 @@ export class DesignerComponent implements OnInit, OnDestroy { rankDir: 'TB' }); this.actions = []; + console.log('here'); for (const workflowsKey in topologtTemplate.workflows) { if (workflowsKey && !this.actions.includes(workflowsKey)) { this.actions.push(workflowsKey); @@ -273,8 +279,8 @@ export class DesignerComponent implements OnInit, OnDestroy { width: 1100, gridSize: 10, drawGrid: true, - // background: { - // color: 'rgba(0, 255, 0, 0.3)' + // background: { + // color: 'rgba(0, 255, 0, 0.3)' // }, cellViewNamespace: joint.shapes }); @@ -326,9 +332,13 @@ export class DesignerComponent implements OnInit, OnDestroy { insertCustomActionIntoBoard() { console.log('saving action to store action workflow....'); - const actionName = this.graphUtil.generateNewActionName(); + let actionName = this.graphUtil.generateNewActionName(); + while (this.actions.includes(actionName)) { + actionName = this.graphUtil.generateNewActionName(); + } this.graphUtil.createCustomActionWithName(actionName, this.boardGraph); this.designerStore.addDeclarativeWorkFlow(actionName); + this.actions.push(actionName); } stencilPaperEventListeners() { @@ -473,7 +483,20 @@ export class DesignerComponent implements OnInit, OnDestroy { }); } - openFunctionAttributes(customActionName: string) { - console.log('opening here function attributes'); + openActionAttributes(customActionName: string) { + console.log('opening here action attributes'); + this.currentActionName = customActionName; + this.actionAttributesSideBar = true; + this.functionAttributeSidebar = false; + this.designerStore.setCurrentAction(customActionName); + /* tslint:disable:no-string-literal */ + this.steps = Object.keys(this.designerState.template.workflows[customActionName]['steps']); + } + + openFunctionAttributes(customFunctionName: string) { + this.actionAttributesSideBar = false; + this.functionAttributeSidebar = true; + this.designerStore.setCurrentFunction(this.designerState.template.workflows[this.currentActionName] + ['steps'][customFunctionName]['target']); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts index 37fc64051..857654c56 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts @@ -25,6 +25,8 @@ import {DesignerService} from './designer.service'; import {DesignerDashboardState} from './model/designer.dashboard.state'; import {DeclarativeWorkflow} from './model/designer.workflow'; import {NodeTemplate} from './model/desinger.nodeTemplate.model'; +import {PackageCreationUtils} from '../package-creation/package-creation.utils'; +import {Action} from './action-attributes/models/Action'; @Injectable({ @@ -32,7 +34,7 @@ import {NodeTemplate} from './model/desinger.nodeTemplate.model'; }) export class DesignerStore extends Store<DesignerDashboardState> { - constructor(private designerService: DesignerService) { + constructor(private designerService: DesignerService, private packageCreationUtils: PackageCreationUtils) { super(new DesignerDashboardState()); } @@ -93,14 +95,14 @@ export class DesignerStore extends Store<DesignerDashboardState> { * you can add node template and don't add workflow step when you add dependencies for the * dg-generic function for example */ - addNodeTemplate(nodeTemplateName: string, type: string) { + addNodeTemplate(nodeTemplateName: string, type: string, nodeTemplate: {} = new NodeTemplate(type)) { this.setState({ ...this.state, template: { ...this.state.template, node_templates: { ...this.state.template.node_templates, - [nodeTemplateName]: new NodeTemplate(type) + [nodeTemplateName]: nodeTemplate } } }); @@ -145,21 +147,33 @@ export class DesignerStore extends Store<DesignerDashboardState> { }); } - setInputsToSpecificWorkflow(inputs: Map<string, string>) { + setInputsAndOutputsToSpecificWorkflow(inputs: string, outputs: string, actionName: string) { + /* tslint:disable:no-string-literal */ - let mapOfWorkflows = this.state.template.workflows['Action1']['steps']; - mapOfWorkflows += inputs; - /*mapOfWorkflows.forEach(((value, key) => { - if (value.includes('resource-assignment')) { - value += inputs; - } - }));*/ - console.log('the new workflows'); - console.log(mapOfWorkflows); + const action = this.state.template.workflows[actionName] as Action; + if (action) { + action.inputs = inputs; + action.outputs = outputs; + this.saveSourceContent(this.packageCreationUtils.transformToJson(this.state.template)); + } + } clear() { this.setState(new DesignerDashboardState()); } + setCurrentAction(customActionName: string) { + this.setState({ + ...this.state, + actionName: customActionName + }); + } + + setCurrentFunction(customFunctionName: string) { + this.setState({ + ...this.state, + functionName: customFunctionName + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html index 3107c9368..e908bdd66 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html @@ -3,12 +3,12 @@ <div class="col"> <div class="form-group"> <label for="exampleInputEmail1">Function Instance Name</label> - <input type="text" [(ngModel)]="currentFuncion['instance-name']" class="form-control" + <input disabled type="text" [(ngModel)]="currentFuncion['instance-name']" class="form-control" placeholder="Function Instance Name"> </div> <div class="form-group mb-0"> <label>Function Type</label> - <label class="attribute-value">component-resource-resolution</label> + <label class="attribute-value">{{currentFuncion['type']}}</label> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> @@ -50,7 +50,7 @@ <div class="row"> <div class="col"> <!--list--> - <div class="attribute-wrap" *ngIf="artifactPrefix"> + <div class="attribute-wrap" [hidden]="!artifactPrefix"> <div class="form-group"> <label for="exampleFormControlTextarea">artifact-prefix-names <i class="icon-required-star" type="button" @@ -204,7 +204,7 @@ </div> </div> </div> - <button class="btn btn-info" (click)="displayFunctionData()">Save</button> + <button class="btn btn-info" (click)="saveFunctionData()">Save</button> </div> <!--function - Select Template - Modal--> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts index 624f9c7a8..7103552d0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts @@ -7,6 +7,8 @@ import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.mod import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping'; import { FunctionsStore } from '../functions.store'; import { NodeProcess, NodeTemplate } from '../model/desinger.nodeTemplate.model'; +import { DesignerDashboardState } from '../model/designer.dashboard.state'; +import { Action } from '../action-attributes/models/Action'; @Component({ selector: 'app-functions-attribute', @@ -28,6 +30,11 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { artifactPrefix = false; currentFuncion = new NodeProcess(); nodeTemplates = new NodeTemplate(''); + designerState: DesignerDashboardState; + actionName = ''; + functionName = ''; + interfaceChildName = ''; + constructor( private designerStore: DesignerStore, @@ -43,6 +50,21 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { takeUntil(this.ngUnsubscribe)) .subscribe(designerDashboardState => { this.designerDashboardState = designerDashboardState; + this.designerState = designerDashboardState; + this.actionName = this.designerState.actionName; + const action = this.designerState.template.workflows[this.actionName] as Action; + + console.log(action); + if (action) { + const child = Object.keys(action.steps)[0]; + this.functionName = action.steps[child].target; + console.log(this.designerState.template.node_templates[this.functionName]); + // this.currentFuncion = this.designerState.template.node_templates[this.functionName]; + // reset inouts&outputs + this.toNodeProcess(this.designerState.template.node_templates[this.functionName], this.functionName); + const type = this.designerState.template.node_templates[this.functionName].type; + this.getNodeType(type); + } }); this.packageCreationStore.state$ @@ -65,16 +87,54 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); }); }); - this.getNodeType('component-resource-resolution'); + } + toNodeProcess(nodeTemplate, functionName) { + this.requiredInputs = new Map<string, {}>(); + this.requiredOutputs = new Map<string, {}>(); + this.OptionalInputs = new Map<string, {}>(); + this.optionalOutputs = new Map<string, {}>(); + console.log(nodeTemplate); + this.currentFuncion['instance-name'] = functionName; + // tslint:disable-next-line: no-string-literal + this.currentFuncion['type'] = nodeTemplate['type']; + if (nodeTemplate.interfaces && Object.keys(nodeTemplate.interfaces).length > 0) { + const nodeName = Object.keys(nodeTemplate.interfaces)[0]; + // tslint:disable-next-line: no-string-literal + const inputs = nodeTemplate.interfaces[nodeName]['operations']['process']['inputs']; + // tslint:disable-next-line: no-string-literal + const outputs = nodeTemplate.interfaces[nodeName]['operations']['process']['outputs']; + + if (inputs) { + for (const [key, value] of Object.entries(inputs)) { + console.log(key + '-' + value); + this.currentFuncion.inputs[key] = value; + } + } + if (outputs) { + for (const [key, value] of Object.entries(outputs)) { + console.log(key + '-' + value); + this.currentFuncion.outputs[key] = value; + } + } + } + } ngOnDestroy() { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } - displayFunctionData() { + saveFunctionData() { + + // tslint:disable-next-line: variable-name + const node_templates = {}; + const finalFunctionData = this.currentFuncion; + // tslint:disable-next-line: no-string-literal + const type = finalFunctionData['type']; + const instanceName = finalFunctionData['instance-name']; + // insert selected templates in nodeTemplates.artifacts this.selectedTemplates.forEach((value, key) => { console.log(key); console.log(value); @@ -93,20 +153,29 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { }; } }); + // instantiate the final node_template object to save + + this.nodeTemplates.type = type; + node_templates[finalFunctionData['instance-name']] = this.nodeTemplates; + + delete finalFunctionData['instance-name']; + // tslint:disable-next-line: no-string-literal + delete finalFunctionData['type']; + this.nodeTemplates.interfaces = { - ResourceResolutionComponent: { + [this.interfaceChildName]: { operations: { process: { - ...this.currentFuncion + ...finalFunctionData, } } } }; - setTimeout(() => { - console.log(this.currentFuncion); - console.log(this.nodeTemplates); - }, 1500); + console.log(finalFunctionData); + console.log(node_templates); + // tslint:disable-next-line: no-unused-expression + this.designerStore.addNodeTemplate(instanceName, type, node_templates[instanceName]); } // Template logic private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) { @@ -164,24 +233,37 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.functionStore.state$ .subscribe(state => { console.log(state); + console.log(nodeName); const functions = state.serverFunctions; // tslint:disable-next-line: prefer-for-of for (let i = 0; i < functions.length; i++) { if (functions[i].modelName === nodeName) { // tslint:disable: no-string-literal console.log(functions[i].definition['interfaces']); - this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'inputs'); - this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'outputs'); + this.getInputFields(functions[i].definition['interfaces'], 'outputs'); + this.getInputFields(functions[i].definition['interfaces'], 'inputs'); break; } } }); } - getInputFields(interfaces, nodeName, type) { + getInputFields(interfaces, type) { + + if (type === 'inputs') { + this.requiredInputs = new Map<string, {}>(); + this.OptionalInputs = new Map<string, {}>(); + } else { + this.requiredOutputs = new Map<string, {}>(); + this.optionalOutputs = new Map<string, {}>(); + + } + const nodeName = Object.keys(interfaces)[0]; + this.interfaceChildName = nodeName; + console.log(nodeName + ' ------ ' + type); console.log(interfaces[nodeName]['operations']['process'][type]); const fields = interfaces[nodeName]['operations']['process'][type]; - + this.artifactPrefix = false; for (const [key, value] of Object.entries(fields)) { if (key === 'artifact-prefix-names') { this.artifactPrefix = true; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts index 1a14021f4..2da7adf31 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts @@ -19,13 +19,14 @@ limitations under the License. ============LICENSE_END============================================ */ -import {ModelType} from './ModelType.model'; -import { TopologyTemplate } from './designer.topologyTemplate.model'; +import {TopologyTemplate} from './designer.topologyTemplate.model'; export class DesignerDashboardState { template: TopologyTemplate; sourceContent: string; + actionName: string; + functionName: string; constructor() { this.template = new TopologyTemplate(); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts index e63b17fa2..a994da4a3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts @@ -1,5 +1,5 @@ import { ResourceDictionary } from './ResourceDictionary.model'; -import { JsonObject, JsonProperty, JsonConvert } from 'json2typescript'; +import { JsonObject, JsonProperty } from 'json2typescript'; // Convert ResourceDictionary object to store Mapping. export class MappingAdapter { @@ -14,17 +14,26 @@ export class MappingAdapter { const mapping = new Mapping(); mapping.name = this.resourceDictionary.name; mapping.dictionaryName = this.resourceDictionary.name; + // move all properties at once mapping.property = Object.assign({}, this.resourceDictionary.definition.property); - mapping.inputParam = this.resourceDictionary['input-param'] || false; - // tslint:disable-next-line: no-string-literal - mapping.property['required'] = this.resourceDictionary['required'] || false; + mapping.inputParam = this.resourceDictionary.definition.property['input-param'] || false; + // for reading + mapping.sources = this.resourceDictionary.definition.sources; + console.log(mapping.sources); + mapping.version = 0; + return mapping; + } + + // Get the final object to save + finalize(mapping: Mapping): Mapping { + mapping.dictionarySource = this.dependanciesSource.get(mapping.name); if (this.dependancies.get(mapping.name)) { mapping.dependencies = this.dependancies.get(mapping.name); } else { mapping.dependencies = []; } - mapping.version = 0; + delete mapping.sources; return mapping; } } @@ -39,6 +48,8 @@ export class Mapping { inputParam: boolean; @JsonProperty('dictionary-name') dictionaryName: string; + @JsonProperty(true) + sources: string[]; @JsonProperty('dictionary-source') dictionarySource: string; @JsonProperty() diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index e42304ad6..fb21d3bd7 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -76,6 +76,7 @@ </header> <div class="container-fluid body-container"> + <ngx-ui-loader></ngx-ui-loader> <div class="container"> <div class="creat-action-container"> <!-- <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index c7285774e..96d798c86 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -19,22 +19,23 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; import * as JSZip from 'jszip'; -import {PackageCreationStore} from './package-creation.store'; -import {CBAPackage, Definition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationModes} from './creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder'; -import {PackageCreationUtils} from './package-creation.utils'; -import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; -import {Router} from '@angular/router'; -import {ToastrService} from 'ngx-toastr'; -import {TourService} from 'ngx-tour-md-menu'; -import {PackageCreationService} from './package-creation.service'; -import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; -import {DesignerStore} from '../designer/designer.store'; +import { PackageCreationStore } from './package-creation.store'; +import { CBAPackage, Definition } from './mapping-models/CBAPacakge.model'; +import { PackageCreationModes } from './creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder'; +import { PackageCreationUtils } from './package-creation.utils'; +import { MetadataTabComponent } from './metadata-tab/metadata-tab.component'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { TourService } from 'ngx-tour-md-menu'; +import { PackageCreationService } from './package-creation.service'; +import { ComponentCanDeactivate } from '../../../../common/core/canDactivate/ComponentCanDeactivate'; +import { DesignerStore } from '../designer/designer.store'; +import { NgxUiLoaderService } from 'ngx-ui-loader'; @Component({ @@ -55,6 +56,7 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements private router: Router, private tourService: TourService, private toastService: ToastrService, + private ngxService: NgxUiLoaderService, private designerStore: DesignerStore) { super(); @@ -62,8 +64,8 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements counter = 0; modes: object[] = [ - {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, + { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }]; metaDataTab: MetaDataTabModel = new MetaDataTabModel(); folder: FolderNodeElement = new FolderNodeElement(); zipFile: JSZip = new JSZip(); @@ -71,10 +73,10 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements definition: Definition = new Definition(); isSaveEnabled = false; - @ViewChild(MetadataTabComponent, {static: false}) + @ViewChild(MetadataTabComponent, { static: false }) metadataTabComponent: MetadataTabComponent; - @ViewChild('nameit', {static: true}) + @ViewChild('nameit', { static: true }) elementRef: ElementRef; versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$'; metadataClasses = 'nav-item nav-link active complete'; @@ -108,6 +110,7 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements } saveBluePrint() { + this.ngxService.start(); console.log(this.cbaPackage); FilesContent.clear(); let packageCreationModes: PackageCreationModes; @@ -126,7 +129,7 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.savePackage(blob).subscribe( bluePrintDetailModels => { @@ -139,6 +142,8 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements }, error => { // this.toastService.error('error happened when editing ' + error.message); console.log('Error -' + error.message); + }, () => { + this.ngxService.stop(); }); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 256789586..7aaf1a3ab 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -129,14 +129,14 @@ </div> - <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2"> + <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> <div class="mat-elevation-z8"> <!--Edit Buttons--> <div class="btn-group mapping-editBar" role="group"> <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" id="customCheck1" - [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + [checked]="mappingRes.length>0&&mappingRes.length === this.selectedProps.size"> <label class="custom-control-label" for="customCheck1"></label> </div> <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" @@ -146,10 +146,10 @@ class="icon-delete-sm"></i></button> <div style="line-height: 35px;font-size: 10px;"> <span>{{selectedProps.size}} selected </span> - <span>({{resourceDictionaryRes.length}} attributes in total)</span> + <span>({{mappingRes.length}} attributes in total)</span> </div> </div> - <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.resourceDictionaryRes.length]"> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]"> </mat-paginator> <mat-form-field class="tableFilter float-right"> <mat-label>Filter</mat-label> @@ -174,8 +174,8 @@ <td mat-cell *matCellDef="let dict"> <div class="custom-control custom-checkbox reuiredInput"> <input type="checkbox" class="custom-control-input" #requiredInput - (click)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))" - id="requiredCheck-{{dict.name}}"> + (ngModelChange)="setProp(requiredInput,'required',initDataSource.filteredData.indexOf(dict))" + [ngModel]="dict?.property?.required" id="requiredCheck-{{dict.name}}"> <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label> </div> </td> @@ -186,8 +186,8 @@ <td mat-cell *matCellDef="let dict"> <div class="custom-control custom-checkbox reuiredInput"> <input type="checkbox" class="custom-control-input" #tempInput - (click)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))" - id="inputCheck-{{dict.name}}"> + (ngModelChange)="setProp(tempInput,'input-param',initDataSource.filteredData.indexOf(dict))" + [ngModel]="dict['input-param']" id="inputCheck-{{dict.name}}"> <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label> </div> </td> @@ -206,12 +206,15 @@ <ng-container matColumnDef="dictionary-source"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> <td mat-cell *matCellDef="let dict"> - <select class="custom-select" (click)="selectSource(dict,$event)"> - <option *ngFor="let val of dict.definition.sources | keyvalue"> + <select *ngIf="dict.sources" class="custom-select" + (click)="selectSource(dict,$event)"> + <option *ngFor="let val of dict.sources | keyvalue"> {{initMap(dict.name,val)}} </option> - </select> + <input [disabled]="true" *ngIf="!dict.sources" type="text" class="form-control" + [ngModel]="dict['dictionary-source']"> + </td> </ng-container> <!-- Dependancies Column --> @@ -224,7 +227,7 @@ <!-- Default Column --> <ng-container matColumnDef="default"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> - <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td> + <td mat-cell *matCellDef="let dict"> {{ dict?.property?.default }} </td> </ng-container> <!-- Velocity Column --> <ng-container matColumnDef="Velocity"> @@ -237,12 +240,13 @@ <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> - <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.type }} </td> + <td mat-cell *matCellDef="let dict"> {{ dict?.property?.type }} </td> </ng-container> <!-- Entry Schema Column --> <ng-container matColumnDef="Entry Schema"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> - <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td> + <td mat-cell *matCellDef="let dict"> {{objectToString(dict?.property['entry_schema'])}} + </td> </ng-container> <tr mat-header-row *matHeaderRowDef="initColumn"></tr> <tr mat-row *matRowDef="let row; columns: initColumn;"></tr> @@ -253,93 +257,6 @@ </table> </div> </div> - <!------ View Table-------> - <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> - <div class="mat-elevation-z8"> - <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator> - <mat-form-field class="tableFilter float-right"> - <mat-label>Filter</mat-label> - <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort> - <!-- Required Column --> - <ng-container matColumnDef="Required"> - <th mat-header-cell *matHeaderCellDef> Required </th> - <td mat-cell *matCellDef="let dict"> - <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg"> - </td> - </ng-container> - <!-- Template Input Column --> - <ng-container matColumnDef="Template Input"> - <th mat-header-cell *matHeaderCellDef> Template Input </th> - <td mat-cell *matCellDef="let dict"> - <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg"> - <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg"> - </td> - </ng-container> - <!-- Parameter Name Column --> - <ng-container matColumnDef="name"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th> - <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> - </ng-container> - <!-- Dictionary Name Column --> - <ng-container matColumnDef="Dictionary Name"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th> - <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> - </ng-container> - <!-- Dictionary Source Column --> - <ng-container matColumnDef="dictionary-source"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> - <td mat-cell *matCellDef="let dict"> - <input type="text" class="form-control" [value]="dict['dictionary-source']" - disabled> - </td> - </ng-container> - <!-- Dependancies Column --> - <ng-container matColumnDef="dependencies"> - <th mat-header-cell *matHeaderCellDef> Dependancies </th> - <td mat-cell *matCellDef="let dict"> - <input type="text" class="form-control" [value]="dict['dependencies']" disabled> - </td> - </ng-container> - <!-- default Column --> - <ng-container matColumnDef="default"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> - <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td> - </ng-container> - <!-- Velocity Column --> - <ng-container matColumnDef="Velocity"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th> - <td mat-cell *matCellDef="let dict"> - <span *ngIf="dict?.property?.metadata"> - {{dict?.property?.metadata['transform-template']}} - </span> - <span *ngIf="!dict?.property?.metadata"></span> - </td> - - - - </ng-container> - <!-- Data Type Column --> - <ng-container matColumnDef="Data Type"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> - <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td> - </ng-container> - <!-- Entry Schema Column --> - <ng-container matColumnDef="Entry Schema"> - <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> - <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td> - </ng-container> - <tr mat-header-row *matHeaderRowDef="resColumns"></tr> - <tr mat-row *matRowDef="let row; columns: resColumns;"></tr> - <!-- Row shown when there is no matching data. --> - <tr class="mat-row" *matNoDataRow> - <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> - </tr> - </table> - </div> - </div> </div> </div> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts index a26f3b90e..4087dee3e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts @@ -51,7 +51,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI templateExt = 'vtl'; dependancies = new Map<string, Array<string>>(); dependanciesSource = new Map<string, string>(); - mappingRes = []; + mappingRes: Mapping[] = []; currentTemplate: any; currentMapping: any; edit = false; @@ -73,9 +73,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI // displayedColumns: string[] = ['id', 'name', 'progress', 'color']; dataSource: MatTableDataSource<{}>; initDataSource: MatTableDataSource<{}>; - // dataSource = new MatTableDataSource(); - @ViewChild('paginate', { static: true }) paginator: MatPaginator; - @ViewChild('sort', { static: true }) sort: MatSort; @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator; @ViewChild(MatSort, { static: true }) initSort: MatSort; @@ -93,8 +90,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI ngAfterViewInit() { try { - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; this.initDataSource.paginator = this.initPaginator; this.initDataSource.sort = this.initSort; } catch (e) { } @@ -115,16 +110,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('-')); } if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) { + console.log(templateInfo.mapping); this.mappingRes = templateInfo.mapping; this.currentMapping = Object.assign({}, templateInfo); this.resourceDictionaryRes = []; // Assign the data to the data source for the table to render - this.dataSource = new MatTableDataSource(this.mappingRes); - // this.cdr.detectChanges(); - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - - + this.rerender(); } else { this.mappingRes = []; this.currentMapping = Any; @@ -165,9 +156,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } + initApplyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.initDataSource.filter = filterValue.trim().toLowerCase(); + if (this.initDataSource.paginator) { + this.initDataSource.paginator.firstPage(); + } + } setProp(e, propName, index) { - this.resourceDictionaryRes[index][propName] = e.checked; - console.log(this.resourceDictionaryRes[index]); + if (propName === 'input-param') { + this.mappingRes[index][propName] = e.checked; + + } else { + // tslint:disable-next-line: no-string-literal + this.mappingRes[index]['property'][propName] = e.checked; + } + // console.log(this.mappingRes[index]); } selectProp(value) { console.log(value); @@ -178,29 +182,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } } - applyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.dataSource.filter = filterValue.trim().toLowerCase(); - if (this.dataSource.paginator) { - this.dataSource.paginator.firstPage(); - } - } - - initApplyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.initDataSource.filter = filterValue.trim().toLowerCase(); - if (this.initDataSource.paginator) { - this.initDataSource.paginator.firstPage(); - } - } - removeProps() { console.log(this.selectedProps); this.selectedProps.forEach(prop => { - this.resourceDictionaryRes.forEach((res, index) => { + this.mappingRes.forEach((res, index) => { if (res.name === prop) { console.log('delete...'); - this.resourceDictionaryRes.splice(index, 1); + this.mappingRes.splice(index, 1); this.selectedProps.delete(prop); this.rerender(); } @@ -208,11 +196,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI }); } selectAllProps() { - if (this.resourceDictionaryRes.length === this.selectedProps.size) { + // if all items are already selected, unselect them + if (this.mappingRes.length === this.selectedProps.size) { this.selectedProps = new Set<string>(); } else { - this.resourceDictionaryRes.forEach(prop => { - console.log(prop); + this.mappingRes.forEach(prop => { + // console.log(prop); this.selectedProps.add(prop.name); }); } @@ -224,8 +213,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI console.log('base'); this.packageCreationService.getTemplateAndMapping([...this.selectedProps]).subscribe(res => { let message = 'Re-Auto mapping'; - this.mappingRes = []; - currentResDictionary = res; + // this.mappingRes = []; + currentResDictionary = this.convertDictionaryToMap(res); console.log(currentResDictionary); if (currentResDictionary && currentResDictionary.length <= 0) { message = 'No values for those attributes'; @@ -233,14 +222,15 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI // Replcae new values with the old ones currentResDictionary.forEach(curr => { - for (let i = 0; i < this.resourceDictionaryRes.length; i++) { - if (this.resourceDictionaryRes[i].name === curr.name) { - this.resourceDictionaryRes[i] = curr; + for (let i = 0; i < this.mappingRes.length; i++) { + if (this.mappingRes[i].name === curr.name) { + this.mappingRes[i] = curr; } } }); this.rerender(); this.toastr.success(message, 'Success'); + this.selectedProps = new Set(); }, err => { this.toastr.error('Error'); }); @@ -346,6 +336,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI return mapArray; } + private finalMapping(mappingArray: Mapping[]): Mapping[] { + const mapArray: Mapping[] = []; + for (const mapping of mappingArray) { + this.MappingAdapter = new MappingAdapter(null, this.dependancies, this.dependanciesSource); + mapArray.push(this.MappingAdapter.finalize(mapping)); + console.log(mapping); + } + console.log(mapArray); + return mapArray; + } + setTemplateFilesToStore() { for (const droppedFile of this.uploadedFiles) { droppedFile.file((file: File) => { @@ -393,10 +394,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI return item.name; } setVelocity(index, value) { - // console.log('velocity value = ' + value); - // console.log(this.resourceDictionaryRes[index]); // tslint:disable-next-line: no-string-literal - this.resourceDictionaryRes[index].definition.property['metadata'] = { + this.mappingRes[index].property['metadata'] = { 'transform-template': value }; console.log(this.resourceDictionaryRes[index]); @@ -417,6 +416,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI this.mappingRes = []; this.resourceDictionaryRes = res; console.log(this.resourceDictionaryRes); + this.mappingRes = this.convertDictionaryToMap(this.resourceDictionaryRes); + console.log(this.mappingRes); this.rerender(); if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) { message = 'No values for those attributes'; @@ -448,6 +449,13 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI cancel() { this.openListView(); } + + objectToString(object) { + if (object) { + return JSON.stringify(object); + } + return ''; + } saveToStore() { const filename = this.fileName; if (filename) { @@ -455,16 +463,23 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI console.log('----------- mode ' + this.edit); const fileContent = this.templateFileContent; if ( - (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json') - || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) + (!(this.packageCreationStore.fileExist('Templates/' + filename + '-mapping.json') + || this.packageCreationStore.fileExist('Templates/' + filename + '-template' + this.getFileExtension()))) || this.edit ) { // Save Mapping to Store - if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) { - const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes); - this.packageCreationStore.addMapping('Templates/' + this.fileName + '-mapping.json', - this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); - this.resourceDictionaryRes = []; + if (this.mappingRes && this.mappingRes.length > 0) { + const mapArray = this.finalMapping(this.mappingRes); + console.log(mapArray); + // this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))) + if (this.edit) { + this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json', + JSON.stringify(mapArray)); + } else { + this.packageCreationStore.addMapping('Templates/' + filename + '-mapping.json', + this.packageCreationUtils.transformToJson(this.jsonConvert.serialize(mapArray))); + } + this.mappingRes = []; } // Save Template to store // if (this.templateFileContent) { @@ -493,7 +508,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI let keyDepend = null; this.dependancies.set(dict.name, null); try { - keyDepend = dict.definition.sources[source].properties['key-dependencies'] || null; + keyDepend = dict.sources[source].properties['key-dependencies'] || null; } catch (e) { } console.log(dict); console.log(source); @@ -517,13 +532,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } rerender(): void { - this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes); - // this.cdr.detectChanges(); + this.initDataSource = new MatTableDataSource(this.mappingRes); /* Hint: the intial page size for the table will be the result size; I did that because the table doesn't load element in DOM, as result some function are not working well like save and you have to move to other pages to fix that. */ - this.initPaginator.pageSize = this.resourceDictionaryRes.length; + this.initPaginator.pageSize = this.mappingRes.length; this.initDataSource.paginator = this.initPaginator; this.initDataSource.sort = this.initSort; } @@ -536,14 +550,3 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI } } -class DependancyVal { - source: string; - keyDepend: any; - constructor( - source: string, - keyDepend: any - ) { - this.source = source; - this.keyDepend = keyDepend; - } -} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index 494256eea..f2aaf5d3a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -1,7 +1,8 @@ <div class="dropdown packagesFilter w-100"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Filter By Tags <span class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div> - <ul class="dropdown-content w-100"> + <div class="dropdown-text">Filter By Tags <span + class="fillteredTags">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</span></div> + <!-- <ul class="dropdown-content w-100"> <li> <div class="form-group"> <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus> @@ -14,5 +15,21 @@ </div> </li> <li class="reset-filter"><a (click)="resetFilter()">Reset filter</a></li> - </ul> -</div> + </ul> --> + + <div class="dropdown-content w-100"> + <div class="form-group"> + <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus> + </div> + <ul> + <li *ngFor="let tag of viewedTags"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}} + #checkboxes> + <label class="custom-control-label" for={{tag}}>{{tag}}</label> + </div> + </li> + </ul> + <div class="reset-filter"><a (click)="resetFilter()">Reset filter</a></div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 0bb4f1f41..0b03f4dde 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -63,7 +63,7 @@ </a> </li> <li class="action-delete"> - <a href="#"> + <a (click)="deletePackage(bluePrint.id)"> <i class="icon-delete-sm" aria-hidden="true"></i> Delete </a> @@ -111,7 +111,7 @@ class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button> </div> <div class="col"> - <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" + <button type="button" (click)="viewDesigner(bluePrint.id)" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode </button> </div> @@ -125,3 +125,4 @@ <app-import-package></app-import-package> + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index 4d0e108cf..7e6bbbe59 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -1,11 +1,12 @@ -import { Component, OnInit } from '@angular/core'; -import { BlueprintModel } from '../../model/BluePrint.model'; -import { PackagesStore } from '../../packages.store'; -import { Router } from '@angular/router'; -import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service'; -import { saveAs } from 'file-saver'; -import { NgxUiLoaderService } from 'ngx-ui-loader'; -import { TourService } from 'ngx-tour-md-menu'; +import {Component, OnInit} from '@angular/core'; +import {BlueprintModel} from '../../model/BluePrint.model'; +import {PackagesStore} from '../../packages.store'; +import {Router} from '@angular/router'; +import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service'; +import {saveAs} from 'file-saver'; +import {NgxUiLoaderService} from 'ngx-ui-loader'; +import {TourService} from 'ngx-tour-md-menu'; +import {ToastrService} from 'ngx-toastr'; @Component({ selector: 'app-packages-list', @@ -23,11 +24,11 @@ export class PackageListComponent implements OnInit { private configurationDashboardService: ConfigurationDashboardService, private ngxLoader: NgxUiLoaderService, private tourService: TourService, + private toastService: ToastrService ) { console.log('PackageListComponent'); - this.packagesStore.state$.subscribe(state => { console.log(state); if (state.filteredPackages) { @@ -38,6 +39,7 @@ export class PackageListComponent implements OnInit { ngOnInit() { + this.ngxLoader.start(); this.packagesStore.getAll(); } @@ -51,8 +53,23 @@ export class PackageListComponent implements OnInit { downloadPackage(artifactName: string, artifactVersion: string) { this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => { - const blob = new Blob([response], { type: 'application/octet-stream' }); + const blob = new Blob([response], {type: 'application/octet-stream'}); saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip'); }); } + + viewDesigner(id: string) { + this.router.navigate(['/packages/designer', id, {actionName: ''}]); + } + + deletePackage(id: string) { + this.configurationDashboardService.deletePackage(id).subscribe(res => { + this.toastService.info('package deleted successfully '); + this.router.navigate(['/packages']); + this.packagesStore.getAll(); + }, err => { + this.toastService.error('error deleting package' + err.message); + }); + + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts index 977bf97e7..f0b99bff1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts @@ -25,16 +25,17 @@ export class SourceEditorComponent implements OnInit, AfterViewInit { ngAfterViewInit() { - console.log(this.lang); this.editor.setTheme('eclipse'); this.editor.getEditor().setOptions({ enableBasicAutocompletion: true, highlightSelectedWord: true, - maxLines: Infinity, enableSnippets: true, enableLiveAutocompletion: true, showFoldWidgets: true, + maxLines: 900000, + // autoScrollEditorIntoView: true, + // vScrollBarAlwaysVisible: true }); this.editor.getEditor().commands.addCommand({ diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differindex 2bdafa68d..7e97a3db8 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg index 7b07f9c3f..a01e88536 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg @@ -23,6 +23,11 @@ <glyph unicode="" glyph-name="icon-add-circle" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" /> <glyph unicode="" glyph-name="icon-function-attribute" horiz-adv-x="1229" d="M1166.428 461.798c3.568 8.632 1.58 18.556-5.028 25.151l-415.328 415.328c-9.167 8.851-23.772 8.598-32.629-0.569-8.633-8.944-8.633-23.117 0-32.058l375.967-375.967h-1005.695c-12.742-0.002-23.075-10.331-23.075-23.077s10.331-23.075 23.075-23.075h1005.695l-375.918-375.918c-9.167-8.851-9.42-23.46-0.569-32.629 8.851-9.167 23.46-9.418 32.629-0.569 0.192 0.188 0.38 0.373 0.569 0.569l415.328 415.328c2.132 2.144 3.826 4.686 4.981 7.481zM729.778 32.212c-12.742-0.026-23.094 10.289-23.114 23.035-0.012 6.144 2.431 12.036 6.778 16.376l399.041 398.99-399.041 398.992c-8.851 9.167-8.598 23.772 0.569 32.629 8.944 8.633 23.117 8.633 32.058 0l415.328-415.328c9.010-9.012 9.010-23.615 0-32.629l-415.328-415.328c-4.321-4.312-10.178-6.736-16.29-6.736zM1145.107 447.538h-1061.393c-12.742 0-23.075 10.331-23.075 23.072s10.331 23.075 23.075 23.075h1061.396c12.742 0 23.075-10.331 23.075-23.075s-10.331-23.072-23.077-23.072z" /> <glyph unicode="" glyph-name="icon-custom-attribute" d="M35.552 421.088c-19.808 0-35.552 16.256-35.552 36.064s15.744 35.552 35.552 35.552h431.2v431.232c0.032 19.808 16.288 36.064 36.096 36.064s35.552-16.256 35.552-36.064v-431.232h431.2c19.808 0 36.064-15.744 36.064-35.552s-16.256-36.064-36.064-36.064h-431.2v-431.232c0-19.808-15.744-36.064-35.552-36.064s-36.064 16.256-36.064 36.064v431.232h-431.232z" /> +<glyph unicode="" glyph-name="icon-dg_generic" d="M179.2 856.422c-42.342 0-76.8-34.458-76.8-76.8s34.458-76.8 76.8-76.8c42.342 0 76.8 34.458 76.8 76.8s-34.458 76.8-76.8 76.8zM179.2 736.956c-23.518 0-42.667 19.132-42.667 42.667s19.149 42.667 42.667 42.667c23.518 0 42.667-19.132 42.667-42.667s-19.149-42.667-42.667-42.667zM860.153 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM862.976 709.637c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM949.39 818.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM950.447 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM775.504 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM680.208 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM680.563 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM766.268 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM594.149 812.755c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM591.542 706.43c0-19.445-15.763-35.207-35.207-35.207s-35.207 15.763-35.207 35.207c0 19.445 15.763 35.207 35.207 35.207s35.207-15.763 35.207-35.207zM1024 679.083v201.097c0 43.366-35.277 78.643-78.643 78.643h-866.714c-43.366 0-78.643-35.277-78.643-78.643v-201.097c0-25.071 11.998-47.172 30.327-61.577-18.33-14.421-30.327-36.523-30.327-61.594v-201.097c0-43.366 35.277-78.643 78.643-78.643h866.714c43.366 0 78.643 35.277 78.643 78.643v201.097c0 25.071-11.998 47.172-30.327 61.577 18.33 14.421 30.327 36.523 30.327 61.594zM989.867 555.913v-201.097c0-24.542-19.968-44.51-44.51-44.51h-866.714c-24.542-0.017-44.51 19.951-44.51 44.51v201.097c0 24.542 19.968 44.51 44.51 44.51h866.697c24.559 0 44.527-19.968 44.527-44.51zM78.643 634.556c-24.542 0-44.51 19.968-44.51 44.527v201.097c0 24.542 19.968 44.51 44.51 44.51h866.697c24.559 0 44.527-19.968 44.527-44.51v-201.097c0-24.542-19.968-44.51-44.51-44.51l-866.714-0.017zM179.2 378.556c42.342 0 76.8 34.458 76.8 76.8s-34.458 76.8-76.8 76.8c-42.342 0-76.8-34.441-76.8-76.8s34.458-76.8 76.8-76.8zM179.2 498.022c23.518 0 42.667-19.132 42.667-42.667s-19.149-42.667-42.667-42.667c-23.518 0-42.667 19.132-42.667 42.667s19.149 42.667 42.667 42.667zM537.139 98.901c3.908-2.202 7.492-4.915 10.684-8.038 3.328-3.26 7.646-4.881 11.947-4.881 4.42 0 8.841 1.724 12.186 5.12 6.605 6.741 6.485 17.527-0.239 24.132-5.308 5.205-11.264 9.677-17.732 13.363-8.243 4.625-18.62 1.792-23.262-6.434-4.642-8.192-1.775-18.603 6.417-23.262zM537.668 9.967c-3.84-2.253-7.97-3.959-12.271-5.12-9.097-2.458-14.49-11.81-12.049-20.924 2.065-7.612 8.943-12.629 16.469-12.629 1.468 0 2.953 0.188 4.454 0.58 7.202 1.946 14.131 4.83 20.565 8.585 8.141 4.745 10.906 15.206 6.161 23.347-4.745 8.158-15.189 10.889-23.33 6.161zM580.267 71.765c-9.421 0-17.067-8.038-17.067-17.459 0-4.506-0.58-8.943-1.724-13.227-2.441-9.097 2.987-18.449 12.083-20.89 1.468-0.393 2.953-0.58 4.403-0.58 7.543 0 14.438 5.035 16.486 12.663 1.911 7.134 2.884 14.558 2.884 22.016v0.802c0 9.438-7.646 16.674-17.067 16.674zM486.571 9.865c-3.874 2.219-7.441 4.932-10.598 8.073-6.69 6.656-17.476 6.588-24.132-0.068-6.656-6.69-6.622-17.493 0.068-24.132 5.291-5.257 11.247-9.796 17.715-13.5 2.679-1.536 5.581-2.253 8.465-2.253 5.922 0 11.674 3.089 14.831 8.585 4.659 8.175 1.826 18.603-6.349 23.296zM489.25 136.533c-7.168-1.963-14.063-4.898-20.48-8.67-8.124-4.779-10.837-15.241-6.059-23.364 3.191-5.393 8.892-8.414 14.729-8.414 2.935 0 5.922 0.751 8.636 2.355 3.857 2.27 7.97 4.011 12.271 5.205 9.079 2.492 14.421 11.895 11.913 20.975-2.526 9.079-11.913 14.387-21.009 11.913zM460.8 54.289c0 4.403 0.563 8.755 1.655 12.954 2.372 9.114-3.089 18.432-12.22 20.821-9.131 2.355-18.449-3.089-20.821-12.22-1.826-6.997-2.748-14.251-2.748-21.914v-0.034c0-9.438 7.629-16.862 17.067-16.862 9.438-0.017 17.067 7.817 17.067 17.254zM925.904 422.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM830.965 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM917.374 499.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM838.435 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM752.025 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM759.494 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM673.084 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM680.559 419.455c0-19.444-15.763-35.205-35.205-35.205s-35.205 15.763-35.205 35.205c0 19.444 15.763 35.205 35.205 35.205s35.205-15.763 35.205-35.205zM594.145 502.661c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM601.615 419.455c0-19.444-15.762-35.205-35.205-35.205s-35.205 15.762-35.205 35.205c0 19.444 15.762 35.205 35.205 35.205s35.205-15.762 35.205-35.205zM375.467 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM238.933 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM307.2 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM34.133 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM102.4 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM170.667 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM665.6 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM802.133 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM733.867 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM1006.933 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM870.4 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM938.667 71.356h-17.067c-9.421 0-17.067-7.629-17.067-17.067s7.646-17.067 17.067-17.067h17.067c9.421 0 17.067 7.629 17.067 17.067s-7.646 17.067-17.067 17.067zM529.067 173.756v17.067c0 9.438-7.646 17.067-17.067 17.067s-17.067-7.629-17.067-17.067v-17.067c0-9.438 7.646-17.067 17.067-17.067s17.067 7.629 17.067 17.067zM494.933 259.089v-17.067c0-9.438 7.646-17.067 17.067-17.067s17.067 7.629 17.067 17.067v17.067c0 9.438-7.646 17.067-17.067 17.067s-17.067-7.629-17.067-17.067z" /> +<glyph unicode="" glyph-name="icon-remote_ansible" d="M512 960c-282.767 0-512-229.233-512-512s229.233-512 512-512c282.767 0 512 229.233 512 512-0.317 282.633-229.367 511.683-512 512zM954.808 268.633l-145.608-25.125c16.667 61.125 25.667 124.083 26.792 187.425h153.45c-1.925-55.717-13.65-110.658-34.633-162.3v0zM34.558 430.933h153.45c1.125-63.342 10.125-126.3 26.792-187.425l-145.608 25.125c-20.983 51.642-32.708 106.583-34.633 162.3zM69.192 627.367l145.608 25.125c-16.667-61.125-25.667-124.083-26.792-187.425h-153.45c1.925 55.717 13.65 110.658 34.633 162.3zM529.067 685.975c61.325-0.783 122.5-6.367 182.958-16.708l60.242-10.392c18.508-62.983 28.467-128.167 29.608-193.808h-272.808v220.908zM717.842 702.908c-62.375 10.658-125.5 16.417-188.775 17.2v204.8c97.842-9.4 182.833-98.983 231-229.358l-42.225 7.358zM494.933 720.108c-63.275-0.783-126.383-6.542-188.758-17.2l-42.242-7.308c48.167 130.408 133.158 220.025 231 229.383v-204.875zM311.992 669.267c60.45 10.342 121.617 15.925 182.942 16.708v-220.908h-272.808c1.142 65.642 11.1 130.825 29.608 193.808l60.258 10.392zM222.125 430.933h272.808v-220.908c-61.325 0.783-122.5 6.367-182.958 16.708l-60.242 10.392c-18.508 62.983-28.467 128.167-29.608 193.808v0zM306.158 193.092c62.375-10.675 125.492-16.458 188.775-17.292v-204.8c-97.842 9.408-182.833 98.992-231 229.367l42.225-7.275zM529.067 175.8c63.275 0.833 126.383 6.617 188.758 17.292l42.242 7.308c-48.167-130.408-133.158-220.025-231-229.383v204.783zM712.008 226.733c-60.45-10.342-121.617-15.925-182.942-16.708v220.908h272.808c-1.142-65.642-11.1-130.825-29.608-193.808l-60.258-10.392zM835.992 465.067c-1.125 63.342-10.125 126.3-26.792 187.425l145.608-25.125c20.983-51.642 32.708-106.583 34.633-162.3h-153.45zM937.542 664.983l-139.575 24.083c-25.092 81.858-72.033 155.325-135.783 212.483 119.208-39.783 218.067-124.708 275.358-236.567zM361.817 901.55c-63.75-57.158-110.692-130.625-135.783-212.483l-139.575-24.083c57.292 111.858 156.15 196.783 275.358 236.567zM86.458 231.017l139.575-24.083c25.092-81.858 72.033-155.325 135.783-212.483-119.208 39.783-218.067 124.708-275.358 236.567zM662.183-5.55c63.75 57.158 110.692 130.625 135.783 212.483l139.575 24.083c-57.292-111.858-156.15-196.783-275.358-236.567z" /> +<glyph unicode="" glyph-name="icon-netconf_executer" horiz-adv-x="926" d="M918.242 804.814c-21.117 78.231-178.291 155.186-453.231 155.186s-432.132-76.955-453.231-155.186c-1.532-2.681-2.662-5.617-2.662-8.936v-674.722c0-2.954 0.784-5.744 2.134-8.224 21.536-89.264 214.215-155.897 453.76-155.897 238.998 0 431.366 66.36 453.614 155.296 1.459 2.608 2.279 5.617 2.279 8.826v674.722c0 3.319-1.131 6.255-2.662 8.936zM882.993 340.259c-0.511-2.207-1.222-4.395-2.115-6.62-0.729-1.805-1.623-3.611-2.608-5.416-1.222-2.243-2.589-4.486-4.212-6.729-1.204-1.696-2.571-3.374-3.994-5.051-2.024-2.389-4.176-4.778-6.62-7.148-1.477-1.441-3.1-2.863-4.741-4.304-2.991-2.608-6.109-5.197-9.592-7.768-1.495-1.112-3.1-2.188-4.687-3.282-4.121-2.845-8.425-5.671-13.148-8.443-1.24-0.748-2.571-1.459-3.866-2.188-5.434-3.064-11.106-6.109-17.233-9.063-0.784-0.383-1.605-0.748-2.407-1.112-6.838-3.228-13.987-6.401-21.628-9.464-0.219-0.091-0.438-0.164-0.656-0.255-41.413-16.54-94.388-30.454-156.116-39.572-0.31-0.036-0.62-0.073-0.93-0.128-11.999-1.769-24.308-3.337-36.946-4.723-2.061-0.219-4.231-0.365-6.31-0.584-11.033-1.149-22.193-2.207-33.681-3.045-5.252-0.383-10.759-0.565-16.102-0.894-8.644-0.511-17.196-1.076-26.059-1.386-14.479-0.456-29.25-0.748-44.331-0.748s-29.852 0.292-44.349 0.802c-8.863 0.31-17.415 0.894-26.059 1.386-5.343 0.31-10.85 0.511-16.102 0.894-11.489 0.839-22.649 1.897-33.681 3.045-2.079 0.219-4.249 0.365-6.31 0.584-12.637 1.386-24.946 2.972-36.946 4.723-0.31 0.036-0.62 0.073-0.93 0.128-61.728 9.118-114.703 23.032-156.116 39.572-0.219 0.073-0.438 0.164-0.656 0.255-7.641 3.064-14.807 6.237-21.628 9.464-0.784 0.383-1.623 0.748-2.407 1.112-6.127 2.954-11.799 5.981-17.233 9.063-1.277 0.729-2.626 1.441-3.866 2.188-4.723 2.772-9.027 5.598-13.148 8.443-1.568 1.094-3.191 2.17-4.687 3.282-3.483 2.571-6.601 5.161-9.592 7.768-1.623 1.422-3.264 2.845-4.741 4.304-2.444 2.371-4.595 4.741-6.62 7.148-1.422 1.678-2.79 3.355-3.994 5.051-1.605 2.243-2.972 4.486-4.212 6.729-0.985 1.805-1.86 3.611-2.608 5.416-0.894 2.207-1.605 4.413-2.115 6.62-0.675 2.899-1.422 5.854-1.422 8.79 0 2.061 0.237 4.121 0.565 6.164 0.456 2.754 0.201 5.507-0.565 8.115v135.382c0.511-0.474 1.149-0.93 1.678-1.404 3.975-3.501 8.024-6.984 12.583-10.34 68.694-51.954 206.064-92.328 405.162-92.328 198.259 0 335.282 40.046 404.268 91.689 5.507 4.012 10.467 8.151 15.136 12.364l0.018 0.018v-135.382c-0.766-2.608-1.021-5.361-0.565-8.115 0.346-2.042 0.565-4.103 0.565-6.164 0-2.936-0.748-5.89-1.441-8.844zM884.433 717.592v-135.382c-0.766-2.608-1.021-5.361-0.565-8.115 0.346-2.042 0.565-4.103 0.565-6.164 0-2.936-0.748-5.89-1.441-8.844-0.511-2.207-1.222-4.395-2.115-6.62-0.729-1.805-1.623-3.611-2.608-5.416-1.222-2.243-2.589-4.486-4.212-6.729-1.204-1.696-2.571-3.374-3.994-5.051-2.024-2.389-4.176-4.778-6.62-7.148-1.477-1.441-3.1-2.863-4.741-4.304-2.991-2.608-6.109-5.197-9.592-7.768-1.495-1.112-3.1-2.188-4.687-3.282-4.121-2.845-8.425-5.671-13.148-8.443-1.24-0.748-2.571-1.459-3.866-2.188-5.434-3.064-11.106-6.109-17.233-9.063-0.784-0.383-1.605-0.748-2.407-1.112-6.838-3.228-13.987-6.401-21.628-9.464-0.219-0.091-0.438-0.164-0.656-0.255-41.413-16.54-94.388-30.454-156.116-39.572-0.31-0.036-0.62-0.073-0.93-0.128-11.999-1.769-24.308-3.337-36.946-4.723-2.061-0.219-4.231-0.365-6.31-0.584-11.033-1.149-22.193-2.207-33.681-3.045-5.252-0.383-10.759-0.565-16.102-0.894-8.644-0.511-17.196-1.076-26.059-1.386-14.479-0.456-29.25-0.748-44.331-0.748s-29.852 0.292-44.349 0.802c-8.863 0.31-17.415 0.894-26.059 1.386-5.343 0.31-10.85 0.511-16.102 0.894-11.489 0.839-22.649 1.897-33.681 3.045-2.079 0.219-4.249 0.365-6.31 0.584-12.637 1.386-24.946 2.972-36.946 4.723-0.31 0.036-0.62 0.073-0.93 0.128-61.728 9.118-114.703 23.032-156.116 39.572-0.219 0.073-0.438 0.164-0.656 0.255-7.641 3.064-14.807 6.237-21.628 9.464-0.784 0.383-1.623 0.748-2.407 1.112-6.127 2.954-11.799 5.981-17.233 9.063-1.277 0.729-2.626 1.441-3.866 2.188-4.723 2.772-9.027 5.598-13.148 8.443-1.568 1.094-3.191 2.17-4.687 3.282-3.483 2.571-6.601 5.161-9.592 7.768-1.623 1.422-3.264 2.845-4.741 4.304-2.444 2.371-4.595 4.741-6.62 7.148-1.422 1.678-2.79 3.355-3.994 5.051-1.605 2.243-2.972 4.486-4.212 6.729-0.985 1.805-1.86 3.611-2.608 5.416-0.894 2.207-1.605 4.413-2.115 6.62-0.675 2.899-1.422 5.854-1.422 8.79 0 2.061 0.237 4.121 0.565 6.164 0.456 2.754 0.201 5.507-0.565 8.115v135.382c2.188-1.988 4.687-3.939 7.057-5.908 1.313-1.094 2.535-2.188 3.921-3.282 5.471-4.304 11.379-8.553 17.78-12.692 1.331-0.857 2.827-1.696 4.212-2.553 5.361-3.337 11.033-6.601 16.996-9.811 2.207-1.185 4.413-2.352 6.693-3.519 6.656-3.392 13.64-6.693 20.989-9.884 1.204-0.529 2.298-1.076 3.519-1.587 8.553-3.629 17.634-7.094 27.080-10.449 2.608-0.93 5.343-1.805 8.024-2.717 7.513-2.535 15.282-4.96 23.324-7.313 2.899-0.839 5.744-1.714 8.717-2.517 10.668-2.954 21.682-5.762 33.244-8.352 1.587-0.365 3.301-0.656 4.905-1.003 10.194-2.225 20.771-4.285 31.639-6.218 3.684-0.656 7.422-1.277 11.179-1.897 10.34-1.696 20.989-3.246 31.913-4.668 2.808-0.365 5.489-0.784 8.334-1.131 13.567-1.641 27.609-3.045 42.033-4.249 3.556-0.292 7.258-0.511 10.868-0.766 11.543-0.839 23.342-1.532 35.414-2.079 4.395-0.201 8.771-0.401 13.257-0.565 15.719-0.529 31.73-0.912 48.325-0.912s32.605 0.383 48.325 0.912c4.468 0.164 8.844 0.365 13.257 0.565 12.072 0.547 23.871 1.24 35.414 2.079 3.611 0.274 7.294 0.474 10.869 0.766 14.424 1.185 28.466 2.608 42.033 4.249 2.845 0.346 5.525 0.766 8.334 1.131 10.923 1.422 21.555 2.972 31.913 4.668 3.757 0.62 7.495 1.24 11.179 1.897 10.869 1.933 21.445 3.994 31.639 6.218 1.605 0.346 3.319 0.656 4.905 1.003 11.561 2.589 22.576 5.416 33.244 8.352 2.972 0.821 5.817 1.678 8.717 2.517 8.042 2.352 15.81 4.778 23.324 7.313 2.681 0.912 5.416 1.787 8.024 2.717 9.446 3.355 18.546 6.82 27.080 10.449 1.222 0.511 2.316 1.058 3.519 1.587 7.349 3.209 14.333 6.492 20.989 9.884 2.279 1.167 4.504 2.334 6.693 3.519 5.963 3.191 11.634 6.455 16.996 9.811 1.386 0.857 2.881 1.696 4.212 2.553 6.401 4.14 12.309 8.37 17.78 12.692 1.368 1.094 2.589 2.188 3.921 3.282 2.371 1.969 4.869 3.921 7.057 5.908zM465.011 923.529c247.185 0 419.422-72.068 419.422-136.768s-172.237-136.768-419.422-136.768c-247.185 0-419.422 72.068-419.422 136.768s172.237 136.768 419.422 136.768zM884.433 126.572c-0.255-0.802-0.438-1.623-0.584-2.462-10.34-63.077-181.117-130.604-418.838-130.604s-408.499 67.527-418.838 130.604c-0.146 0.821-0.346 1.623-0.584 2.389v153.435c0.511-0.474 1.149-0.93 1.678-1.404 3.975-3.501 8.024-6.984 12.583-10.34 68.694-51.954 206.064-92.328 405.162-92.328 198.259 0 335.282 40.046 404.268 91.689 5.507 4.012 10.467 8.151 15.136 12.364l0.018 0.018v-153.363z" /> +<glyph unicode="" glyph-name="icon-resource_resolution" d="M1024 940.966c-0.026 4.551-1.873 8.898-5.136 12.076-3.271 3.169-7.669 4.89-12.22 4.785h-989.288c-4.551 0.113-8.958-1.616-12.22-4.785s-5.119-7.525-5.136-12.076v-817.72c-0.051-9.712 7.644-17.712 17.356-18.034h237.907l8.322-18.678c2.975-6.703 9.864-10.788 17.178-10.178l34.856 2.644c13.034-16.186 28.153-30.576 44.966-42.788l-1.025-34.763c-0.212-7.356 4.237-14.051 11.102-16.695l74.042-28.585c6.839-2.636 14.602-0.695 19.39 4.864l22.602 26.195c20.653-1.924 41.449-1.39 61.975 1.61l24.195-25.237c5.042-5.254 12.814-6.805 19.483-3.89l72.746 31.831c6.737 2.949 10.89 9.831 10.347 17.169l-2.559 34.856c16.203 13.034 30.61 28.161 42.831 44.983l34.788-1.025c7.305-0.39 14.042 3.949 16.703 10.763l2.805 6.924h236.636c9.712 0.331 17.407 8.322 17.356 18.034v633.729c0 0.059 0 0.11 0 0.169s0 0.11 0 0.169v183.653zM989.288 923.11v-149.695h-954.576v149.695h954.576zM707.356 123.525c-5.983 0.195-11.644-2.729-14.949-7.72-12.915-19.39-29.102-36.39-47.839-50.237-4.788-3.534-7.424-9.288-6.992-15.22l2.347-31.915-50.39-22.042-22.127 23.076c-4.034 4.212-9.915 6.11-15.653 5.059-23.093-4.229-46.703-4.839-69.983-1.805-5.788 0.754-11.568-1.458-15.373-5.873l-20.593-23.864-51.178 19.737 0.941 31.898c0.178 5.975-2.746 11.627-7.72 14.949-19.39 12.915-36.39 29.102-50.237 47.839-3.542 4.78-9.288 7.415-15.22 6.983l-31.924-2.339-6.864 15.686c-0.449 1.686-1.153 3.305-2.093 4.788l-13.085 29.915 23.076 22.127c4.212 4.034 6.11 9.915 5.059 15.644-4.229 23.093-4.839 46.703-1.805 69.983 0.746 5.788-1.458 11.568-5.873 15.381l-23.864 20.593 19.737 51.178 31.898-0.941c5.983-0.195 11.644 2.729 14.949 7.72 12.915 19.398 29.102 36.398 47.839 50.237 4.788 3.542 7.424 9.288 6.992 15.229l-2.347 31.915 50.39 22.042 22.136-23.076c4.034-4.212 9.915-6.11 15.644-5.059 23.102 4.229 46.712 4.839 69.992 1.805 5.788-0.746 11.568 1.458 15.381 5.873l20.593 23.864 51.178-19.737-0.941-31.89c-0.178-5.983 2.737-11.636 7.72-14.958 19.39-12.907 36.39-29.102 50.229-47.839 3.542-4.78 9.288-7.415 15.22-6.983l31.915 2.347 22.051-50.39-23.085-22.127c-4.203-4.034-6.102-9.915-5.059-15.644 4.229-23.093 4.839-46.703 1.814-69.983-0.754-5.788 1.449-11.568 5.873-15.381l23.864-20.593-19.754-51.178-31.89 0.924zM783.407 139.924l12.364 32.407c2.636 6.89 0.703 14.695-4.856 19.559l-26.195 22.686c1.932 20.661 1.398 41.483-1.602 62.017l25.237 24.22c5.246 5.042 6.797 12.822 3.881 19.492l-31.822 72.746c-2.949 6.746-9.831 10.898-17.169 10.356l-34.864-2.559c-13.025 16.203-28.136 30.61-44.949 42.839l1.025 34.788c0.212 7.356-4.237 14.051-11.102 16.703l-74.042 28.576c-6.839 2.636-14.602 0.695-19.39-4.856l-22.61-26.212c-20.653 1.932-41.458 1.398-61.983-1.602l-24.195 25.246c-5.034 5.254-12.814 6.805-19.483 3.89l-72.746-31.822c-6.737-2.949-10.89-9.839-10.347-17.178l2.559-34.856c-16.203-13.034-30.602-28.161-42.831-44.975l-34.788 1.017c-7.364 0.237-14.068-4.212-16.703-11.093l-28.568-74.042c-2.636-6.839-0.695-14.602 4.856-19.39l26.203-22.61c-1.932-20.644-1.398-41.449 1.602-61.966l-25.229-24.203c-5.263-5.169-6.805-13.042-3.89-19.822l8.305-19.356h-205.364v598.78h954.576v-598.78h-205.881zM224.127 794.305c29.076 0 52.737 24.432 52.737 54.466s-23.653 54.458-52.737 54.458c-29.085 0-52.737-24.424-52.737-54.458s23.661-54.466 52.737-54.466zM224.127 868.525c9.941 0 18.025-8.864 18.025-19.746s-8.085-19.754-18.025-19.754c-9.932 0-18.025 8.856-18.025 19.746s8.093 19.754 18.025 19.754zM339.093 794.305c29.068 0 52.729 24.432 52.729 54.466s-23.644 54.458-52.729 54.458c-29.085 0-52.72-24.424-52.72-54.458s23.644-54.466 52.72-54.466zM339.093 868.525c9.932 0 18.017-8.864 18.017-19.746s-8.085-19.754-18.017-19.754c-9.941 0-18.008 8.856-18.008 19.746s8.076 19.754 18.008 19.754zM109.161 794.305c29.076 0 52.737 24.432 52.737 54.466s-23.653 54.458-52.737 54.458c-29.085 0-52.729-24.432-52.729-54.458s23.653-54.466 52.729-54.466zM109.161 868.525c9.932 0 18.025-8.864 18.025-19.746s-8.093-19.754-18.025-19.754c-9.932 0-18.017 8.864-18.017 19.754 0 10.898 8.085 19.746 18.017 19.746zM512 406.958c-92.22 0-166.983-74.763-166.983-166.992 0-92.22 74.763-166.983 166.983-166.983s166.983 74.763 166.983 166.983c-0.102 92.186-74.805 166.881-166.983 166.992zM512 107.695c-73.051 0-132.271 59.22-132.271 132.271 0 73.059 59.22 132.28 132.271 132.28s132.271-59.22 132.271-132.28c-0.076-73.017-59.254-132.186-132.271-132.271zM512 323.381c-46.068 0-83.415-37.347-83.415-83.415 0-46.059 37.347-83.407 83.415-83.407s83.407 37.339 83.407 83.407c-0.051 46.042-37.364 83.356-83.407 83.415v0zM512 191.271c-26.898 0-48.703 21.805-48.703 48.695 0 26.898 21.805 48.703 48.703 48.703s48.695-21.805 48.695-48.703c-0.025-26.881-21.814-48.661-48.695-48.695v0z" /> +<glyph unicode="" glyph-name="icon-next_arrow" horiz-adv-x="559" d="M538.45 421.572l-421.316-421.303c-26.801-26.814-70.254-26.814-97.041 0-26.79 26.79-26.79 70.241 0 97.028l372.799 372.789-372.789 372.776c-26.79 26.801-26.79 70.247 0 97.037 26.79 26.801 70.241 26.801 97.041 0l421.316-421.309c13.395-13.401 20.085-30.947 20.085-48.501 0-17.563-6.703-35.121-20.096-48.516z" /> <glyph unicode="" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" /> <glyph unicode="" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" /> <glyph unicode="" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" /> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf Binary files differindex 48987f472..98cca965f 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differindex 6bea7e8eb..04f864fc0 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css index 899647321..e4dccceac 100755 --- a/cds-ui/designer-client/src/assets/icomoon/style.css +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?h11si2'); - src: url('fonts/icomoon.eot?h11si2#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?h11si2') format('truetype'), - url('fonts/icomoon.woff?h11si2') format('woff'), - url('fonts/icomoon.svg?h11si2#icomoon') format('svg'); + src: url('fonts/icomoon.eot?pyhe9j'); + src: url('fonts/icomoon.eot?pyhe9j#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?pyhe9j') format('truetype'), + url('fonts/icomoon.woff?pyhe9j') format('woff'), + url('fonts/icomoon.svg?pyhe9j#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -35,6 +35,26 @@ -moz-osx-font-smoothing: grayscale; } +.icon-dg_generic:before { + content: "\e910"; + color: #1b3e6f; +} +.icon-remote_ansible:before { + content: "\e911"; + color: #1b3e6f; +} +.icon-netconf_executer:before { + content: "\e912"; + color: #1b3e6f; +} +.icon-resource_resolution:before { + content: "\e913"; + color: #1b3e6f; +} +.icon-next_arrow:before { + content: "\e914"; + color: #1b3e6f; +} .icon-function-attribute:before { content: "\e90e"; } diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 8b576db2e..5950c6a99 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -468,6 +468,7 @@ height: 40px; background: none !important; text-decoration: none; color: #1B3E6F; + cursor: pointer; } .tags-filter-list{ max-height: 260px; @@ -1165,6 +1166,14 @@ height: 40px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } +.packagesFilter .dropdown-content ul{ + max-height: 200px; + overflow-y: auto; + padding-left: 0; +} +.packagesFilter .dropdown-content li{ + list-style: none; +} .packagesFilter .dropdown-content li:hover .custom-checkbox{ cursor: pointer; } @@ -2938,6 +2947,11 @@ animation: glowing 1500ms infinite; position: absolute; top: 13px; } +/* -------- ace editor style -------- */ +.editor-container{ + height: 55vh !important; + overflow: scroll; +} .ace_print-margin{ left: 100% !important; background: #eee !important; @@ -2946,7 +2960,7 @@ animation: glowing 1500ms infinite; width: 100% !important; } .ace_editor{ - height: 55vh !important; + /* height: 55vh !important; */ line-height: 25px; border: 1px solid #ECEDF2; background-color: #fff; @@ -2967,6 +2981,7 @@ animation: glowing 1500ms infinite; .ace-tm .ace_marker-layer .ace_active-line{ background: #F4F9FE !important; } +/* -------- end of ace editor style -------- */ .breadcrumb-header{ padding: 0px; margin: 0px; |
