aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-11-12 15:56:27 +0200
committerAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-11-12 15:58:35 +0200
commit29d40e9c4110c64551d63a26c5fc0d71a5ef85ab (patch)
tree12a9499eaa471474b308cd8c7691baa14c7b0543 /cds-ui/designer-client
parenta8b4aace07bec7407b851c2bdc8a89bae1b8425b (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')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html15
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts64
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts54
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') {