From 2203e84a0fd3308ce99e4de6ed2519e663008316 Mon Sep 17 00:00:00 2001 From: Ahmed Abbas Date: Mon, 24 Feb 2020 14:59:21 +0200 Subject: add single function to action and save it to frontend store. Issue-ID: CCSDK-2017 Signed-off-by: Ahmed Abbas Change-Id: I866eadb31bcb56aec5aa05a1dd4b0989c47c6210 --- cds-ui/designer-client/proxy.conf.json | 6 + .../src/app/common/constants/app-constants.ts | 3 + .../packages/designer/designer.component.html | 10 +- .../packages/designer/designer.component.ts | 121 +++++++++++++-------- .../packages/designer/designer.service.ts | 2 +- .../packages/designer/designer.store.ts | 59 +++++++++- .../designer/functions/functions.component.ts | 8 +- .../designer/jointjs/elements/action.element.ts | 3 +- .../packages/designer/model/ModelType.model.ts | 12 ++ .../designer/model/designer.dashboard.state.ts | 34 ++++++ .../model/designer.topologyTemplate.model.ts | 13 +++ .../packages/designer/model/designer.workflow.ts | 14 +++ .../designer/model/desinger.nodeTemplate.model.ts | 10 ++ .../packages/model/ModelType.model.ts | 12 -- .../packages/model/designer-dashboard.state.ts | 29 ----- 15 files changed, 235 insertions(+), 101 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts delete mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts delete mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json index 11ed26767..6b81a884a 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -4,5 +4,11 @@ "secure": false, "logLevel": "debug", "changeOrigin": true + }, + "/resourcedictionary/*": { + "target": "https://localhost:3000", + "secure": false, + "logLevel": "debug", + "changeOrigin": true } } diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index 387c35342..07bd9ad9a 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -117,3 +117,6 @@ export const ControllerCatalogURLs = { getDefinition: '/controllercatalog/model-type/by-definition', getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom' }; + + +export const ActionElementTypeName = 'app.ActionElement'; 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 8ec735aec..311ce7ad9 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 @@ -61,20 +61,20 @@ [mode]="'push'" #sidebarLeft>
-
+

Actions

- +
-
+

Functions

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 b19f5699b..130e0ae19 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 @@ -3,6 +3,8 @@ 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'; @@ -26,7 +28,7 @@ export class DesignerComponent implements OnInit { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; - constructor() { + constructor(private designerStore: DesignerStore) { this.controllerSideBar = true; this.attributesSideBar = false; } @@ -54,22 +56,37 @@ export class DesignerComponent implements OnInit { this.initializeBoard(); this.initializePalette(); // this.createEditBarOverThePaper(); + + //functions list is contants for now const list = [ { modelName: 'component-netconf-executor'}, { modelName: 'component-remote-ansible-executor' }, { modelName: 'dg-generic' }, { modelName: 'component-resource-resolution' }]; + const cells = this.buildPaletteGraphFromList(list); + this.paletteGraph.resetCells(cells); - const cells = this.buildPaletteGraphFromList(list); - this.paletteGraph.resetCells(cells); - - let idx = 0; - cells.forEach(cell => { - console.log(cell); - cell.translate(5, (cell.attributes.size.height + 5) * idx++); + let idx = 0; + cells.forEach(cell => { + console.log(cell); + cell.translate(5, (cell.attributes.size.height + 5) * idx++); - }); - this.stencilPaperEventListeners(); + }); + this.stencilPaperEventListeners(); + /** + * the code to retrieve from server is commented + */ + // this.designerStore.state$.subscribe(state => { + // console.log(state); + // if (state.functions) { + // console.log('functions-->' , state.functions); + // // this.viewedFunctions = state.functions; + // const list = state.functions; + // } + // }); + //action triggering + // this.designerStore.getFuntions(); + } initializePalette() { @@ -127,9 +144,6 @@ export class DesignerComponent implements OnInit { var parentBbox = parent.getBBox(); var cellBbox = cell.getBBox(); - - console.log("parent ", parentBbox); - console.log("cell ", cellBbox); if (parentBbox.containsPoint(cellBbox.origin()) && parentBbox.containsPoint(cellBbox.topRight()) && parentBbox.containsPoint(cellBbox.corner()) && @@ -149,8 +163,12 @@ export class DesignerComponent implements OnInit { insertCustomActionIntoBoard() { this.actionIdCounter++; - const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter); + const actionId = "action_" + this.actionIdCounter; + const actionName = 'Action' + this.actionIdCounter; + const element = this.createCustomAction(actionId , actionName); this.boardGraph.addCell(element); + console.log('saving action to store action workflow....'); + this.designerStore.addDeclarativeWorkFlow(actionName); } createCustomAction(id: string, label: string) { @@ -192,7 +210,6 @@ export class DesignerComponent implements OnInit { stencilPaperEventListeners() { this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => { - console.log('pointerdown 2'); $('body').append(`
target.left && mouseupX < target.left + this.boardPaper.$el.width() && mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) { - // const clonedShape = flyShape.clone(); - const type = flyShape.attributes.attrs.type; - console.log(type); - - //create board function element of the same type of palette function - //board function element is different in design from the palette function element - this.fuctionIdCounter++; - console.log(this.fuctionIdCounter); - const functionElementForBoard = - this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type); - - functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); - this.boardGraph.addCell(functionElementForBoard); - const cellViewsBelow = - this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); - console.log(cellViewsBelow); - if (cellViewsBelow.length) { - let cellViewBelow; - cellViewsBelow.forEach( cellItem => { - if (cellItem.model.id !== functionElementForBoard.id) { - cellViewBelow = cellItem; - } - }); + const functionType = flyShape.attributes.attrs.type; + console.log(functionType); + const functionElementForBoard = this.dropFunctionOverAction(functionType, mouseupX, target, offset, mouseupY); + + let parentCell = this.getParent(functionElementForBoard); + + console.log("parentCell -->", parentCell); + + if (parentCell && + parentCell.model.attributes.type === ActionElementTypeName){ + + const actionName = parentCell.model.attributes.attrs['#label'].text; + this.designerStore.addStepToDeclarativeWorkFlow(actionName, functionType); + this.designerStore.addNodeTemplate(functionType); // Prevent recursive embedding. - if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) { - console.log(cellViewBelow); - cellViewBelow.model.embed(functionElementForBoard); + if (parentCell && + parentCell.model.get('parent') !== functionElementForBoard.id) { + parentCell.model.embed(functionElementForBoard); } - console.log(this.boardGraph); + }else{ + console.log('function dropped outside action, rolling back...'); + functionElementForBoard.remove(); } - } $('body').off('mousemove.fly').off('mouseup.fly'); // flyShape.remove(); @@ -272,6 +281,32 @@ export class DesignerComponent implements OnInit { }); } + private getParent(functionElementForBoard: joint.shapes.board.FunctionElement) { + const cellViewsBelow = this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); + let cellViewBelow; + if (cellViewsBelow.length) { + cellViewsBelow.forEach(cellItem => { + if (cellItem.model.id !== functionElementForBoard.id) { + cellViewBelow = cellItem; + } + }); + } + return cellViewBelow; + } + + /** + * trigger actions related to Function dropped over the board: + * - create board function element of the same type of palette function + * as board function element is different from the palette function element + * - save function to parent action in store + */ + private dropFunctionOverAction(functionType: any, mouseupX: number, target: JQuery.Coordinates, offset: { x: number; y: number; }, mouseupY: number) { + this.fuctionIdCounter++; + const functionElementForBoard = this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', functionType); + functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); + this.boardGraph.addCell(functionElementForBoard); + return functionElementForBoard; + } /** * this is a way to add the button like zoom in , zoom out , and source over jointjs paper * may be used if no other way is found diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts index c4564254f..aa3a6a668 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -23,7 +23,7 @@ import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {ApiService} from '../../../../common/core/services/api.typed.service'; import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; -import {ModelType} from '../model/ModelType.model'; +import {ModelType} from './model/ModelType.model'; @Injectable({ 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 be98eec88..f2972d03b 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 @@ -22,8 +22,10 @@ limitations under the License. import {Injectable} from '@angular/core'; import {Store} from '../../../../common/core/stores/Store'; import {DesignerService} from './designer.service'; -import {ModelType} from '../model/ModelType.model'; -import {DesignerDashboardState} from '../model/designer-dashboard.state'; +import {ModelType} from './model/ModelType.model'; +import {DesignerDashboardState} from './model/designer.dashboard.state'; +import { DeclarativeWorkflow } from './model/designer.workflow'; +import { NodeTemplate } from './model/desinger.nodeTemplate.model'; @Injectable({ @@ -35,15 +37,60 @@ export class DesignerStore extends Store { super(new DesignerDashboardState()); } - public getFuntions() { + public retrieveFuntions() { const modelDefinitionType = 'node_type'; this.designerService.getFunctions(modelDefinitionType).subscribe( - (modelType: ModelType[]) => { - console.log(modelType); + (modelTypeList: ModelType[]) => { + console.log(modelTypeList); this.setState({ ...this.state, - functions: modelType, + serverFunctions: modelTypeList, }); }); } + + /** + * adds empty workflow with name only. + * called when blank action is added to the board + * declarative workflow just contain the steps but its order is determind by dg-graph + */ + addDeclarativeWorkFlow(workflowName: string) { + this.setState({ + ...this.state, + template: { + ...this.state.template, + workflows: + this.state.template.workflows.set(workflowName, new DeclarativeWorkflow()) + } + }); + } + + addStepToDeclarativeWorkFlow(workflowName: string, stepType: string) { + const currentWorkflow: DeclarativeWorkflow = this.state.template.workflows.get(workflowName); + currentWorkflow.steps = { + target: stepType, + description: '' + }; + const allNewWorkflowsMap = + this.state.template.workflows.set(workflowName, currentWorkflow); + this.setState({ + ...this.state, + template: { + ...this.state.template, + workflows: allNewWorkflowsMap + } + }); + } + + + addNodeTemplate(nodeTemplateName: string) { + this.setState({ + ...this.state, + template: { + ...this.state.template, + node_templates: + this.state.template.node_templates.set(nodeTemplateName, new NodeTemplate()) + } + }); + } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts index 5a86150e8..e1e980ed9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {DesignerStore} from '../designer.store'; -import {ModelType} from '../../model/ModelType.model'; +import {ModelType} from '../model/ModelType.model'; @Component({ @@ -15,14 +15,14 @@ export class FunctionsComponent implements OnInit { this.designerStore.state$.subscribe(state => { console.log(state); - if (state.functions) { - this.viewedFunctions = state.functions; + if (state.serverFunctions) { + this.viewedFunctions = state.serverFunctions; } }); } ngOnInit() { - this.designerStore.getFuntions(); + this.designerStore.retrieveFuntions(); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index 212905814..7960e83d1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -1,4 +1,5 @@ import * as joint from 'jointjs'; +import { ActionElementTypeName } from 'src/app/common/constants/app-constants'; /** * please refer to documentation in file palette.function.element.ts to get more details * about how to create new element type and define it in typescript @@ -18,7 +19,7 @@ const rectWidth = 616; const rectHeight = 381; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup -const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', { +const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, { size: {width: rectWidth, height: rectHeight} }, { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts new file mode 100644 index 000000000..c8498fa36 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts @@ -0,0 +1,12 @@ +export class ModelType { + modelName: string; + derivedFrom: string; + definitionType: string; + definition: object; + description: string; + version: string; + tags: string; + creationDate: string; + updatedBy: string; + +} 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 new file mode 100644 index 000000000..5ae62d84a --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts @@ -0,0 +1,34 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END============================================ +*/ + +import {ModelType} from './ModelType.model'; +import { TopologyTemplate } from './designer.topologyTemplate.model'; + +export class DesignerDashboardState { + + serverFunctions: ModelType[]; + template: TopologyTemplate; + + constructor() { + this.serverFunctions = []; + this.template = new TopologyTemplate(); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts new file mode 100644 index 000000000..4e73c7986 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts @@ -0,0 +1,13 @@ +import { DeclarativeWorkflow } from './designer.workflow'; +import { NodeTemplate } from './desinger.nodeTemplate.model'; + +export class TopologyTemplate { + + workflows: Map; + 'node_templates': Map; + + constructor() { + this.workflows = new Map(); + this.node_templates = new Map(); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts new file mode 100644 index 000000000..0687c1f47 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts @@ -0,0 +1,14 @@ +export class Workflow { + inputs: {}; + outputs?: {}; +} + +export class DeclarativeWorkflow implements Workflow { + steps: {}; + inputs: {}; + outputs?: {}; + + constructor() { + this.steps = {}; + } +} 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 new file mode 100644 index 000000000..7f8556535 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts @@ -0,0 +1,10 @@ +export class NodeTemplate { + type: string; + properties?: { + 'dependency-node-template'?: string[] + }; + interfaces?: {}; + artifacts?: {}; + cabapilities?: {}; + requirements?: {}; +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts deleted file mode 100644 index c8498fa36..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -export class ModelType { - modelName: string; - derivedFrom: string; - definitionType: string; - definition: object; - description: string; - version: string; - tags: string; - creationDate: string; - updatedBy: string; - -} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts deleted file mode 100644 index dc65c009f..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* -============LICENSE_START========================================== -=================================================================== -Copyright (C) 2019 Orange. All rights reserved. -=================================================================== - -Unless otherwise specified, all software contained herein is licensed -under the Apache License, Version 2.0 (the License); -you may not use this software except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -============LICENSE_END============================================ -*/ - -import {ModelType} from './ModelType.model'; - -export class DesignerDashboardState { - - functions: ModelType[]; - actions: string[]; - -} -- cgit 1.2.3-korg