Changed icons for different tipes of nodes
diff --git a/views/ngXosViews/serviceTopology/env/default.js b/views/ngXosViews/serviceTopology/env/default.js
index a4c949a..58fbc70 100644
--- a/views/ngXosViews/serviceTopology/env/default.js
+++ b/views/ngXosViews/serviceTopology/env/default.js
@@ -8,6 +8,6 @@
module.exports = {
host: 'http://clnode078.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'jhkNhrGWS7FyvzPAWEsJtVkgwYSODDhm',
- xossessionid: 'dr26sgw3bixae7pqyy7soydf864a554u'
+ xoscsrftoken: '2jDJ7XxDBkpBg3gEr8ckHDHirxV9bjdZ',
+ xossessionid: 'f9z9mj57jyqe3bpg8hrhohdopi929k9n'
};
diff --git a/views/ngXosViews/serviceTopology/spec/sample.test.js b/views/ngXosViews/serviceTopology/spec/sample.test.js
index b30543a..45630e9 100644
--- a/views/ngXosViews/serviceTopology/spec/sample.test.js
+++ b/views/ngXosViews/serviceTopology/spec/sample.test.js
@@ -145,5 +145,45 @@
});
});
+ describe('given slices and instances', () => {
+ const slices = [
+ {
+ id: 12,
+ name: 'First'
+ },
+ {
+ id: 13,
+ name: 'Second'
+ }
+ ];
+
+ const instances = [
+ [
+ {
+ humanReadableName: 'first-slice-instance-1'
+ },
+ {
+ humanReadableName: 'first-slice-instance-2'
+ }
+ ],
+ [
+ {
+ humanReadableName: 'second-slice-instance'
+ }
+ ]
+ ];
+
+ it('should create a tree grouping instances', () => {
+ const res = Service.buildServiceInterfacesTree(slices, instances);
+
+ expect(res[0].name).toBe('First');
+ expect(res[0].children[0].name).toBe('first-slice-instance-1');
+ expect(res[0].children[1].name).toBe('first-slice-instance-2');
+
+ expect(res[1].name).toBe('Second');
+ expect(res[1].children[0].name).toBe('second-slice-instance');
+ });
+ });
+
});
\ No newline at end of file
diff --git a/views/ngXosViews/serviceTopology/src/css/serviceTopology.css b/views/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 6dad523..cc2b130 100644
--- a/views/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/views/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -34,7 +34,8 @@
cursor: pointer;
}
-.node circle {
+.node circle,
+.node rect{
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
@@ -45,11 +46,11 @@
stroke: #05ffcb;
}
-.node.slice circle {
+.node.slice rect {
stroke: #b01dff;
}
-.node.instance circle {
+.node.instance rect {
stroke: #ff8b00;
}
diff --git a/views/ngXosViews/serviceTopology/src/js/d3.js b/views/ngXosViews/serviceTopology/src/js/d3.js
index c8649aa..04df8fc 100644
--- a/views/ngXosViews/serviceTopology/src/js/d3.js
+++ b/views/ngXosViews/serviceTopology/src/js/d3.js
@@ -17,7 +17,7 @@
.attr({
transform: d => `translate(10, 80)`,
width: 100,
- height: 130
+ height: 100
});
// service
@@ -40,41 +40,24 @@
.text('Service')
.style('fill-opacity', 1);
- // endpoints
- const endpoints = legendContainer.append('g')
- .attr({
- class: 'node internet'
- });
-
- endpoints.append('circle')
- .attr({
- r: serviceTopologyConfig.circle.radius,
- transform: d => `translate(30, 130)`
- });
-
- endpoints.append('text')
- .attr({
- transform: d => `translate(45, 130)`,
- dy: '.35em'
- })
- .text('Enpoints')
- .style('fill-opacity', 1);
-
// slice
const slice = legendContainer.append('g')
.attr({
class: 'node slice'
});
- slice.append('circle')
+ slice.append('rect')
.attr({
- r: serviceTopologyConfig.circle.radius,
- transform: d => `translate(30, 160)`
+ width: 20,
+ height: 20,
+ x: -10,
+ y: -10,
+ transform: d => `translate(30, 130)`
});
slice.append('text')
.attr({
- transform: d => `translate(45, 160)`,
+ transform: d => `translate(45, 130)`,
dy: '.35em'
})
.text('Slices')
@@ -86,15 +69,18 @@
class: 'node instance'
});
- instance.append('circle')
+ instance.append('rect')
.attr({
- r: serviceTopologyConfig.circle.radius,
- transform: d => `translate(30, 190)`
+ width: 20,
+ height: 20,
+ x: -10,
+ y: -10,
+ transform: d => `translate(30, 160)`
});
instance.append('text')
.attr({
- transform: d => `translate(45, 190)`,
+ transform: d => `translate(45, 160)`,
dy: '.35em'
})
.text('Instances')
@@ -142,13 +128,49 @@
class: d => `node ${d.type}`,
transform: d => `translate(${source.y0},${source.x0})` // this is the starting position
});
+
+ const subscriberNodes = nodeEnter.filter('.subscriber');
+ const internetNodes = nodeEnter.filter('.internet');
+ const serviceNodes = nodeEnter.filter('.service');
+ const instanceNodes = nodeEnter.filter('.instance');
+ const sliceNodes = nodeEnter.filter('.slice');
- // TODO append different shapes base on type
- nodeEnter.append('circle')
+ subscriberNodes.append('path')
+ .attr({
+ d: 'M20.771,12.364c0,0,0.849-3.51,0-4.699c-0.85-1.189-1.189-1.981-3.058-2.548s-1.188-0.454-2.547-0.396c-1.359,0.057-2.492,0.792-2.492,1.188c0,0-0.849,0.057-1.188,0.397c-0.34,0.34-0.906,1.924-0.906,2.321s0.283,3.058,0.566,3.624l-0.337,0.113c-0.283,3.283,1.132,3.68,1.132,3.68c0.509,3.058,1.019,1.756,1.019,2.548s-0.51,0.51-0.51,0.51s-0.452,1.245-1.584,1.698c-1.132,0.452-7.416,2.886-7.927,3.396c-0.511,0.511-0.453,2.888-0.453,2.888h26.947c0,0,0.059-2.377-0.452-2.888c-0.512-0.511-6.796-2.944-7.928-3.396c-1.132-0.453-1.584-1.698-1.584-1.698s-0.51,0.282-0.51-0.51s0.51,0.51,1.02-2.548c0,0,1.414-0.397,1.132-3.68H20.771z',
+ transform: 'translate(-20, -20)'
+ });
+
+ internetNodes.append('path')
+ .attr({
+ d: 'M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382',
+ stroke: '#000',
+ 'stroke-width': '20px',
+ fill: 'none',
+ transform: 'translate(-10, -10), scale(0.05)'
+ });
+
+ serviceNodes.append('circle')
.attr('r', 1e-6)
.style('fill', d => d._children ? 'lightsteelblue' : '#fff')
.on('click', serviceClick);
+ sliceNodes.append('rect')
+ .attr({
+ width: 20,
+ height: 20,
+ x: -10,
+ y: -10
+ });
+
+ instanceNodes.append('rect')
+ .attr({
+ width: 20,
+ height: 20,
+ x: -10,
+ y: -10
+ });
+
nodeEnter.append('text')
.attr({
x: d => d.children ? -serviceTopologyConfig.circle.selectedRadius -3 : serviceTopologyConfig.circle.selectedRadius + 3,
diff --git a/views/ngXosViews/serviceTopology/src/js/services.js b/views/ngXosViews/serviceTopology/src/js/services.js
index 6d8b4df..b3ac3b0 100644
--- a/views/ngXosViews/serviceTopology/src/js/services.js
+++ b/views/ngXosViews/serviceTopology/src/js/services.js
@@ -127,6 +127,28 @@
return deferred.promise;
};
+ const buildServiceInterfacesTree = (slices, instances) => {
+ var interfaceTree = [];
+ lodash.forEach(slices, (slice, i) => {
+ let current = {
+ name: slice.name,
+ slice: slice,
+ type: 'slice',
+ children: instances[i].map((instance) => {
+ return {
+ name: instance.humanReadableName,
+ children: [],
+ type: 'instance',
+ instance: instance
+ };
+
+ })
+ };
+ interfaceTree.push(current);
+ });
+ return interfaceTree;
+ };
+
const getServiceInterfaces = (serviceId) => {
var deferred = $q.defer();
@@ -147,41 +169,23 @@
return $q.all(promisesArr);
})
.then((instances) => {
- console.log(instances);
- // parse data to build a tree (2 level only)
- var interfaceTree = [];
- lodash.forEach(_slices, (slice, i) => {
- let current = {
- name: slice.name,
- slice: slice,
- type: 'slice',
- children: instances[i].map((instance) => {
- return {
- name: instance.humanReadableName,
- children: [],
- type: 'instance',
- instance: instance
- };
-
- })
- };
- interfaceTree.push(current);
- });
- console.log(interfaceTree)
- deferred.resolve(interfaceTree);
+ deferred.resolve(buildServiceInterfacesTree(_slices, instances));
});
return deferred.promise;
};
// export APIs
- this.get = get;
- this.buildLevel = buildLevel;
- this.buildServiceTree = buildServiceTree;
- this.findLevelRelation = findLevelRelation;
- this.findLevelServices = findLevelServices;
- this.depthOf = depthOf;
- this.getServiceInterfaces = getServiceInterfaces;
+ return {
+ get: get,
+ buildLevel: buildLevel,
+ buildServiceTree: buildServiceTree,
+ findLevelRelation: findLevelRelation,
+ findLevelServices: findLevelServices,
+ depthOf: depthOf,
+ getServiceInterfaces: getServiceInterfaces,
+ buildServiceInterfacesTree: buildServiceInterfacesTree
+ }
});
}());
\ No newline at end of file