diff options
Diffstat (limited to 'cds-ui/designer-client')
26 files changed, 1416 insertions, 186 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..766c50a98 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,25 @@ 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'); + + }, err => { }, () => { + 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 +243,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl } enrichBluePrint() { + this.ngxService.start(); this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology); this.formTreeData(); this.enrichPackage(); @@ -236,11 +254,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 +268,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 +285,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 d23628bc7..5a0c9aaad 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 @@ -16,12 +16,13 @@ <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> - <span>Custom Attribute</span> + <span>Create Custom</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> - <span>Function Attribute</span> + <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>Import From Function</span> </div> </div> </div> @@ -45,7 +46,8 @@ <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> + <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" @@ -81,8 +83,8 @@ <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 optional-attribute" + type="button" aria-hidden="true"></i> </label> </div> @@ -196,6 +198,22 @@ </div> </div> <div class="form-group row"> + <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label> + <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)"> + <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"> + <label class="custom-control-label" for="customRadioInline4" + (click)="setOutputRequired(false)">False</label> + </div> + </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"> @@ -225,22 +243,169 @@ (change)="setOutputType(outputOtherType)"> </div> </div> + <!--Get Attribute Value--> + <div class="form-group row mb-0"> + <label class="col-form-label col pt-0"> + Value <span class="notation">(get_attribute)</span> + </label> + </div> <div class="form-group row"> - <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label> - <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)"> - <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"> - <label class="custom-control-label" for="customRadioInline4" - (click)="setOutputRequired(false)">False</label> + <div class="col"> + <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes"> + <div class="container"> + <!-- <div *ngFor="let tempInput of steps">{{tempInput}}</div>--> </div> </div> </div> + + + <section class="carousel" aria-label="Gallery"> + + <ol class="carousel__viewport"> + <!--Function--> + <li id="carousel__slide1" tabindex="0" class="carousel__slide"> + <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)="getAttributesAndOutputs( + this.designerState.template.workflows[actionName]['steps'][step]['target'] + )"></i></a> + </div> + </div> + <div class="carousel__snapper" [hidden]="!isNotComponentResourceResolution"> + <a href="#carousel__slide4" [hidden]="isParametersHidden" + class="carousel__prev">Parameters</a> + <a href="#carousel__slide2" class="carousel__next">Attributes</a> + </div> + </li> + <!--Attribute--> + <li id="carousel__slide2" tabindex="1" class="carousel__slide"> + <b class="listBoxTitle">2. Choose 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="suggestedAttributes.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedAttribute of suggestedAttributes" + [id]="suggestedAttribute" + (click)="addTempOutputAttr(suggestedAttribute)"> + <input type="radio" name="options" + [id]="suggestedAttribute+'.,.'" + autocomplete="off"> + {{suggestedAttribute}} + </label> + + </div> + <div *ngIf="suggestedAttributes.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> + </div> + </div> + </div> + <div class="carousel__snapper"></div> + <a href="#carousel__slide1" class="carousel__prev">Functions</a> + <a href="#carousel__slide3" [hidden]="!isNotComponentResourceResolution" + class="carousel__next">Artifacts</a> + + </li> + <!--Artifact--> + <li id="carousel__slide3" [hidden]="isNotComponentResourceResolution" tabindex="2" + class="carousel__slide"> + <b class="listBoxTitle">3. Choose Artifact 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="currentArtifacts.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedArtifact of currentArtifacts" + (click)="addArtifactFile(suggestedArtifact)"> + <input type="radio" name="options" [id]="suggestedArtifact" + autocomplete="off" + (click)="addTempOutputAttr(suggestedArtifact)"> + {{suggestedArtifact}} + </label> + + </div> + <div *ngIf="currentArtifacts.length == 0"> + <p class="noAttributes">No Artifacts Available</p> + </div> + </div> + </div> + </div> + <div class="carousel__snapper" [hidden]="!isNotComponentResourceResolution"> + <a href="#carousel__slide2" class="carousel__prev">Attributes</a> + <a href="#carousel__slide4" [hidden]="isParametersHidden" + class="carousel__next">Parmeters</a> + </div> + </li> + <!--Parameter--> + <li id="carousel__slide4" + [hidden]="isParametersHidden" tabindex="3" + class="carousel__slide"> + <b class="listBoxTitle">4. Choose Parameter 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="suggestedAttributes.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedAttribute of suggestedAttributes" + (click)="addTempOutputAttr(suggestedAttribute)"> + <input type="radio" name="options" [id]="suggestedAttribute" + autocomplete="off" + (click)="addTempOutputAttr(suggestedAttribute)"> + {{suggestedAttribute}} + </label> + + </div> + <div *ngIf="suggestedAttributes.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> + </div> + </div> + </div> + <div class="carousel__snapper"></div> + <a href="#carousel__slide3" [hidden]="isNotComponentResourceResolution" + class="carousel__prev">Artifacts</a> + <a href="#carousel__slide1" class="carousel__next">Functions</a> + + </li> + </ol> + <aside class="carousel__navigation"> + <ol class="carousel__navigation-list"> + <li class="carousel__navigation-item"> + <a href="#carousel__slide1" class="carousel__navigation-button">Functions</a> + </li> + <li class="carousel__navigation-item"> + <a href="#carousel__slide2" class="carousel__navigation-button">Attributes</a> + </li> + <li class="carousel__navigation-item" [hidden]="isNotComponentResourceResolution"> + <a href="#carousel__slide3" class="carousel__navigation-button">Artifacts</a> + </li> + <li class="carousel__navigation-item" + [hidden]="isParametersHidden"> + <a href="#carousel__slide4" + class="carousel__navigation-button">Parameters</a> + </li> + </ol> + </aside> + </section> </div> </div> </div> @@ -251,6 +416,154 @@ </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"> + <p class="noAttributes">No Attributes Available</p> + </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"> + <p class="noAttributes">No Attributes Available</p> + </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"> 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 752f0502d..babfec772 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 @@ -3,6 +3,8 @@ import {InputActionAttribute, OutputActionAttribute} from './models/InputActionA 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', @@ -13,6 +15,8 @@ export class ActionAttributesComponent implements OnInit { inputs = []; outputs = []; + newInputs = []; + newOutputs = []; actionAttributesSideBar: boolean; inputActionAttribute = new InputActionAttribute(); outputActionAttribute = new OutputActionAttribute(); @@ -22,17 +26,46 @@ export class ActionAttributesComponent implements OnInit { inputOtherType = ''; actionName = ''; designerState: DesignerDashboardState; + isFunctionAttributeActive = false; + functions: FunctionsState; + steps: string[]; + suggestedInputs: string[] = []; + suggestedOutputs: string[] = []; - constructor(private designerStore: DesignerStore) { + tempInputs: string[] = []; + tempOutputs: string[] = []; + currentInterfaceName: string; + functionAndAttributesInput: Map<string, string[]> = new Map<string, string[]>(); + private currentTargetFunctionName: any; + private functionAndAttributesOutput: Map<string, string[]> = new Map<string, string[]>(); + suggestedAttributes: string[] = []; + selectedFunctionName = ''; + selectedAttributeName = ''; + isNotComponentResourceResolution = true; + currentArtifacts: string[] = []; + isParametersHidden = true; + + constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore) { } ngOnInit() { + console.log('is paramters hidden' + this.isParametersHidden); + console.log('is artifacts hidden' + this.isNotComponentResourceResolution); this.designerStore.state$.subscribe(designerState => { this.designerState = designerState; if (this.designerState && this.designerState.actionName) { this.actionName = this.designerState.actionName; + console.log(this.actionName); const action = this.designerState.template.workflows[this.actionName] as Action; + if (action.steps) { + const steps = Object.keys(action.steps); + this.isFunctionAttributeActive = steps && steps.length > 0; + this.steps = steps; + this.suggestedOutputs = []; + this.suggestedInputs = []; + } + this.inputs = []; if (action.inputs) { const namesOfInput = Object.keys(action.inputs); @@ -45,6 +78,10 @@ export class ActionAttributesComponent implements OnInit { } } }); + + this.functionsStore.state$.subscribe(functions => { + this.functions = functions; + }); } @@ -65,14 +102,15 @@ export class ActionAttributesComponent implements OnInit { addInput(input: InputActionAttribute) { if (input && input.type && input.name) { const insertedInputActionAttribute = Object.assign({}, input); - this.inputs.push(insertedInputActionAttribute); + this.newInputs.push(insertedInputActionAttribute); } } addOutput(output: OutputActionAttribute) { + console.log(output); if (output && output.type && output.name) { const insertedOutputActionAttribute = Object.assign({}, output); - this.outputs.push(insertedOutputActionAttribute); + this.newOutputs.push(insertedOutputActionAttribute); } } @@ -100,10 +138,21 @@ export class ActionAttributesComponent implements OnInit { submitAttributes() { this.addInput(this.inputActionAttribute); + if (this.selectedFunctionName && this.selectedAttributeName) { + this.outputActionAttribute.value = + '["' + this.selectedFunctionName + '","' + this.selectedAttributeName + '"]'; + } this.addOutput(this.outputActionAttribute); this.clearFormInputs(); - this.designerStore.setInputsAndOutputsToSpecificWorkflow(this.storeInputs(this.inputs) - , this.storeOutputs(this.outputs), this.actionName); + this.storeOutputs(this.newOutputs); + this.storeInputs((this.newInputs)); + this.newInputs.forEach(input => { + this.inputs.push(input); + }); + + this.newOutputs.forEach(output => { + this.outputs.push(output); + }); } private clearFormInputs() { @@ -120,28 +169,233 @@ export class ActionAttributesComponent implements OnInit { inputs += this.appendAttributes(input); }); - if (inputs.endsWith(',')) { - inputs = inputs.substr(0, inputs.length - 1); - } - return JSON.parse('{' + inputs + '}'); + this.writeAttribute(inputs, 'inputs'); } private storeOutputs(OutputActionAttributes: OutputActionAttribute[]) { let outputs = ''; OutputActionAttributes.forEach(output => { - outputs += this.appendAttributes(output); + outputs += this.appendOutputAttributes(output); + }); + this.writeAttribute(outputs, 'outputs'); + } + + private appendAttributes(inputActionAttribute: InputActionAttribute) { + return '"' + inputActionAttribute.name + '" : {\n' + + ' "required" : ' + inputActionAttribute.required + ',\n' + + ' "type" : "' + inputActionAttribute.type + '",\n' + + ' "description" : "' + inputActionAttribute.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 (!this.functionAndAttributesInput.has(targetName)) { + this.currentTargetFunctionName = targetName; + this.functionAndAttributesInput.set(targetName, []); + } + + if (!this.functionAndAttributesOutput.has(targetName)) { + this.currentTargetFunctionName = targetName; + this.functionAndAttributesOutput.set(targetName, []); + } + + 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']); + } + 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); + this.addAttribute(this.functionAndAttributesInput.get(this.currentTargetFunctionName), suggestedInput); + } + + addTempOutput(suggestedOutput: string) { + this.addAttribute(this.tempOutputs, suggestedOutput); + this.deleteAttribute(this.suggestedOutputs, suggestedOutput); + this.addAttribute(this.functionAndAttributesOutput.get(this.currentTargetFunctionName), 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() { + this.writeSelectedAttribute(this.functionAndAttributesInput, 'inputs'); + this.writeSelectedAttribute(this.functionAndAttributesOutput, 'outputs'); + } + + private writeSelectedAttribute(map: Map<string, string[]>, attributeType: string) { + map.forEach((value, key) => { + const nodeTemplate = this.getNodeTemplate(key); + this.functions.serverFunctions + /* tslint:disable:no-string-literal */ + .filter(currentFunction => currentFunction.modelName.includes(nodeTemplate['type'])) + .forEach(currentFunction => { + + if (currentFunction['definition'] && currentFunction['definition']['interfaces'] + [Object.keys(currentFunction['definition'] && currentFunction['definition']['interfaces'])] + ['operations']['process'][attributeType]) { + let newAttributes = ''; + const attributes = currentFunction['definition'] && currentFunction['definition']['interfaces'] + [Object.keys(currentFunction['definition'] && currentFunction['definition']['interfaces'])] + ['operations']['process'][attributeType]; + value.forEach(attribute => { + newAttributes += '"' + attribute + '": ' + this.convertToString(attributes[attribute]) + ','; + }); + if (value.length > 0) { + this.writeAttribute(newAttributes, attributeType); + } + } + }); }); - if (outputs.endsWith(',')) { - outputs = outputs.substr(0, outputs.length - 1); + } + + private writeAttribute(newAttributes: string, attributeType: string) { + newAttributes = this.removeTheLastComma(newAttributes); + const originalAttributes = this.convertToString(this.designerState.template.workflows[this.actionName] + [attributeType]); + console.log(originalAttributes.substr(0, originalAttributes.length - 1) + ',' + newAttributes + '}'); + this.designerState.template.workflows[this.actionName][attributeType] = + this.convertToObject(originalAttributes.substr(0, originalAttributes.length - 1) + + ',' + newAttributes + '}'); + } + + private removeTheLastComma = (newInputs: string) => { + if (newInputs.endsWith(',')) { + newInputs = newInputs.substr(0, newInputs.length - 1); + } + return newInputs; + } + + private convertToString = object => JSON.stringify(object); + + private convertToObject = stringValue => JSON.parse(stringValue); + + private getNodeTemplate = (value: string) => this.designerState.template.node_templates[value]; + + + getAttributesAndOutputs(functionName: string) { + this.suggestedAttributes = []; + console.log(functionName); + if (functionName.includes('component-resource-resolution')) { + this.isNotComponentResourceResolution = false; + this.isParametersHidden = true; + } else { + this.isNotComponentResourceResolution = true; + this.isParametersHidden = true; + } + const nodeTemplate = this.designerState.template.node_templates[functionName]; + 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 => { + if (currentFunction.definition['attributes']) { + Object.keys(currentFunction.definition['attributes']).forEach(attribute => { + this.suggestedAttributes.push(attribute); + this.suggestedAttributes.push('assignment-map'); + }); + } + console.log(this.suggestedAttributes); + + this.selectedFunctionName = functionName; + + + }); + } + + addTempOutputAttr(suggestedOutputAndAttribute: string) { + console.log('ssss'); + this.selectedAttributeName = suggestedOutputAndAttribute; + this.currentArtifacts = []; + const nodeTemplate = this.designerState.template.node_templates[this.selectedFunctionName]; + if (nodeTemplate['artifacts'] + ) { + Object.keys(nodeTemplate['artifacts']).forEach(key => { + const mappingName = key.split('-')[0]; + if (!this.currentArtifacts.includes(mappingName)) { + this.currentArtifacts.push(mappingName); + } + }); } - return JSON.parse('{' + outputs + '}'); + console.log('happend'); + } - private appendAttributes(output: OutputActionAttribute) { + + private appendOutputAttributes(output: OutputActionAttribute) { return '"' + output.name + '" : {\n' + ' "required" : ' + output.required + ',\n' + ' "type" : "' + output.type + '",\n' + - ' "description" : "' + output.description + '"\n' + + ' "description" : "' + output.description + '",\n' + + ' "value\" :' + '{\n' + + ' "get_attribute" : ' + output.value + '\n' + + ' }\n' + ' },'; + + } + + addArtifactFile(suggestedArtifact: string) { + console.log(suggestedArtifact); + this.isParametersHidden = !this.selectedAttributeName.includes('assignment-map'); + console.log('assignement map ' + this.isParametersHidden); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts index b4cce3484..82bdb6076 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/models/InputActionAttribute.ts @@ -4,14 +4,16 @@ export class InputActionAttribute { type: string; required: boolean; + constructor() { this.name = ''; this.description = ''; this.type = ''; this.required = true; + } } export class OutputActionAttribute extends InputActionAttribute { - + value = ''; } 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..b076af378 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 @@ -272,6 +272,10 @@ button.rotate{ left: 0; height: 95%; } */ +/* .ng-sidebar__content.ng-sidebar__content--animate{ + padding-top: 70px !important; +} */ + .functionsList tspan{ /* width:30px !important; */ font: normal 13px sans-serif; @@ -337,6 +341,45 @@ p.compType-4{ margin: 0 auto; background: red; } +.actionSubList{ + margin:0 0 0 4px; /* indentation */ + padding:0; + list-style:none; + position:relative; +} +.actionSubList:before { + content: ""; + display: block; + width: 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + border-left: 1px solid #C1CDDD; +} +.actionSubList li{ + margin: 0; + padding: 0 1.5em; /* indentation + .5em */ + line-height: 32px; + position: relative; +} +.actionSubList li::before{ + content: ""; + display: block; + width: 10px; /* same with indentation */ + height: 0; + border-top: 1px solid #C1CDDD; + margin-top: -1px; /* border top width */ + position: absolute; + top: 16px; /* (line-height/2) */ + left: 0; +} +.actionSubList li:last-child:before { + background: #F4F9FE; /* same with body background */ + height: auto; + top: 16px; /* (line-height/2) */ + bottom: 0; +} .controllerSidebar{ width: 320px; @@ -400,7 +443,10 @@ p.compType-4{ font-weight: bold; /* outline: 0 !important; */ float: left; - +} +.actionsList li:hover, +.actionsList li label:hover{ + cursor: pointer; } .new-action, .new-action:hover{ @@ -674,6 +720,9 @@ p.compType-4{ background-color: #1B3E6F; color: #fff !important; } +.add-attribute .btn i{ + font-weight: bold; +} .attributesContainer h1{ margin-bottom: 10px; padding: 12px 0 12px 15px; @@ -802,6 +851,7 @@ p.compType-4{ height: 60px; } .icon-required-star{ + margin-left: 2px; font-size: 10px; } .optional-attribute::before{ @@ -1096,6 +1146,9 @@ ul.editor{ .modal{ top: 60px; } +.modal-dialog-scrollable{ + max-height: calc(100% - 20%) !important; +} .modal-backdrop{ z-index: 0 !important; opacity: 0 !important; @@ -1106,11 +1159,16 @@ ul.editor{ max-width: 50%; } .modal-body{ + padding: 18px 24px !important; font-size: 14px; } + .createAttributeTabs .nav-link{ padding-top: 0 !important; } +.createAttributeTabs .nav-item a{ + color: #C3CDDB !important; +} .createAttributeTabs .nav-item a, .createAttributeTabs .nav-item a.active{ border-radius: 0 !important; @@ -1132,6 +1190,98 @@ ul.editor{ padding: 20px 50px; border: solid 1px #F4F9FE; } +.createAttributeTabs .listBoxTitle{ + font-size: 11px; + line-height: 29px; +} +.createAttributeTabs .notation{ + margin-left: 3px; + color: #C3CDDB !important; + font-weight: normal; +} +.addedFunctionsList, +.nestedAttributes{ + background: #F4F9FE; + border: solid 1px #D0DFF1 !important; +} +.addedFunctionsList .scrollWrapper, +.nestedAttributes .scrollWrapper{ + height: 230px; + max-height: 300px; + 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; +} +.nestedAttributes .noAttributes{ + margin: 12px; + font-weight: bold; + font-size: 12px; +} +.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: 10px; + line-height: 20px; +} +.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; @@ -1252,4 +1402,250 @@ ul.editor{ margin: 12px; padding: 8px 12px !important; line-height: 14px; -}
\ No newline at end of file +} +.testttt .test0{ + width: 48%; + margin: 0 1%; +} + + + + + + + +@keyframes tonext { + 75% { + left: 0; + } + 95% { + left: 100%; + } + 98% { + left: 100%; + } + 99% { + left: 0; + } +} + +@keyframes tostart { + 75% { + left: 0; + } + 95% { + left: -300%; + } + 98% { + left: -300%; + } + 99% { + left: 0; + } +} + +@keyframes snap { + 96% { + scroll-snap-align: center; + } + 97% { + scroll-snap-align: none; + } + 99% { + scroll-snap-align: none; + } + 100% { + scroll-snap-align: center; + } +} + + + +* { + box-sizing: border-box; + scrollbar-color: transparent transparent; /* thumb and track color */ + scrollbar-width: 0px; +} + +*::-webkit-scrollbar { + width: 0; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background: transparent; + border: none; +} + +* { + -ms-overflow-style: none; +} + + +.carousel { + position: relative; + height: 360px; + /* padding-top: 75%; */ + /* filter: drop-shadow(0 0 10px #0003); */ + /* perspective: 100px; */ +} + +.carousel__viewport { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + margin-top: 40px; + margin-bottom: 0; + padding: 0 12px 0 0; + overflow-x: scroll; + counter-reset: item; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; +} + +.carousel__slide { + position: relative; + flex: 0 0 50%; + width: 100%; + margin-right: 12px; + counter-increment: item; + list-style: none; +} + +/* +.carousel__slide:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%,-40%,70px); + color: #fff; + font-size: 2em; +} */ + +.carousel__snapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + scroll-snap-align: center; +} + +@media (hover: hover) { + .carousel__snapper { + animation-name: tonext, snap; + animation-timing-function: ease; + animation-duration: 4s; + animation-iteration-count: infinite; + } + + .carousel__slide:last-child .carousel__snapper { + animation-name: tostart, snap; + } +} + +@media (prefers-reduced-motion: reduce) { + .carousel__snapper { + animation-name: none; + } +} + +.carousel:hover .carousel__snapper, +.carousel:focus-within .carousel__snapper { + animation-name: none; +} + +.carousel__navigation { + position: absolute; + right: 0; + top: 0; + left: 0; + text-align: center; + +} + +.carousel__navigation-list, +.carousel__navigation-item{ + display: inline-block; + margin-bottom: 0; +} +.carousel__navigation-item{ + width: 100px; + padding: 6px 12px; + background-color: #DEE8F3; + border-right: solid 1px #C8D6E6; + font-size: 11px; + font-weight: bold; +} +.carousel__navigation-item:first-child{ + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.carousel__navigation-item:last-child{ + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right: 0; +} +.carousel__navigation-button, +.carousel__navigation-button:hover{ + display: inline-block; + width: auto; + /* background-clip: content-box; */ + transition: transform 0.1s; + color: #1B3E6F; +} +.carousel__navigation-button:hover{ + text-decoration: none; +} +.carousel::before, +.carousel::after, +.carousel__prev, +.carousel__next{ + position: absolute; + top: 0; + margin-top: 0; + width: 4rem; + transform: translateY(0); + border-radius: 3px; + font-size: 0; + outline: 0; +} + +/* .carousel::before, +.carousel__prev { + left: -1rem; +} + +.carousel::after, +.carousel__next { + right: -1rem; +} */ + +/* .carousel::before, +.carousel::after { + content: ''; + z-index: 1; + background-color: #333; + background-size: 1.5rem 1.5rem; + background-repeat: no-repeat; + background-position: center center; + color: #fff; + font-size: 2.5rem; + line-height: 4rem; + text-align: center; + pointer-events: none; +} + +.carousel::before { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); +} + +.carousel::after { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); +} */ 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 a552c28f6..3ca377df7 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 @@ -12,7 +12,7 @@ <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal" - data-target="#exampleModalLong" data-tooltip="Package Details"> + data-target="#exampleModalLong" data-tooltip="Package Details"> <i class="icon-info" aria-hidden="true"></i> </button> </li> @@ -22,13 +22,13 @@ </li> </ol> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" - aria-labelledby="exampleModalLongTitle" aria-hidden="true"> + aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Package Details</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 package-info"> @@ -70,15 +70,15 @@ <li> <div class="btn-group" role="group" aria-label="Basic example"> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Preview"> + data-tooltip="Preview"> <i class="fa fa-eye"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Download"> + data-tooltip="Download"> <i class="fa fa-download"></i> </a> <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" - data-tooltip="Share"> + data-tooltip="Share"> <i class="fa fa-share-square"></i> </a> </div> @@ -107,7 +107,7 @@ <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> <!--Actions/Functions Side Menu Toogole Button--> <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" - data-tooltip="Collapse Side bar"> + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <!--Nav Tabs--> @@ -119,9 +119,9 @@ <div class="col-12"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> + aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a> <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab" - aria-controls=" " aria-selected="false">Template</a> + aria-controls=" " aria-selected="false">Template</a> </div> </div> </nav> @@ -162,7 +162,7 @@ <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> <button [routerLink]="['/designer/source', viewedPackage.id]" type="button" - class="btn btn-secondary topologyView">Scripting + class="btn btn-secondary topologyView">Scripting </button> </div> </li> @@ -173,15 +173,15 @@ <ng-sidebar-container class="sidebar-container"> <!--Left Side Menu--> <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" - [mode]="'push'" #sidebarLeft> + [mode]="'push'" #sidebarLeft> <nav class="row"> <!--Nav Tabs--> <div class="col"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action" - role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> + role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a> <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function" - role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> + role="tab" aria-controls="nav-function" aria-selected="false">Functions</a> </div> </div> </nav> @@ -190,7 +190,7 @@ <div class="tab-content" id="nav-tabContent"> <!--Action List--> <div class="tab-pane fade show active" id="nav-action" role="tabpanel" - aria-labelledby="nav-action-tab"> + aria-labelledby="nav-action-tab"> <!--Action Search Box--> <input type="text" class="form-control input-search-controller" placeholder="Search Actions"> @@ -200,11 +200,11 @@ 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,20 @@ <div *ngIf="!showAction" class="custom-control"> <ul> <li *ngFor="let customActionName of actions"> - <label> - <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openFunctionAttributes(customActionName)"></i> + <label (click)="openActionAttributes(customActionName)" + [attr.for]="customActionName"> + <i class="icon-file" aria-hidden="true" class="icon-file"></i> {{customActionName}} </label> + + <ul *ngIf="customActionName.includes(this.currentActionName)" + class="actionSubList"> + <li (click)="openFunctionAttributes(currentFunction)" + [attr.for]="customActionName" *ngFor="let currentFunction of steps"> + <span>{{getTarget(currentFunction)}}</span> + </li> + </ul> </li> + </ul> </div> </div> @@ -279,7 +288,7 @@ <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> </div> <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" - [position]="'right'" #sidebarRight1> + [position]="'right'" #sidebarRight1> <div class="container-fluid0"> <div class="row m-0"> <div class="col attributesContainer"> @@ -292,9 +301,9 @@ <div class="col-3 pl-0"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn view-source" tooltip="View Action Source" - placement="bottom"><i class="icon-source"></i></button> + placement="bottom"><i class="icon-source"></i></button> <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1" - class="btn trash-item" tooltip="Delete Action" placement="bottom"><i + class="btn trash-item" tooltip="Delete Action" placement="bottom"><i class="icon-delete-sm" aria-hidden="true"></i></button> </div> </div> @@ -306,24 +315,24 @@ </ng-sidebar> <!--Right Side Menu - Function Attribute--> <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'" - [position]="'right'" #sidebarRight2> + [position]="'right'" #sidebarRight2> <div class="container-fluid0"> <div class="row m-0"> <div class="col attributesContainer"> <div class="row m-0 attributesContainertTitle"> <div class="col-2 pl-0"> <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close" - placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i> + placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i> </button> </div> <h6 class="col pl-0">Function Attributes</h6> <div class="col-3 pl-0"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn view-source" tooltip="View Function Source" - placement="bottom"><i class="icon-source"></i></button> + placement="bottom"><i class="icon-source"></i></button> <button type="button" class="btn trash-item" tooltip="Delete Function" - placement="bottom"><i class="icon-delete-sm" type="button" - aria-hidden="true"></i></button> + placement="bottom"><i class="icon-delete-sm" type="button" + aria-hidden="true"></i></button> </div> </div> </div> @@ -334,4 +343,4 @@ </ng-sidebar> -</ng-sidebar-container> +</ng-sidebar-container>
\ No newline at end of file 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 77e0ceed6..88f28b780 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 @@ -25,32 +25,33 @@ limitations under the License. import dagre from 'dagre'; import graphlib from 'graphlib'; -import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import * as joint from 'jointjs'; import './jointjs/elements/palette.function.element'; import './jointjs/elements/action.element'; import './jointjs/elements/board.function.element'; -import {DesignerStore} from './designer.store'; -import {ActionElementTypeName} from 'src/app/common/constants/app-constants'; -import {GraphUtil} from './graph.util'; -import {GraphGenerator} from './graph.generator.util'; -import {FunctionsStore} from './functions.store'; -import {Subject} from 'rxjs'; -import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; -import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; -import {ActivatedRoute, Router} from '@angular/router'; -import {DesignerService} from './designer.service'; -import {FilesContent, FolderNodeElement} from '../package-creation/mapping-models/metadata/MetaDataTab.model'; -import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder'; -import {PackageCreationStore} from '../package-creation/package-creation.store'; -import {PackageCreationService} from '../package-creation/package-creation.service'; -import {PackageCreationUtils} from '../package-creation/package-creation.utils'; +import { DesignerStore } from './designer.store'; +import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; +import { GraphUtil } from './graph.util'; +import { GraphGenerator } from './graph.generator.util'; +import { FunctionsStore } from './functions.store'; +import { Subject } from 'rxjs'; +import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; +import { BluePrintDetailModel } from '../model/BluePrint.detail.model'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DesignerService } from './designer.service'; +import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model'; +import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder'; +import { PackageCreationStore } from '../package-creation/package-creation.store'; +import { PackageCreationService } from '../package-creation/package-creation.service'; +import { PackageCreationUtils } from '../package-creation/package-creation.utils'; import * as JSZip from 'jszip'; -import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service'; -import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model'; -import {TopologyTemplate} from './model/designer.topologyTemplate.model'; -import {ToastrService} from 'ngx-toastr'; +import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service'; +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', @@ -74,13 +75,16 @@ export class DesignerComponent implements OnInit, OnDestroy { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; ngUnsubscribe = new Subject(); - opt = {tx: 100, ty: 100}; + opt = { tx: 100, ty: 100 }; filesData: any = []; folder: FolderNodeElement = new FolderNodeElement(); zipFile: JSZip = new JSZip(); cbaPackage: CBAPackage; actions: string[] = []; dataTarget: string; + steps: string[]; + designerState: DesignerDashboardState; + currentActionName: string; constructor( private designerStore: DesignerStore, @@ -118,7 +122,7 @@ export class DesignerComponent implements OnInit, OnDestroy { publishBluePrint() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { const formData = new FormData(); formData.append('file', blob); @@ -165,7 +169,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion) .subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + const blob = new Blob([response], { type: 'application/octet-stream' }); this.packageCreationExtractionService.extractBlobToStore(blob); }); } @@ -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 @@ -227,7 +232,7 @@ export class DesignerComponent implements OnInit, OnDestroy { setLinkVertices: false, marginX: 10, marginY: 10, - clusterPadding: {top: 100, left: 30, right: 10, bottom: 100}, + clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 }, rankDir: 'TB' }); this.actions = []; @@ -463,7 +468,7 @@ export class DesignerComponent implements OnInit, OnDestroy { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationService.savePackage(blob).subscribe( bluePrintDetailModels => { @@ -478,9 +483,28 @@ 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) { + // console.log(customFunctionName); + this.actionAttributesSideBar = false; + this.functionAttributeSidebar = true; + // console.log(this.designerState.template.workflows[this.currentActionName] + // ['steps'][customFunctionName]['target']); + this.designerStore.setCurrentFunction(this.designerState.template.workflows[this.currentActionName] + ['steps'][customFunctionName]['target']); + } + + getTarget(stepname) { + return this.designerState.template.workflows[this.currentActionName] + ['steps'][stepname]['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 c59478d91..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 @@ -169,4 +169,11 @@ export class DesignerStore extends Store<DesignerDashboardState> { 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..ab5bb123e 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" @@ -58,6 +58,8 @@ </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="functionRadioInline" name="functionRadioInline" + [checked]="!currentFuncion['inputs']['artifact-prefix-names']?.get_input" + (click)="setArtifact(true)" class="custom-control-input"> <label class="custom-control-label" for="functionRadioInline">Pre-defined Template</label> @@ -204,7 +206,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 20305e853..347f304c8 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, @@ -37,13 +44,33 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { } ngOnInit() { - this.designerStore.state$ - .pipe( - distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), - takeUntil(this.ngUnsubscribe)) - .subscribe(designerDashboardState => { - this.designerDashboardState = designerDashboardState; - }); + this.designerStore.state$.subscribe(designerDashboardState => { + this.designerState = designerDashboardState; + this.actionName = this.designerState.actionName; + const action = this.designerState.template.workflows[this.actionName] as Action; + this.currentFuncion = new NodeProcess(); + try { + console.log(action); + if (action) { + // this.designerState.functionName + const child = Object.keys(action.steps)[0]; + this.functionName = this.designerState.functionName; + console.log(this.designerState.template.node_templates); + console.log(this.designerState); + console.log(this.designerState.template.node_templates[this.functionName]); + // this.currentFuncion = this.designerState.template.node_templates[this.functionName]; + // reset inouts&outputs + this.requiredInputs = new Map<string, {}>(); + this.requiredOutputs = new Map<string, {}>(); + this.OptionalInputs = new Map<string, {}>(); + this.optionalOutputs = new Map<string, {}>(); + 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.onInitMapping(); + } + } catch (e) { } + }); this.packageCreationStore.state$ .subscribe(cbaPackage => { @@ -65,25 +92,86 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate); }); }); - this.getNodeType('component-resource-resolution'); } + onInitMapping() { + // selectedTemplates , templateAndMappingMap + this.selectedTemplates = new Map<string, TemplateAndMapping>(); + try { + const functionMap = this.designerState.template.node_templates[this.functionName].artifacts; + console.log(this.templateAndMappingMap); + + Object.keys(functionMap).forEach((file) => { + const filename = file.substring(0, file.lastIndexOf('-')); + console.log(filename); + if (this.templateAndMappingMap.has(filename)) { + this.selectedTemplates.set(filename, this.templateAndMappingMap.get(filename)); + } + }); + + + } catch (e) { } + } + + toNodeProcess(nodeTemplate, functionName) { + 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]; + // console.log(Object.keys(nodeTemplate.interfaces)); + // 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']; + + // console.log(inputs); + + 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() { + addTemplates() { } + saveFunctionData() { + this.nodeTemplates = new NodeTemplate(''); // tslint:disable-next-line: variable-name const node_templates = {}; - const type = 'component-resource-resolution'; - const instanceName = this.currentFuncion['instance-name']; + 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); + console.log(finalFunctionData.inputs['artifact-prefix-names']); + + if (finalFunctionData.inputs['artifact-prefix-names'] === undefined) { + finalFunctionData.inputs['artifact-prefix-names'] = [key]; + } else if ( + Array.isArray(finalFunctionData.inputs['artifact-prefix-names']) && + !finalFunctionData.inputs['artifact-prefix-names'].includes(key) + ) { + finalFunctionData.inputs['artifact-prefix-names'].push(key); + } if (value.isMapping) { this.nodeTemplates.artifacts[key + '-mapping'] = { @@ -101,22 +189,24 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { }); // instantiate the final node_template object to save - this.nodeTemplates.type = 'component-resource-resolution'; - node_templates[this.currentFuncion['instance-name']] = this.nodeTemplates; + this.nodeTemplates.type = type; + node_templates[finalFunctionData['instance-name']] = this.nodeTemplates; - delete this.currentFuncion['instance-name']; + 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, } } } }; - console.log(this.currentFuncion); + console.log(finalFunctionData); console.log(node_templates); // tslint:disable-next-line: no-unused-expression this.designerStore.addNodeTemplate(instanceName, type, node_templates[instanceName]); @@ -137,10 +227,9 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { } - addTemplates() { } setArtifact(predefined: boolean) { if (predefined) { - + this.currentFuncion.inputs['artifact-prefix-names'] = []; } else { this.currentFuncion.inputs['artifact-prefix-names'] = { get_input: 'template-prefix' }; } @@ -177,27 +266,45 @@ 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; + // in edit&view mode need to check first if this input||output already exists + } else if (key in this.currentFuncion.inputs) { + this.requiredInputs.set(key, Object.assign({}, value)); + } else if (key in this.currentFuncion.outputs) { + this.requiredOutputs.set(key, Object.assign({}, value)); } else if (value['required']) { console.log('This field is required = ' + key); if (type === 'inputs') { 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 b52eb7cc3..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 @@ -26,6 +26,7 @@ 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/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts index bd3240b88..a33db249d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts @@ -3,10 +3,10 @@ export class NodeTemplate { properties?: { 'dependency-node-templates'?: string[] }; - interfaces?: {}; artifacts?: {}; cabapilities?: {}; requirements?: {}; + interfaces?: {}; constructor(type) { this.type = type; 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/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.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index 30677f161..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 @@ -39,6 +39,7 @@ export class PackageListComponent implements OnInit { ngOnInit() { + this.ngxLoader.start(); this.packagesStore.getAll(); } 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/assets/img/icon-codeClosed.svg b/cds-ui/designer-client/src/assets/img/icon-codeClosed.svg new file mode 100644 index 000000000..902a653fd --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-codeClosed.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="108px" height="214px" viewBox="0 0 108 214" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>down-arrow0</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="down-arrow0" transform="translate(54.000000, 106.500000) rotate(-90.000000) translate(-54.000000, -106.500000) translate(-53.000000, 53.000000)" fill="#1B3E6F" fill-rule="nonzero"> + <polygon id="Path" points="0 0.333 106.667 107 213.333 0.333"></polygon> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/img/icon-codeOpen.svg b/cds-ui/designer-client/src/assets/img/icon-codeOpen.svg new file mode 100644 index 000000000..8b97ed186 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/icon-codeOpen.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="214px" height="107px" viewBox="0 0 214 107" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 61.2 (89653) - https://sketch.com --> + <title>Path</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="down-arrow0" fill="#1B3E6F" fill-rule="nonzero"> + <polygon id="Path" points="0 0.333 106.667 107 213.333 0.333"></polygon> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 0a3a4cc89..0207371db 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; } @@ -2972,6 +2981,19 @@ animation: glowing 1500ms infinite; .ace-tm .ace_marker-layer .ace_active-line{ background: #F4F9FE !important; } +.ace_dark .ace_fold-widget, +.ace_dark .ace_fold-widget.ace_closed{ + background-position: center center !important; + background-size: 7px; + background-repeat: no-repeat !important; +} +.ace_dark .ace_fold-widget{ + background-image: url(/assets/img/icon-codeOpen.svg) !important; +} +.ace_dark .ace_fold-widget.ace_closed{ + background-image: url(/assets/img/icon-codeClosed.svg) !important; + background-size: 4px; +} /* -------- end of ace editor style -------- */ .breadcrumb-header{ padding: 0px; |
