[CORD-2719] Refactoring the service graph to use a proper state machine
Change-Id: I5d92aa876c9769701c93b2f5e7d47bdc311b6eb1
diff --git a/src/app/service-graph/components/graph/graph.component.html b/src/app/service-graph/components/graph/graph.component.html
index 6510a9f..ad3d0da 100644
--- a/src/app/service-graph/components/graph/graph.component.html
+++ b/src/app/service-graph/components/graph/graph.component.html
@@ -22,4 +22,26 @@
</div>
<a ng-click="vm.closeFullscreen()" class="close-btn"><i class="fa fa-times"></i></a>
<svg></svg>
+ <div class="row">
+ <div class="col-md-3">
+ <a ng-click="vm.toggleModel('services')" ng-class="{active: vm.currentState >= 0}" class="btn btn-block btn-accent">
+ <span>Services</span>
+ </a>
+ </div>
+ <div class="col-md-3">
+ <a ng-click="vm.toggleModel('serviceinstances')" ng-class="{active: vm.currentState >= 1}" class="btn btn-block btn-accent">
+ <span>Service Instances</span>
+ </a>
+ </div>
+ <div class="col-md-3">
+ <a ng-click="vm.toggleModel('instances')" ng-class="{active: vm.currentState >= 2}" class="btn btn-block btn-accent">
+ <span>Instances</span>
+ </a>
+ </div>
+ <div class="col-md-3">
+ <a ng-click="vm.toggleModel('networks')" ng-class="{active: vm.currentState >= 3}" class="btn btn-block btn-accent">
+ <span>Networks</span>
+ </a>
+ </div>
+ </div>
</div>
diff --git a/src/app/service-graph/components/graph/graph.component.ts b/src/app/service-graph/components/graph/graph.component.ts
index ed36654..b0cabb9 100644
--- a/src/app/service-graph/components/graph/graph.component.ts
+++ b/src/app/service-graph/components/graph/graph.component.ts
@@ -28,6 +28,7 @@
import {IXosNodeRenderer} from '../../services/renderer/node.renderer';
import {IXosSgLink, IXosSgNode} from '../../interfaces';
import {IXosGraphConfig} from '../../services/graph.config';
+import {GraphStates, IXosGraphStateMachine} from '../../services/graph-state-machine';
class XosServiceGraphCtrl {
static $inject = [
@@ -38,14 +39,18 @@
'XosServiceGraphIcons',
'XosNodePositioner',
'XosNodeRenderer',
- 'XosGraphConfig'
+ 'XosGraphConfig',
+ 'XosGraphStateMachine'
];
+ // graph status
+ public currentState: number;
public loader: boolean = true;
private GraphSubscription: Subscription;
private graph: any; // this is the Graph instance
+
// graph element
private svg;
private linkGroup;
@@ -60,10 +65,13 @@
private XosServiceGraphIcons: IXosServiceGraphIcons,
private XosNodePositioner: IXosNodePositioner,
private XosNodeRenderer: IXosNodeRenderer,
- private XosGraphConfig: IXosGraphConfig
+ private XosGraphConfig: IXosGraphConfig,
+ public XosGraphStateMachine: IXosGraphStateMachine
) {
this.$log.info('[XosServiceGraph] Component setup');
+ this.currentState = this.XosGraphStateMachine.getCurrentState();
+
this.XosGraphConfig.setupKeyboardShortcuts();
this.setupSvg();
@@ -74,6 +82,7 @@
graph => {
this.graph = graph;
if (this.graph.nodes().length > 0) {
+ this.$log.info('[XosServiceGraph] Rendering graph: ', this.graph.nodes(), this.graph.edges());
this.renderGraph(this.graph);
}
},
@@ -87,6 +96,13 @@
this.renderGraph(this.graph);
});
+ this.$scope.$on('xos.sg.stateChange', (event, state: number) => {
+ this.$log.info(`[XosServiceGraph] Received event: xos.sg.stateChange. New state is ${state}`);
+ this.$scope.$applyAsync(() => {
+ this.currentState = state;
+ });
+ });
+
$(window).resize(() => {
this.renderGraph(this.graph);
});
@@ -100,17 +116,34 @@
this.XosGraphConfig.toggleFullscreen();
}
+ public toggleModel(modelName: string): void {
+ switch (modelName) {
+ case 'services':
+ this.XosGraphStateMachine.go(GraphStates.Services);
+ break;
+ case 'serviceinstances':
+ this.XosGraphStateMachine.go(GraphStates.ServiceInstances);
+ break;
+ case 'instances':
+ this.XosGraphStateMachine.go(GraphStates.Instances);
+ break;
+ case 'networks':
+ this.XosGraphStateMachine.go(GraphStates.Networks);
+ break;
+ }
+ }
+
private setupSvg() {
this.svg = d3.select('xos-service-graph svg');
this.linkGroup = this.svg.append('g')
.attr({
- class: 'link-group'
+ 'class': 'link-group'
});
this.nodeGroup = this.svg.append('g')
.attr({
- class: 'node-group'
+ 'class': 'node-group'
});
}
@@ -147,6 +180,7 @@
}
private renderGraph(graph: any) {
+
let nodes: IXosSgNode[] = this.XosGraphStore.nodesFromGraph(graph);
let links = this.XosGraphStore.linksFromGraph(graph);
const svgDim = this.getSvgDimensions();
@@ -190,7 +224,7 @@
entering.append('line')
.attr({
id: n => n.id,
- class: n => n.type
+ 'class': n => n.type
});
link.exit().remove();