GUI -- Added applications view.
Fixed table.js column width computation.
Fixed app.xml files to leave out ONOS from description.
Change-Id: Icfe323e63c7965dd8c3a268421ea58065c5c8236
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index 7f3e8f4..6d83da2 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -28,6 +28,29 @@
fill-rule: evenodd;
}
+/*
+ FIXME: The following should be consolidated to result in much less CSS and
+ not to require entries for every icon.
+ */
+
+.light svg.embeddedIcon .icon.appActive,
+.light svg.embeddedIcon .icon.appInactive {
+ fill: none;
+}
+
+.dark svg.embeddedIcon .icon.appActive,
+.dark svg.embeddedIcon .icon.appInactive {
+ fill: none;
+}
+
+.light svg.embeddedIcon .icon.appActive .glyph {
+ fill: green;
+}
+.dark svg.embeddedIcon .icon.appActive .glyph {
+ fill: #266610;
+}
+
+
.light svg.embeddedIcon .icon.deviceOnline,
.light svg.embeddedIcon .icon.deviceOffline {
fill: none;
@@ -73,6 +96,10 @@
fill: #ccc;
}
+.light svg.embeddedIcon .icon.appActive rect,
+.light svg.embeddedIcon .icon.appInactive rect,
+.dark svg.embeddedIcon .icon.appActive rect,
+.dark svg.embeddedIcon .icon.appInactive rect,
.light svg.embeddedIcon .icon.deviceOnline rect,
.light svg.embeddedIcon .icon.deviceOffline rect,
.dark svg.embeddedIcon .icon.deviceOnline rect,
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 400b7aa..8a8b35f 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -29,6 +29,9 @@
// Maps icon ID to the glyph ID it uses.
// NOTE: icon ID maps to a CSS class for styling that icon
var glyphMapping = {
+ appActive: 'checkMark',
+ appInactive: 'unknown',
+
deviceOnline: 'checkMark',
deviceOffline: 'xMark',
devIcon_SWITCH: 'switch',
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 2fc3277..285d21d 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -29,19 +29,31 @@
// Functions for creating a fixed header on a table (Angular Directive)
function setTableWidth(t) {
- var tHeaders, tdElement, colWidth, numCols,
+ var tHeaders, tdElement, colWidth, numIcons, numNonIcons,
winWidth = fs.windowSize().width;
tHeaders = t.selectAll('th');
- numCols = tHeaders[0].length;
- colWidth = Math.floor(winWidth / numCols);
+ numIcons = 0;
+ numNonIcons = 0;
+
+ // FIXME: This should observe custom-set width from the HTML
tHeaders.each(function(thElement, index) {
thElement = d3.select(this);
+ if (thElement.classed('table-icon')) {
+ numIcons = numIcons + 1;
+ } else {
+ numNonIcons = numNonIcons + 1;
+ }
+ });
+ colWidth = Math.floor((winWidth - (numIcons * tableIconTdSize)) / numNonIcons);
+
+ tHeaders.each(function(thElement, index) {
+ thElement = d3.select(this);
tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
- if (tdElement.classed('table-icon')) {
+ if (thElement.classed('table-icon')) {
thElement.style('width', tableIconTdSize + 'px');
tdElement.style('width', tableIconTdSize + 'px');
} else {