GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again.
Change-Id: I362733996c340ed9fd5d674534c29181b7015410
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index f2e4dd3..8bfd202 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -31,7 +31,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -50,16 +50,15 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Applications found
</td>
</tr>
- <tr ng-repeat="app in tableData"
+ <tr ng-repeat="app in tableData track by $index"
ng-click="selectCallback($event, app)"
- ng-class="{selected: app.id === selId}"
- ng-repeat-done>
+ ng-class="{selected: app.id === selId}">
<td class="table-icon">
<div icon icon-id="{{app._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index 764447e..55ccd94 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -63,7 +63,6 @@
selCb: selCb,
respCb: refreshCtrls
});
- $scope.toggleRefresh();
$scope.appAction = function (action) {
if ($scope.ctrlBtnState.selection) {
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index 8750cac..e1db4ee 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -44,14 +44,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Cluster Nodes found
</td>
</tr>
- <tr ng-repeat="node in tableData"
- ng-repeat-done>
+ <tr ng-repeat="node in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{node._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 364efc2..564d6c4 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -32,16 +32,15 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="9">
No Devices found
</td>
</tr>
- <tr ng-repeat="dev in tableData track by dev.id"
+ <tr ng-repeat="dev in tableData track by $index"
ng-click="selectCallback($event, dev)"
- ng-class="{selected: dev.id === selId}"
- ng-repeat-done>
+ ng-class="{selected: dev.id === selId}">
<td class="table-icon">
<div icon icon-id="{{dev._iconid_available}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 3e5cb2c..b1fe49d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -26,24 +26,24 @@
width: 45px;
}
+.light #ov-flow tr:nth-child(6n + 1),
.light #ov-flow tr:nth-child(6n + 2),
-.light #ov-flow tr:nth-child(6n + 3),
-.light #ov-flow tr:nth-child(6n + 4) {
+.light #ov-flow tr:nth-child(6n + 3) {
background-color: #eee;
}
+.light #ov-flow tr:nth-child(6n + 4),
.light #ov-flow tr:nth-child(6n + 5),
-.light #ov-flow tr:nth-child(6n + 6),
-.light #ov-flow tr:nth-child(6n + 1) {
+.light #ov-flow tr:nth-child(6n) {
background-color: #ddd;
}
+.dark #ov-flow tr:nth-child(6n + 1),
.dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3),
-.dark #ov-flow tr:nth-child(6n + 4) {
+.dark #ov-flow tr:nth-child(6n + 3) {
background-color: #444;
}
+.dark #ov-flow tr:nth-child(6n + 4),
.dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n + 6),
-.dark #ov-flow tr:nth-child(6n + 1) {
+.dark #ov-flow tr:nth-child(6n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index a79e925..38059cd 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -12,7 +12,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -36,13 +36,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="10">
No Flows found
</td>
</tr>
- <tr ng-repeat-start="flow in tableData">
+ <tr ng-repeat-start="flow in tableData track by $index">
<td>{{flow.id}}</td>
<td>{{flow.appId}}</td>
<td>{{flow.groupId}}</td>
@@ -54,11 +54,10 @@
<td>{{flow.packets}}</td>
<td>{{flow.bytes}}</td>
</tr>
- <tr class="ignore-width">
+ <tr>
<td class="selector" colspan="10">{{flow.selector}}</td>
</tr>
- <tr class="ignore-width"
- ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="treatment" colspan="10">{{flow.treatment}}</td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/group/group.css b/web/gui/src/main/webapp/app/view/group/group.css
index 8553ddc..182f44c 100644
--- a/web/gui/src/main/webapp/app/view/group/group.css
+++ b/web/gui/src/main/webapp/app/view/group/group.css
@@ -26,20 +26,20 @@
width: 45px;
}
-.light #ov-group tr:nth-child(4n + 2),
-.light #ov-group tr:nth-child(4n + 3) {
+.light #ov-group tr:nth-child(4n + 1),
+.light #ov-group tr:nth-child(4n + 2) {
background-color: #eee;
}
-.light #ov-group tr:nth-child(4n + 4),
-.light #ov-group tr:nth-child(4n + 1) {
+.light #ov-group tr:nth-child(4n + 3),
+.light #ov-group tr:nth-child(4n) {
background-color: #ddd;
}
-.dark #ov-group tr:nth-child(4n + 2),
-.dark #ov-group tr:nth-child(4n + 3) {
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
background-color: #444;
}
-.dark #ov-group tr:nth-child(4n + 4),
-.dark #ov-group tr:nth-child(4n + 1) {
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index 22cd5ee..a2b38e0 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -28,7 +28,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -48,13 +48,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Groups found
</td>
</tr>
- <tr ng-repeat-start="group in tableData">
+ <tr ng-repeat-start="group in tableData track by $index">
<td>{{group.id}}</td>
<td>{{group.app_id}}</td>
<td>{{group.state}}</td>
@@ -62,8 +62,7 @@
<td>{{group.packets}}</td>
<td>{{group.bytes}}</td>
</tr>
- <tr class="ignore-width"
- ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="buckets" colspan="6"
ng-bind-html="group.buckets"></td>
</tr>
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index ad0e77e..0baeccd 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -29,14 +29,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Hosts found
</td>
</tr>
- <tr ng-repeat="host in tableData"
- ng-repeat-done>
+ <tr ng-repeat="host in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{host._iconid_type}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index 49bfc18..9f9923b 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -26,24 +26,24 @@
width: 45px;
}
+.light #ov-intent tr:nth-child(6n + 1),
.light #ov-intent tr:nth-child(6n + 2),
-.light #ov-intent tr:nth-child(6n + 3),
-.light #ov-intent tr:nth-child(6n + 4) {
+.light #ov-intent tr:nth-child(6n + 3) {
background-color: #eee;
}
+.light #ov-intent tr:nth-child(6n + 4),
.light #ov-intent tr:nth-child(6n + 5),
-.light #ov-intent tr:nth-child(6n + 6),
-.light #ov-intent tr:nth-child(6n + 1) {
+.light #ov-intent tr:nth-child(6n) {
background-color: #ddd;
}
+.dark #ov-intent tr:nth-child(6n + 1),
.dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3),
-.dark #ov-intent tr:nth-child(6n + 4) {
+.dark #ov-intent tr:nth-child(6n + 3) {
background-color: #444;
}
+.dark #ov-intent tr:nth-child(6n + 4),
.dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n + 6),
-.dark #ov-intent tr:nth-child(6n + 1) {
+.dark #ov-intent tr:nth-child(6n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index e60e788..9c754fd 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -44,13 +44,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Intents found
</td>
</tr>
- <tr ng-repeat-start="intent in tableData">
+ <tr ng-repeat-start="intent in tableData track by $index">
<td>{{intent.appId}}</td>
<td>{{intent.key}}</td>
<td>{{intent.type}}</td>
@@ -60,7 +60,7 @@
<tr>
<td class="resources" colspan="5">{{intent.resources}}</td>
</tr>
- <tr ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="details" colspan="5">{{intent.details}}</td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index dd1f534..1431772 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -45,14 +45,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Links found
</td>
</tr>
- <tr ng-repeat="link in tableData"
- ng-repeat-done>
+ <tr ng-repeat="link in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{link._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index 3e93eb3..5e48cbf 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -28,7 +28,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -50,14 +50,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="8">
No Ports found
</td>
</tr>
- <tr ng-repeat="port in tableData"
- ng-repeat-done>
+ <tr ng-repeat="port in tableData track by $index">
<td>{{port.id}}</td>
<td>{{port.pkt_rx}}</td>
<td>{{port.pkt_tx}}</td>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 2c89984..c5d87ba 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -17,26 +17,25 @@
sort-callback="sortCallback(sortParams)">
<table>
<tr>
- <td colId="component" sortable col-width="350px">Component </td>
+ <td colId="component" sortable col-width="200px">Component </td>
<td colId="id" sortable>Property </td>
<td colId="type" sortable col-width="70px">Type </td>
<td colId="value" sortable>Value </td>
<td colId="defValue" sortable>Default </td>
- <td colId="desc" col-width="520px">Description </td>
+ <td colId="desc" col-width="400px">Description </td>
</tr>
</table>
</div>
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Settings found
</td>
</tr>
- <tr ng-repeat="prop in tableData"
- ng-repeat-done>
+ <tr ng-repeat="prop in tableData track by $index">
<td>{{prop.component}}</td>
<td>{{prop.id}}</td>
<td>{{prop.type}}</td>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 4c2e256..c76d9d5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -135,7 +135,7 @@
.topo-p h2 {
padding: 0 4px;
margin: 0;
- word-break: break-all;
+ word-wrap: break-word;
display: inline-block;
width: 210px;
vertical-align: middle;
@@ -150,7 +150,7 @@
.topo-p h3 {
padding: 0 4px;
margin: 0;
- word-break: break-all;
+ word-wrap: break-word;
top: 20px;
left: 50px;
}
@@ -167,7 +167,7 @@
}
.topo-p td {
- word-break: break-all;
+ word-wrap: break-word;
}
.topo-p td.label {
font-style: italic;