diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html index 35a5b4ec9d..9c028856be 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html @@ -41,7 +41,7 @@
{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.sms-feature' | translate}}
- + {{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.slack-feature' | translate}} - + {{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.oauth2-feature' | translate}} - + { - if (state.matches) { + if (state.breakpoints[MediaBreakpoints['md-lg']]) { this.rowHeight = '22px'; this.gutterSize = '8px'; } else { this.rowHeight = '50px'; this.gutterSize = '12px'; } + if (state.breakpoints[MediaBreakpoints['lt-md']]) { + this.bottomColspan = 3; + this.lastColspan = 6; + } else { + this.bottomColspan = 2; + this.lastColspan = 2; + } this.cd.markForCheck(); } ); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html index 5c0d6a112f..b2425a0231 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html @@ -18,8 +18,7 @@
widgets.getting-started.get-started
+ (selectionChange)="updateSelectedIndex($event)"> {{ index + 1 }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html index 462e01cd35..fb5dde16d2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html @@ -22,24 +22,41 @@
{{ 'widgets.version-info.contact-us' | translate }} -
-
-
- {{ 'widgets.version-info.current-version' | translate }} +
+
+ -
{{ updateMessage?.currentVersion }}
-
-
- {{ 'widgets.version-info.available-version' | translate }} +
+ + -
{{ updateMessage?.latestVersion }}
-
+
check
widgets.version-info.version-is-up-to-date
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss index f7f965d280..133a0d498e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss @@ -58,24 +58,20 @@ box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); border-radius: 10px; padding: 8px 16px 4px 16px; - display: flex; - flex-direction: column; - justify-content: space-evenly; + overflow: hidden; + white-space: nowrap; + @media #{$mat-lt-md} { + padding: 16px; + } @media #{$mat-md-lg} { padding: 4px; } &.up-to-date { box-shadow: none; border: none; - align-items: center; background: #F3F6FA; - } - } - - .tb-version-info-container+.tb-version-info-container { - margin-top: 12px; - @media #{$mat-md-lg} { - margin-top: 4px; + white-space: initial; + text-align: center; } } @@ -128,6 +124,7 @@ height: 24px; font-size: 12px; padding: 0; + overflow: hidden; } } diff --git a/ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw b/ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw index 8d9887bec4..2cb052d8c0 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw +++ b/ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw @@ -847,7 +847,7 @@ }, "showLegend": false, "useDashboardTimewindow": true, - "widgetCss": "", + "widgetCss": "gridster.mobile {\n overflow-y: hidden;\n}\n", "pageSize": 1024, "noDataDisplayMessage": "" }, @@ -855,127 +855,6 @@ "col": 0, "id": "4b5e47ed-c197-a937-d727-041ba8decec2" }, - "76607897-dfd0-8946-7451-3de6a39e4bbf": { - "isSystemType": true, - "bundleAlias": "cards", - "typeAlias": "markdown_card", - "type": "latest", - "title": "New widget", - "image": null, - "description": null, - "sizeX": 5, - "sizeY": 3.5, - "config": { - "datasources": [ - { - "type": "entity", - "name": null, - "entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079", - "filterId": null, - "dataKeys": [ - { - "name": "cpuUsage", - "type": "timeseries", - "label": "cpuUsage", - "color": "#2196f3", - "settings": {}, - "_hash": 0.659021918423117 - }, - { - "name": "cpuCount", - "type": "timeseries", - "label": "cpuCount", - "color": "#4caf50", - "settings": {}, - "_hash": 0.5332753234169949 - }, - { - "name": "cpuUsage", - "type": "timeseries", - "label": "status", - "color": "#f44336", - "settings": {}, - "_hash": 0.025084892962804473, - "aggregationType": "NONE", - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": true, - "postFuncBody": "var status = 'status-ok';\nif (value > 85) {\n status = 'status-critical';\n} else if (value > 75) {\n status = 'status-warn';\n}\nreturn status;" - }, - { - "name": "cpuUsage", - "type": "timeseries", - "label": "statusTooltip", - "color": "#ffc107", - "settings": {}, - "_hash": 0.8542003006820891, - "aggregationType": "NONE", - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.cpu-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.cpu-warning-text\\' | translate }}';\n}\nreturn text;\n" - } - ] - } - ], - "timewindow": { - "displayValue": "", - "selectedTab": 0, - "realtime": { - "realtimeType": 1, - "interval": 1000, - "timewindowMs": 60000, - "quickInterval": "CURRENT_DAY" - }, - "history": { - "historyType": 0, - "interval": 1000, - "timewindowMs": 60000, - "fixedTimewindow": { - "startTimeMs": 1680168340431, - "endTimeMs": 1680254740431 - }, - "quickInterval": "CURRENT_DAY" - }, - "aggregation": { - "type": "AVG", - "limit": 25000 - } - }, - "showTitle": false, - "backgroundColor": "#fff", - "color": "rgba(0, 0, 0, 0.87)", - "padding": "16px", - "settings": { - "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
widgets.system-info.cpu
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
", - "applyDefaultMarkdownStyle": false, - "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.tb-card-title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-status {\n width: 24px;\n height: 24px;\n position: relative;\n}\n\n.tb-status.status-ok {\n background: #F3F6FA;\n border-radius: 4px;\n}\n\n.tb-status:after {\n position: absolute;\n top: 2px;\n left: 2px;\n font-family: 'Material Icons Round';\n font-size: 20px;\n line-height: 1;\n}\n\n.tb-status.status-ok:after {\n content: \"check\";\n color: #198038;\n font-weight: 600;\n}\n\n.tb-status.status-warn:after {\n content: \"warning\";\n color: #FAA405;\n}\n\n.tb-status.status-critical:after {\n content: \"warning\";\n color: #D12730;\n}\n\n.tb-value-container {\n user-select: none;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 26px;\n line-height: 36px;\n}\n\n.tb-total {\n padding-left: 4px;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-status {\n width: 18px;\n height: 18px;\n }\n .tb-status:after {\n font-size: 14px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n .tb-total {\n font-size: 11px;\n line-height: 16px;\n }\n}" - }, - "title": "CPU", - "showTitleIcon": false, - "iconColor": "rgba(0, 0, 0, 0.87)", - "iconSize": "24px", - "titleTooltip": "", - "dropShadow": false, - "enableFullscreen": false, - "widgetStyle": {}, - "titleStyle": { - "fontSize": "16px", - "fontWeight": 400 - }, - "showLegend": false, - "useDashboardTimewindow": true, - "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n}\n\n@media screen and (min-width: 960px) {\n .tb-widget-container {\n margin-right: 6px;\n }\n}\n\n@media screen and (max-width: 959px) {\n .tb-widget-container {\n height: calc(100% - 12px);\n margin-bottom: 12px;\n }\n}", - "pageSize": 1024, - "noDataDisplayMessage": "" - }, - "row": 0, - "col": 0, - "id": "76607897-dfd0-8946-7451-3de6a39e4bbf" - }, "eace9148-b02a-48fe-1a95-acd9928aa8c5": { "isSystemType": true, "bundleAlias": "charts", @@ -1181,7 +1060,7 @@ "showTitleIcon": false, "titleTooltip": "", "widgetStyle": {}, - "widgetCss": "@media screen and (min-width: 960px) {\n .tb-widget-container {\n display: block;\n height: calc(100% - 12px);\n margin-top: 12px;\n }\n}\n\n.tb-legend-keys td .tb-legend-line {\n height: 5px !important;\n vertical-align: middle;\n}\n", + "widgetCss": ".tb-widget-container {\n display: block;\n height: calc(100% - 12px);\n margin-top: 12px;\n}\n\n.tb-legend-keys td .tb-legend-line {\n height: 5px !important;\n vertical-align: middle;\n}\n", "pageSize": 1024, "units": "%", "noDataDisplayMessage": "", @@ -1202,7 +1081,283 @@ "col": 0, "id": "eace9148-b02a-48fe-1a95-acd9928aa8c5" }, - "d755208a-81cf-edb4-5db8-f4859f5359cc": { + "8acbf5df-f9fc-114d-216f-86f081aa4779": { + "isSystemType": true, + "bundleAlias": "cards", + "typeAlias": "markdown_card", + "type": "latest", + "title": "New widget", + "image": null, + "description": null, + "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": 1680168340431, + "endTimeMs": 1680254740431 + }, + "quickInterval": "CURRENT_DAY" + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + } + }, + "showTitle": false, + "backgroundColor": "#fff", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "useMarkdownTextFunction": false, + "markdownTextPattern": "
\n
\n
\n
widgets.functions.title
\n
\n {{ 'widgets.functions.switch-to-pe' | translate }}\n
\n
\n
\n
widgets.functions.alarms
\n
widgets.functions.dashboards
\n
widgets.functions.entities-and-relations
\n
widgets.functions.profiles
\n
widgets.functions.advanced-features
\n
\n
\n
widgets.functions.notification-center
\n
widgets.functions.api-usage
\n
widgets.functions.customers
\n
widgets.functions.customers-hierarchy
\n
widgets.functions.roles-and-permissions
\n
\n
\n
widgets.functions.groups
\n
widgets.functions.integrations
\n
widgets.functions.solution-templates
\n
widgets.functions.scheduler
\n
widgets.functions.white-labeling
\n
\n
\n
", + "applyDefaultMarkdownStyle": false, + "markdownCss": ".tb-card-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n margin-top: 4px;\n overflow: auto;\n}\n\n.tb-card-column {\n min-width: 0px;\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.feature {\n position: relative;\n cursor: default;\n font-weight: 400;\n font-size: 14px;\n line-height: 28px;\n letter-spacing: 0.2px;\n color: rgba(0, 0, 0, 0.76);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.feature:before {\n content: \"check\";\n font-family: 'Material Icons Round';\n display: inline-block;\n font-size: 20px;\n line-height: 20px;\n color: #198038;\n font-weight: 600;\n position: relative;\n background: #F3F6FA;\n border-radius: 4px;\n width: 20px;\n height: 20px;\n padding: 2px;\n vertical-align: sub;\n margin-right: 8px;\n}\n\n.feature.pe:before {\n content: \"close\";\n background: #F4F4F4;\n color: rgba(0, 0, 0, 0.12);\n}\n\n.feature.pe:after {\n position: relative;\n display: inline-block;\n margin-left: 4px;\n vertical-align: baseline;\n top: -0.5em;\n content: \"PE\";\n color: #305680;\n font-weight: 700;\n font-size: 12px;\n line-height: 12px;\n letter-spacing: 0.0015em;\n}\n\n.feature+.feature {\n margin-top: 4px;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-switch-to-pe {\n height: 24px;\n font-size: 12px;\n padding: 0 4px;\n }\n \n .feature+.feature {\n margin-top: 2px;\n }\n \n .feature {\n font-size: 11px;\n line-height: 18px;\n }\n\n .feature:before {\n font-size: 14px;\n line-height: 14px;\n width: 14px;\n height: 14px;\n margin-right: 4px;\n }\n .feature.pe:after {\n margin-left: 2px;\n top: -0.5em;\n content: \"PE\";\n font-size: 8px;\n line-height: 8px;\n }\n \n}\n\n" + }, + "title": "Functions", + "showTitleIcon": false, + "iconColor": "rgba(0, 0, 0, 0.87)", + "iconSize": "24px", + "titleTooltip": "", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "titleStyle": { + "fontSize": "16px", + "fontWeight": 400 + }, + "showLegend": false, + "useDashboardTimewindow": true, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "8acbf5df-f9fc-114d-216f-86f081aa4779" + }, + "d2784f6c-0518-fd95-1d28-b21f70bdcb10": { + "isSystemType": true, + "bundleAlias": "cards", + "typeAlias": "markdown_card", + "type": "latest", + "title": "New widget", + "image": null, + "description": null, + "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": 1680168340431, + "endTimeMs": 1680254740431 + }, + "quickInterval": "CURRENT_DAY" + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + } + }, + "showTitle": false, + "backgroundColor": "#fff", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "useMarkdownTextFunction": false, + "markdownTextPattern": "
\n \n
", + "applyDefaultMarkdownStyle": false + }, + "title": "Configured features", + "showTitleIcon": false, + "iconColor": "rgba(0, 0, 0, 0.87)", + "iconSize": "24px", + "titleTooltip": "", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "titleStyle": { + "fontSize": "16px", + "fontWeight": 400 + }, + "showLegend": false, + "useDashboardTimewindow": true, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "d2784f6c-0518-fd95-1d28-b21f70bdcb10" + }, + "66dcf1a2-9d83-6873-c693-d6a5d989b3f8": { + "isSystemType": true, + "bundleAlias": "cards", + "typeAlias": "markdown_card", + "type": "latest", + "title": "New widget", + "image": null, + "description": null, + "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": 1680168340431, + "endTimeMs": 1680254740431 + }, + "quickInterval": "CURRENT_DAY" + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + } + }, + "showTitle": false, + "backgroundColor": "#fff", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "useMarkdownTextFunction": false, + "markdownTextPattern": "
\n \n
", + "applyDefaultMarkdownStyle": false + }, + "title": "Version", + "showTitleIcon": false, + "iconColor": "rgba(0, 0, 0, 0.87)", + "iconSize": "24px", + "titleTooltip": "", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "titleStyle": { + "fontSize": "16px", + "fontWeight": 400 + }, + "showLegend": false, + "useDashboardTimewindow": true, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "66dcf1a2-9d83-6873-c693-d6a5d989b3f8" + }, + "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": { + "isSystemType": true, + "bundleAlias": "home_page_widgets", + "typeAlias": "documentation_links", + "type": "static", + "title": "New widget", + "image": null, + "description": null, + "sizeX": 7.5, + "sizeY": 3, + "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": "Documentation", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "", + "showLegend": false + }, + "row": 0, + "col": 0, + "id": "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4" + }, + "a23185ad-dc46-806c-0e50-5b21fb080ace": { + "isSystemType": true, + "bundleAlias": "home_page_widgets", + "typeAlias": "getting_started", + "type": "static", + "title": "New widget", + "image": null, + "description": null, + "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" + }, + "b35fa1b0-7f95-0b23-fade-d066653a40e1": { "isSystemType": true, "bundleAlias": "cards", "typeAlias": "markdown_card", @@ -1221,35 +1376,23 @@ "filterId": null, "dataKeys": [ { - "name": "memoryUsage", + "name": "cpuUsage", "type": "timeseries", - "label": "memoryUsage", + "label": "cpuUsage", "color": "#2196f3", "settings": {}, - "_hash": 0.659021918423117, - "aggregationType": "NONE", - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": null, - "postFuncBody": null + "_hash": 0.659021918423117 }, { - "name": "totalMemory", + "name": "cpuCount", "type": "timeseries", - "label": "totalMemory", + "label": "cpuCount", "color": "#4caf50", "settings": {}, - "_hash": 0.5332753234169949, - "aggregationType": "NONE", - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": true, - "postFuncBody": "return value / 1073741824;" + "_hash": 0.5332753234169949 }, { - "name": "memoryUsage", + "name": "cpuUsage", "type": "timeseries", "label": "status", "color": "#f44336", @@ -1263,7 +1406,7 @@ "postFuncBody": "var status = 'status-ok';\nif (value > 85) {\n status = 'status-critical';\n} else if (value > 75) {\n status = 'status-warn';\n}\nreturn status;" }, { - "name": "memoryUsage", + "name": "cpuUsage", "type": "timeseries", "label": "statusTooltip", "color": "#ffc107", @@ -1274,7 +1417,7 @@ "decimals": null, "funcBody": null, "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.ram-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.ram-warning-text\\' | translate }}';\n}\nreturn text;\n" + "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.cpu-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.cpu-warning-text\\' | translate }}';\n}\nreturn text;\n" } ] } @@ -1308,12 +1451,12 @@ "color": "rgba(0, 0, 0, 0.87)", "padding": "16px", "settings": { - "useMarkdownTextFunction": true, - "markdownTextFunction": "const memoryUsage = data[0]['memoryUsage'];\nconst totalMemory = data[0]['totalMemory'];\nconst usedMemory = (totalMemory * (memoryUsage / 100)).toFixed(0);\n\n\nreturn '
' +\n '
' +\n '
widgets.system-info.ram
' +\n '
' +\n '
' +\n '
' +\n '${memoryUsage:0}%' +\n '| ${totalMemory:0} Gb' +\n '
' +\n '
';", + "useMarkdownTextFunction": false, + "markdownTextPattern": "
\n
\n
widgets.system-info.cpu
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
", "applyDefaultMarkdownStyle": false, "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.tb-card-title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-status {\n width: 24px;\n height: 24px;\n position: relative;\n}\n\n.tb-status.status-ok {\n background: #F3F6FA;\n border-radius: 4px;\n}\n\n.tb-status:after {\n position: absolute;\n top: 2px;\n left: 2px;\n font-family: 'Material Icons Round';\n font-size: 20px;\n line-height: 1;\n}\n\n.tb-status.status-ok:after {\n content: \"check\";\n color: #198038;\n font-weight: 600;\n}\n\n.tb-status.status-warn:after {\n content: \"warning\";\n color: #FAA405;\n}\n\n.tb-status.status-critical:after {\n content: \"warning\";\n color: #D12730;\n}\n\n.tb-value-container {\n user-select: none;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 26px;\n line-height: 36px;\n}\n\n.tb-total {\n padding-left: 4px;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-status {\n width: 18px;\n height: 18px;\n }\n .tb-status:after {\n font-size: 14px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n .tb-total {\n font-size: 11px;\n line-height: 16px;\n }\n}" }, - "title": "RAM", + "title": "CPU", "showTitleIcon": false, "iconColor": "rgba(0, 0, 0, 0.87)", "iconSize": "24px", @@ -1327,15 +1470,15 @@ }, "showLegend": false, "useDashboardTimewindow": true, - "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n}\n\n@media screen and (min-width: 960px) {\n .tb-widget-container {\n margin-right: 6px;\n margin-left: 6px;\n }\n}\n\n@media screen and (max-width: 959px) {\n .tb-widget-container {\n height: calc(100% - 12px);\n margin-bottom: 12px;\n }\n}", + "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n margin-right: 6px;\n}\n", "pageSize": 1024, "noDataDisplayMessage": "" }, "row": 0, "col": 0, - "id": "d755208a-81cf-edb4-5db8-f4859f5359cc" + "id": "b35fa1b0-7f95-0b23-fade-d066653a40e1" }, - "6ab892b7-0cb8-cb1e-f5d3-679ef8f25bd7": { + "5eabde4c-095f-defc-dd09-6c0afb9b9f7b": { "isSystemType": true, "bundleAlias": "cards", "typeAlias": "markdown_card", @@ -1354,9 +1497,9 @@ "filterId": null, "dataKeys": [ { - "name": "discUsage", + "name": "memoryUsage", "type": "timeseries", - "label": "discUsage", + "label": "memoryUsage", "color": "#2196f3", "settings": {}, "_hash": 0.659021918423117, @@ -1368,9 +1511,9 @@ "postFuncBody": null }, { - "name": "totalDiscSpace", + "name": "totalMemory", "type": "timeseries", - "label": "totalDiscSpace", + "label": "totalMemory", "color": "#4caf50", "settings": {}, "_hash": 0.5332753234169949, @@ -1382,7 +1525,7 @@ "postFuncBody": "return value / 1073741824;" }, { - "name": "discUsage", + "name": "memoryUsage", "type": "timeseries", "label": "status", "color": "#f44336", @@ -1396,7 +1539,7 @@ "postFuncBody": "var status = 'status-ok';\nif (value > 85) {\n status = 'status-critical';\n} else if (value > 75) {\n status = 'status-warn';\n}\nreturn status;" }, { - "name": "discUsage", + "name": "memoryUsage", "type": "timeseries", "label": "statusTooltip", "color": "#ffc107", @@ -1407,7 +1550,7 @@ "decimals": null, "funcBody": null, "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.disk-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.disk-warning-text\\' | translate }}';\n}\nreturn text;" + "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.ram-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.ram-warning-text\\' | translate }}';\n}\nreturn text;\n" } ] } @@ -1442,11 +1585,11 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": true, - "markdownTextFunction": "const discUsage = data[0]['discUsage'];\nconst totalDiscSpace = data[0]['totalDiscSpace'];\nconst usedDisc = (totalDiscSpace * (discUsage / 100)).toFixed(0);\n\n\nreturn '
' +\n '
' +\n '
widgets.system-info.disk
' +\n '
' +\n '
' +\n '
' +\n '${discUsage:0}%' +\n '| ${totalDiscSpace:0} Gb' +\n '
' +\n '
';", + "markdownTextFunction": "const memoryUsage = data[0]['memoryUsage'];\nconst totalMemory = data[0]['totalMemory'];\nconst usedMemory = (totalMemory * (memoryUsage / 100)).toFixed(0);\n\n\nreturn '
' +\n '
' +\n '
widgets.system-info.ram
' +\n '
' +\n '
' +\n '
' +\n '${memoryUsage:0}%' +\n '| ${totalMemory:0} Gb' +\n '
' +\n '
';", "applyDefaultMarkdownStyle": false, "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.tb-card-title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-status {\n width: 24px;\n height: 24px;\n position: relative;\n}\n\n.tb-status.status-ok {\n background: #F3F6FA;\n border-radius: 4px;\n}\n\n.tb-status:after {\n position: absolute;\n top: 2px;\n left: 2px;\n font-family: 'Material Icons Round';\n font-size: 20px;\n line-height: 1;\n}\n\n.tb-status.status-ok:after {\n content: \"check\";\n color: #198038;\n font-weight: 600;\n}\n\n.tb-status.status-warn:after {\n content: \"warning\";\n color: #FAA405;\n}\n\n.tb-status.status-critical:after {\n content: \"warning\";\n color: #D12730;\n}\n\n.tb-value-container {\n user-select: none;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 26px;\n line-height: 36px;\n}\n\n.tb-total {\n padding-left: 4px;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-status {\n width: 18px;\n height: 18px;\n }\n .tb-status:after {\n font-size: 14px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n .tb-total {\n font-size: 11px;\n line-height: 16px;\n }\n}" }, - "title": "Disk", + "title": "RAM", "showTitleIcon": false, "iconColor": "rgba(0, 0, 0, 0.87)", "iconSize": "24px", @@ -1460,15 +1603,15 @@ }, "showLegend": false, "useDashboardTimewindow": true, - "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n}\n\n@media screen and (min-width: 960px) {\n .tb-widget-container {\n margin-left: 6px;\n }\n}\n\n@media screen and (max-width: 959px) {\n .tb-widget-container {\n height: calc(100% - 12px);\n margin-bottom: 12px;\n }\n}", + "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n margin-right: 6px;\n margin-left: 6px;\n}\n", "pageSize": 1024, "noDataDisplayMessage": "" }, "row": 0, "col": 0, - "id": "6ab892b7-0cb8-cb1e-f5d3-679ef8f25bd7" + "id": "5eabde4c-095f-defc-dd09-6c0afb9b9f7b" }, - "8acbf5df-f9fc-114d-216f-86f081aa4779": { + "451e2588-80b8-cd08-2199-1263ed4dc12c": { "isSystemType": true, "bundleAlias": "cards", "typeAlias": "markdown_card", @@ -1479,7 +1622,72 @@ "sizeX": 5, "sizeY": 3.5, "config": { - "datasources": [], + "datasources": [ + { + "type": "entity", + "name": null, + "entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079", + "filterId": null, + "dataKeys": [ + { + "name": "discUsage", + "type": "timeseries", + "label": "discUsage", + "color": "#2196f3", + "settings": {}, + "_hash": 0.659021918423117, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": null, + "postFuncBody": null + }, + { + "name": "totalDiscSpace", + "type": "timeseries", + "label": "totalDiscSpace", + "color": "#4caf50", + "settings": {}, + "_hash": 0.5332753234169949, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": true, + "postFuncBody": "return value / 1073741824;" + }, + { + "name": "discUsage", + "type": "timeseries", + "label": "status", + "color": "#f44336", + "settings": {}, + "_hash": 0.025084892962804473, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": true, + "postFuncBody": "var status = 'status-ok';\nif (value > 85) {\n status = 'status-critical';\n} else if (value > 75) {\n status = 'status-warn';\n}\nreturn status;" + }, + { + "name": "discUsage", + "type": "timeseries", + "label": "statusTooltip", + "color": "#ffc107", + "settings": {}, + "_hash": 0.8542003006820891, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": true, + "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.disk-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.disk-warning-text\\' | translate }}';\n}\nreturn text;" + } + ] + } + ], "timewindow": { "displayValue": "", "selectedTab": 0, @@ -1509,12 +1717,12 @@ "color": "rgba(0, 0, 0, 0.87)", "padding": "16px", "settings": { - "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
\n
widgets.functions.title
\n
\n {{ 'widgets.functions.switch-to-pe' | translate }}\n
\n
\n
\n
widgets.functions.alarms
\n
widgets.functions.dashboards
\n
widgets.functions.entities-and-relations
\n
widgets.functions.profiles
\n
widgets.functions.advanced-features
\n
\n
\n
widgets.functions.notification-center
\n
widgets.functions.api-usage
\n
widgets.functions.customers
\n
widgets.functions.customers-hierarchy
\n
widgets.functions.roles-and-permissions
\n
\n
\n
widgets.functions.groups
\n
widgets.functions.integrations
\n
widgets.functions.solution-templates
\n
widgets.functions.scheduler
\n
widgets.functions.white-labeling
\n
\n
\n
", + "useMarkdownTextFunction": true, + "markdownTextFunction": "const discUsage = data[0]['discUsage'];\nconst totalDiscSpace = data[0]['totalDiscSpace'];\nconst usedDisc = (totalDiscSpace * (discUsage / 100)).toFixed(0);\n\n\nreturn '
' +\n '
' +\n '
widgets.system-info.disk
' +\n '
' +\n '
' +\n '
' +\n '${discUsage:0}%' +\n '| ${totalDiscSpace:0} Gb' +\n '
' +\n '
';", "applyDefaultMarkdownStyle": false, - "markdownCss": ".tb-card-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n margin-top: 4px;\n overflow: auto;\n}\n\n.feature {\n position: relative;\n cursor: default;\n font-weight: 400;\n font-size: 14px;\n line-height: 28px;\n letter-spacing: 0.2px;\n color: rgba(0, 0, 0, 0.76);\n margin-left: 32px;\n}\n\n.feature:before {\n content: \"check\";\n font-family: 'Material Icons Round';\n display: inline-block;\n font-size: 20px;\n line-height: 20px;\n color: #198038;\n font-weight: 600;\n position: absolute;\n left: -32px;\n top: 2px;\n background: #F3F6FA;\n border-radius: 4px;\n width: 20px;\n height: 20px;\n padding: 2px;\n vertical-align: middle;\n}\n\n.feature.pe:before {\n content: \"close\";\n background: #F4F4F4;\n color: rgba(0, 0, 0, 0.12);\n}\n\n.feature.pe:after {\n position: relative;\n display: inline-block;\n margin-left: 4px;\n vertical-align: baseline;\n top: -0.5em;\n content: \"PE\";\n color: #305680;\n font-weight: 700;\n font-size: 12px;\n line-height: 12px;\n letter-spacing: 0.0015em;\n}\n\n.feature+.feature {\n margin-top: 4px;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-switch-to-pe {\n height: 24px;\n font-size: 12px;\n padding: 0 4px;\n }\n \n .feature+.feature {\n margin-top: 2px;\n }\n \n .feature {\n font-size: 11px;\n line-height: 18px;\n margin-left: 22px;\n }\n\n .feature:before {\n font-size: 14px;\n line-height: 14px;\n width: 14px;\n height: 14px;\n left: -22px;\n top: 0;\n }\n .feature.pe:after {\n margin-left: 2px;\n top: -0.5em;\n content: \"PE\";\n font-size: 8px;\n line-height: 8px;\n }\n \n}\n\n" + "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.tb-card-title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-status {\n width: 24px;\n height: 24px;\n position: relative;\n}\n\n.tb-status.status-ok {\n background: #F3F6FA;\n border-radius: 4px;\n}\n\n.tb-status:after {\n position: absolute;\n top: 2px;\n left: 2px;\n font-family: 'Material Icons Round';\n font-size: 20px;\n line-height: 1;\n}\n\n.tb-status.status-ok:after {\n content: \"check\";\n color: #198038;\n font-weight: 600;\n}\n\n.tb-status.status-warn:after {\n content: \"warning\";\n color: #FAA405;\n}\n\n.tb-status.status-critical:after {\n content: \"warning\";\n color: #D12730;\n}\n\n.tb-value-container {\n user-select: none;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 26px;\n line-height: 36px;\n}\n\n.tb-total {\n padding-left: 4px;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-status {\n width: 18px;\n height: 18px;\n }\n .tb-status:after {\n font-size: 14px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n .tb-total {\n font-size: 11px;\n line-height: 16px;\n }\n}" }, - "title": "Functions", + "title": "Disk", "showTitleIcon": false, "iconColor": "rgba(0, 0, 0, 0.87)", "iconSize": "24px", @@ -1528,15 +1736,15 @@ }, "showLegend": false, "useDashboardTimewindow": true, - "widgetCss": "", + "widgetCss": ".tb-widget-container {\n display: block;\n height: 100%;\n margin-left: 6px;\n}\n", "pageSize": 1024, "noDataDisplayMessage": "" }, "row": 0, "col": 0, - "id": "8acbf5df-f9fc-114d-216f-86f081aa4779" + "id": "451e2588-80b8-cd08-2199-1263ed4dc12c" }, - "d2784f6c-0518-fd95-1d28-b21f70bdcb10": { + "01b94c17-84eb-4e49-6a92-c3f108ecff8e": { "isSystemType": true, "bundleAlias": "cards", "typeAlias": "markdown_card", @@ -1547,7 +1755,60 @@ "sizeX": 5, "sizeY": 3.5, "config": { - "datasources": [], + "datasources": [ + { + "type": "entity", + "name": null, + "entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079", + "filterId": null, + "dataKeys": [ + { + "name": "cpuUsage", + "type": "timeseries", + "label": "cpuUsage", + "color": "#2196f3", + "settings": {}, + "_hash": 0.659021918423117 + }, + { + "name": "cpuCount", + "type": "timeseries", + "label": "cpuCount", + "color": "#4caf50", + "settings": {}, + "_hash": 0.5332753234169949 + }, + { + "name": "cpuUsage", + "type": "timeseries", + "label": "status", + "color": "#f44336", + "settings": {}, + "_hash": 0.025084892962804473, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": true, + "postFuncBody": "var status = 'status-ok';\nif (value > 85) {\n status = 'status-critical';\n} else if (value > 75) {\n status = 'status-warn';\n}\nreturn status;" + }, + { + "name": "cpuUsage", + "type": "timeseries", + "label": "statusTooltip", + "color": "#ffc107", + "settings": {}, + "_hash": 0.8542003006820891, + "aggregationType": "NONE", + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": true, + "postFuncBody": "var text = '';\nif (value > 85) {\n text = '{{ \\'widgets.system-info.cpu-critical-text\\' | translate }}';\n} else if (value > 75) {\n text = '{{ \\'widgets.system-info.cpu-warning-text\\' | translate }}';\n}\nreturn text;\n" + } + ] + } + ], "timewindow": { "displayValue": "", "selectedTab": 0, @@ -1578,10 +1839,11 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n \n
", - "applyDefaultMarkdownStyle": false + "markdownTextPattern": "
\n
\n
\n
widgets.system-info.cpu
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
\n
\n
\n
widgets.system-info.cpu
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
\n
\n
\n
widgets.system-info.cpu
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
\n
", + "applyDefaultMarkdownStyle": false, + "markdownCss": ".tb-card-content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.tb-card-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.tb-card-title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.tb-status {\n width: 24px;\n height: 24px;\n position: relative;\n}\n\n.tb-status.status-ok {\n background: #F3F6FA;\n border-radius: 4px;\n}\n\n.tb-status:after {\n position: absolute;\n top: 2px;\n left: 2px;\n font-family: 'Material Icons Round';\n font-size: 20px;\n line-height: 1;\n}\n\n.tb-status.status-ok:after {\n content: \"check\";\n color: #198038;\n font-weight: 600;\n}\n\n.tb-status.status-warn:after {\n content: \"warning\";\n color: #FAA405;\n}\n\n.tb-status.status-critical:after {\n content: \"warning\";\n color: #D12730;\n}\n\n.tb-value-container {\n user-select: none;\n}\n\n.tb-count {\n font-style: normal;\n font-weight: 500;\n font-size: 26px;\n line-height: 36px;\n}\n\n.tb-total {\n padding-left: 4px;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-status {\n width: 18px;\n height: 18px;\n }\n .tb-status:after {\n font-size: 14px;\n }\n .tb-count {\n font-size: 16px;\n line-height: 24px;\n }\n .tb-total {\n font-size: 11px;\n line-height: 16px;\n }\n}" }, - "title": "Configured features", + "title": "Mobile system info cards", "showTitleIcon": false, "iconColor": "rgba(0, 0, 0, 0.87)", "iconSize": "24px", @@ -1601,9 +1863,9 @@ }, "row": 0, "col": 0, - "id": "d2784f6c-0518-fd95-1d28-b21f70bdcb10" + "id": "01b94c17-84eb-4e49-6a92-c3f108ecff8e" }, - "66dcf1a2-9d83-6873-c693-d6a5d989b3f8": { + "f0479b00-ed47-0a30-0c36-bde7847aae00": { "isSystemType": true, "bundleAlias": "cards", "typeAlias": "markdown_card", @@ -1640,22 +1902,26 @@ } }, "showTitle": false, - "backgroundColor": "#fff", + "backgroundColor": "rgba(0,0,0,0)", "color": "rgba(0, 0, 0, 0.87)", - "padding": "16px", + "padding": "0px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n \n
", + "markdownTextPattern": "
\n \n \n \n \n
", "applyDefaultMarkdownStyle": false }, - "title": "Version", + "title": "System info cards", "showTitleIcon": false, "iconColor": "rgba(0, 0, 0, 0.87)", "iconSize": "24px", "titleTooltip": "", "dropShadow": false, "enableFullscreen": false, - "widgetStyle": {}, + "widgetStyle": { + "border": "none", + "boxShadow": "none", + "padding": "0" + }, "titleStyle": { "fontSize": "16px", "fontWeight": 400 @@ -1668,81 +1934,7 @@ }, "row": 0, "col": 0, - "id": "66dcf1a2-9d83-6873-c693-d6a5d989b3f8" - }, - "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": { - "isSystemType": true, - "bundleAlias": "home_page_widgets", - "typeAlias": "documentation_links", - "type": "static", - "title": "New widget", - "image": null, - "description": null, - "sizeX": 7.5, - "sizeY": 3, - "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": "Documentation", - "dropShadow": false, - "enableFullscreen": false, - "widgetStyle": {}, - "widgetCss": "", - "pageSize": 1024, - "noDataDisplayMessage": "", - "showLegend": false - }, - "row": 0, - "col": 0, - "id": "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4" - }, - "a23185ad-dc46-806c-0e50-5b21fb080ace": { - "isSystemType": true, - "bundleAlias": "home_page_widgets", - "typeAlias": "getting_started", - "type": "static", - "title": "New widget", - "image": null, - "description": null, - "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" + "id": "f0479b00-ed47-0a30-0c36-bde7847aae00" } }, "states": { @@ -1814,13 +2006,13 @@ "row": 0, "col": 44, "mobileOrder": 6, - "mobileHeight": 20 + "mobileHeight": 16 }, "8acbf5df-f9fc-114d-216f-86f081aa4779": { - "sizeX": 61, + "sizeX": 52, "sizeY": 16, "row": 42, - "col": 24, + "col": 33, "mobileHide": true }, "d2784f6c-0518-fd95-1d28-b21f70bdcb10": { @@ -1829,15 +2021,15 @@ "row": 29, "col": 0, "mobileOrder": 8, - "mobileHeight": 6 + "mobileHeight": 8 }, "66dcf1a2-9d83-6873-c693-d6a5d989b3f8": { - "sizeX": 24, + "sizeX": 33, "sizeY": 16, "row": 42, "col": 0, "mobileOrder": 9, - "mobileHeight": 8 + "mobileHeight": 7 }, "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": { "sizeX": 44, @@ -1899,37 +2091,85 @@ "layouts": { "main": { "widgets": { - "76607897-dfd0-8946-7451-3de6a39e4bbf": { - "sizeX": 8, - "sizeY": 3, - "row": 0, - "col": 0, - "mobileOrder": 0, - "mobileHeight": 6 - }, "eace9148-b02a-48fe-1a95-acd9928aa8c5": { - "sizeX": 24, - "sizeY": 8, - "row": 3, + "sizeX": 48, + "sizeY": 21, + "row": 7, "col": 0, - "mobileOrder": 3, + "mobileOrder": 1, "mobileHeight": 10 }, - "d755208a-81cf-edb4-5db8-f4859f5359cc": { + "f0479b00-ed47-0a30-0c36-bde7847aae00": { + "sizeX": 48, + "sizeY": 7, + "mobileOrder": 0, + "mobileHeight": 4, + "row": 0, + "col": 0 + } + }, + "gridSettings": { + "backgroundColor": "rgba(0,0,0,0)", + "columns": 48, + "margin": 0, + "backgroundSizeMode": "100%", + "autoFillHeight": true, + "backgroundImageUrl": null, + "mobileAutoFillHeight": true, + "mobileRowHeight": 70 + } + } + } + }, + "system_info_desktop": { + "name": "System Info Desktop", + "root": false, + "layouts": { + "main": { + "widgets": { + "b35fa1b0-7f95-0b23-fade-d066653a40e1": { + "sizeX": 8, + "sizeY": 3, + "row": 0, + "col": 0 + }, + "5eabde4c-095f-defc-dd09-6c0afb9b9f7b": { "sizeX": 8, "sizeY": 3, "row": 0, - "col": 8, - "mobileOrder": 1, - "mobileHeight": 6 + "col": 8 }, - "6ab892b7-0cb8-cb1e-f5d3-679ef8f25bd7": { + "451e2588-80b8-cd08-2199-1263ed4dc12c": { "sizeX": 8, "sizeY": 3, "row": 0, - "col": 16, - "mobileOrder": 2, - "mobileHeight": 6 + "col": 16 + } + }, + "gridSettings": { + "backgroundColor": "rgba(0,0,0,0)", + "columns": 24, + "margin": 0, + "backgroundSizeMode": "100%", + "autoFillHeight": true, + "backgroundImageUrl": null, + "mobileAutoFillHeight": true, + "mobileRowHeight": 70 + } + } + } + }, + "system_info_mobile": { + "name": "System Info Mobile", + "root": false, + "layouts": { + "main": { + "widgets": { + "01b94c17-84eb-4e49-6a92-c3f108ecff8e": { + "sizeX": 24, + "sizeY": 3, + "row": 0, + "col": 0 } }, "gridSettings": { diff --git a/ui-ngx/src/app/shared/layout/layout.directives.ts b/ui-ngx/src/app/shared/layout/layout.directives.ts new file mode 100644 index 0000000000..3a450cbae6 --- /dev/null +++ b/ui-ngx/src/app/shared/layout/layout.directives.ts @@ -0,0 +1,85 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Directive } from '@angular/core'; +import { BREAKPOINT, LayoutAlignDirective, LayoutDirective, LayoutGapDirective, ShowHideDirective } from '@angular/flex-layout'; + +const TB_BREAKPOINTS = [ + { + alias: 'md-lg', + mediaQuery: 'screen and (min-width: 960px) and (max-width: 1819px)', + priority: 750 + }, + { + alias: 'gt-md-lg', + mediaQuery: 'screen and (min-width: 1820px)', + priority: -600 + } +]; + +export const TbBreakPointsProvider = { + provide: BREAKPOINT, + useValue: TB_BREAKPOINTS, + multi: true +}; + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayout.md-lg]', inputs: ['fxLayout.md-lg']}) +export class MdLgLayoutDirective extends LayoutDirective { + protected inputs = ['fxLayout.md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayoutAlign.md-lg]', inputs: ['fxLayoutAlign.md-lg']}) +export class MdLgLayoutAlignDirective extends LayoutAlignDirective { + protected inputs = ['fxLayoutAlign.md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayoutGap.md-lg]', inputs: ['fxLayoutGap.md-lg']}) +export class MdLgLayoutGapDirective extends LayoutGapDirective { + protected inputs = ['fxLayoutGap.md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxHide.md-lg]', inputs: ['fxHide.md-lg']}) +export class MdLgShowHideDirective extends ShowHideDirective { + protected inputs = ['fxHide.md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayout.gt-md-lg]', inputs: ['fxLayout.gt-md-lg']}) +export class GtMdLgLayoutDirective extends LayoutDirective { + protected inputs = ['fxLayout.gt-md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayoutAlign.gt-md-lg]', inputs: ['fxLayoutAlign.gt-md-lg']}) +export class GtMdLgLayoutAlignDirective extends LayoutAlignDirective { + protected inputs = ['fxLayoutAlign.gt-md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxLayoutGap.gt-md-lg]', inputs: ['fxLayoutGap.gt-md-lg']}) +export class GtMdLgLayoutGapDirective extends LayoutGapDirective { + protected inputs = ['fxLayoutGap.gt-md-lg']; +} + +// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector +@Directive({selector: '[fxHide.gt-md-lg]', inputs: ['fxHide.gt-md-lg']}) +export class GtMdLgShowHideDirective extends ShowHideDirective { + protected inputs = ['fxHide.gt-md-lg']; +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index c82ae61644..59003e7cf5 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -176,6 +176,17 @@ import { NotificationComponent } from '@shared/components/notification/notificat import { TemplateAutocompleteComponent } from '@shared/components/notification/template-autocomplete.component'; import { SlackConversationAutocompleteComponent } from '@shared/components/slack-conversation-autocomplete.component'; import { DateAgoPipe } from '@shared/pipe/date-ago.pipe'; +import { + TbBreakPointsProvider, + MdLgLayoutDirective, + MdLgLayoutAlignDirective, + MdLgLayoutGapDirective, + MdLgShowHideDirective, + GtMdLgLayoutDirective, + GtMdLgLayoutAlignDirective, + GtMdLgLayoutGapDirective, + GtMdLgShowHideDirective +} from '@shared/layout/layout.directives'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -222,7 +233,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) useValue: { hideSingleSelectionIndicator: true } - } + }, + TbBreakPointsProvider ], declarations: [ FooterComponent, @@ -327,7 +339,15 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) NotificationComponent, TemplateAutocompleteComponent, SlackConversationAutocompleteComponent, - DateAgoPipe + DateAgoPipe, + MdLgLayoutDirective, + MdLgLayoutAlignDirective, + MdLgLayoutGapDirective, + MdLgShowHideDirective, + GtMdLgLayoutDirective, + GtMdLgLayoutAlignDirective, + GtMdLgLayoutGapDirective, + GtMdLgShowHideDirective ], imports: [ CommonModule, @@ -541,7 +561,15 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) NotificationComponent, TemplateAutocompleteComponent, SlackConversationAutocompleteComponent, - DateAgoPipe + DateAgoPipe, + MdLgLayoutDirective, + MdLgLayoutAlignDirective, + MdLgLayoutGapDirective, + MdLgShowHideDirective, + GtMdLgLayoutDirective, + GtMdLgLayoutAlignDirective, + GtMdLgLayoutGapDirective, + GtMdLgShowHideDirective ] }) export class SharedModule { } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 59bbddfcc8..1471fe9c30 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5130,7 +5130,9 @@ "title": "Version", "contact-us": "Contact us", "current-version": "Current version", + "current": "Current", "available-version": "Available version", + "available": "Available", "upgrade": "Upgrade", "version-is-up-to-date": "Version is up to date" },