UI: Add new setting for subscription reloadOnlyOnDataUpdated

Vladyslav_Prykhodko · Vladyslav Prykhodko
1 parent d520415d
Showing 10 changed files with 36 additions and 15 deletions
application/src/main/data/json/system/widget_bundles/cards.json
ui-ngx/src/app/core/api/data-aggregator.ts
ui-ngx/src/app/core/api/entity-data-subscription.ts
ui-ngx/src/app/core/api/entity-data.service.ts
ui-ngx/src/app/core/api/widget-api.models.ts
ui-ngx/src/app/core/api/widget-subscription.ts
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
ui-ngx/src/app/shared/models/widget.models.ts
--- a/application/src/main/data/json/system/widget_bundles/cards.json
View file @10cea37
+++ b/application/src/main/data/json/system/widget_bundles/cards.json
View file @10cea37
@@ -47,7 +47,7 @@
         "resources": [],
         "templateHtml": "<tb-timeseries-table-widget \n    [ctx]=\"ctx\">\n</tb-timeseries-table-widget>",
         "templateCss": "",
-        "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}",
+        "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        reloadOnlyOnDataUpdated: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}",
         "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"TimeseriesTableSettings\",\n        \"properties\": {\n            \"showTimestamp\": {\n                \"title\": \"Display timestamp column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"showMilliseconds\": {\n                \"title\": \"Display timestamp milliseconds\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },            \n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"hideEmptyLines\": {\n                \"title\": \"Hide empty lines\",\n                \"type\": \"boolean\",\n                \"default\": false\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"showTimestamp\",\n        \"showMilliseconds\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"hideEmptyLines\"\n    ]\n}",
         "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, rowData, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\"\n        }\n    ]\n}",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature  °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = (value + 60)/120 * 100;\\n    var color = tinycolor.mix('blue', 'red', amount = percent);\\n    color.setAlpha(.5);\\n    return {\\n      paddingLeft: '20px',\\n      color: '#ffffff',\\n      background: color.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = value;\\n    var backgroundColor = tinycolor('blue');\\n    backgroundColor.setAlpha(value/100);\\n    var color = 'blue';\\n    if (value > 50) {\\n        color = 'white';\\n    }\\n    \\n    return {\\n      paddingLeft: '20px',\\n      color: color,\\n      background: backgroundColor.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\"}"
@@ -134,4 +134,4 @@
       }
     }
   ]
-}
+}
--- a/ui-ngx/src/app/core/api/data-aggregator.ts
View file @10cea37
+++ b/ui-ngx/src/app/core/api/data-aggregator.ts
View file @10cea37
@@ -71,6 +71,7 @@ export class DataAggregator {
   private dataReceived = false;
   private resetPending = false;
+  private updatedData = false;
   private noAggregation = this.aggregationType === AggregationType.NONE;
   private aggregationTimeout = Math.max(this.interval, 1000);
@@ -90,7 +91,8 @@ export class DataAggregator {
               private timeWindow: number,
               private interval: number,
               private stateData: boolean,
-              private utils: UtilsService) {
+              private utils: UtilsService,
+              private isReloadOnlyOnDataUpdated: boolean) {
     this.tsKeyNames.forEach((key) => {
       this.dataBuffer[key] = [];
     });
@@ -140,6 +142,7 @@ export class DataAggregator {
     this.elapsed = 0;
     this.aggregationTimeout = Math.max(this.interval, 1000);
     this.resetPending = true;
+    this.updatedData = false;
     this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), this.aggregationTimeout);
   }
@@ -180,6 +183,7 @@ export class DataAggregator {
         this.onInterval(history, detectChanges);
       }
     }
+    this.updatedData = true;
   }
   private onInterval(history?: boolean, detectChanges?: boolean) {
@@ -201,8 +205,9 @@ export class DataAggregator {
     } else {
       this.data = this.updateData();
     }
-    if (this.onDataCb) {
+    if (this.onDataCb && (!this.isReloadOnlyOnDataUpdated || this.updatedData)) {
       this.onDataCb(this.data, detectChanges);
+      this.updatedData = false;
     }
     if (!history) {
       this.intervalTimeoutHandle = setTimeout(this.onInterval.bind(this), this.aggregationTimeout);
@@ -223,6 +228,7 @@ export class DataAggregator {
             this.lastPrevKvPairData[key] = [aggTimestamp, aggData.aggValue];
           }
           aggKeyData.delete(aggTimestamp);
+          this.updatedData = true;
         } else if (aggTimestamp <= this.endTs) {
           const kvPair: [number, any] = [aggTimestamp, aggData.aggValue];
           keyData.push(kvPair);
--- a/ui-ngx/src/app/core/api/entity-data-subscription.ts
View file @10cea37
+++ b/ui-ngx/src/app/core/api/entity-data-subscription.ts
View file @10cea37
@@ -66,6 +66,7 @@ export interface EntityDataSubscriptionOptions {
   type: widgetType;
   entityFilter?: EntityFilter;
   isPaginatedDataSubscription?: boolean;
+  isReloadOnlyOnDataUpdated?: boolean;
   pageLink?: EntityDataPageLink;
   keyFilters?: Array<KeyFilter>;
   additionalKeyFilters?: Array<KeyFilter>;
@@ -671,7 +672,8 @@ export class EntityDataSubscription {
       subsTw.aggregation.timeWindow,
       subsTw.aggregation.interval,
       subsTw.aggregation.stateData,
-      this.utils
+      this.utils,
+      this.entityDataSubscriptionOptions.isReloadOnlyOnDataUpdated
     );
   }
--- a/ui-ngx/src/app/core/api/entity-data.service.ts
View file @10cea37
+++ b/ui-ngx/src/app/core/api/entity-data.service.ts
View file @10cea37
@@ -60,7 +60,8 @@ export class EntityDataService {
   constructor(private telemetryService: TelemetryWebsocketService,
               private utils: UtilsService) {}
-  public prepareSubscription(listener: EntityDataListener): Observable<EntityDataLoadResult> {
+  public prepareSubscription(listener: EntityDataListener,
+                             isReloadOnlyOnDataUpdated = false): Observable<EntityDataLoadResult> {
     const datasource = listener.configDatasource;
     listener.subscriptionOptions = this.createSubscriptionOptions(
       datasource,
@@ -68,7 +69,8 @@ export class EntityDataService {
       datasource.pageLink,
       datasource.keyFilters,
       null,
-      false);
+      false,
+      isReloadOnlyOnDataUpdated);
     if (datasource.type === DatasourceType.entity && (!datasource.entityFilter || !datasource.pageLink)) {
       return of(null);
     }
@@ -87,7 +89,8 @@ export class EntityDataService {
   public subscribeForPaginatedData(listener: EntityDataListener,
                                    pageLink: EntityDataPageLink,
-                                   keyFilters: KeyFilter[]): Observable<EntityDataLoadResult> {
+                                   keyFilters: KeyFilter[],
+                                   isReloadOnlyOnDataUpdated = false): Observable<EntityDataLoadResult> {
     const datasource = listener.configDatasource;
     listener.subscriptionOptions = this.createSubscriptionOptions(
       datasource,
@@ -95,7 +98,8 @@ export class EntityDataService {
       pageLink,
       datasource.keyFilters,
       keyFilters,
-      true);
+      true,
+      isReloadOnlyOnDataUpdated);
     if (datasource.type === DatasourceType.entity && (!datasource.entityFilter || !pageLink)) {
       listener.dataLoaded(emptyPageData<EntityData>(), [],
         listener.configDatasourceIndex, listener.subscriptionOptions.pageLink);
@@ -119,7 +123,8 @@ export class EntityDataService {
                                     pageLink: EntityDataPageLink,
                                     keyFilters: KeyFilter[],
                                     additionalKeyFilters: KeyFilter[],
-                                    isPaginatedDataSubscription: boolean): EntityDataSubscriptionOptions {
+                                    isPaginatedDataSubscription: boolean,
+                                    isReloadOnlyOnDataUpdated: boolean): EntityDataSubscriptionOptions {
     const subscriptionDataKeys: Array<SubscriptionDataKey> = [];
     datasource.dataKeys.forEach((dataKey) => {
       const subscriptionDataKey: SubscriptionDataKey = {
@@ -142,6 +147,7 @@ export class EntityDataService {
       entityDataSubscriptionOptions.additionalKeyFilters = additionalKeyFilters;
     }
     entityDataSubscriptionOptions.isPaginatedDataSubscription = isPaginatedDataSubscription;
+    entityDataSubscriptionOptions.isReloadOnlyOnDataUpdated = isReloadOnlyOnDataUpdated;
     return entityDataSubscriptionOptions;
   }
 }
--- a/ui-ngx/src/app/core/api/widget-api.models.ts
View file @10cea37
+++ b/ui-ngx/src/app/core/api/widget-api.models.ts
View file @10cea37
@@ -226,6 +226,7 @@ export interface WidgetSubscriptionOptions {
   hasDataPageLink?: boolean;
   singleEntity?: boolean;
   warnOnPageDataOverflow?: boolean;
+  reloadOnlyOnDataUpdated?: boolean;
   targetDeviceAliasIds?: Array<string>;
   targetDeviceIds?: Array<string>;
   useDashboardTimewindow?: boolean;
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
View file @10cea37
+++ b/ui-ngx/src/app/core/api/widget-subscription.ts
View file @10cea37
@@ -83,6 +83,7 @@ export class WidgetSubscription implements IWidgetSubscription {
   hasDataPageLink: boolean;
   singleEntity: boolean;
   warnOnPageDataOverflow: boolean;
+  reloadOnlyOnDataUpdated: boolean;
   datasourcePages: PageData<Datasource>[];
   dataPages: PageData<Array<DatasourceData>>[];
@@ -200,6 +201,7 @@ export class WidgetSubscription implements IWidgetSubscription {
       this.hasDataPageLink = options.hasDataPageLink;
       this.singleEntity = options.singleEntity;
       this.warnOnPageDataOverflow = options.warnOnPageDataOverflow;
+      this.reloadOnlyOnDataUpdated = options.reloadOnlyOnDataUpdated;
       this.datasourcePages = [];
       this.datasources = [];
       this.dataPages = [];
@@ -423,7 +425,7 @@ export class WidgetSubscription implements IWidgetSubscription {
         }
       };
       this.entityDataListeners.push(listener);
-      return this.ctx.entityDataService.prepareSubscription(listener);
+      return this.ctx.entityDataService.prepareSubscription(listener, this.reloadOnlyOnDataUpdated);
     });
     return forkJoin(resolveResultObservables).pipe(
       map((resolveResults) => {
@@ -815,7 +817,7 @@ export class WidgetSubscription implements IWidgetSubscription {
         }
       };
       this.entityDataListeners[datasourceIndex] = entityDataListener;
-      return this.ctx.entityDataService.subscribeForPaginatedData(entityDataListener, pageLink, keyFilters);
+      return this.ctx.entityDataService.subscribeForPaginatedData(entityDataListener, pageLink, keyFilters, this.reloadOnlyOnDataUpdated);
     } else {
       return of(null);
     }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View file @10cea37
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View file @10cea37
@@ -40,7 +40,7 @@ import {
 } from '@shared/models/widget.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { hashCode, isDefined, isEqual, isNumber } from '@core/utils';
+import { hashCode, isDefined, isNumber } from '@core/utils';
 import cssjs from '@core/css/css';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order';
@@ -578,8 +578,7 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
   private fetchRows(pageLink: PageLink): Observable<PageData<TimeseriesRow>> {
     return this.allRows$.pipe(
-      map((data) => pageLink.filterData(data)),
-      distinctUntilChanged((prev, curr) => isEqual(prev, curr))
+      map((data) => pageLink.filterData(data))
     );
   }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
View file @10cea37
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
View file @10cea37
@@ -485,6 +485,9 @@ export class WidgetComponentService {
       if (isUndefined(result.typeParameters.warnOnPageDataOverflow)) {
         result.typeParameters.warnOnPageDataOverflow = true;
       }
+      if (isUndefined(result.typeParameters.reloadOnlyOnDataUpdated)) {
+        result.typeParameters.reloadOnlyOnDataUpdated = false;
+      }
       if (isUndefined(result.typeParameters.dataKeysOptional)) {
         result.typeParameters.dataKeysOptional = false;
       }
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View file @10cea37
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View file @10cea37
@@ -895,6 +895,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         hasDataPageLink: this.typeParameters.hasDataPageLink,
         singleEntity: this.typeParameters.singleEntity,
         warnOnPageDataOverflow: this.typeParameters.warnOnPageDataOverflow,
+        reloadOnlyOnDataUpdated: this.typeParameters.reloadOnlyOnDataUpdated,
         comparisonEnabled: comparisonSettings.comparisonEnabled,
         timeForComparison: comparisonSettings.timeForComparison
       };
--- a/ui-ngx/src/app/shared/models/widget.models.ts
View file @10cea37
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
View file @10cea37
@@ -154,6 +154,7 @@ export interface WidgetTypeParameters {
   hasDataPageLink?: boolean;
   singleEntity?: boolean;
   warnOnPageDataOverflow?: boolean;
+  reloadOnlyOnDataUpdated?: boolean;
 }
 export interface WidgetControllerDescriptor {