Blocking position of Coarse and Fine Grained nodes for demo
Change-Id: Ifff6c71ebe9ec4a8bf344bf2ccc5aa0669f6723c
diff --git a/xos/gui/src/app/services/graph.extension.ts b/xos/gui/src/app/services/graph.extension.ts
new file mode 100644
index 0000000..bb01328
--- /dev/null
+++ b/xos/gui/src/app/services/graph.extension.ts
@@ -0,0 +1,195 @@
+import * as $ from 'jquery';
+import * as _ from 'lodash';
+
+export interface IRCordGraphReducer {
+ setup(): void;
+}
+
+export class RCordGraphReducer implements IRCordGraphReducer {
+
+ static $inject = [
+ 'XosServiceGraphExtender'
+ ];
+
+ constructor(
+ private XosServiceGraphExtender: any
+ ) {
+
+ }
+
+ public setup() {
+ this.XosServiceGraphExtender.register('finegrained', 'ecord-local', (graph): any => {
+ graph = this.positionFineGrainedNodes(graph);
+ return graph;
+ });
+
+ this.XosServiceGraphExtender.register('coarse', 'ecord-local', (graph: any): any => {
+ graph.nodes = this.positionCoarseNodes(graph.nodes);
+ return {
+ nodes: graph.nodes,
+ links: graph.links
+ };
+ });
+ }
+
+ private getSvgDimensions(graph: string): {width: number, heigth: number} {
+ return {
+ width: $(`${graph} svg`).width(),
+ heigth: $(`${graph} svg`).height()
+ };
+ }
+
+ private positionCoarseNodes(nodes: any[]): any[] {
+ // getting distance between nodes
+ const hStep = this.getSvgDimensions('xos-coarse-tenancy-graph').width / 4;
+ const vStep = this.getSvgDimensions('xos-coarse-tenancy-graph').heigth / 4;
+
+ const vtr = _.find(nodes, {label: 'vtr'});
+ if (vtr) {
+ vtr.x = hStep * 2;
+ vtr.y = vStep * 1;
+ vtr.fixed = true;
+ }
+
+ const volt = _.find(nodes, {label: 'volt'});
+ if (volt) {
+ volt.x = hStep * 1;
+ volt.y = vStep * 2;
+ volt.fixed = true;
+ }
+
+ const vsg = _.find(nodes, {label: 'vsg'});
+ if (vsg) {
+ vsg.x = hStep * 2;
+ vsg.y = vStep * 2;
+ vsg.fixed = true;
+ }
+
+ const vrouter = _.find(nodes, {label: 'vrouter'});
+ if (vrouter) {
+ vrouter.x = hStep * 3;
+ vrouter.y = vStep * 2;
+ vrouter.fixed = true;
+ }
+
+ const oc = _.find(nodes, {label: 'ONOS_CORD'});
+ if (oc) {
+ oc.x = hStep + (hStep / 2);
+ oc.y = vStep * 3;
+ oc.fixed = true;
+ }
+
+ const of = _.find(nodes, {label: 'ONOS_Fabric'});
+ if (of) {
+ of.x = (hStep * 2) + (hStep / 2);
+ of.y = vStep * 3;
+ of.fixed = true;
+ }
+
+ return nodes;
+ }
+
+ private positionFineGrainedNodes(graph: any): any[] {
+
+ let subscriberPosition = 0;
+ let networkPosition = 0;
+
+ const positionSubscriberNode = (node: any, hStep: number, vStep: number): any => {
+ subscriberPosition = subscriberPosition + 1;
+ node.x = hStep;
+ node.y = vStep * (3 + subscriberPosition );
+ node.fixed = true;
+ return node;
+ };
+
+ const positionServiceNode = (node: any, hStep: number, vStep: number, vLength: number): any => {
+ if (node.label === 'ONOS_Fabric') {
+ node.x = hStep * 4;
+ node.y = vStep;
+ }
+ if (node.label === 'volt' || node.label === 'vsg' || node.label === 'vrouter') {
+ node.y = vStep * 3;
+ }
+ if (node.label === 'volt') {
+ node.x = hStep * 2;
+ }
+ if (node.label === 'vsg') {
+ node.x = hStep * 3;
+ }
+ if (node.label === 'vrouter') {
+ node.x = hStep * 4;
+ }
+ if (node.label === 'ONOS_CORD' || node.label === 'vtr') {
+ node.y = vStep * (vLength -1);
+ }
+ if (node.label === 'ONOS_CORD') {
+ node.x = hStep * 2;
+ }
+ if (node.label === 'vtr') {
+ node.x = hStep * 3;
+ }
+
+ node.fixed = true;
+ return node;
+ };
+
+ const positionNetworkNode = (node: any, hStep: number, vStep: number): any => {
+ networkPosition = networkPosition + 1;
+ node.x = hStep * 5;
+ node.y = vStep * (3 + networkPosition );
+ node.fixed = true;
+ return node;
+ };
+
+ const findSubscriberElementY = (nodes: any[], node: any): any => {
+ if (node.model.subscriber_root_id) {
+ console.log(node.model.subscriber_root_id);
+ const subscriber = _.find(nodes, n => {
+ return n.id === `tenantroot~${node.model.subscriber_root_id}`
+ });
+ debugger;
+ // console.log(subscriber.y);
+ return subscriber.y;
+ }
+ };
+
+ const positionTenantNode = (nodes: any[], node: any, hStep: number, vStep: number): any => {
+ if (node.model.kind === 'vOLT') {
+ node.x = hStep * 2;
+ }
+ if (node.model.kind === 'vCPE') {
+ node.x = hStep * 3;
+ }
+ if (node.model.kind === 'vROUTER') {
+ node.x = hStep * 4;
+ }
+
+ return node;
+ };
+
+ let subscribers = _.filter(graph.nodes, n => n.type === 'subscriber' || n.type === 'tenantroot');
+
+ const vLength = 5 + subscribers.length;
+
+ const hStep = this.getSvgDimensions('xos-fine-grained-tenancy-graph').width / 6;
+ const vStep = this.getSvgDimensions('xos-fine-grained-tenancy-graph').heigth / vLength;
+
+ graph.nodes = _.map(graph.nodes, n => {
+ if (n.type === 'subscriber' || n.type === 'tenantroot') {
+ n = positionSubscriberNode(n, hStep, vStep);
+ }
+ if (n.type === 'service') {
+ n = positionServiceNode(n, hStep, vStep, vLength);
+ }
+ if (n.type === 'network') {
+ n = positionNetworkNode(n, hStep, vStep);
+ }
+ if (n.type === 'tenant') {
+ n = positionTenantNode(graph.nodes, n, hStep, vStep);
+ }
+ // n.fixed = true;
+ return n;
+ });
+ return graph;
+ }
+}
diff --git a/xos/gui/src/index.html b/xos/gui/src/index.html
new file mode 100644
index 0000000..9ad9542
--- /dev/null
+++ b/xos/gui/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="xos-rcord-gui-extension">
+<head>
+ <meta charset="UTF-8">
+ <title>Document</title>
+ <link href="/spa/loader.css" rel="stylesheet">
+ <link href="/spa/app.css" rel="stylesheet">
+</head>
+<body>
+ <div ui-view></div>
+ <script src="/spa/vendor.js"></script>
+ <script src="/spa/app.js"></script>
+ <script src="/spa/loader.js"></script>
+ <script src="/spa/app.config.js"></script>
+ <script src="/spa/style.config.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/xos/gui/src/index.ts b/xos/gui/src/index.ts
new file mode 100644
index 0000000..adf4382
--- /dev/null
+++ b/xos/gui/src/index.ts
@@ -0,0 +1,17 @@
+/// <reference path="../typings/index.d.ts" />
+import * as angular from 'angular';
+
+import 'angular-ui-router';
+import 'angular-resource';
+import 'angular-cookies';
+import {RCordGraphReducer, IRCordGraphReducer} from './app/services/graph.extension';
+
+angular.module('xos-rcord-gui-extension', [
+ 'ui.router',
+ 'app'
+ ])
+ .service('RCordGraphReducer', RCordGraphReducer)
+ .run(function($log: ng.ILogService, RCordGraphReducer: IRCordGraphReducer) {
+ $log.info('[xos-rcord-graph-gui-extension] App is running');
+ RCordGraphReducer.setup();
+ });