summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules
diff options
context:
space:
mode:
authorAhmed Abbas <ahmad.helmy@orange.com>2020-02-24 14:59:21 +0200
committerAhmed Abbas <ahmad.helmy@orange.com>2020-02-24 21:08:52 +0200
commit2203e84a0fd3308ce99e4de6ed2519e663008316 (patch)
tree7780cf9966983953e705331c3cf67e36b385a9ce /cds-ui/designer-client/src/app/modules
parentebcc45b8c8703cadc49cf3a0b888545845ccb9e6 (diff)
add single function to action and save it to frontend store.
Issue-ID: CCSDK-2017 Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com> Change-Id: I866eadb31bcb56aec5aa05a1dd4b0989c47c6210
Diffstat (limited to 'cds-ui/designer-client/src/app/modules')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts121
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts59
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts8
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts3
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/ModelType.model.ts (renamed from cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts)0
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.dashboard.state.ts (renamed from cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts)9
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.topologyTemplate.model.ts13
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/designer.workflow.ts14
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts10
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?: {};
+}