홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
41d67653 1 parent 50ec1af6

GUI -- Table views' auto refresh can be toggled on or off. 

Change-Id: I9c307d8ea43101d6f6cff28c16d2cdbe709871e1
Inline Side-by-side
Showing 13 changed files with 109 additions and 93 deletions
......@@ -24,63 +24,3 @@
padding-top: 20px;
padding-bottom: 20px;
}
/* Tabular view upper right control buttons */
div.ctrl-btns {
display: inline-block;
float: right;
height: 44px;
margin-right: 24px;
margin-top: 7px;
}
div.ctrl-btns div {
display: inline-block;
padding: 4px;
cursor: pointer;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}
......
......@@ -93,3 +93,70 @@ div.summary-list .table-body td {
.dark div.summary-list td {
color: #ccc;
}
/* Tabular view upper right control buttons */
div.ctrl-btns {
display: inline-block;
float: right;
height: 44px;
margin-right: 24px;
margin-top: 7px;
}
div.ctrl-btns div {
display: inline-block;
padding: 4px;
cursor: pointer;
}
/* Inactive */
.light .ctrl-btns div g.icon rect,
.light .ctrl-btns div:hover g.icon rect {
fill: #eee;
}
.dark .ctrl-btns div g.icon rect,
.dark .ctrl-btns div:hover g.icon rect {
fill: #222;
}
.light .ctrl-btns div g.icon use {
fill: #ddd;
}
.dark .ctrl-btns div g.icon use {
fill: #333;
}
/* Active hover */
.light .ctrl-btns div.active:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.active:hover g.icon rect {
fill: #CE5650;
}
/* Active */
.light .ctrl-btns div.active g.icon use {
fill: #fff;
}
.dark .ctrl-btns div.active g.icon use {
fill: #eee;
}
.light .ctrl-btns div.active g.icon rect {
fill: #bbb;
}
.dark .ctrl-btns div.active g.icon rect {
fill: #444;
}
/* Refresh button specific */
.light .ctrl-btns div.refresh:hover g.icon rect {
fill: #800;
}
.dark .ctrl-btns div.refresh:hover g.icon rect {
fill: #CE5650;
}
......
......@@ -48,6 +48,7 @@
o.scope.tableData = [];
o.scope.sortParams = {};
o.scope.autoRefresh = true;
function respCb(data) {
o.scope.tableData = data[root];
......@@ -66,11 +67,25 @@
}
o.scope.selectCallback = selCb;
function refresh(params) {
$log.debug('Refreshing ' + root + ' page');
sortCb(params);
function startRefresh() {
promise = $interval(function () {
$log.debug('Refreshing ' + root + ' page');
sortCb(o.scope.sortParams);
}, refreshInterval);
}
o.scope.refresh = refresh;
function stopRefresh() {
if (angular.isDefined(promise)) {
$interval.cancel(promise);
promise = undefined;
}
}
function toggleRefresh() {
o.scope.autoRefresh = !o.scope.autoRefresh;
o.scope.autoRefresh ? startRefresh() : stopRefresh();
}
o.scope.toggleRefresh = toggleRefresh;
handlers[resp] = respCb;
wss.bindHandlers(handlers);
......@@ -79,17 +94,11 @@
o.scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
ts.resetSort();
if (angular.isDefined(promise)) {
$interval.cancel(promise);
promise = undefined;
}
stopRefresh();
});
sortCb();
promise = $interval(function () {
refresh(o.scope.sortParams);
}, refreshInterval);
startRefresh();
}
angular.module('onosWidget')
......
......@@ -3,9 +3,9 @@
<div class="tabular-header">
<h2>Applications ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div>
<div id="app-activate" icon icon-size="36" icon-id="play"></div>
......
......@@ -19,9 +19,9 @@
<div class="tabular-header">
<h2>Cluster Nodes ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -3,9 +3,9 @@
<div class="tabular-header">
<h2>Devices ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -6,9 +6,9 @@
({{tableData.length}} total)
</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -22,9 +22,9 @@
({{tableData.length}} total)
</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -3,9 +3,9 @@
<div class="tabular-header">
<h2>Hosts ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -19,9 +19,9 @@
<div class="tabular-header">
<h2>Intents ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -19,9 +19,9 @@
<div class="tabular-header">
<h2>Links ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -22,9 +22,9 @@
({{tableData.length}} total)
</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -3,9 +3,9 @@
<div class="tabular-header">
<h2>Component Settings ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div class="refresh active"
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
ng-click="refresh(sortParams)"></div>
ng-click="toggleRefresh()"></div>
</div>
</div>
......@@ -17,7 +17,7 @@
sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="component" sortable col-width="400px">Component </td>
<td colId="component" sortable col-width="350px">Component </td>
<td colId="id" sortable>Property </td>
<td colId="type" sortable col-width="70px">Type </td>
<td colId="value" sortable>Value </td>
......