summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client
diff options
context:
space:
mode:
authorAhmed Abbas <ahmad.helmy@orange.com>2020-02-29 17:01:58 +0200
committerAhmed Abbas <ahmad.helmy@orange.com>2020-02-29 17:01:58 +0200
commit2068f014427ec1a2b782677557b4af0f1723e40c (patch)
tree87924c280d1b5444758c109c1514e9c98235ec51 /cds-ui/designer-client
parent886d352ec99fe5281c281c16f8d4b9908fb0dcc3 (diff)
enhance loading topologyTemplate from source
- fix bug when rename stepName in workflow - tune directGraph options to fix Elements positioning when loading from source Issue-ID: CCSDK-1779 Issue-ID: CCSDK-2129 Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com> Change-Id: Iee0d5b98266bee5b9920c557dea46a69c8434d85
Diffstat (limited to 'cds-ui/designer-client')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts25
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts52
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts14
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts2
5 files changed, 74 insertions, 23 deletions
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 56b5dcbbc..5adce7ea0 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
@@ -53,6 +53,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
paletteGraph: joint.dia.Graph;
palettePaper: joint.dia.Paper;
private ngUnsubscribe = new Subject();
+ private opt = { tx: 100, ty: 100 };
constructor(private designerStore: DesignerStore,
private functionStore: FunctionsStore,
@@ -91,7 +92,6 @@ export class DesignerComponent implements OnInit, OnDestroy {
* the code to retrieve from server is commented
*/
this.functionStore.state$
- .pipe(x => { console.log('value on way to distinct', x); return x; })
.pipe(
distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
takeUntil(this.ngUnsubscribe))
@@ -114,7 +114,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
});
this.designerStore.state$
- .pipe(takeUntil(this.ngUnsubscribe))
+ .pipe(
+ distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+ takeUntil(this.ngUnsubscribe))
.subscribe(state => {
if (state.sourceContent) {
console.log('inside desinger.component---> ', state);
@@ -123,6 +125,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
console.log(topologtTemplate);
delete state.sourceContent;
this.graphGenerator.populate(topologtTemplate, this.boardGraph);
+
+ console.log('all cells', this.boardGraph.getCells());
/**
* auto arrange elements in graph
* https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#layout.DirectedGraph
@@ -130,12 +134,10 @@ export class DesignerComponent implements OnInit, OnDestroy {
joint.layout.DirectedGraph.layout( this.boardGraph.getCells(), {
dagre,
graphlib,
- // nodeSep: 50,
- // setLinkVertices: false,
- // rankDir: 'LR',
- marginX: 100,
- marginY: 100,
- clusterPadding: { top: 100, left: 10, right: 10, bottom: 100 },
+ setLinkVertices: false,
+ marginX: 10,
+ marginY: 10,
+ clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 },
rankDir: 'TB'
});
}
@@ -174,9 +176,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
width: 1100,
gridSize: 10,
drawGrid: true,
- background: {
- color: 'rgba(0, 255, 0, 0.3)'
- },
+ // background: {
+ // color: 'rgba(0, 255, 0, 0.3)'
+ // },
cellViewNamespace: joint.shapes
});
@@ -200,6 +202,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
const parentId = cell.get('parent');
if (!parentId) {
+ // this is action
return;
}
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 c37accdb4..a7f25902c 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
@@ -106,7 +106,7 @@ export class DesignerStore extends Store<DesignerDashboardState> {
addDgGenericNodeTemplate(nodeTemplateName: string) {
const node = new NodeTemplate('dg-generic');
node.properties = {
- 'dependency-node-template': []
+ 'dependency-node-templates': []
};
this.setState({
...this.state,
@@ -131,7 +131,7 @@ export class DesignerStore extends Store<DesignerDashboardState> {
[dgGenericNodeName]: {
...this.state.template.node_templates[dgGenericNodeName],
properties: {
- 'dependency-node-template': [
+ 'dependency-node-templates': [
...props['dependency-node-template'],
dependency
]
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
index 17596bd33..8e1d88907 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
@@ -1,7 +1,3 @@
-import { TopologyTemplate } from './model/designer.topologyTemplate.model';
-import { Injectable } from '@angular/core';
-import { GraphUtil } from './graph.util';
-
/*
============LICENSE_START==========================================
===================================================================
@@ -22,6 +18,10 @@ See the License for the specific language governing permissions and
limitations under the License.
============LICENSE_END============================================
*/
+import { TopologyTemplate } from './model/designer.topologyTemplate.model';
+import { Injectable } from '@angular/core';
+import { GraphUtil } from './graph.util';
+import { NodeTemplate } from './model/desinger.nodeTemplate.model';
@Injectable({
providedIn: 'root'
@@ -36,7 +36,41 @@ export class GraphGenerator {
* create action element
* from steps --> create function element
* add function element to action element
+ * example toplogyTemplate
+ *
+ * {
+ * "workflows": {
+ * "Action1": {
+ * "steps": {
+ * "STEP_NAME": {
+ * "target": "NODE_TEMPLATE_NAME",
+ * "description": ""
+ * }
+ * }
+ * }
+ * },
+ * "node_templates": {
+ * "NODE_TEMPLATE_NAME": {
+ * "type": "dg-generic",
+ * "properties": {
+ * "dependency-node-templates": [
+ * "component-config-snapshots-executor",
+ * "component-jython-executor"
+ * ]
+ * }
+ * },
+ * "component-config-snapshots-executor": {
+ * "type": "component-config-snapshots-executor",
+ * "properties": { }
+ * },
+ * "component-jython-executor": {
+ * "type": "component-jython-executor",
+ * "properties": { }
+ * }
+ * }
+ * }
*/
+
public populate(topologyTempalte: TopologyTemplate,
boardGraph: joint.dia.Graph) {
@@ -51,18 +85,19 @@ export class GraphGenerator {
const workflow = topologyTempalte.workflows[workFlowName].steps;
const stepName = Object.keys(workflow)[0];
if (stepName) {
- const functionType = workflow[stepName].target;
+ const nodeTemplateName = workflow[stepName].target;
+ const functionType = topologyTempalte.node_templates[nodeTemplateName].type;
console.log('draw function with ', stepName, functionType);
- const functionElementForBoard = this.graphUtil.dropFunctionOverActionRelativeToParent(
+ this.graphUtil.dropFunctionOverActionRelativeToParent(
actionElement,
stepName , functionType, boardGraph);
// TODO handle dg-generic case (multi-step in the same action)
if (functionType === 'dg-generic') {
- const props = topologyTempalte.node_templates[stepName].properties;
+ const props = topologyTempalte.node_templates[nodeTemplateName].properties;
console.log('dg props', props);
- props['dependency-node-template'].forEach(dependencyStepName => {
+ props['dependency-node-templates'].forEach(dependencyStepName => {
const dependencyType = topologyTempalte.node_templates[dependencyStepName].type;
console.log('dependencyType', dependencyType);
this.graphUtil.dropFunctionOverActionRelativeToParent(
@@ -75,5 +110,4 @@ export class GraphGenerator {
});
}
-
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
index 9ba7271fb..fd4dd35e4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts
@@ -211,4 +211,18 @@ export class GraphUtil {
return !parentCell.get('embeds') || parentCell.get('embeds').length < 1;
}
+ getActionSiblings(actionCell: joint.shapes.app.ActionElement,
+ boardGraph: joint.dia.Graph
+ ): joint.shapes.app.ActionElement[] {
+ const cellId = actionCell.id;
+ const siblings = boardGraph.getCells().filter(elem => {
+ const type = elem.attributes.type;
+ const elemId = elem.id;
+ return (type !== undefined && type === 'app.ActionElement'
+ && elemId !== cellId);
+ }) as joint.shapes.app.ActionElement[];
+ console.log('siblings', siblings);
+ return siblings;
+ }
+
}
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
index 9bd56e5d5..8715e44c2 100644
--- 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
@@ -1,7 +1,7 @@
export class NodeTemplate {
type: string;
properties?: {
- 'dependency-node-template'?: string[]
+ 'dependency-node-templates'?: string[]
};
interfaces?: {};
artifacts?: {};