홍길동 / 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 @@ ...@@ -24,63 +24,3 @@
24 padding-top: 20px; 24 padding-top: 20px;
25 padding-bottom: 20px; 25 padding-bottom: 20px;
26 } 26 }
27 -
28 -/* Tabular view upper right control buttons */
29 -
30 -div.ctrl-btns {
31 - display: inline-block;
32 - float: right;
33 - height: 44px;
34 - margin-right: 24px;
35 - margin-top: 7px;
36 -}
37 -
38 -
39 -div.ctrl-btns div {
40 - display: inline-block;
41 - padding: 4px;
42 - cursor: pointer;
43 -}
44 -
45 -/* Inactive */
46 -.light .ctrl-btns div g.icon rect,
47 -.light .ctrl-btns div:hover g.icon rect {
48 - fill: #eee;
49 -}
50 -.dark .ctrl-btns div g.icon rect,
51 -.dark .ctrl-btns div:hover g.icon rect {
52 - fill: #222;
53 -}
54 -
55 -.light .ctrl-btns div g.icon use {
56 - fill: #ddd;
57 -}
58 -.dark .ctrl-btns div g.icon use {
59 - fill: #333;
60 -}
61 -
62 -/* Active hover */
63 -.light .ctrl-btns div.active:hover g.icon rect {
64 - fill: #800;
65 -}
66 -
67 -.dark .ctrl-btns div.active:hover g.icon rect {
68 - fill: #CE5650;
69 -}
70 -
71 -/* Active */
72 -.light .ctrl-btns div.active g.icon use {
73 - fill: #fff;
74 -}
75 -.dark .ctrl-btns div.active g.icon use {
76 - fill: #eee;
77 -}
78 -
79 -.light .ctrl-btns div.active g.icon rect {
80 - fill: #bbb;
81 -}
82 -.dark .ctrl-btns div.active g.icon rect {
83 - fill: #444;
84 -}
85 -
86 -
......
...@@ -93,3 +93,70 @@ div.summary-list .table-body td { ...@@ -93,3 +93,70 @@ div.summary-list .table-body td {
93 .dark div.summary-list td { 93 .dark div.summary-list td {
94 color: #ccc; 94 color: #ccc;
95 } 95 }
96 +
97 +/* Tabular view upper right control buttons */
98 +
99 +div.ctrl-btns {
100 + display: inline-block;
101 + float: right;
102 + height: 44px;
103 + margin-right: 24px;
104 + margin-top: 7px;
105 +}
106 +
107 +
108 +div.ctrl-btns div {
109 + display: inline-block;
110 + padding: 4px;
111 + cursor: pointer;
112 +}
113 +
114 +/* Inactive */
115 +.light .ctrl-btns div g.icon rect,
116 +.light .ctrl-btns div:hover g.icon rect {
117 + fill: #eee;
118 +}
119 +.dark .ctrl-btns div g.icon rect,
120 +.dark .ctrl-btns div:hover g.icon rect {
121 + fill: #222;
122 +}
123 +
124 +.light .ctrl-btns div g.icon use {
125 + fill: #ddd;
126 +}
127 +.dark .ctrl-btns div g.icon use {
128 + fill: #333;
129 +}
130 +
131 +/* Active hover */
132 +.light .ctrl-btns div.active:hover g.icon rect {
133 + fill: #800;
134 +}
135 +
136 +.dark .ctrl-btns div.active:hover g.icon rect {
137 + fill: #CE5650;
138 +}
139 +
140 +/* Active */
141 +.light .ctrl-btns div.active g.icon use {
142 + fill: #fff;
143 +}
144 +.dark .ctrl-btns div.active g.icon use {
145 + fill: #eee;
146 +}
147 +
148 +.light .ctrl-btns div.active g.icon rect {
149 + fill: #bbb;
150 +}
151 +.dark .ctrl-btns div.active g.icon rect {
152 + fill: #444;
153 +}
154 +
155 +/* Refresh button specific */
156 +.light .ctrl-btns div.refresh:hover g.icon rect {
157 + fill: #800;
158 +}
159 +
160 +.dark .ctrl-btns div.refresh:hover g.icon rect {
161 + fill: #CE5650;
162 +}
......
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
48 48
49 o.scope.tableData = []; 49 o.scope.tableData = [];
50 o.scope.sortParams = {}; 50 o.scope.sortParams = {};
51 + o.scope.autoRefresh = true;
51 52
52 function respCb(data) { 53 function respCb(data) {
53 o.scope.tableData = data[root]; 54 o.scope.tableData = data[root];
...@@ -66,11 +67,25 @@ ...@@ -66,11 +67,25 @@
66 } 67 }
67 o.scope.selectCallback = selCb; 68 o.scope.selectCallback = selCb;
68 69
69 - function refresh(params) { 70 + function startRefresh() {
70 - $log.debug('Refreshing ' + root + ' page'); 71 + promise = $interval(function () {
71 - sortCb(params); 72 + $log.debug('Refreshing ' + root + ' page');
73 + sortCb(o.scope.sortParams);
74 + }, refreshInterval);
72 } 75 }
73 - o.scope.refresh = refresh; 76 +
77 + function stopRefresh() {
78 + if (angular.isDefined(promise)) {
79 + $interval.cancel(promise);
80 + promise = undefined;
81 + }
82 + }
83 +
84 + function toggleRefresh() {
85 + o.scope.autoRefresh = !o.scope.autoRefresh;
86 + o.scope.autoRefresh ? startRefresh() : stopRefresh();
87 + }
88 + o.scope.toggleRefresh = toggleRefresh;
74 89
75 handlers[resp] = respCb; 90 handlers[resp] = respCb;
76 wss.bindHandlers(handlers); 91 wss.bindHandlers(handlers);
...@@ -79,17 +94,11 @@ ...@@ -79,17 +94,11 @@
79 o.scope.$on('$destroy', function () { 94 o.scope.$on('$destroy', function () {
80 wss.unbindHandlers(handlers); 95 wss.unbindHandlers(handlers);
81 ts.resetSort(); 96 ts.resetSort();
82 - if (angular.isDefined(promise)) { 97 + stopRefresh();
83 - $interval.cancel(promise);
84 - promise = undefined;
85 - }
86 }); 98 });
87 99
88 sortCb(); 100 sortCb();
89 - 101 + startRefresh();
90 - promise = $interval(function () {
91 - refresh(o.scope.sortParams);
92 - }, refreshInterval);
93 } 102 }
94 103
95 angular.module('onosWidget') 104 angular.module('onosWidget')
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Applications ({{tableData.length}} total)</h2> 4 <h2>Applications ({{tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 - <div class="refresh active" 6 + <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh(sortParams)"></div> 8 + ng-click="toggleRefresh()"></div>
9 <div class="separator"></div> 9 <div class="separator"></div>
10 <div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div> 10 <div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div>
11 <div id="app-activate" icon icon-size="36" icon-id="play"></div> 11 <div id="app-activate" icon icon-size="36" icon-id="play"></div>
......
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Cluster Nodes ({{tableData.length}} total)</h2> 20 <h2>Cluster Nodes ({{tableData.length}} total)</h2>
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 - <div class="refresh active" 22 + <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh(sortParams)"></div> 24 + ng-click="toggleRefresh()"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Devices ({{tableData.length}} total)</h2> 4 <h2>Devices ({{tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 - <div class="refresh active" 6 + <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh(sortParams)"></div> 8 + ng-click="toggleRefresh()"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
6 ({{tableData.length}} total) 6 ({{tableData.length}} total)
7 </h2> 7 </h2>
8 <div class="ctrl-btns"> 8 <div class="ctrl-btns">
9 - <div class="refresh active" 9 + <div class="refresh" ng-class="{active: autoRefresh}"
10 icon icon-size="36" icon-id="refresh" 10 icon icon-size="36" icon-id="refresh"
11 - ng-click="refresh(sortParams)"></div> 11 + ng-click="toggleRefresh()"></div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
......
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
22 ({{tableData.length}} total) 22 ({{tableData.length}} total)
23 </h2> 23 </h2>
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 - <div class="refresh active" 25 + <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 - ng-click="refresh(sortParams)"></div> 27 + ng-click="toggleRefresh()"></div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Hosts ({{tableData.length}} total)</h2> 4 <h2>Hosts ({{tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 - <div class="refresh active" 6 + <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh(sortParams)"></div> 8 + ng-click="toggleRefresh()"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
......
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Intents ({{tableData.length}} total)</h2> 20 <h2>Intents ({{tableData.length}} total)</h2>
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 - <div class="refresh active" 22 + <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh(sortParams)"></div> 24 + ng-click="toggleRefresh()"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
......
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Links ({{tableData.length}} total)</h2> 20 <h2>Links ({{tableData.length}} total)</h2>
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 - <div class="refresh active" 22 + <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh(sortParams)"></div> 24 + ng-click="toggleRefresh()"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
......
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
22 ({{tableData.length}} total) 22 ({{tableData.length}} total)
23 </h2> 23 </h2>
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 - <div class="refresh active" 25 + <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 - ng-click="refresh(sortParams)"></div> 27 + ng-click="toggleRefresh()"></div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Component Settings ({{tableData.length}} total)</h2> 4 <h2>Component Settings ({{tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 - <div class="refresh active" 6 + <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh(sortParams)"></div> 8 + ng-click="toggleRefresh()"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 sort-callback="sortCallback(sortParams)"> 17 sort-callback="sortCallback(sortParams)">
18 <table> 18 <table>
19 <tr> 19 <tr>
20 - <td colId="component" sortable col-width="400px">Component </td> 20 + <td colId="component" sortable col-width="350px">Component </td>
21 <td colId="id" sortable>Property </td> 21 <td colId="id" sortable>Property </td>
22 <td colId="type" sortable col-width="70px">Type </td> 22 <td colId="type" sortable col-width="70px">Type </td>
23 <td colId="value" sortable>Value </td> 23 <td colId="value" sortable>Value </td>
......