From e0c6b1464c894f0f3876c2ee89bf2247c49c6377 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 25 Apr 2017 10:51:39 +0300 Subject: [PATCH 1/3] Widget subscriptions improvements. --- ui/src/app/api/subscription.js | 41 +++++++++++++++++++------ ui/src/app/common/utils.service.js | 1 + ui/src/app/widget/lib/flot-widget.js | 9 ++++++ ui/src/app/widget/lib/google-map.js | 4 ++- ui/src/app/widget/lib/map-widget.js | 20 +++++++----- ui/src/app/widget/lib/openstreet-map.js | 4 ++- 6 files changed, 60 insertions(+), 19 deletions(-) diff --git a/ui/src/app/api/subscription.js b/ui/src/app/api/subscription.js index d63b02a530..1e7a716c25 100644 --- a/ui/src/app/api/subscription.js +++ b/ui/src/app/api/subscription.js @@ -169,15 +169,7 @@ export default class Subscription { }); this.registrations.push(registration); } else { - registration = this.ctx.$scope.$watch(function () { - return subscription.timeWindowConfig; - }, function (newTimewindow, prevTimewindow) { - if (!angular.equals(newTimewindow, prevTimewindow)) { - subscription.unsubscribe(); - subscription.subscribe(); - } - }); - this.registrations.push(registration); + this.startWatchingTimewindow(); } } @@ -188,6 +180,29 @@ export default class Subscription { this.registrations.push(registration); } + startWatchingTimewindow() { + var subscription = this; + this.timeWindowWatchRegistration = this.ctx.$scope.$watch(function () { + return subscription.timeWindowConfig; + }, function (newTimewindow, prevTimewindow) { + if (!angular.equals(newTimewindow, prevTimewindow)) { + subscription.unsubscribe(); + subscription.subscribe(); + } + }, true); + this.registrations.push(this.timeWindowWatchRegistration); + } + + stopWatchingTimewindow() { + if (this.timeWindowWatchRegistration) { + this.timeWindowWatchRegistration(); + var index = this.registrations.indexOf(this.timeWindowWatchRegistration); + if (index > -1) { + this.registrations.splice(index, 1); + } + } + } + initRpc() { if (this.targetDeviceAliasIds && this.targetDeviceAliasIds.length > 0) { @@ -354,9 +369,13 @@ export default class Subscription { this.ctx.dashboardTimewindowApi.onResetTimewindow(); } else { if (this.originalTimewindow) { + this.stopWatchingTimewindow(); this.timeWindowConfig = angular.copy(this.originalTimewindow); this.originalTimewindow = null; this.callbacks.timeWindowUpdated(this, this.timeWindowConfig); + this.unsubscribe(); + this.subscribe(); + this.startWatchingTimewindow(); } } } @@ -365,11 +384,15 @@ export default class Subscription { if (this.useDashboardTimewindow) { this.ctx.dashboardTimewindowApi.onUpdateTimewindow(startTimeMs, endTimeMs); } else { + this.stopWatchingTimewindow(); if (!this.originalTimewindow) { this.originalTimewindow = angular.copy(this.timeWindowConfig); } this.timeWindowConfig = this.ctx.timeService.toHistoryTimewindow(this.timeWindowConfig, startTimeMs, endTimeMs); this.callbacks.timeWindowUpdated(this, this.timeWindowConfig); + this.unsubscribe(); + this.subscribe(); + this.startWatchingTimewindow(); } } diff --git a/ui/src/app/common/utils.service.js b/ui/src/app/common/utils.service.js index 64fb6d8919..09d0fc894b 100644 --- a/ui/src/app/common/utils.service.js +++ b/ui/src/app/common/utils.service.js @@ -342,6 +342,7 @@ function Utils($mdColorPalette, $rootScope, $window, $q, deviceService, types) { datasource = { type: subscriptionInfo.type, deviceName: device.name, + name: device.name, deviceId: device.id.id, dataKeys: [] } diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index be61de7f93..af70de184b 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -374,6 +374,10 @@ export default class TbFlot { } update() { + if (this.updateTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.updateTimeoutHandle); + this.updateTimeoutHandle = null; + } if (this.subscription) { if (!this.isMouseInteraction && this.ctx.plot) { if (this.chartType === 'line' || this.chartType === 'bar') { @@ -396,6 +400,11 @@ export default class TbFlot { this.ctx.plot.draw(); } } + } else if (this.isMouseInteraction && this.ctx.plot){ + var tbFlot = this; + this.updateTimeoutHandle = this.ctx.$scope.$timeout(function() { + tbFlot.update(); + }, 30, false); } } } diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index caac144415..0e104ebfa9 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/ui/src/app/widget/lib/google-map.js @@ -217,7 +217,9 @@ export default class TbGoogleMap { this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); } - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + if (settings.displayTooltip) { + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + } if (onClickListener) { marker.addListener('click', onClickListener); diff --git a/ui/src/app/widget/lib/map-widget.js b/ui/src/app/widget/lib/map-widget.js index c39a1421bd..694f83a192 100644 --- a/ui/src/app/widget/lib/map-widget.js +++ b/ui/src/app/widget/lib/map-widget.js @@ -19,7 +19,7 @@ import tinycolor from 'tinycolor2'; import TbGoogleMap from './google-map'; import TbOpenStreetMap from './openstreet-map'; -function procesTooltipPattern(tbMap, pattern, datasources) { +function procesTooltipPattern(tbMap, pattern, datasources, dsIndex) { var match = tbMap.varsRegex.exec(pattern); var replaceInfo = {}; replaceInfo.variables = []; @@ -48,11 +48,13 @@ function procesTooltipPattern(tbMap, pattern, datasources) { var offset = 0; for (var i=0;iLatitude: ${#"+latKeyIndex+":7}
Longitude: ${#"+lngKeyIndex+":7}" + tooltipPattern: subscriptionLocationSettings.tooltipPattern || "Latitude: ${latitude:7}
Longitude: ${longitude:7}" }; - locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources); + locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources, i); locationsSettings.useColorFunction = subscriptionLocationSettings.useColorFunction === true; if (angular.isDefined(subscriptionLocationSettings.colorFunction) && subscriptionLocationSettings.colorFunction.length > 0) { @@ -211,6 +214,7 @@ export default class TbMapWidget { latKeyName: "lat", lngKeyName: "lng", showLabel: true, + displayTooltip: true, label: "", labelColor: this.ctx.widgetConfig.color || '#000000', color: "#FE7569", diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 77332d5677..65f7c7f06f 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/ui/src/app/widget/lib/openstreet-map.js @@ -109,7 +109,9 @@ export default class TbOpenStreetMap { this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); } - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + if (settings.displayTooltip) { + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + } if (onClickListener) { marker.on('click', onClickListener); From 02202c217f9d854e4d5206f6bb943e346e02c309 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 25 Apr 2017 13:34:13 +0300 Subject: [PATCH 2/3] UI: Minor fix for widgets subscription. --- ui/src/app/api/subscription.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/app/api/subscription.js b/ui/src/app/api/subscription.js index 1e7a716c25..afb9a06158 100644 --- a/ui/src/app/api/subscription.js +++ b/ui/src/app/api/subscription.js @@ -350,9 +350,9 @@ export default class Subscription { var subscription = this; this.cafs['dataUpdated'] = this.ctx.tbRaf(function() { try { - subscription.callbacks.onDataUpdated(this, apply); + subscription.callbacks.onDataUpdated(subscription, apply); } catch (e) { - subscription.callbacks.onDataUpdateError(this, e); + subscription.callbacks.onDataUpdateError(subscription, e); } }); if (apply) { From dcefde00f0d44ef836c4e2fec08925eef3612473 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 26 Apr 2017 21:39:42 +0300 Subject: [PATCH 3/3] Improve devices attributes table. --- .../attribute/attribute-table.directive.js | 24 +++++++++++++------ .../device/attribute/attribute-table.tpl.html | 4 ++-- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/ui/src/app/device/attribute/attribute-table.directive.js b/ui/src/app/device/attribute/attribute-table.directive.js index 560a4dc10f..701fd37754 100644 --- a/ui/src/app/device/attribute/attribute-table.directive.js +++ b/ui/src/app/device/attribute/attribute-table.directive.js @@ -72,7 +72,7 @@ export default function AttributeTableDirective($compile, $templateCache, $rootS scope.$watch("deviceId", function(newVal, prevVal) { if (newVal && !angular.equals(newVal, prevVal)) { scope.resetFilter(); - scope.getDeviceAttributes(); + scope.getDeviceAttributes(false, true); } }); @@ -81,7 +81,7 @@ export default function AttributeTableDirective($compile, $templateCache, $rootS scope.mode = 'default'; scope.query.search = null; scope.selectedAttributes = []; - scope.getDeviceAttributes(); + scope.getDeviceAttributes(false, true); } }); @@ -117,15 +117,25 @@ export default function AttributeTableDirective($compile, $templateCache, $rootS } } - scope.getDeviceAttributes = function(forceUpdate) { + scope.onReorder = function() { + scope.getDeviceAttributes(false, false); + } + + scope.onPaginate = function() { + scope.getDeviceAttributes(false, false); + } + + scope.getDeviceAttributes = function(forceUpdate, reset) { if (scope.attributesDeferred) { scope.attributesDeferred.resolve(); } if (scope.deviceId && scope.attributeScope) { - scope.attributes = { - count: 0, - data: [] - }; + if (reset) { + scope.attributes = { + count: 0, + data: [] + }; + } scope.checkSubscription(); scope.attributesDeferred = deviceService.getDeviceAttributes(scope.deviceId, scope.attributeScope.value, scope.query, function(attributes, update, apply) { diff --git a/ui/src/app/device/attribute/attribute-table.tpl.html b/ui/src/app/device/attribute/attribute-table.tpl.html index 915fbea861..b6099c4ffa 100644 --- a/ui/src/app/device/attribute/attribute-table.tpl.html +++ b/ui/src/app/device/attribute/attribute-table.tpl.html @@ -126,7 +126,7 @@ - + @@ -147,7 +147,7 @@ + md-on-paginate="onPaginate" md-page-select>
Last update time Key