adding import inputs and outputs from functions into actions

Issue-ID: CCSDK-2779
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I71ee51c6e641d05bb27cdf1807487e25b656e1cd

6 files changed, 100 insertions, 8 deletions

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..ccf9ce072 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
@@ -19,7 +19,7 @@
                     <span>Custom Attribute</span>
                 </div>
                 <div class="col text-center">
-                    <button type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button"
+                    <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button" class="btn btn-secondary"><i class="icon-function-attribute" type="button"
                                                                        aria-hidden="true"></i></button>
                     <span>Function Attribute</span>
                 </div>
@@ -45,7 +45,7 @@
                                 <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,7 +81,7 @@
                                 <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"
+                                    <i [hidden]="output.required" class="icon-required-star optional-attribute" type="button"
                                        aria-hidden="true"></i>
 
                                 </label>
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..a99ca02ef 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',
@@ -22,8 +24,10 @@ export class ActionAttributesComponent implements OnInit {
     inputOtherType = '';
     actionName = '';
     designerState: DesignerDashboardState;
+    isFunctionAttributeActive = false;
+    functions: FunctionsState;
 
-    constructor(private designerStore: DesignerStore) {
+    constructor(private designerStore: DesignerStore, private functionsStore: FunctionsStore) {
 
     }
 
@@ -33,6 +37,20 @@ export class ActionAttributesComponent implements OnInit {
             if (this.designerState && this.designerState.actionName) {
                 this.actionName = this.designerState.actionName;
                 const action = this.designerState.template.workflows[this.actionName] as Action;
+                if (action.steps) {
+                    const steps = Object.keys(action.steps);
+                    if (steps && steps.length > 0) {
+                        this.isFunctionAttributeActive = true;
+                    } else {
+                        this.isFunctionAttributeActive = false;
+                    }
+                    steps.forEach(step => {
+                        const target = action.steps[step].target;
+                        this.getInputs(target);
+                    });
+                }
+
+
                 this.inputs = [];
                 if (action.inputs) {
                     const namesOfInput = Object.keys(action.inputs);
@@ -45,6 +63,10 @@ export class ActionAttributesComponent implements OnInit {
                 }
             }
         });
+
+        this.functionsStore.state$.subscribe(functions => {
+            this.functions = functions;
+        });
     }
 
 
@@ -144,4 +166,41 @@ export class ActionAttributesComponent implements OnInit {
             '            "description" : "' + output.description + '"\n' +
             '          },';
     }
+
+    getInputs(targetName) {
+        const nodeTemplate = this.designerState.template.node_templates[targetName];
+        /* 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];
+                        if (nodeTemplate['interfaces'][interfaceName]['operations'] &&
+                            nodeTemplate['interfaces'][interfaceName]['operations']['process']
+                        ) {
+                            if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['inputs']) {
+                                /* tslint:disable:no-string-literal */
+                                console.log(Object.keys(nodeTemplate['interfaces'][interfaceName]['operations']['process']['inputs']));
+                            }
+                            if (nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']) {
+                                /* tslint:disable:no-string-literal */
+                                console.log(Object.keys(nodeTemplate['interfaces'][interfaceName]['operations']['process']['outputs']));
+                            }
+
+                        }
+                    }
+                }
+            });
+        console.log(nodeTemplate);
+    }
+
+    printSomethings() {
+        console.log('something');
+    }
 }
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..5695c915a 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,11 +217,20 @@
                             <div *ngIf="!showAction" class="custom-control">
                                 <ul>
                                     <li *ngFor="let customActionName of actions">
-                                        <label>
+                                        <label [attr.for]="customActionName">
                                             <i class="icon-file" aria-hidden="true" class="icon-file"
-                                               (click)="openFunctionAttributes(customActionName)"></i>
+                                               (click)="openActionAttributes(customActionName)"
+                                            ></i>
                                             {{customActionName}} </label>
+
+                                        <ul *ngIf="customActionName.includes(this.currentActionName)">
+                                            <li
+                                                    [attr.for]="customActionName" *ngFor="let currentFunction of steps">
+                                                <span (click)="openFunctionAttributes(currentFunction)">{{currentFunction}}</span>
+                                            </li>
+                                        </ul>
                                     </li>
+
                                 </ul>
                             </div>
                         </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 77e0ceed6..7d5a72735 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -51,6 +51,7 @@ import {PackageCreationExtractionService} from '../package-creation/package-crea
 import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
 import {TopologyTemplate} from './model/designer.topologyTemplate.model';
 import {ToastrService} from 'ngx-toastr';
+import {DesignerDashboardState} from './model/designer.dashboard.state';
 
 @Component({
     selector: 'app-designer',
@@ -81,6 +82,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
     cbaPackage: CBAPackage;
     actions: string[] = [];
     dataTarget: string;
+    steps: string[];
+    designerState: DesignerDashboardState;
+    currentActionName: string;
 
     constructor(
         private designerStore: DesignerStore,
@@ -207,6 +211,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
                 distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
                 takeUntil(this.ngUnsubscribe))
             .subscribe(state => {
+                this.designerState = state;
                 if (state.sourceContent) {
                     console.log('inside desinger.component---> ', state);
                     // generate graph from store objects if exist
@@ -478,9 +483,20 @@ export class DesignerComponent implements OnInit, OnDestroy {
             });
     }
 
-    openFunctionAttributes(customActionName: string) {
-        console.log('opening here function attributes');
+    openActionAttributes(customActionName: string) {
+        console.log('opening here action attributes');
+        this.currentActionName = customActionName;
         this.actionAttributesSideBar = true;
+        this.functionAttributeSidebar = false;
         this.designerStore.setCurrentAction(customActionName);
+        /* tslint:disable:no-string-literal */
+        this.steps = Object.keys(this.designerState.template.workflows[customActionName]['steps']);
+    }
+
+    openFunctionAttributes(customFunctionName: string) {
+        this.actionAttributesSideBar = false;
+        this.functionAttributeSidebar = true;
+        this.designerStore.setCurrentFunction(this.designerState.template.workflows[this.currentActionName]
+            ['steps'][customFunctionName]['target']);
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
index 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/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();