diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index bd7f24b661..65c9b6cceb 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -32,7 +32,7 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n dataKeysOptional: 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}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"entitiesTitle\": {\n \"title\": \"Entities table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSearch\": {\n \"title\": \"Enable entities search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayEntityName\": {\n \"title\": \"Display entity name column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"entityNameColumnTitle\": {\n \"title\": \"Entity name column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityType\": {\n \"title\": \"Display entity type column\",\n \"type\": \"boolean\",\n \"default\": true\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 \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"entityName\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"entitiesTitle\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"displayEntityName\",\n \"entityNameColumnTitle\",\n \"displayEntityType\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\"\n ]\n}", + "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"entitiesTitle\": {\n \"title\": \"Entities table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSearch\": {\n \"title\": \"Enable entities search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayEntityName\": {\n \"title\": \"Display entity name column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"entityNameColumnTitle\": {\n \"title\": \"Entity name column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityLabel\": {\n \"title\": \"Display entity label column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"entityLabelColumnTitle\": {\n \"title\": \"Entity label column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityType\": {\n \"title\": \"Display entity type column\",\n \"type\": \"boolean\",\n \"default\": true\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 \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"entityName\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"entitiesTitle\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"displayEntityName\",\n \"entityNameColumnTitle\",\n \"displayEntityLabel\",\n \"entityLabelColumnTitle\",\n \"displayEntityType\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\"\n ]\n}", "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\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, entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\"\n }\n ]\n}", "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true},\"title\":\"Entities table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}]}" } diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index db0be6629a..aea0aa985e 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -68,8 +68,9 @@ export interface WidgetActionsApi { actionDescriptorsBySourceId: {[sourceId: string]: Array}; getActionDescriptors: (actionSourceId: string) => Array; handleWidgetAction: ($event: Event, descriptor: WidgetActionDescriptor, - entityId?: EntityId, entityName?: string, additionalParams?: any) => void; + entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string) => void; elementClick: ($event: Event) => void; + getActiveEntityInfo: () => SubscriptionEntityInfo; } export interface AliasInfo { @@ -108,6 +109,7 @@ export interface StateObject { export interface StateParams { entityName?: string; + entityLabel?: string; targetEntityParamName?: string; entityId?: EntityId; [key: string]: any | null; @@ -211,6 +213,7 @@ export interface WidgetSubscriptionOptions { export interface SubscriptionEntityInfo { entityId: EntityId; entityName: string; + entityLabel: string; } export interface IWidgetSubscription { diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts index 1db175872e..68a03d53b2 100644 --- a/ui-ngx/src/app/core/api/widget-subscription.ts +++ b/ui-ngx/src/app/core/api/widget-subscription.ts @@ -467,6 +467,7 @@ export class WidgetSubscription implements IWidgetSubscription { getFirstEntityInfo(): SubscriptionEntityInfo { let entityId: EntityId; let entityName: string; + let entityLabel: string; if (this.type === widgetType.rpc) { if (this.targetDeviceId) { entityId = { @@ -482,6 +483,7 @@ export class WidgetSubscription implements IWidgetSubscription { id: this.alarmSource.entityId }; entityName = this.alarmSource.entityName; + entityLabel = this.alarmSource.entityLabel; } } else { for (const datasource of this.datasources) { @@ -491,6 +493,7 @@ export class WidgetSubscription implements IWidgetSubscription { id: datasource.entityId }; entityName = datasource.entityName; + entityLabel = datasource.entityLabel; break; } } @@ -498,7 +501,8 @@ export class WidgetSubscription implements IWidgetSubscription { if (entityId) { return { entityId, - entityName + entityName, + entityLabel }; } else { return null; diff --git a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts index 0d597965ea..6d5c247fb8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts @@ -102,4 +102,8 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid })); } + widgetForceReInit() { + this.ctx.widgetForceReInit(); + } + } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts index 5efae9a4c8..feb2eda26f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts @@ -82,6 +82,8 @@ interface EntitiesTableWidgetSettings extends TableWidgetSettings { entitiesTitle: string; displayEntityName: boolean; entityNameColumnTitle: string; + displayEntityLabel: boolean; + entityLabelColumnTitle: string; displayEntityType: boolean; } @@ -233,12 +235,19 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni private updateDatasources() { const displayEntityName = isDefined(this.settings.displayEntityName) ? this.settings.displayEntityName : true; + const displayEntityLabel = isDefined(this.settings.displayEntityLabel) ? this.settings.displayEntityLabel : false; let entityNameColumnTitle: string; + let entityLabelColumnTitle: string; if (this.settings.entityNameColumnTitle && this.settings.entityNameColumnTitle.length) { entityNameColumnTitle = this.utils.customTranslation(this.settings.entityNameColumnTitle, this.settings.entityNameColumnTitle); } else { entityNameColumnTitle = this.translate.instant('entity.entity-name'); } + if (this.settings.entityLabelColumnTitle && this.settings.entityLabelColumnTitle.length) { + entityLabelColumnTitle = this.utils.customTranslation(this.settings.entityLabelColumnTitle, this.settings.entityLabelColumnTitle); + } else { + entityLabelColumnTitle = this.translate.instant('entity.entity-label'); + } const displayEntityType = isDefined(this.settings.displayEntityType) ? this.settings.displayEntityType : true; if (displayEntityName) { @@ -258,6 +267,23 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni }; this.columnWidth.entityName = '0px'; } + if (displayEntityLabel) { + this.columns.push( + { + name: 'entityLabel', + label: 'entityLabel', + def: 'entityLabel', + title: entityLabelColumnTitle + } as EntityColumn + ); + this.contentsInfo.entityLabel = { + useCellContentFunction: false + }; + this.stylesInfo.entityLabel = { + useCellStyleFunction: false + }; + this.columnWidth.entityLabel = '0px'; + } if (displayEntityType) { this.columns.push( { @@ -458,11 +484,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni if (descriptors.length) { let entityId; let entityName; + let entityLabel; if (entity) { entityId = entity.id; entityName = entity.entityName; + entityLabel = entity.entityLabel; } - this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName); + this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, null, entityLabel); } } @@ -472,11 +500,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni } let entityId; let entityName; + let entityLabel; if (entity) { entityId = entity.id; entityName = entity.entityName; + entityLabel = entity.entityLabel; } - this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName); + this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, null, entityLabel); } private defaultStyle(key: EntityColumn, value: any): any { @@ -510,7 +540,8 @@ class EntityDatasource implements DataSource { } const entity: EntityData = { id: {} as EntityId, - entityName: datasource.entityName + entityName: datasource.entityName, + entityLabel: datasource.entityLabel ? datasource.entityLabel : datasource.entityName }; if (datasource.entityId) { entity.id.id = datasource.entityId; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts index 3e7e4c0272..c042a8f5cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts @@ -87,6 +87,7 @@ export class TbFlot { private mousedownHandler = this.onFlotMouseDown.bind(this); private mouseupHandler = this.onFlotMouseUp.bind(this); private mouseleaveHandler = this.onFlotMouseLeave.bind(this); + private flotClickHandler = this.onFlotClick.bind(this); private readonly animatedPie: boolean; private pieDataAnimationDuration: number; @@ -309,6 +310,9 @@ export class TbFlot { } } }; + + this.options.grid.clickable = true; + if (this.settings.stroke) { this.options.series.pie.stroke.color = this.settings.stroke.color || '#fff'; this.options.series.pie.stroke.width = this.settings.stroke.width || 0; @@ -925,6 +929,7 @@ export class TbFlot { this.$element.bind('mousedown', this.mousedownHandler); this.$element.bind('mouseup', this.mouseupHandler); this.$element.bind('mouseleave', this.mouseleaveHandler); + this.$element.bind('plotclick', this.flotClickHandler); } private disableMouseEvents() { @@ -937,6 +942,7 @@ export class TbFlot { this.$element.unbind('mousedown', this.mousedownHandler); this.$element.unbind('mouseup', this.mouseupHandler); this.$element.unbind('mouseleave', this.mouseleaveHandler); + this.$element.unbind('plotclick', this.flotClickHandler); } private onFlotHover(e: any, pos: JQueryPlotPoint, item: TbFlotPlotItem) { @@ -1038,6 +1044,13 @@ export class TbFlot { this.isMouseInteraction = false; } + private onFlotClick(e: any, pos: JQueryPlotPoint, item: TbFlotPlotItem) { + if (!this.plot) { + return; + } + this.onPieSliceClick(e, item); + } + private getHoverInfo(seriesList: TbFlotPlotDataSeries[], pos: JQueryPlotPoint): TbFlotHoverInfo[] { let i: number; let series: TbFlotPlotDataSeries; @@ -1218,4 +1231,16 @@ export class TbFlot { this.plot.draw(); } + private onPieSliceClick($event: any, item: TbFlotPlotItem) { + const descriptors = this.ctx.actionsApi.getActionDescriptors('sliceClick'); + if ($event && descriptors.length) { + $event.stopPropagation(); + const entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); + const entityId = entityInfo ? entityInfo.entityId : null; + const entityName = entityInfo ? entityInfo.entityName : null; + const entityLabel = entityInfo ? entityInfo.entityLabel : null; + this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, item, entityLabel); + } + } + } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts index ffe75261d2..29f9e4265a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts @@ -41,6 +41,7 @@ export interface TableWidgetDataKeySettings { export interface EntityData { id: EntityId; entityName: string; + entityLabel?: string; entityType?: string; [key: string]: any; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index 51cebe1998..d0bb73e3af 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI entityType: datasource.entityType, id: datasource.entityId }, - entityName: datasource.entityName + entityName: datasource.entityName, + entityLabel: datasource.entityLabel }; } } @@ -421,11 +422,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI } let entityId; let entityName; + let entityLabel; if (this.ctx.activeEntityInfo) { entityId = this.ctx.activeEntityInfo.entityId; entityName = this.ctx.activeEntityInfo.entityName; + entityLabel = this.ctx.activeEntityInfo.entityLabel; } - this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, row); + this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, row, entityLabel); } } @@ -435,11 +438,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI } let entityId; let entityName; + let entityLabel; if (this.ctx.activeEntityInfo) { entityId = this.ctx.activeEntityInfo.entityId; entityName = this.ctx.activeEntityInfo.entityName; + entityLabel = this.ctx.activeEntityInfo.entityLabel; } - this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, row); + this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, row, entityLabel); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index b889a5bfba..95a77c2029 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -263,6 +263,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI this.widgetContext.servicesMap = ServicesMap; this.widgetContext.isEdit = this.isEdit; this.widgetContext.isMobile = this.isMobile; + this.widgetContext.widgetForceReInit = this.reInit.bind(this); this.widgetContext.subscriptionApi = { createSubscription: this.createSubscription.bind(this), @@ -280,7 +281,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI actionDescriptorsBySourceId, getActionDescriptors: this.getActionDescriptors.bind(this), handleWidgetAction: this.handleWidgetAction.bind(this), - elementClick: this.elementClick.bind(this) + elementClick: this.elementClick.bind(this), + getActiveEntityInfo: this.getActiveEntityInfo.bind(this) }; this.widgetContext.customHeaderActions = []; @@ -295,7 +297,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI const entityInfo = this.getActiveEntityInfo(); const entityId = entityInfo ? entityInfo.entityId : null; const entityName = entityInfo ? entityInfo.entityName : null; - this.handleWidgetAction($event, descriptor, entityId, entityName); + const entityLabel = entityInfo ? entityInfo.entityLabel : null; + this.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel); } }; this.widgetContext.customHeaderActions.push(headerAction); @@ -958,7 +961,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI } private handleWidgetAction($event: Event, descriptor: WidgetActionDescriptor, - entityId?: EntityId, entityName?: string, additionalParams?: any): void { + entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string): void { const type = descriptor.type; const targetEntityParamName = descriptor.stateEntityParamName; let targetEntityId: EntityId; @@ -970,7 +973,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI case WidgetActionType.updateDashboardState: let targetDashboardStateId = descriptor.targetDashboardStateId; const params = deepClone(this.widgetContext.stateController.getStateParams()); - this.updateEntityParams(params, targetEntityParamName, targetEntityId, entityName); + this.updateEntityParams(params, targetEntityParamName, targetEntityId, entityName, entityLabel); if (type === WidgetActionType.openDashboardState) { this.widgetContext.stateController.openState(targetDashboardStateId, params, descriptor.openRightLayout); } else { @@ -982,7 +985,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI targetDashboardStateId = descriptor.targetDashboardStateId; const stateObject: StateObject = {}; stateObject.params = {}; - this.updateEntityParams(stateObject.params, targetEntityParamName, targetEntityId, entityName); + this.updateEntityParams(stateObject.params, targetEntityParamName, targetEntityId, entityName, entityLabel); if (targetDashboardStateId) { stateObject.id = targetDashboardStateId; } @@ -1055,14 +1058,16 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI const entityInfo = this.getActiveEntityInfo(); const entityId = entityInfo ? entityInfo.entityId : null; const entityName = entityInfo ? entityInfo.entityName : null; - this.handleWidgetAction(event, descriptor, entityId, entityName); + const entityLabel = entityInfo && entityInfo.entityLabel ? entityInfo.entityLabel : null; + this.handleWidgetAction(event, descriptor, entityId, entityName, null, entityLabel); } }); } } } - private updateEntityParams(params: StateParams, targetEntityParamName?: string, targetEntityId?: EntityId, entityName?: string) { + private updateEntityParams(params: StateParams, targetEntityParamName?: string, targetEntityId?: EntityId, + entityName?: string, entityLabel?: string) { if (targetEntityId) { let targetEntityParams: StateParams; if (targetEntityParamName && targetEntityParamName.length) { @@ -1079,6 +1084,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI if (entityName) { targetEntityParams.entityName = entityName; } + if (entityLabel) { + targetEntityParams.entityLabel = entityLabel; + } } } diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts index 4ea7b8e480..f76a6da9dc 100644 --- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts @@ -161,6 +161,8 @@ export class WidgetContext { isEdit: boolean; isMobile: boolean; + widgetForceReInit?: () => void; + widgetNamespace?: string; subscriptionApi?: WidgetSubscriptionApi; @@ -225,6 +227,7 @@ export interface IDynamicWidgetComponent { rpcErrorText: string; rpcRejection: HttpErrorResponse; raf: RafService; + widgetForceReInit(): void; [key: string]: any; } diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts index 5bf28a0628..a975371b10 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/states/entity-state-controller.component.ts @@ -27,7 +27,7 @@ import { base64toObj, objToBase64 } from '@app/core/utils'; import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; import { EntityService } from '@core/http/entity.service'; import { EntityType } from '@shared/models/entity-type.models'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; @Component({ selector: 'tb-entity-state-controller', @@ -103,8 +103,7 @@ export class EntityStateControllerComponent extends StateControllerComponent imp public openState(id: string, params?: StateParams, openRightLayout?: boolean): void { if (this.states && this.states[id]) { this.resolveEntity(params).subscribe( - (entityName) => { - params.entityName = entityName; + () => { const newState: StateObject = { id, params @@ -123,8 +122,7 @@ export class EntityStateControllerComponent extends StateControllerComponent imp } if (this.states && this.states[id]) { this.resolveEntity(params).subscribe( - (entityName) => { - params.entityName = entityName; + () => { const newState: StateObject = { id, params @@ -199,12 +197,18 @@ export class EntityStateControllerComponent extends StateControllerComponent imp let stateName = this.states[this.stateObject[index].id].name; stateName = this.utils.customTranslation(stateName, stateName); const params = this.stateObject[index].params; - const entityName = params && params.entityName ? params.entityName : ''; + const targetParams = params && params.targetEntityParamName ? params[params.targetEntityParamName] : params; + const entityName = targetParams && targetParams.entityName ? targetParams.entityName : ''; + const entityLabel = targetParams && targetParams.entityLabel ? targetParams.entityLabel : ''; result = this.utils.insertVariable(stateName, 'entityName', entityName); + result = this.utils.insertVariable(stateName, 'entityLabel', entityLabel); for (const prop of Object.keys(params)) { if (params[prop] && params[prop].entityName) { result = this.utils.insertVariable(result, prop + ':entityName', params[prop].entityName); } + if (params[prop] && params[prop].entityLabel) { + result = this.utils.insertVariable(result, prop + ':entityLabel', params[prop].entityLabel); + } } } return result; @@ -282,24 +286,35 @@ export class EntityStateControllerComponent extends StateControllerComponent imp return true; } - private resolveEntity(params: StateParams): Observable { + private resolveEntity(params: StateParams): Observable { if (params && params.targetEntityParamName) { params = params[params.targetEntityParamName]; } if (params && params.entityId && params.entityId.id && params.entityId.entityType) { - if (params.entityName && params.entityName.length) { - return of(params.entityName); + if (this.isEntityResolved(params)) { + return of(null); } else { return this.entityService.getEntity(params.entityId.entityType as EntityType, params.entityId.id, {ignoreLoading: true, ignoreErrors: true}).pipe( - map((entity) => entity.name) + tap((entity) => { + params.entityName = entity.name; + params.entityLabel = entity.label; + }), + map(() => null) ); } } else { - return of(''); + return of(null); } } + private isEntityResolved(params: StateParams): boolean { + if (!params.entityName || !params.entityName.length) { + return false; + } + return true; + } + private getStateObjById(id: string): StateObject { return this.stateObject.find((stateObj) => stateObj.id === id); } diff --git a/ui-ngx/src/app/shared/models/base-data.ts b/ui-ngx/src/app/shared/models/base-data.ts index e89db8503e..8fb76e1584 100644 --- a/ui-ngx/src/app/shared/models/base-data.ts +++ b/ui-ngx/src/app/shared/models/base-data.ts @@ -23,4 +23,5 @@ export interface BaseData { createdTime?: number; id?: T; name?: string; + label?: string; }