Topo2: Added Friendly host names
JIRA: ONOS-6657
Also added css into the browsersync tasks within gulp
Change-Id: Ibcf342c89b8e1eae131f5cb3694e3632bc134534
diff --git a/tools/gui/gulp-tasks/bundles/bundle-css/index.js b/tools/gui/gulp-tasks/bundles/bundle-css/index.js
index 0c5c8d6..69c4c70 100644
--- a/tools/gui/gulp-tasks/bundles/bundle-css/index.js
+++ b/tools/gui/gulp-tasks/bundles/bundle-css/index.js
@@ -1,6 +1,7 @@
import gulp from 'gulp';
import concat from 'gulp-concat';
import BundleResources from '../helpers/bundleResources';
+import { reload } from '../../dev-server';
const GUI_BASE = '../../web/gui/src/main/webapp/';
const bundleFiles = [
@@ -11,10 +12,18 @@
'app/view/**/*.css',
];
-const task = gulp.task('bundle-css', function () {
- return gulp.src(BundleResources(GUI_BASE, bundleFiles))
- .pipe(concat('onos.css'))
- .pipe(gulp.dest(GUI_BASE + '/dist/'));
-});
+const task = () => {
-export default task;
\ No newline at end of file
+ gulp.task('bundle-css', function () {
+ return gulp.src(BundleResources(GUI_BASE, bundleFiles))
+ .pipe(concat('onos.css'))
+ .pipe(gulp.dest(GUI_BASE + '/dist/'))
+ .on('end', () => { reload(); });
+ });
+
+ gulp.task('watch-css', () => {
+ gulp.watch([GUI_BASE + 'app/**/*.css'], ['bundle-css']);
+ });
+}
+
+export default task();
\ No newline at end of file
diff --git a/tools/gui/gulp-tasks/dev-server/index.js b/tools/gui/gulp-tasks/dev-server/index.js
index 119c3f2..135ee9f 100644
--- a/tools/gui/gulp-tasks/dev-server/index.js
+++ b/tools/gui/gulp-tasks/dev-server/index.js
@@ -42,6 +42,7 @@
ws: true,
middleware: [
proxy(['**/*.js', '!/onos/ui/onos.js'], { target: 'http://localhost:8189' }),
+ proxy(['**/*.css'], { target: 'http://localhost:8189' }),
proxy('**/*.js.map', {
target: 'http://localhost:8189',
changeOrigin: true,
diff --git a/tools/gui/gulpfile.babel.js b/tools/gui/gulpfile.babel.js
index 24327e0..51aead1 100644
--- a/tools/gui/gulpfile.babel.js
+++ b/tools/gui/gulpfile.babel.js
@@ -3,4 +3,4 @@
gulp.task('build', ['bower', 'bundle-css', 'bundle-js']);
gulp.task('tests', ['bower', 'test']);
-gulp.task('default', ['bundle-js', 'serve', 'watch-js']);
\ No newline at end of file
+gulp.task('default', ['bundle-js', 'bundle-css', 'serve', 'watch-js', 'watch-css']);
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
index 8ae6c2e..03138c1 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
@@ -258,7 +258,7 @@
#ov-topo2 svg .node.host text {
stroke: none;
- font: 9pt sans-serif;
+ font-size: 13px;
fill: #846;
}
@@ -266,6 +266,7 @@
stroke: #a3a596;
fill: #e0dfd6;
}
+
#ov-topo2 svg .node.host.selected .hostIcon > circle {
stroke-width: 2.0;
stroke: #009fdb;
@@ -275,6 +276,10 @@
fill: #3c3a3a;
}
+#ov-topo2 svg .node.host rect {
+ fill: #ffffff;
+}
+
/* --- Topo Links --- */
#ov-topo2 svg .link {
@@ -633,7 +638,7 @@
.dark #ov-topo2 svg .node.host text {
stroke: none;
- font: 9pt sans-serif;
+ font-size: 13px;
fill: #ad5781;
}
@@ -641,6 +646,11 @@
stroke: #a3a596;
fill: #8f8272;
}
+
+.dark #ov-topo2 svg .node.host rect {
+ fill: #525660;
+}
+
.dark #ov-topo2 svg .node.host.selected .hostIcon > circle {
stroke-width: 2.0;
stroke: #009fdb;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
index bd04c7b..4247f64 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
@@ -27,6 +27,7 @@
var hostIconDim = 15,
hostIconDimMin = 8,
hostIconDimMax = 15,
+ labelPadding = 20,
remappedDeviceTypes = {};
function createHostCollection(data, region) {
@@ -90,6 +91,20 @@
return labels[idx];
},
+ updateLabel: function () {
+ var node = this.el,
+ label = this.trimLabel(this.label()),
+ labelWidth;
+
+ node.select('text').text(label);
+ labelWidth = !_.isEmpty(this.label()) ? this.computeLabelWidth(node) + (labelPadding * 2) : 0;
+
+ node.select('rect')
+ .transition()
+ .attr({
+ width: labelWidth,
+ });
+ },
setScale: function () {
if (!this.el) return;
@@ -114,13 +129,21 @@
var node = d3.select(el),
icon = this.icon(),
textDy = 5,
- textDx = (hostIconDim * 2) + 20;
+ textDx = (hostIconDim * 2);
this.el = node;
var g = node.append('g')
.attr('class', 'svgIcon hostIcon');
+ // Add Label background to host
+
+ var rect = g.append('rect').attr({
+ width: 0,
+ height: hostIconDim * 2,
+ y: - hostIconDim,
+ });
+
g.append('circle').attr('r', hostIconDim);
var glyphSize = hostIconDim * 1.5;
@@ -138,11 +161,14 @@
.text(labelText)
.attr('dy', textDy)
.attr('dx', textDx)
- .attr('text-anchor', 'middle');
+ .attr('text-anchor', 'left');
this.setScale();
this.setUpEvents();
this.setVisibility();
+
+ var labelWidth = !_.isEmpty(this.label()) ? this.computeLabelWidth(node) + (labelPadding * 2) : 0;
+ rect.attr({ width: labelWidth });
},
});