diff options
author | 2020-11-12 15:56:27 +0200 | |
---|---|---|
committer | 2020-11-12 15:58:35 +0200 | |
commit | 29d40e9c4110c64551d63a26c5fc0d71a5ef85ab (patch) | |
tree | 12a9499eaa471474b308cd8c7691baa14c7b0543 /cds-ui/designer-client/src/app/modules | |
parent | a8b4aace07bec7407b851c2bdc8a89bae1b8425b (diff) |
Display input & outputs in View&edit functions.
Handle multiple Steps when displaying function from workflow.
Issue-ID: CCSDK-2900
Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I0b511be33c6c3ab875789297044cf06afb0b7267
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
3 files changed, 78 insertions, 55 deletions
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 81ae1cd1d..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 @@ -217,15 +217,16 @@ <div *ngIf="!showAction" class="custom-control"> <ul> <li *ngFor="let customActionName of actions"> - <label [attr.for]="customActionName"> - <i class="icon-file" aria-hidden="true" class="icon-file" - (click)="openActionAttributes(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 [attr.for]="customActionName" *ngFor="let currentFunction of steps"> - <span - (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span> + <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> 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 7d5a72735..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,33 +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 {DesignerDashboardState} from './model/designer.dashboard.state'; +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', @@ -75,7 +75,7 @@ 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(); @@ -122,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); @@ -169,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); }); } @@ -232,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 = []; @@ -468,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 => { @@ -494,9 +494,17 @@ export class DesignerComponent implements OnInit, OnDestroy { } 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']); + ['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/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 362986d96..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 @@ -44,29 +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.designerState = designerDashboardState; - this.actionName = this.designerState.actionName; - const action = this.designerState.template.workflows[this.actionName] as Action; - + 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 = action.steps[child].target; + 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 => { @@ -111,24 +115,23 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { } toNodeProcess(nodeTemplate, functionName) { - this.requiredInputs = new Map<string, {}>(); - this.requiredOutputs = new Map<string, {}>(); - this.OptionalInputs = new Map<string, {}>(); - this.optionalOutputs = new Map<string, {}>(); console.log(nodeTemplate); this.currentFuncion['instance-name'] = functionName; // tslint:disable-next-line: no-string-literal this.currentFuncion['type'] = nodeTemplate['type']; if (nodeTemplate.interfaces && Object.keys(nodeTemplate.interfaces).length > 0) { const nodeName = Object.keys(nodeTemplate.interfaces)[0]; + // 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); + console.log(key + ' - ' + value); this.currentFuncion.inputs[key] = value; } } @@ -145,8 +148,10 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { this.ngUnsubscribe.complete(); } - saveFunctionData() { + addTemplates() { } + saveFunctionData() { + this.nodeTemplates = new NodeTemplate(''); // tslint:disable-next-line: variable-name const node_templates = {}; const finalFunctionData = this.currentFuncion; @@ -159,7 +164,12 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { console.log(value); console.log(finalFunctionData.inputs['artifact-prefix-names']); - if (Array.isArray(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); } @@ -217,7 +227,6 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { } - addTemplates() { } setArtifact(predefined: boolean) { if (predefined) { this.currentFuncion.inputs['artifact-prefix-names'] = []; @@ -291,6 +300,11 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy { 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') { |