Bri Prebilic Cole
Committed by Gerrit Code Review

ONOS-2325 - GUI -- Multiple row highlighting minor bug fixed.

Change-Id: I60108e7f0f6992e28dd233980a09cc110c39c4a7
......@@ -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);
classRows(false);
}, flashTime);
}
});
});
scope.$on('$destroy', function () {
if (promise) {
$timeout.cancel(promise);
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......