Browse Source

UI: Add new setting for subscription reloadOnlyOnDataUpdated

pull/4096/head
Vladyslav_Prykhodko 5 years ago
committed by Vladyslav Prykhodko
parent
commit
10cea37abe
  1. 4
      application/src/main/data/json/system/widget_bundles/cards.json
  2. 10
      ui-ngx/src/app/core/api/data-aggregator.ts
  3. 4
      ui-ngx/src/app/core/api/entity-data-subscription.ts
  4. 16
      ui-ngx/src/app/core/api/entity-data.service.ts
  5. 1
      ui-ngx/src/app/core/api/widget-api.models.ts
  6. 6
      ui-ngx/src/app/core/api/widget-subscription.ts
  7. 5
      ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
  8. 3
      ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
  9. 1
      ui-ngx/src/app/modules/home/components/widget/widget.component.ts
  10. 1
      ui-ngx/src/app/shared/models/widget.models.ts

4
application/src/main/data/json/system/widget_bundles/cards.json

@ -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 @@
}
}
]
}
}

10
ui-ngx/src/app/core/api/data-aggregator.ts

@ -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);

4
ui-ngx/src/app/core/api/entity-data-subscription.ts

@ -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
);
}

16
ui-ngx/src/app/core/api/entity-data.service.ts

@ -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;
}
}

1
ui-ngx/src/app/core/api/widget-api.models.ts

@ -226,6 +226,7 @@ export interface WidgetSubscriptionOptions {
hasDataPageLink?: boolean;
singleEntity?: boolean;
warnOnPageDataOverflow?: boolean;
reloadOnlyOnDataUpdated?: boolean;
targetDeviceAliasIds?: Array<string>;
targetDeviceIds?: Array<string>;
useDashboardTimewindow?: boolean;

6
ui-ngx/src/app/core/api/widget-subscription.ts

@ -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);
}

5
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@ -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))
);
}
}

3
ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts

@ -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;
}

1
ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@ -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
};

1
ui-ngx/src/app/shared/models/widget.models.ts

@ -154,6 +154,7 @@ export interface WidgetTypeParameters {
hasDataPageLink?: boolean;
singleEntity?: boolean;
warnOnPageDataOverflow?: boolean;
reloadOnlyOnDataUpdated?: boolean;
}
export interface WidgetControllerDescriptor {

Loading…
Cancel
Save