ONOS-2325 - GUI -- Multiple row highlighting minor bug fixed.
Change-Id: I60108e7f0f6992e28dd233980a09cc110c39c4a7
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 0b3191b..ad06205 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -26,7 +26,7 @@
// constants
var tableIconTdSize = 33,
pdg = 22,
- flashTime = 2000,
+ flashTime = 1500,
colWidth = 'col-width',
tableIcon = 'table-icon',
asc = 'asc',
@@ -212,37 +212,43 @@
};
}])
- .directive('onosFlashChanges', ['$log', '$parse', '$timeout',
- function ($log, $parse, $timeout) {
+ .directive('onosFlashChanges',
+ ['$log', '$parse', '$timeout', 'FnService',
+ function ($log, $parse, $timeout, fs) {
+
return function (scope, element, attrs) {
var rowData = $parse(attrs.row)(scope),
id = attrs.rowId,
tr = d3.select(element[0]),
- multiRows = d3.selectAll('.multi-row'),
+ multi = 'multiRow' in attrs,
promise;
scope.$watchCollection('changedData', function (newData) {
- angular.forEach(newData, function (item) {
- function classMultiRows(b) {
- if (!multiRows.empty()) {
- multiRows.each(function () {
- d3.select(this).classed('data-change', b);
- });
- }
+ var multiRows = null;
+ if (multi) {
+ // This is a way to identify which rows need to be
+ // highlighted with the first one. It uses the unique
+ // identifier as a class selection. If the unique ID
+ // has invalid characters (like ':') then it won't work.
+ multiRows = d3.selectAll('.multi-row-' + rowData[id]);
+ }
+
+ function classRows(b) {
+ tr.classed('data-change', b);
+ if (multiRows) {
+ multiRows.classed('data-change', b);
}
+ }
- if (rowData[id] === item[id]) {
- tr.classed('data-change', true);
- classMultiRows(true);
+ if (fs.find(rowData[id], newData, id) > -1) {
+ classRows(true);
- promise = $timeout(function () {
- tr.classed('data-change', false);
- classMultiRows(false);
- }, flashTime);
- }
-
- });
+ promise = $timeout(function () {
+ classRows(false);
+ }, flashTime);
+ }
});
+
scope.$on('$destroy', function () {
if (promise) {
$timeout.cancel(promise);
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 3555d6b..d9d3618 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -56,7 +56,7 @@
</tr>
<tr ng-repeat-start="flow in tableData track by $index"
- onos-flash-changes row="{{flow}}" row-id="id">
+ onos-flash-changes row="{{flow}}" row-id="id" multi-row>
<td>{{flow.id}}</td>
<td>{{flow.appId}}</td>
<td>{{flow.groupId}}</td>
@@ -68,10 +68,10 @@
<td>{{flow.packets}}</td>
<td>{{flow.bytes}}</td>
</tr>
- <tr class="multi-row">
+ <tr class="multi-row-{{flow.id}}">
<td class="selector" colspan="10">{{flow.selector}}</td>
</tr>
- <tr class="multi-row" ng-repeat-end>
+ <tr class="multi-row-{{flow.id}}" 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.html b/web/gui/src/main/webapp/app/view/group/group.html
index e47783c..5387f34 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -68,7 +68,7 @@
</tr>
<tr ng-repeat-start="group in tableData track by $index"
- onos-flash-changes row="{{group}}" row-id="id">
+ onos-flash-changes row="{{group}}" row-id="id" multi-row>
<td>{{group.id}}</td>
<td>{{group.app_id}}</td>
<td>{{group.state}}</td>
@@ -76,7 +76,7 @@
<td>{{group.packets}}</td>
<td>{{group.bytes}}</td>
</tr>
- <tr class="multi-row" ng-repeat-end>
+ <tr class="multi-row-{{group.id}}" 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/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index 193267e..eeaf21e 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -49,17 +49,17 @@
</tr>
<tr ng-repeat-start="intent in tableData track by $index"
- onos-flash-changes row="{{intent}}" row-id="key">
+ onos-flash-changes row="{{intent}}" row-id="key" multi-row>
<td>{{intent.appId}}</td>
<td>{{intent.key}}</td>
<td>{{intent.type}}</td>
<td>{{intent.priority}}</td>
<td>{{intent.state}}</td>
</tr>
- <tr class="multi-row">
+ <tr class="multi-row-{{intent.key}}">
<td class="resources" colspan="5">{{intent.resources}}</td>
</tr>
- <tr class="multi-row" ng-repeat-end>
+ <tr class="multi-row-{{intent.key}}" ng-repeat-end>
<td class="details" colspan="5">{{intent.details}}</td>
</tr>
</table>