Cosmetic GUI changes for the demo:
*Cluster is now labeled "ONOS Instances"
*Buttons are now tiny
*iperf has no shading and the max height of the graph is lower so it doesn't blend in with the top of the table cell
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 2b07e33..e9a0ab7 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -122,9 +122,13 @@
#actions {
padding-right: .25em;
padding-left: .25em;
+ padding-top: .25em;
+ padding-bottom: .25em;
border-left: 1px solid white;
display: -webkit-box;
-webkit-box-align: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-pack: center;
}
#controllers {
@@ -132,6 +136,9 @@
background-color: black;
margin: .25em;
border-radius: 8px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-align: center;
}
#flowChooser .selectedFlow {
@@ -181,7 +188,7 @@
}
path.iperfdata {
- fill: #ccc;
+ fill: none;
stroke-width: 1px;
stroke: #ccc;
}
@@ -233,17 +240,20 @@
padding: .25em;
padding-left: 2.5em;
position: relative;
+ height: 1.5em;
border: 1px solid #444;
color: white;
position: relative;
border-radius: 8px;
+ display: -webkit-box;
+ -webkit-box-align: center;
}
.controller:hover {
border: 1px solid white;
}
-.action, .controller {
+.controller {
font-size: 18px;
}
@@ -423,16 +433,17 @@
}
.action {
- margin: .25em;
+ margin: .1em;
border: 2px solid #AAA;
- height: 2em;
- width: 2em;
+ height: 1.5em;
+ width: 5em;
+ font-size: 9px;
background-color: #444;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
color: #AAA;
- border-radius: 50%;
+ border-radius: 0%;
-webkit-box-sizing: border-box;
}
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 68f841d..5c1a650 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -20,14 +20,14 @@
</div>
<div id='onos'>
- <div id='cluster-label'>ONOS Nodes</div>
+ <div id='cluster-label'>ONOS Instances</div>
<div id='controllers'></div>
<div id='actions'>
<!--<div id='action-local' class='action'>1</div>-->
- <div id='action-reset' class='action'>R</div>
- <div id='action-scale' class='action'>S</div>
- <div id='action-all' class='action'>A</div>
- <div id='action-kill' class='action'>K</div>
+ <div id='action-reset' class='action'>Reset</div>
+ <div id='action-scale' class='action'>Scale</div>
+ <div id='action-all' class='action'>Backup</div>
+ <div id='action-kill' class='action'>Kill</div>
</div>
</div>
diff --git a/web/ons-demo/js/iperf.js b/web/ons-demo/js/iperf.js
index b1f964c..54c87ea 100644
--- a/web/ons-demo/js/iperf.js
+++ b/web/ons-demo/js/iperf.js
@@ -49,9 +49,9 @@
continue;
}
- var y = 28 * sample.value/1000000;
- if (y > 28) {
- y = 28;
+ var y = 24 * sample.value/1000000;
+ if (y > 24) {
+ y = 24;
}
if (i == iperfData.samples.length - 1) {
d = 'M' + x + ',30';