From 2bbeb6ab34c0c67249159032e809ec639b86a9b9 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 7 May 2024 18:05:22 +0300 Subject: [PATCH] UI: Added support mobileQrEnabled settings in tenant admin home page dashboard --- ui-ngx/src/app/core/auth/auth.models.ts | 1 + ui-ngx/src/app/core/auth/auth.reducer.ts | 1 + ui-ngx/src/app/core/auth/auth.selectors.ts | 11 + .../home-links/home-links-routing.module.ts | 17 +- .../dashboard/tenant_admin_home_page.json | 189 +++++++++++++----- 5 files changed, 167 insertions(+), 52 deletions(-) diff --git a/ui-ngx/src/app/core/auth/auth.models.ts b/ui-ngx/src/app/core/auth/auth.models.ts index 7f76f25854..b73847ef83 100644 --- a/ui-ngx/src/app/core/auth/auth.models.ts +++ b/ui-ngx/src/app/core/auth/auth.models.ts @@ -24,6 +24,7 @@ export interface SysParamsState { hasRepository: boolean; tbelEnabled: boolean; persistDeviceStateToTelemetry: boolean; + mobileQrEnabled: boolean; userSettings: UserSettings; maxResourceSize: number; } diff --git a/ui-ngx/src/app/core/auth/auth.reducer.ts b/ui-ngx/src/app/core/auth/auth.reducer.ts index f755438600..cc9d01532a 100644 --- a/ui-ngx/src/app/core/auth/auth.reducer.ts +++ b/ui-ngx/src/app/core/auth/auth.reducer.ts @@ -29,6 +29,7 @@ const emptyUserAuthState: AuthPayload = { hasRepository: false, tbelEnabled: false, persistDeviceStateToTelemetry: false, + mobileQrEnabled: false, maxResourceSize: 0, userSettings: initialUserSettings }; diff --git a/ui-ngx/src/app/core/auth/auth.selectors.ts b/ui-ngx/src/app/core/auth/auth.selectors.ts index 0cb13c9865..0a97ef5665 100644 --- a/ui-ngx/src/app/core/auth/auth.selectors.ts +++ b/ui-ngx/src/app/core/auth/auth.selectors.ts @@ -78,6 +78,17 @@ export const selectPersistDeviceStateToTelemetry = createSelector( (state: AuthState) => state.persistDeviceStateToTelemetry ); +export const selectMobileQrEnabled = createSelector( + selectAuthState, + (state: AuthState) => state.mobileQrEnabled +); + +export const selectPersistDeviceStateToTelemetryAndMobileQrEnabled = createSelector( + selectPersistDeviceStateToTelemetry, + selectMobileQrEnabled, + (persistDeviceStateToTelemetry, mobileQrEnabled) => ({persistDeviceStateToTelemetry, mobileQrEnabled}) +); + export const selectUserSettings = createSelector( selectAuthState, (state: AuthState) => state.userSettings diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts index 6c5789b218..3b6b909225 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts @@ -25,7 +25,7 @@ import { DashboardService } from '@core/http/dashboard.service'; import { select, Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { map } from 'rxjs/operators'; -import { getCurrentAuthUser, selectPersistDeviceStateToTelemetry } from '@core/auth/auth.selectors'; +import { getCurrentAuthUser, selectPersistDeviceStateToTelemetryAndMobileQrEnabled } from '@core/auth/auth.selectors'; import { EntityKeyType } from '@shared/models/query/query.models'; import { ResourcesService } from '@core/services/resources.service'; @@ -35,16 +35,25 @@ const customerUserHomePageJson = '/assets/dashboard/customer_user_home_page.json const updateDeviceActivityKeyFilterIfNeeded = (store: Store, dashboard$: Observable): Observable => - store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe( - mergeMap((persistToTelemetry) => dashboard$.pipe( + store.pipe(select(selectPersistDeviceStateToTelemetryAndMobileQrEnabled)).pipe( + mergeMap((params) => dashboard$.pipe( map((dashboard) => { - if (persistToTelemetry) { + if (params.persistDeviceStateToTelemetry) { for (const filterId of Object.keys(dashboard.configuration.filters)) { if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) { dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES; } } } + if (params.mobileQrEnabled) { + for (const widgetId of Object.keys(dashboard.configuration.widgets)) { + if (dashboard.configuration.widgets[widgetId].config.title === 'Select show mobile QR code') { + dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction = + (dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction as string) + .replace('\'${mobileQrEnabled}\'', String(params.mobileQrEnabled)); + } + } + } return dashboard; }) )) diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 95e33e211b..b9cba6eb08 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -101,38 +101,6 @@ "id": "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4", "typeFullFqn": "system.home_page_widgets.documentation_links" }, - "a23185ad-dc46-806c-0e50-5b21fb080ace": { - "type": "static", - "sizeX": 7.5, - "sizeY": 6.5, - "config": { - "datasources": [], - "timewindow": { - "realtime": { - "timewindowMs": 60000 - } - }, - "showTitle": false, - "backgroundColor": "rgb(255, 255, 255)", - "color": "rgba(0, 0, 0, 0.87)", - "padding": "16px", - "settings": { - "columns": 3 - }, - "title": "Getting started", - "dropShadow": false, - "enableFullscreen": false, - "widgetStyle": {}, - "widgetCss": "", - "pageSize": 1024, - "noDataDisplayMessage": "", - "showLegend": false - }, - "row": 0, - "col": 0, - "id": "a23185ad-dc46-806c-0e50-5b21fb080ace", - "typeFullFqn": "system.home_page_widgets.getting_started" - }, "ebbd0a6e-8a47-e770-5086-7f4974250f2d": { "type": "static", "sizeX": 7.5, @@ -1144,7 +1112,108 @@ "col": 0, "id": "8e71a398-caf5-540d-cec5-6e5dc264343e" }, - "b9d704a2-f579-dbff-f123-f953d92081fd": { + "35bda856-2495-4f72-e35e-925bac8b8da7": { + "typeFullFqn": "system.cards.markdown_card", + "type": "latest", + "sizeX": 5, + "sizeY": 3.5, + "config": { + "datasources": [], + "timewindow": { + "displayValue": "", + "selectedTab": 0, + "realtime": { + "realtimeType": 1, + "interval": 1000, + "timewindowMs": 60000, + "quickInterval": "CURRENT_DAY" + }, + "history": { + "historyType": 0, + "interval": 1000, + "timewindowMs": 60000, + "fixedTimewindow": { + "startTimeMs": 1715005524783, + "endTimeMs": 1715091924783 + }, + "quickInterval": "CURRENT_DAY" + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + } + }, + "showTitle": false, + "backgroundColor": "#fff", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "0px", + "settings": { + "useMarkdownTextFunction": true, + "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n html += '';\n} else {\n html += '';\n}\nhtml += '
';\nreturn html;", + "applyDefaultMarkdownStyle": false, + "markdownCss": "" + }, + "title": "Select show mobile QR code", + "showTitleIcon": false, + "iconColor": "rgba(0, 0, 0, 0.87)", + "iconSize": "24px", + "titleTooltip": "", + "dropShadow": true, + "enableFullscreen": false, + "widgetStyle": { + "border": "none", + "boxShadow": "none", + "padding": 0 + }, + "titleStyle": { + "fontSize": "16px", + "fontWeight": 400 + }, + "showLegend": false, + "useDashboardTimewindow": true, + "displayTimewindow": true, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "35bda856-2495-4f72-e35e-925bac8b8da7" + }, + "ed33e56f-293b-aaaa-ad19-0cf499dc926f": { + "type": "static", + "sizeX": 7.5, + "sizeY": 6.5, + "config": { + "datasources": [], + "timewindow": { + "realtime": { + "timewindowMs": 60000 + } + }, + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "columns": 3 + }, + "title": "Getting started", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "", + "showLegend": false + }, + "row": 0, + "col": 0, + "id": "ed33e56f-293b-aaaa-ad19-0cf499dc926f", + "typeFullFqn": "system.home_page_widgets.getting_started" + }, + "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": { "typeFullFqn": "system.home_page_widgets.home_mobile_app_qr_code", "type": "static", "sizeX": 6, @@ -1183,7 +1252,7 @@ }, "row": 0, "col": 0, - "id": "b9d704a2-f579-dbff-f123-f953d92081fd" + "id": "8c5207d8-7103-4dc2-db48-d61c0c8c61fd" } }, "states": { @@ -1208,13 +1277,6 @@ "col": 28, "mobileHide": true }, - "a23185ad-dc46-806c-0e50-5b21fb080ace": { - "sizeX": 35, - "sizeY": 42, - "row": 0, - "col": 85, - "mobileHide": true - }, "ebbd0a6e-8a47-e770-5086-7f4974250f2d": { "sizeX": 28, "sizeY": 16, @@ -1254,13 +1316,11 @@ "col": 43, "mobileOrder": 0 }, - "b9d704a2-f579-dbff-f123-f953d92081fd": { + "35bda856-2495-4f72-e35e-925bac8b8da7": { "sizeX": 35, - "sizeY": 16, - "row": 42, - "col": 85, - "mobileOrder": 5, - "mobileHeight": 7 + "sizeY": 58, + "row": 0, + "col": 85 } }, "gridSettings": { @@ -1330,6 +1390,39 @@ } } } + }, + "mobile_app_qr_code": { + "name": "Mobile App QR code", + "root": false, + "layouts": { + "main": { + "widgets": { + "ed33e56f-293b-aaaa-ad19-0cf499dc926f": { + "sizeX": 120, + "sizeY": 45, + "row": 0, + "col": 0 + }, + "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": { + "sizeX": 120, + "sizeY": 17, + "row": 45, + "col": 0 + } + }, + "gridSettings": { + "backgroundColor": "#eeeeee", + "columns": 120, + "margin": 12, + "outerMargin": false, + "backgroundSizeMode": "100%", + "autoFillHeight": true, + "backgroundImageUrl": null, + "mobileAutoFillHeight": false, + "mobileRowHeight": 20 + } + } + } } }, "entityAliases": { @@ -1465,4 +1558,4 @@ } }, "name": "Tenant Administrator Home Page" -} +} \ No newline at end of file