[CORD-2514] Added legend for the service graph
Change-Id: I716760a7a61c13ff4d23829db4bd70c74cfc163b
diff --git a/src/app/service-graph/components/graph-legend/graph-legend.component.scss b/src/app/service-graph/components/graph-legend/graph-legend.component.scss
new file mode 100644
index 0000000..56c9804
--- /dev/null
+++ b/src/app/service-graph/components/graph-legend/graph-legend.component.scss
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@import './../../../style/vars.scss';
+@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+
+xos-service-graph-legend {
+ svg {
+ height: 95%;
+ width: 100%;
+
+ text {
+ fill: #fff;
+ }
+
+ .service path {
+ fill: $color-accent;
+ }
+
+ .serviceinstance path {
+ fill: $serviceinstances-fg;
+ }
+
+ .instance path {
+ fill: $instances-fg;
+ }
+
+ .network path {
+ fill: $networks-fg;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/service-graph/components/graph-legend/graph-legend.component.ts b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
new file mode 100644
index 0000000..d05b8e7
--- /dev/null
+++ b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
@@ -0,0 +1,131 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './graph-legend.component.scss';
+
+import * as d3 from 'd3';
+import {IXosServiceGraphIcons} from '../../services/d3-helpers/graph-icons.service';
+
+interface ILegendElement {
+ label: string;
+ icon: string;
+}
+
+class XosServiceGraphLegendCtrl {
+
+ static $inject = [
+ '$log',
+ '$timeout',
+ 'XosServiceGraphIcons'
+ ];
+
+ private svg;
+
+ private duration: number = 500;
+
+ private legendElements: ILegendElement[] = [
+ {
+ label: 'Services',
+ icon: 'service'
+ },
+ {
+ label: 'ServiceInstances',
+ icon: 'serviceinstance'
+ },
+ {
+ label: 'Instances',
+ icon: 'instance'
+ },
+ {
+ label: 'Networks',
+ icon: 'network'
+ }
+ ];
+
+ constructor(
+ private $log: ng.ILogService,
+ private $timeout: ng.ITimeoutService,
+ private XosServiceGraphIcons: IXosServiceGraphIcons
+ ) {
+ this.$log.debug('[XosServiceGraphLegend] Setup');
+ $timeout(() => {
+ // NOTE we need to wait for the component to be rendered before drawing
+ this.setupSvg();
+ this.render();
+ }, 500);
+ }
+
+ private setupSvg() {
+ this.svg = d3.select('xos-service-graph-legend svg');
+ }
+
+ private render() {
+ const step = 50;
+
+ const elements = this.svg.selectAll('g')
+ .data(this.legendElements);
+
+ const entering = elements.enter()
+ .append('g')
+ .attr({
+ class: d => `${d.icon}`,
+ transform: (d: ILegendElement, i: number) => `translate(50, ${step * (i + 1)})`
+ });
+
+ entering
+ .append('path')
+ .attr({
+ d: d => this.XosServiceGraphIcons.get(d.icon).path,
+ transform: d => this.XosServiceGraphIcons.get(d.icon).transform,
+ class: 'icon',
+ opacity: 0
+ })
+ .transition()
+ .duration(this.duration)
+ .delay((d, i) => i * (this.duration / 2))
+ .attr({
+ opacity: 1
+ });
+
+ entering
+ .append('text')
+ .text(d => d.label.toUpperCase())
+ .attr({
+ 'text-anchor': 'left',
+ 'alignment-baseline': 'bottom',
+ 'font-size': 15,
+ x: 50,
+ y: 20,
+ opacity: 0
+ })
+ .transition()
+ .duration(this.duration)
+ .delay((d, i) => i * (this.duration / 2))
+ .attr({
+ opacity: 1
+ });
+ }
+}
+
+export const XosServiceGraphLegend: angular.IComponentOptions = {
+ template: `
+ <h1>Legend</h1>
+ <svg></svg>
+ `,
+ controllerAs: 'vm',
+ controller: XosServiceGraphLegendCtrl,
+};
diff --git a/src/app/service-graph/index.ts b/src/app/service-graph/index.ts
index 770862d..0bed24b 100644
--- a/src/app/service-graph/index.ts
+++ b/src/app/service-graph/index.ts
@@ -22,6 +22,7 @@
import {XosNodePositioner} from './services/node-positioner.service';
import {XosGraphConfig} from './services/graph.config';
import {XosNodeRenderer} from './services/renderer/node.renderer';
+import {XosServiceGraphLegend} from './components/graph-legend/graph-legend.component';
export const xosServiceGraph = 'xosServiceGraph';
@@ -35,6 +36,7 @@
.service('XosGraphConfig', XosGraphConfig)
.service('XosNodeRenderer', XosNodeRenderer)
.component('xosServiceGraph', XosServiceGraph)
+ .component('xosServiceGraphLegend', XosServiceGraphLegend)
.run((
$log: ng.ILogService,
XosServiceGraphExtender: IXosServiceGraphExtender
diff --git a/src/app/service-graph/services/graph.config.ts b/src/app/service-graph/services/graph.config.ts
index e6ddfbd..cc316a2 100644
--- a/src/app/service-graph/services/graph.config.ts
+++ b/src/app/service-graph/services/graph.config.ts
@@ -17,6 +17,7 @@
import * as $ from 'jquery';
import {IXosKeyboardShortcutService} from '../../core/services/keyboard-shortcut';
import {IXosGraphStore} from './graph.store';
+import {IXosSidePanelService} from '../../core/side-panel/side-panel.service';
export interface IXosGraphConfig {
setupKeyboardShortcuts(): void;
@@ -30,6 +31,7 @@
'$cookies',
'$rootScope',
'$timeout',
+ 'XosSidePanel',
'XosKeyboardShortcut',
'XosGraphStore'
];
@@ -66,6 +68,7 @@
private $cookies: ng.cookies.ICookiesService,
private $rootScope: ng.IRootScopeService,
private $timeout: ng.ITimeoutService,
+ private XosSidePanel: IXosSidePanelService,
private XosKeyboardShortcut: IXosKeyboardShortcutService,
private XosGraphStore: IXosGraphStore
) {
@@ -78,6 +81,16 @@
// Setup keyboard shortcuts
this.XosKeyboardShortcut.registerKeyBinding({
+ key: 'h',
+ modifiers: ['shift'],
+ cb: () => {
+ this.XosSidePanel.toggleComponent('xosServiceGraphLegend');
+ },
+ label: 'h',
+ description: 'Toggle Graph Legend'
+ });
+
+ this.XosKeyboardShortcut.registerKeyBinding({
key: 'f',
modifiers: ['shift'],
cb: () => {