diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
11 files changed, 187 insertions, 62 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 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> <div class="row"> - <div class="col-12 p-0"> + <!-- <div class="col-12 p-0"> <form> <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions"> </form> - </div> + </div> --> <h1 class="col-12">Actions</h1> <div class="col-12 text-center p-0"> <div class="btn-group actionBtns" role="group"> <button (click)="insertCustomActionIntoBoard()" type="button" class="btn">Insert Custom</button> - <button type="button" class="btn">Import Action</button> + <!-- <button type="button" class="btn">Import Action</button> --> </div> </div> - <div class="col-12 actionsList"> + <!-- <div class="col-12 actionsList"> <b>Select from other packages:</b> <div class="actions-scroll"> <div class="custom-control custom-checkbox"> @@ -106,7 +106,7 @@ <button type="button" class="btn btn-secondary mr-3">Insert</button> <button type="button" class="btn btn-secondary">Cancel</button> </div> - </div> + </div> --> <h1 class="col-12">Functions</h1> <div id="palette-paper" class="col-12 componentsList"> 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(` <div id="flyPaper" @@ -232,38 +249,30 @@ export class DesignerComponent implements OnInit { if (mouseupX > 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<DesignerDashboardState> { 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/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts index c8498fa36..c8498fa36 100644 --- 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/designer/model/ModelType.model.ts 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/designer/model/designer.dashboard.state.ts index dc65c009f..5ae62d84a 100644 --- 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/designer/model/designer.dashboard.state.ts @@ -20,10 +20,15 @@ limitations under the License. */ import {ModelType} from './ModelType.model'; +import { TopologyTemplate } from './designer.topologyTemplate.model'; export class DesignerDashboardState { - functions: ModelType[]; - actions: string[]; + 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<string, DeclarativeWorkflow>; + 'node_templates': Map<string, NodeTemplate>; + + 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?: {}; +} |