From 8b0931e02a7dfd286e7a61bfa34a7b634a019feb Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 17 Apr 2023 19:09:23 +0300 Subject: [PATCH] UI: Tenant admin home page --- .../widget_bundles/home_page_widgets.json | 48 ++++- ui-ngx/src/app/core/http/public-api.ts | 1 + .../src/app/core/http/usage-info.service.ts | 37 ++++ .../app/core/http/user-settings.service.ts | 12 +- ui-ngx/src/app/core/services/menu.service.ts | 168 +++++++++++------- .../widget/lib/flot-widget.models.ts | 1 + .../home/components/widget/lib/flot-widget.ts | 2 +- .../configured-features.component.scss | 14 -- .../configured-features.component.ts | 2 +- .../home-page/doc-links-widget.component.html | 16 +- .../home-page/doc-links-widget.component.ts | 6 +- .../getting-started-widget.component.html | 19 +- .../lib/home-page/home-page-widget.scss | 70 ++++++++ .../lib/home-page/home-page-widgets.module.ts | 10 +- ...onent.scss => links-widget.component.scss} | 52 +----- .../quick-links-widget.component.html | 51 ++++++ .../home-page/quick-links-widget.component.ts | 162 +++++++++++++++++ .../home-page/toggle-header.component.html | 11 +- .../home-page/toggle-header.component.scss | 51 +++++- .../lib/home-page/toggle-header.component.ts | 57 +++--- .../usage-info-widget.component.html | 89 ++++++++++ .../usage-info-widget.component.scss | 108 +++++++++++ .../home-page/usage-info-widget.component.ts | 111 ++++++++++++ .../lib/home-page/version-info.component.scss | 18 -- .../lib/home-page/version-info.component.ts | 2 +- .../chart/flot-key-settings.component.html | 6 +- .../chart/flot-key-settings.component.ts | 20 ++- ...quick-links-widget-settings.component.html | 23 +++ .../quick-links-widget-settings.component.ts | 52 ++++++ .../lib/settings/widget-settings.module.ts | 12 +- .../home-links/tenant_admin_home_page.raw | 89 +++++++++- ui-ngx/src/app/shared/models/public-api.ts | 1 + ui-ngx/src/app/shared/models/usage.models.ts | 39 ++++ .../app/shared/models/user-settings.models.ts | 4 + .../src/app/shared/pipe/short-number.pipe.ts | 53 ++++++ ui-ngx/src/app/shared/shared.module.ts | 7 +- .../assets/locale/locale.constant-en_US.json | 11 ++ 37 files changed, 1212 insertions(+), 223 deletions(-) create mode 100644 ui-ngx/src/app/core/http/usage-info.service.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss rename ui-ngx/src/app/modules/home/components/widget/lib/home-page/{doc-links-widget.component.scss => links-widget.component.scss} (73%) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.ts create mode 100644 ui-ngx/src/app/shared/models/usage.models.ts create mode 100644 ui-ngx/src/app/shared/pipe/short-number.pipe.ts diff --git a/application/src/main/data/json/system/widget_bundles/home_page_widgets.json b/application/src/main/data/json/system/widget_bundles/home_page_widgets.json index fc5b13154c..62eb3d4d6e 100644 --- a/application/src/main/data/json/system/widget_bundles/home_page_widgets.json +++ b/application/src/main/data/json/system/widget_bundles/home_page_widgets.json @@ -8,6 +8,25 @@ "name": "Home page widgets" }, "widgetTypes": [ + { + "alias": "getting_started", + "name": "Getting started", + "image": null, + "description": null, + "descriptor": { + "type": "static", + "sizeX": 7.5, + "sizeY": 6.5, + "resources": [], + "templateHtml": "\n\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n}", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "", + "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Getting started\",\"dropShadow\":true}" + } + }, { "alias": "documentation_links", "name": "Documentation links", @@ -24,12 +43,12 @@ "settingsSchema": "", "dataKeySettingsSchema": "", "settingsDirective": "tb-doc-links-widget-settings", - "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"columns\":3},\"title\":\"Documentation links\",\"dropShadow\":true}" + "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"columns\":3},\"title\":\"Documentation links\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showLegend\":false}" } }, { - "alias": "getting_started", - "name": "Getting started", + "alias": "usage_info", + "name": "Usage info", "image": null, "description": null, "descriptor": { @@ -37,13 +56,32 @@ "sizeX": 7.5, "sizeY": 6.5, "resources": [], - "templateHtml": "\n\n", + "templateHtml": "\n\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}", "settingsSchema": "", "dataKeySettingsSchema": "", "settingsDirective": "", - "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Getting started\",\"dropShadow\":true}" + "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Usage info\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showLegend\":false}" + } + }, + { + "alias": "quick_links", + "name": "Quick links", + "image": null, + "description": null, + "descriptor": { + "type": "static", + "sizeX": 7.5, + "sizeY": 3, + "resources": [], + "templateHtml": "\n\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n}", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-quick-links-widget-settings", + "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"columns\":3},\"title\":\"Quick links\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showLegend\":false}" } } ] diff --git a/ui-ngx/src/app/core/http/public-api.ts b/ui-ngx/src/app/core/http/public-api.ts index 5a511b8f60..d96df82055 100644 --- a/ui-ngx/src/app/core/http/public-api.ts +++ b/ui-ngx/src/app/core/http/public-api.ts @@ -42,3 +42,4 @@ export * from './ui-settings.service'; export * from './user.service'; export * from './user-settings.service'; export * from './widget.service'; +export * from './usage-info.service'; diff --git a/ui-ngx/src/app/core/http/usage-info.service.ts b/ui-ngx/src/app/core/http/usage-info.service.ts new file mode 100644 index 0000000000..a0869c5dba --- /dev/null +++ b/ui-ngx/src/app/core/http/usage-info.service.ts @@ -0,0 +1,37 @@ +/// +/// 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 { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +import { defaultHttpOptionsFromConfig, RequestConfig } from '@core/http/http-utils'; +import { UsageInfo } from '@shared/models/usage.models'; + +@Injectable({ + providedIn: 'root' +}) +export class UsageInfoService { + + constructor( + private http: HttpClient + ) {} + + public getUsageInfo(config?: RequestConfig): Observable { + return this.http.get('/api/usage', + defaultHttpOptionsFromConfig(config)); + } + +} diff --git a/ui-ngx/src/app/core/http/user-settings.service.ts b/ui-ngx/src/app/core/http/user-settings.service.ts index 55ce524750..ed6fc42a0c 100644 --- a/ui-ngx/src/app/core/http/user-settings.service.ts +++ b/ui-ngx/src/app/core/http/user-settings.service.ts @@ -19,7 +19,7 @@ import { Observable } from 'rxjs'; import { DocumentationLink, DocumentationLinks, GettingStarted, - initialUserSettings, + initialUserSettings, QuickLinks, UserSettings, UserSettingsType } from '@shared/models/user-settings.models'; @@ -67,6 +67,16 @@ export class UserSettingsService { defaultHttpOptionsFromConfig(config)); } + public getQuickLinks(config?: RequestConfig): Observable { + return this.http.get(`/api/user/settings/${UserSettingsType.QUICK_LINKS}`, + defaultHttpOptionsFromConfig(config)); + } + + public updateQuickLinks(quickLinks: QuickLinks, config?: RequestConfig): Observable { + return this.http.put(`/api/user/settings/${UserSettingsType.QUICK_LINKS}`, quickLinks, + defaultHttpOptionsFromConfig(config)); + } + public getGettingStarted(config?: RequestConfig): Observable { return this.http.get(`/api/user/settings/${UserSettingsType.GETTING_STARTED}`, defaultHttpOptionsFromConfig(config)); diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 82ad8221fa..99f4a557a7 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -18,11 +18,10 @@ import { Injectable } from '@angular/core'; import { select, Store } from '@ngrx/store'; import { AppState } from '../core.state'; import { getCurrentOpenedMenuSections, selectAuth, selectIsAuthenticated } from '../auth/auth.selectors'; -import { filter, take } from 'rxjs/operators'; +import { filter, map, take } from 'rxjs/operators'; import { HomeSection, MenuSection } from '@core/services/menu.models'; import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { Authority } from '@shared/models/authority.enum'; -import { guid } from '@core/utils'; import { AuthState } from '@core/auth/auth.models'; import { NavigationEnd, Router } from '@angular/router'; @@ -34,6 +33,9 @@ export class MenuService { currentMenuSections: Array; menuSections$: Subject> = new BehaviorSubject>([]); homeSections$: Subject> = new BehaviorSubject>([]); + availableMenuLinks$ = this.menuSections$.pipe( + map((items) => this.allMenuLinks(items)) + ); constructor(private store: Store, private router: Router) { @@ -91,21 +93,21 @@ export class MenuService { const sections: Array = []; sections.push( { - id: guid(), + id: 'home', name: 'home.home', type: 'link', path: '/home', icon: 'home' }, { - id: guid(), + id: 'tenants', name: 'tenant.tenants', type: 'link', path: '/tenants', icon: 'supervisor_account' }, { - id: guid(), + id: 'tenantProfiles', name: 'tenant-profile.tenant-profiles', type: 'link', path: '/tenantProfiles', @@ -113,21 +115,21 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'resources', name: 'admin.resources', type: 'toggle', path: '/resources', icon: 'folder', pages: [ { - id: guid(), + id: 'resourcesWidgetsBundles', name: 'widget.widget-library', type: 'link', path: '/resources/widgets-bundles', icon: 'now_widgets' }, { - id: guid(), + id: 'resourcesResourcesLibrary', name: 'resource.resources-library', type: 'link', path: '/resources/resources-library', @@ -137,7 +139,7 @@ export class MenuService { ] }, { - id: guid(), + id: 'notification', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -145,28 +147,28 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: guid(), + id: 'notificationInbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', icon: 'inbox' }, { - id: guid(), + id: 'notificationSent', name: 'notification.sent', type: 'link', path: '/notification/sent', icon: 'outbox' }, { - id: guid(), + id: 'notificationRecipients', name: 'notification.recipients', type: 'link', path: '/notification/recipients', icon: 'contacts' }, { - id: guid(), + id: 'notificationTemplates', name: 'notification.templates', type: 'link', path: '/notification/templates', @@ -174,7 +176,7 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'notificationRules', name: 'notification.rules', type: 'link', path: '/notification/rules', @@ -184,28 +186,28 @@ export class MenuService { ] }, { - id: guid(), + id: 'settings', name: 'admin.settings', type: 'link', path: '/settings', icon: 'settings', pages: [ { - id: guid(), + id: 'settingsGeneral', name: 'admin.general', type: 'link', path: '/settings/general', icon: 'settings_applications' }, { - id: guid(), + id: 'settingsOutgoingMail', name: 'admin.outgoing-mail', type: 'link', path: '/settings/outgoing-mail', icon: 'mail' }, { - id: guid(), + id: 'settingsNotifications', name: 'admin.notifications', type: 'link', path: '/settings/notifications', @@ -213,7 +215,7 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'settingsQueues', name: 'admin.queues', type: 'link', path: '/settings/queues', @@ -222,21 +224,21 @@ export class MenuService { ] }, { - id: guid(), + id: 'securitySettings', name: 'security.security', type: 'toggle', path: '/security-settings', icon: 'security', pages: [ { - id: guid(), + id: 'securitySettingsGeneral', name: 'admin.general', type: 'link', path: '/security-settings/general', icon: 'settings_applications' }, { - id: guid(), + id: 'securitySettings2fa', name: 'admin.2fa.2fa', type: 'link', path: '/security-settings/2fa', @@ -244,7 +246,7 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'securitySettingsOauth2', name: 'admin.oauth2.oauth2', type: 'link', path: '/security-settings/oauth2', @@ -340,49 +342,49 @@ export class MenuService { const sections: Array = []; sections.push( { - id: guid(), + id: 'home', name: 'home.home', type: 'link', path: '/home', icon: 'home' }, { - id: guid(), + id: 'alarms', name: 'alarm.alarms', type: 'link', path: '/alarms', icon: 'notifications' }, { - id: guid(), + id: 'dashboards', name: 'dashboard.dashboards', type: 'link', path: '/dashboards', icon: 'dashboards' }, { - id: guid(), + id: 'entities', name: 'entity.entities', type: 'toggle', path: '/entities', icon: 'category', pages: [ { - id: guid(), + id: 'entitiesDevices', name: 'device.devices', type: 'link', path: '/entities/devices', icon: 'devices_other' }, { - id: guid(), + id: 'entitiesAssets', name: 'asset.assets', type: 'link', path: '/entities/assets', icon: 'domain' }, { - id: guid(), + id: 'entitiesEntityViews', name: 'entity-view.entity-views', type: 'link', path: '/entities/entityViews', @@ -391,14 +393,14 @@ export class MenuService { ] }, { - id: guid(), + id: 'profiles', name: 'profiles.profiles', type: 'toggle', path: '/profiles', icon: 'badge', pages: [ { - id: guid(), + id: 'profilesDeviceProfiles', name: 'device-profile.device-profiles', type: 'link', path: '/profiles/deviceProfiles', @@ -406,7 +408,7 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'profilesAssetProfiles', name: 'asset-profile.asset-profiles', type: 'link', path: '/profiles/assetProfiles', @@ -416,14 +418,14 @@ export class MenuService { ] }, { - id: guid(), + id: 'customers', name: 'customer.customers', type: 'link', path: '/customers', icon: 'supervisor_account' }, { - id: guid(), + id: 'ruleChains', name: 'rulechain.rulechains', type: 'link', path: '/ruleChains', @@ -433,21 +435,21 @@ export class MenuService { if (authState.edgesSupportEnabled) { sections.push( { - id: guid(), + id: 'edgeManagement', name: 'edge.management', type: 'toggle', path: '/edgeManagement', icon: 'settings_input_antenna', pages: [ { - id: guid(), + id: 'edgeManagementInstances', name: 'edge.instances', type: 'link', path: '/edgeManagement/instances', icon: 'router' }, { - id: guid(), + id: 'edgeManagementRuleChains', name: 'edge.rulechain-templates', type: 'link', path: '/edgeManagement/ruleChains', @@ -459,21 +461,21 @@ export class MenuService { } sections.push( { - id: guid(), + id: 'features', name: 'feature.advanced-features', type: 'toggle', path: '/features', icon: 'construction', pages: [ { - id: guid(), + id: 'featuresOtaUpdates', name: 'ota-update.ota-updates', type: 'link', path: '/features/otaUpdates', icon: 'memory' }, { - id: guid(), + id: 'featuresVc', name: 'version-control.version-control', type: 'link', path: '/features/vc', @@ -482,21 +484,21 @@ export class MenuService { ] }, { - id: guid(), + id: 'resources', name: 'admin.resources', type: 'toggle', path: '/resources', icon: 'folder', pages: [ { - id: guid(), + id: 'resourcesWidgetsBundles', name: 'widget.widget-library', type: 'link', path: '/resources/widgets-bundles', icon: 'now_widgets' }, { - id: guid(), + id: 'resourcesResourcesLibrary', name: 'resource.resources-library', type: 'link', path: '/resources/resources-library', @@ -506,7 +508,7 @@ export class MenuService { ] }, { - id: guid(), + id: 'notification', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -514,28 +516,28 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: guid(), + id: 'notificationInbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', icon: 'inbox' }, { - id: guid(), + id: 'notificationSent', name: 'notification.sent', type: 'link', path: '/notification/sent', icon: 'outbox' }, { - id: guid(), + id: 'notificationRecipients', name: 'notification.recipients', type: 'link', path: '/notification/recipients', icon: 'contacts' }, { - id: guid(), + id: 'notificationTemplates', name: 'notification.templates', type: 'link', path: '/notification/templates', @@ -543,7 +545,7 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'notificationRules', name: 'notification.rules', type: 'link', path: '/notification/rules', @@ -553,28 +555,28 @@ export class MenuService { ] }, { - id: guid(), + id: 'usage', name: 'api-usage.api-usage', type: 'link', path: '/usage', icon: 'insert_chart' }, { - id: guid(), + id: 'settings', name: 'admin.settings', type: 'link', path: '/settings', icon: 'settings', pages: [ { - id: guid(), + id: 'settingsHome', name: 'admin.home', type: 'link', path: '/settings/home', icon: 'settings_applications' }, { - id: guid(), + id: 'settingsNotifications', name: 'admin.notifications', type: 'link', path: '/settings/notifications', @@ -582,14 +584,14 @@ export class MenuService { isMdiIcon: true }, { - id: guid(), + id: 'settingsRepository', name: 'admin.repository', type: 'link', path: '/settings/repository', icon: 'manage_history' }, { - id: guid(), + id: 'settingsAutoCommit', name: 'admin.auto-commit', type: 'link', path: '/settings/auto-commit', @@ -598,14 +600,14 @@ export class MenuService { ] }, { - id: guid(), + id: 'securitySettings', name: 'security.security', type: 'toggle', path: '/security-settings', icon: 'security', pages: [ { - id: guid(), + id: 'securitySettingsAuditLogs', name: 'audit-log.audit-logs', type: 'link', path: '/security-settings/auditLogs', @@ -781,49 +783,49 @@ export class MenuService { const sections: Array = []; sections.push( { - id: guid(), + id: 'home', name: 'home.home', type: 'link', path: '/home', icon: 'home' }, { - id: guid(), + id: 'alarms', name: 'alarm.alarms', type: 'link', path: '/alarms', icon: 'notifications' }, { - id: guid(), + id: 'dashboards', name: 'dashboard.dashboards', type: 'link', path: '/dashboards', icon: 'dashboards' }, { - id: guid(), + id: 'entities', name: 'entity.entities', type: 'toggle', path: '/entities', icon: 'category', pages: [ { - id: guid(), + id: 'entitiesDevices', name: 'device.devices', type: 'link', path: '/entities/devices', icon: 'devices_other' }, { - id: guid(), + id: 'entitiesAssets', name: 'asset.assets', type: 'link', path: '/entities/assets', icon: 'domain' }, { - id: guid(), + id: 'entitiesEntityViews', name: 'entity-view.entity-views', type: 'link', path: '/entities/entityViews', @@ -835,7 +837,7 @@ export class MenuService { if (authState.edgesSupportEnabled) { sections.push( { - id: guid(), + id: 'edgeManagementInstances', name: 'edge.edge-instances', type: 'link', path: '/edgeManagement/instances', @@ -845,7 +847,7 @@ export class MenuService { } sections.push( { - id: guid(), + id: 'notification', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -853,7 +855,7 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: guid(), + id: 'notificationInbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', @@ -928,6 +930,19 @@ export class MenuService { return homeSections; } + private allMenuLinks(sections: Array): Array { + const result: Array = []; + for (const section of sections) { + if (section.type === 'link') { + result.push(section); + } + if (section.pages && section.pages.length) { + result.push(...this.allMenuLinks(section.pages)); + } + } + return result; + } + public menuSections(): Observable> { return this.menuSections$; } @@ -936,5 +951,20 @@ export class MenuService { return this.homeSections$; } -} + public availableMenuLinks(): Observable> { + return this.availableMenuLinks$; + } + public menuLinkById(id: string): Observable { + return this.availableMenuLinks$.pipe( + map((links) => links.find(link => link.id === id)) + ); + } + + public menuLinksByIds(ids: string[]): Observable> { + return this.availableMenuLinks$.pipe( + map((links) => links.filter(link => ids.includes(link.id))) + ); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts index 53d60856dd..6e9e7f85fa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts @@ -217,6 +217,7 @@ export interface TbFlotKeySettings { removeFromLegend: boolean; showLines: boolean; fillLines: boolean; + fillLinesOpacity: number; showPoints: boolean; showPointShape: string; pointShapeFormatter: string; 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 03e29769ff..08a8c92472 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 @@ -408,7 +408,7 @@ export class TbFlot { } } series.lines = { - fill: keySettings.fillLines === true + fill: keySettings.fillLines === true ? (keySettings.fillLinesOpacity || 0.4) : false }; if (this.settings.stack && !this.comparisonEnabled) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss index 427aa8bf3a..12b7bce17d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss @@ -17,23 +17,9 @@ @import "../../../../../../../scss/constants"; :host { - .tb-card-content { - width: 100%; - height: 100%; - } .tb-title { margin-top: 8px; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - color: rgba(0, 0, 0, 0.54); - @media #{$mat-md-lg} { - font-size: 12px; - line-height: 16px; - } } .tb-info-icon { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts index be58092f1f..d9c2609dc7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts @@ -30,7 +30,7 @@ import { MediaBreakpoints } from '@shared/models/constants'; @Component({ selector: 'tb-configured-features', templateUrl: './configured-features.component.html', - styleUrls: ['./configured-features.component.scss'] + styleUrls: ['./home-page-widget.scss', './configured-features.component.scss'] }) export class ConfiguredFeaturesComponent extends PageComponent implements OnInit, OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html index 96c5642feb..1ccc2e8b24 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html @@ -26,20 +26,20 @@ edit - - - + + -
-
+
+
{{ docLink.icon }}
-
{{ docLink.name }}
+
{{ docLink.name }}
 - -
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts index 1c7c5885b5..6517b7dfbd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts @@ -24,10 +24,6 @@ import { DocumentationLink, DocumentationLinks } from '@shared/models/user-setti import { UserSettingsService } from '@core/http/user-settings.service'; import { getCurrentAuthUser } from '@core/auth/auth.selectors'; import { WidgetContext } from '@home/models/widget-component.models'; -import { - ImportDialogCsvComponent, - ImportDialogCsvData -} from '@home/components/import-export/import-dialog-csv.component'; import { MatDialog } from '@angular/material/dialog'; import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component'; import { @@ -100,7 +96,7 @@ interface DocLinksWidgetSettings { @Component({ selector: 'tb-doc-links-widget', templateUrl: './doc-links-widget.component.html', - styleUrls: ['./doc-links-widget.component.scss'] + styleUrls: ['./home-page-widget.scss', './links-widget.component.scss'] }) export class DocLinksWidgetComponent extends PageComponent implements OnInit, OnDestroy { 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 ee84a63ad6..170f51796f 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 @@ -111,10 +111,21 @@
- - Ubuntu - MacOS - Windows + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss new file mode 100644 index 0000000000..912ebbb63e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widget.scss @@ -0,0 +1,70 @@ +/** + * 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 "../../../../../../../scss/constants"; + +:host { + + .tb-card-content { + width: 100%; + height: 100%; + } + + .tb-title { + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.54); + @media #{$mat-md-lg} { + font-size: 12px; + line-height: 16px; + } + } + + .tb-title-link { + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.54); + position: relative; + border-bottom: none; + @media #{$mat-md-lg} { + font-size: 12px; + line-height: 16px; + } + &:hover, &:focus { + border-bottom: none; + } + &::after { + content: 'arrow_forward'; + display: inline-block; + transform: rotate(315deg); + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 18px; + color: rgba(0, 0, 0, 0.12); + vertical-align: bottom; + margin-left: 6px; + } + &:hover::after { + color: inherit; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts index debd1d6ca0..948f1ebd81 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts @@ -29,6 +29,8 @@ import { GettingStartedCompletedDialogComponent } from '@home/components/widget/lib/home-page/getting-started-completed-dialog.component'; import { ToggleHeaderComponent } from '@home/components/widget/lib/home-page/toggle-header.component'; +import { UsageInfoWidgetComponent } from '@home/components/widget/lib/home-page/usage-info-widget.component'; +import { QuickLinksWidgetComponent } from '@home/components/widget/lib/home-page/quick-links-widget.component'; @NgModule({ declarations: @@ -42,7 +44,9 @@ import { ToggleHeaderComponent } from '@home/components/widget/lib/home-page/tog EditDocLinksDialogComponent, GettingStartedWidgetComponent, GettingStartedCompletedDialogComponent, - ToggleHeaderComponent + ToggleHeaderComponent, + UsageInfoWidgetComponent, + QuickLinksWidgetComponent ], imports: [ CommonModule, @@ -58,7 +62,9 @@ import { ToggleHeaderComponent } from '@home/components/widget/lib/home-page/tog EditDocLinksDialogComponent, GettingStartedWidgetComponent, GettingStartedCompletedDialogComponent, - ToggleHeaderComponent + ToggleHeaderComponent, + UsageInfoWidgetComponent, + QuickLinksWidgetComponent ] }) export class HomePageWidgetsModule { } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/links-widget.component.scss similarity index 73% rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/home-page/links-widget.component.scss index ddc5a40eec..3e52d6451d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/links-widget.component.scss @@ -17,11 +17,6 @@ @import "../../../../../../../scss/constants"; :host { - .tb-card-content { - width: 100%; - height: 100%; - } - .tb-card-header { display: flex; flex-direction: row; @@ -29,39 +24,6 @@ align-items: flex-end; } - .tb-title-link { - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - color: rgba(0, 0, 0, 0.54); - position: relative; - border-bottom: none; - @media #{$mat-md-lg} { - font-size: 12px; - line-height: 16px; - } - &:hover, &:focus { - border-bottom: none; - } - &::after { - content: 'arrow_forward'; - display: inline-block; - transform: rotate(315deg); - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 18px; - color: rgba(0, 0, 0, 0.12); - vertical-align: bottom; - margin-left: 6px; - } - &:hover::after { - color: inherit; - } - } - .tb-title-icon { color: rgba(0, 0, 0, 0.38); width: 32px; @@ -69,15 +31,15 @@ padding: 4px; } - .tb-docs-list { + .tb-links-list { overflow: auto; } - .mat-grid-tile.tb-docs-tile { + .mat-grid-tile.tb-links-tile { overflow: visible; } - .tb-doc-button { + .tb-link-button { height: 55px; display: flex; overflow: hidden; @@ -96,11 +58,11 @@ border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08); } - .tb-doc-container { + .tb-link-container { display: flex; flex-direction: row; align-items: center; - .tb-doc-icon-container { + .tb-link-icon-container { height: 40px; padding: 8px; background: #F3F6FA; @@ -110,7 +72,7 @@ display: none; } } - .tb-doc-text { + .tb-link-text { font-weight: 400; font-size: 14px; line-height: 20px; @@ -127,7 +89,7 @@ } } - .tb-add-doc-button { + .tb-add-link-button { height: 55px; cursor: pointer; display: flex; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html new file mode 100644 index 0000000000..22686c4389 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html @@ -0,0 +1,51 @@ + +
+
+
{{ 'widgets.quick-links.title' | translate }}
+ +
+ + + +
+
+ {{ quickLink.icon }} + +
+
{{ quickLink.name | translate }}
+
+ + + +
+ add +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts new file mode 100644 index 0000000000..10f9a8057c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts @@ -0,0 +1,162 @@ +/// +/// 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 { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Authority } from '@shared/models/authority.enum'; +import { map, Observable, of, Subscription } from 'rxjs'; +import { QuickLinks } from '@shared/models/user-settings.models'; +import { UserSettingsService } from '@core/http/user-settings.service'; +import { getCurrentAuthUser } from '@core/auth/auth.selectors'; +import { WidgetContext } from '@home/models/widget-component.models'; +import { MatDialog } from '@angular/material/dialog'; +import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; +import { MediaBreakpoints } from '@shared/models/constants'; +import { MenuService } from '@core/services/menu.service'; +import { MenuSection } from '@core/services/menu.models'; + +const defaultQuickLinksMap = new Map( + [ + [Authority.SYS_ADMIN, { + links: ['tenants', 'tenantProfiles'] + }], + [Authority.TENANT_ADMIN, { + links: ['alarms', 'dashboards', 'entitiesDevices'] + }], + [Authority.CUSTOMER_USER, { + links: ['alarms', 'dashboards', 'entitiesDevices'] + }] + ] +); + +interface QuickLinksWidgetSettings { + columns: number; +} + +@Component({ + selector: 'tb-quick-links-widget', + templateUrl: './quick-links-widget.component.html', + styleUrls: ['./home-page-widget.scss', './links-widget.component.scss'] +}) +export class QuickLinksWidgetComponent extends PageComponent implements OnInit, OnDestroy { + + @Input() + ctx: WidgetContext; + + settings: QuickLinksWidgetSettings; + columns: number; + rowHeight = '55px'; + gutterSize = '12px'; + + quickLinks: QuickLinks; + authUser = getCurrentAuthUser(this.store); + + private observeBreakpointSubscription: Subscription; + + constructor(protected store: Store, + private cd: ChangeDetectorRef, + private userSettingsService: UserSettingsService, + private dialog: MatDialog, + private menuService: MenuService, + private breakpointObserver: BreakpointObserver) { + super(store); + } + + ngOnInit() { + this.settings = this.ctx.settings; + this.columns = this.settings.columns || 3; + const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']); + this.rowHeight = isMdLg ? '18px' : '55px'; + this.gutterSize = isMdLg ? '8px' : '12px'; + this.observeBreakpointSubscription = this.breakpointObserver + .observe(MediaBreakpoints['md-lg']) + .subscribe((state: BreakpointState) => { + if (state.matches) { + this.rowHeight = '18px'; + this.gutterSize = '8px'; + } else { + this.rowHeight = '55px'; + this.gutterSize = '12px'; + } + this.cd.markForCheck(); + } + ); + this.loadQuickLinks(); + } + + ngOnDestroy() { + if (this.observeBreakpointSubscription) { + this.observeBreakpointSubscription.unsubscribe(); + } + super.ngOnDestroy(); + } + + menuLinks$(): Observable> { + return this.quickLinks ? this.menuService.menuLinksByIds(this.quickLinks.links) : of([]); + } + + private loadQuickLinks() { + this.userSettingsService.getQuickLinks().pipe( + map((quickLinks) => { + if (!quickLinks || !quickLinks.links) { + return defaultQuickLinksMap.get(this.authUser.authority); + } else { + return quickLinks; + } + }) + ).subscribe( + (quickLinks) => { + this.quickLinks = quickLinks; + this.cd.markForCheck(); + } + ); + } + + edit() { + /* this.dialog.open(EditDocLinksDialogComponent, { + disableClose: true, + autoFocus: false, + data: { + docLinks: this.documentationLinks + }, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + }).afterClosed().subscribe( + (result) => { + if (result) { + this.loadDocLinks(); + } + }); */ + } + + addLink() { + /* this.dialog.open(AddDocLinkDialogComponent, { + disableClose: true, + autoFocus: false, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + }).afterClosed().subscribe( + (docLink) => { + if (docLink) { + this.documentationLinks.links.push(docLink); + this.cd.markForCheck(); + this.userSettingsService.updateDocumentationLinks(this.documentationLinks).subscribe(); + } + }); */ + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html index 3cbf61fdae..fadcadd72b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html @@ -15,6 +15,13 @@ limitations under the License. --> - - + + {{ option.name }} + + + + {{ option.name }} + + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss index 0dce288424..1e901b056a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss @@ -24,7 +24,6 @@ padding: 2px; border: none; background: rgba(0, 0, 0, 0.06); - margin-bottom: 8px; .mat-button-toggle + .mat-button-toggle { border-left: none; } @@ -63,7 +62,6 @@ @media #{$mat-md-lg} { .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header { height: 24px; - margin-bottom: 0; .mat-button-toggle.mat-button-toggle-appearance-standard { .mat-button-toggle-button { height: 20px; @@ -84,4 +82,53 @@ } } } + .tb-toggle-header-select { + &.mat-mdc-form-field { + line-height: 16px; + font-size: 12px; + } + .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { + min-height: 0; + width: auto; + padding-top: 8px; + padding-bottom: 8px; + } + .mdc-text-field--outlined { + padding-left: 8px; + padding-right: 6px; + } + .mat-mdc-select { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.25px; + } + .mat-mdc-select-value { + color: rgba(0, 0, 0, 0.38); + } + .mat-mdc-select-arrow-wrapper { + height: 12px; + padding-left: 6px; + } + .mat-mdc-select-arrow { + width: 12px; + height: 12px; + & > svg { + display: none; + } + &:after { + font-family: 'Material Icons'; + content: "expand_more"; + position: absolute; + display: inline-block; + font-size: 20px; + line-height: 12px; + top: 0; + left: -6px; + right: 0; + bottom: 0; + color: rgba(0, 0, 0, 0.38); + } + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts index 1d7876eb36..e797e10061 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts @@ -32,51 +32,56 @@ import { AdminService } from '@core/http/admin.service'; import { UpdateMessage } from '@shared/models/settings.models'; import { getCurrentAuthUser } from '@core/auth/auth.selectors'; import { Authority } from '@shared/models/authority.enum'; -import { of } from 'rxjs'; +import { of, Subscription } from 'rxjs'; import { MatStepper } from '@angular/material/stepper'; import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle'; +import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; +import { MediaBreakpoints } from '@shared/models/constants'; +import { coerceBoolean } from '@shared/decorators/coerce-boolean'; + +export interface ToggleHeaderOption { + name: string; + value: any; +} @Component({ selector: 'tb-toggle-header', templateUrl: './toggle-header.component.html', styleUrls: ['./toggle-header.component.scss'] }) -export class ToggleHeaderComponent extends PageComponent implements OnInit, AfterViewInit { +export class ToggleHeaderComponent extends PageComponent implements OnInit { - @ViewChild('toggleGroup') - toggleGroup: MatButtonToggleGroup; + @Input() + value: any; - @ContentChildren(MatButtonToggle) - _buttonToggles: QueryList; + @Input() + options: ToggleHeaderOption[]; - innerValue: any; + @Input() + name: string; @Input() - set value(value: any) { - this.innerValue = value; - } + @coerceBoolean() + useSelectOnMdLg = true; - get value(): any { - return this.toggleGroup?.value; - } + isMdLg: boolean; - @Input() - name: string; + private observeBreakpointSubscription: Subscription; - constructor(protected store: Store) { + constructor(protected store: Store, + private cd: ChangeDetectorRef, + private breakpointObserver: BreakpointObserver) { super(store); } ngOnInit() { + this.isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']); + this.observeBreakpointSubscription = this.breakpointObserver + .observe(MediaBreakpoints['md-lg']) + .subscribe((state: BreakpointState) => { + this.isMdLg = state.matches; + this.cd.markForCheck(); + } + ); } - - ngAfterViewInit() { - for (const toggle of this._buttonToggles) { - toggle.buttonToggleGroup = this.toggleGroup; - if (this.innerValue === toggle.value) { - toggle.checked = true; - } - } - } - } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html new file mode 100644 index 0000000000..264b6970ad --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html @@ -0,0 +1,89 @@ + +
+
+ {{ 'widgets.usage-info.title' | translate }} + + +
+ + +
+
+
device.devices
+
asset.assets
+
user.users
+
dashboard.dashboards
+
customer.customers
+
+
+
+
{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}
+
{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}
+
{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}
+
{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}
+
{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}
+
+
+ + + + + +
+
+
+ + +
+
+
api-usage.transport-messages
+
api-usage.javascript
+
api-usage.alarms-created
+
api-usage.email
+
api-usage.sms
+
+
+
+
{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}
+
{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}
+
{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}
+
{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}
+
{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}
+
+
+ + + + + +
+
+
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss new file mode 100644 index 0000000000..7a208d4f54 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss @@ -0,0 +1,108 @@ +/** + * 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 "../../../../../../../scss/constants"; + +:host { + .tb-card-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .tb-usage-list { + display: flex; + flex-direction: row; + justify-content: space-between; + overflow-y: auto; + } + + .tb-usage-items, .tb-usage-items-counts, .tb-usage-items-progress { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; + overflow: hidden; + } + + .tb-usage-items-progress { + width: 34px; + @media #{$mat-md} { + display: none; + } + .mdc-linear-progress { + height: 8px; + margin-top: 6px; + margin-bottom: 6px; + border-radius: 2px; + @media #{$mat-md-lg} { + margin-top: 4px; + margin-bottom: 4px; + } + } + } + + .tb-usage-items-values { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 16px; + } + + .tb-usage-item, .tb-usage-item-counts { + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + @media #{$mat-md-lg} { + font-size: 11px; + line-height: 16px; + } + &.critical { + color: #D12730; + } + } + + .tb-usage-item { + color: rgba(0, 0, 0, 0.38); + } + + .tb-usage-item-counts { + color: rgba(0, 0, 0, 0.76); + } +} + +:host ::ng-deep { + .tb-usage-items-progress { + .mat-mdc-progress-bar { + .mdc-linear-progress__bar-inner { + border-top-width: 8px; + } + &.critical { + .mdc-linear-progress__buffer-bar { + background: rgba(209, 39, 48, 0.06); + } + .mdc-linear-progress__bar-inner { + border-top-color: #D12730; + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts new file mode 100644 index 0000000000..ed5ff7dafc --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.ts @@ -0,0 +1,111 @@ +/// +/// 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 { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Authority } from '@shared/models/authority.enum'; +import { of } from 'rxjs'; +import { getCurrentAuthUser } from '@core/auth/auth.selectors'; +import { WidgetContext } from '@home/models/widget-component.models'; +import { UsageInfo } from '@shared/models/usage.models'; +import { UsageInfoService } from '@core/http/usage-info.service'; +import { ShortNumberPipe } from '@shared/pipe/short-number.pipe'; + +@Component({ + selector: 'tb-usage-info-widget', + templateUrl: './usage-info-widget.component.html', + styleUrls: ['./home-page-widget.scss', './usage-info-widget.component.scss'] +}) +export class UsageInfoWidgetComponent extends PageComponent implements OnInit, OnDestroy { + + @Input() + ctx: WidgetContext; + + usageInfo: UsageInfo; + authUser = getCurrentAuthUser(this.store); + + toggleValue: 'entities' | 'apiCalls' = 'entities'; + + entityItemCritical: {[key: string]: boolean} = {}; + apiCallItemCritical: {[key: string]: boolean} = {}; + + constructor(protected store: Store, + private cd: ChangeDetectorRef, + private shortNumberPipe: ShortNumberPipe, + private usageInfoService: UsageInfoService) { + super(store); + } + + ngOnInit() { + (this.authUser.authority === Authority.TENANT_ADMIN ? + this.usageInfoService.getUsageInfo() : of(null)).subscribe( + (usageInfo) => { + this.usageInfo = usageInfo; + this.entityItemCritical.devices = this.isItemCritical(this.usageInfo?.devices, this.usageInfo?.maxDevices); + this.entityItemCritical.assets = this.isItemCritical(this.usageInfo?.assets, this.usageInfo?.maxAssets); + this.entityItemCritical.users = this.isItemCritical(this.usageInfo?.users, this.usageInfo?.maxUsers); + this.entityItemCritical.dashboards = this.isItemCritical(this.usageInfo?.dashboards, this.usageInfo?.maxDashboards); + this.entityItemCritical.customers = this.isItemCritical(this.usageInfo?.customers, this.usageInfo?.maxCustomers); + this.apiCallItemCritical.transportMessages = this.isItemCritical(this.usageInfo?.transportMessages, + this.usageInfo?.maxTransportMessages); + this.apiCallItemCritical.jsExecutions = this.isItemCritical(this.usageInfo?.jsExecutions, this.usageInfo?.maxJsExecutions); + this.apiCallItemCritical.alarms = this.isItemCritical(this.usageInfo?.alarms, this.usageInfo?.maxAlarms); + this.apiCallItemCritical.emails = this.isItemCritical(this.usageInfo?.emails, this.usageInfo?.maxEmails); + this.apiCallItemCritical.sms = this.isItemCritical(this.usageInfo?.sms, this.usageInfo?.maxSms); + let entitiesHasCriticalItem = false; + let apiCallsHasCriticalItem = false; + for (const key of Object.keys(this.entityItemCritical)) { + if (this.entityItemCritical[key]) { + entitiesHasCriticalItem = true; + break; + } + } + for (const key of Object.keys(this.apiCallItemCritical)) { + if (this.apiCallItemCritical[key]) { + apiCallsHasCriticalItem = true; + break; + } + } + if (apiCallsHasCriticalItem && !entitiesHasCriticalItem) { + this.toggleValue = 'apiCalls'; + } + this.cd.markForCheck(); + } + ); + } + + maxValue(max: number): number | string { + return max ? this.shortNumberPipe.transform(max) : '∞'; + } + + progressValue(value: number, max: number): number { + if (max && value) { + return (value / max) * 100; + } + return 0; + } + + private isItemCritical(value: number, max: number): boolean { + if (max && value) { + return (value / max) >= 0.85; + } else { + return false; + } + } + +} 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 133a0d498e..2ad903afcf 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 @@ -17,11 +17,6 @@ @import "../../../../../../../scss/constants"; :host { - .tb-card-content { - width: 100%; - height: 100%; - } - .tb-card-header { display: flex; flex-direction: row; @@ -33,19 +28,6 @@ } } - .tb-title { - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - color: rgba(0, 0, 0, 0.54); - @media #{$mat-md-lg} { - font-size: 12px; - line-height: 16px; - } - } - .tb-contact-us { @media #{$mat-md-lg} { height: 24px; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.ts index 27acef15f4..00265619f0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.ts @@ -27,7 +27,7 @@ import { of } from 'rxjs'; @Component({ selector: 'tb-version-info', templateUrl: './version-info.component.html', - styleUrls: ['./version-info.component.scss'] + styleUrls: ['./home-page-widget.scss', './version-info.component.scss'] }) export class VersionInfoComponent extends PageComponent implements OnInit { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html index 6c484fd579..2bebfeef8a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html @@ -51,9 +51,13 @@ widgets.chart.line-width - + {{ 'widgets.chart.fill-line' | translate }} + + widgets.chart.fill-line-opacity + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts index c70529bd8b..b2c88e5fcb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts @@ -48,6 +48,7 @@ export function flotDataKeyDefaultSettings(chartType: ChartType): TbFlotKeySetti showLines: chartType === 'graph', lineWidth: 1, fillLines: false, + fillLinesOpacity: 0.4, // Points settings showPoints: false, @@ -146,6 +147,7 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C showLines: [this.chartType === 'graph', []], lineWidth: [1, [Validators.min(0)]], fillLines: [false, []], + fillLinesOpacity: [0.4, [Validators.min(0), Validators.max(1)]], // Points settings @@ -188,15 +190,19 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C }); this.flotKeySettingsFormGroup.get('showLines').valueChanges.subscribe(() => { - this.updateValidators(true); + this.updateValidators(false); + }); + + this.flotKeySettingsFormGroup.get('fillLines').valueChanges.subscribe(() => { + this.updateValidators(false); }); this.flotKeySettingsFormGroup.get('showPoints').valueChanges.subscribe(() => { - this.updateValidators(true); + this.updateValidators(false); }); this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').valueChanges.subscribe(() => { - this.updateValidators(true); + this.updateValidators(false); }); this.flotKeySettingsFormGroup.valueChanges.subscribe(() => { @@ -254,15 +260,22 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C private updateValidators(emitEvent?: boolean): void { const showLines: boolean = this.flotKeySettingsFormGroup.get('showLines').value; + const fillLines: boolean = this.flotKeySettingsFormGroup.get('fillLines').value; const showPoints: boolean = this.flotKeySettingsFormGroup.get('showPoints').value; const showValuesForComparison: boolean = this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value; if (showLines) { this.flotKeySettingsFormGroup.get('lineWidth').enable({emitEvent}); this.flotKeySettingsFormGroup.get('fillLines').enable({emitEvent}); + if (fillLines) { + this.flotKeySettingsFormGroup.get('fillLinesOpacity').enable({emitEvent}); + } else { + this.flotKeySettingsFormGroup.get('fillLinesOpacity').disable({emitEvent}); + } } else { this.flotKeySettingsFormGroup.get('lineWidth').disable({emitEvent}); this.flotKeySettingsFormGroup.get('fillLines').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('fillLinesOpacity').disable({emitEvent}); } if (showPoints) { @@ -287,6 +300,7 @@ export class FlotKeySettingsComponent extends PageComponent implements OnInit, C this.flotKeySettingsFormGroup.get('lineWidth').updateValueAndValidity({emitEvent: false}); this.flotKeySettingsFormGroup.get('fillLines').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('fillLinesOpacity').updateValueAndValidity({emitEvent: false}); this.flotKeySettingsFormGroup.get('showPointsLineWidth').updateValueAndValidity({emitEvent: false}); this.flotKeySettingsFormGroup.get('showPointsRadius').updateValueAndValidity({emitEvent: false}); this.flotKeySettingsFormGroup.get('showPointShape').updateValueAndValidity({emitEvent: false}); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html new file mode 100644 index 0000000000..f2936d7bba --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html @@ -0,0 +1,23 @@ + +
+ + widgets.quick-links.columns + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.ts new file mode 100644 index 0000000000..af22e4e06b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.ts @@ -0,0 +1,52 @@ +/// +/// 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 { Component } from '@angular/core'; +import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-quick-links-widget-settings', + templateUrl: './quick-links-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class QuickLinksWidgetSettingsComponent extends WidgetSettingsComponent { + + quickLinksWidgetSettingsForm: UntypedFormGroup; + + constructor(protected store: Store, + private fb: UntypedFormBuilder) { + super(store); + } + + protected settingsForm(): UntypedFormGroup { + return this.quickLinksWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + columns: 3 + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.quickLinksWidgetSettingsForm = this.fb.group({ + columns: [settings.columns, [Validators.required, Validators.min(1), Validators.max(20)]] + }); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 73ff1433a9..11aaf06a93 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -262,6 +262,9 @@ import { import { DocLinksWidgetSettingsComponent } from '@home/components/widget/lib/settings/home-page/doc-links-widget-settings.component'; +import { + QuickLinksWidgetSettingsComponent +} from '@home/components/widget/lib/settings/home-page/quick-links-widget-settings.component'; @NgModule({ declarations: [ @@ -361,7 +364,8 @@ import { MapWidgetSettingsComponent, RouteMapWidgetSettingsComponent, TripAnimationWidgetSettingsComponent, - DocLinksWidgetSettingsComponent + DocLinksWidgetSettingsComponent, + QuickLinksWidgetSettingsComponent ], imports: [ CommonModule, @@ -465,7 +469,8 @@ import { MapWidgetSettingsComponent, RouteMapWidgetSettingsComponent, TripAnimationWidgetSettingsComponent, - DocLinksWidgetSettingsComponent + DocLinksWidgetSettingsComponent, + QuickLinksWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -533,5 +538,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type\n
\n
{{ 'widgets.activity.title' | translate }}
\n \n {{ 'device.devices' | translate }}\n {{ 'widgets.transport-messages.title' | translate }}\n \n
\n \n \n \n \n \n \n \n \n
", + "markdownTextPattern": "
\n
\n
{{ 'widgets.activity.title' | translate }}
\n \n \n
\n \n \n \n \n \n \n \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}\n" }, @@ -308,7 +308,7 @@ "filterId": null, "dataKeys": [ { - "name": "activeDevicesCount", + "name": "activeDevicesCountHourly", "type": "timeseries", "label": "{i18n:device.devices}", "color": "#305680", @@ -320,11 +320,8 @@ "showLines": true, "lineWidth": 3, "fillLines": true, + "fillLinesOpacity": 0.04, "showPoints": false, - "showPointsLineWidth": 5, - "showPointsRadius": 3, - "showPointShape": "circle", - "pointShapeFormatter": "var size = radius * Math.sqrt(Math.PI) / 2;\nctx.moveTo(x - size, y - size);\nctx.lineTo(x + size, y + size);\nctx.moveTo(x - size, y + size);\nctx.lineTo(x + size, y - size);", "showSeparateAxis": false, "axisPosition": "left", "comparisonSettings": { @@ -431,7 +428,7 @@ "widgetStyle": { "padding": "0" }, - "widgetCss": ".tb-widget-container > .tb-widget {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n}", + "widgetCss": ".tb-widget-container > .tb-widget {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n", "pageSize": 1024, "noDataDisplayMessage": "", "showLegend": false, @@ -449,6 +446,68 @@ "row": 0, "col": 0, "id": "d26e5cd7-75ef-d475-00c7-1a2d1114efe8" + }, + "ebbd0a6e-8a47-e770-5086-7f4974250f2d": { + "isSystemType": true, + "bundleAlias": "home_page_widgets", + "typeAlias": "usage_info", + "type": "static", + "title": "New widget", + "image": null, + "description": null, + "sizeX": 7.5, + "sizeY": 6.5, + "config": { + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": {}, + "title": "New Usage info", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "", + "showLegend": false, + "datasources": [] + }, + "row": 0, + "col": 0, + "id": "ebbd0a6e-8a47-e770-5086-7f4974250f2d" + }, + "9e3ef045-d8bc-1640-a3f4-2dd10b19d50e": { + "isSystemType": true, + "bundleAlias": "home_page_widgets", + "typeAlias": "quick_links", + "type": "static", + "title": "New widget", + "image": null, + "description": null, + "sizeX": 7.5, + "sizeY": 3, + "config": { + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "columns": 2 + }, + "title": "New Quick links", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "", + "showLegend": false, + "datasources": [] + }, + "row": 0, + "col": 0, + "id": "9e3ef045-d8bc-1640-a3f4-2dd10b19d50e" } }, "states": { @@ -467,10 +526,10 @@ "mobileHeight": 8 }, "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": { - "sizeX": 31, + "sizeX": 29, "sizeY": 16, "row": 42, - "col": 26, + "col": 28, "mobileHide": true }, "a23185ad-dc46-806c-0e50-5b21fb080ace": { @@ -479,6 +538,18 @@ "row": 0, "col": 85, "mobileHide": true + }, + "ebbd0a6e-8a47-e770-5086-7f4974250f2d": { + "sizeX": 28, + "sizeY": 16, + "row": 42, + "col": 57 + }, + "9e3ef045-d8bc-1640-a3f4-2dd10b19d50e": { + "sizeX": 28, + "sizeY": 16, + "row": 42, + "col": 0 } }, "gridSettings": { diff --git a/ui-ngx/src/app/shared/models/public-api.ts b/ui-ngx/src/app/shared/models/public-api.ts index 1629c656da..dbc5e11213 100644 --- a/ui-ngx/src/app/shared/models/public-api.ts +++ b/ui-ngx/src/app/shared/models/public-api.ts @@ -56,3 +56,4 @@ export * from './user-settings.models'; export * from './widget.models'; export * from './widgets-bundle.model'; export * from './window-message.model'; +export * from './usage.models'; diff --git a/ui-ngx/src/app/shared/models/usage.models.ts b/ui-ngx/src/app/shared/models/usage.models.ts new file mode 100644 index 0000000000..7455aadb88 --- /dev/null +++ b/ui-ngx/src/app/shared/models/usage.models.ts @@ -0,0 +1,39 @@ +/// +/// 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. +/// + +export interface UsageInfo { + devices: number; + maxDevices: number; + assets: number; + maxAssets: number; + customers: number; + maxCustomers: number; + users: number; + maxUsers: number; + dashboards: number; + maxDashboards: number; + + transportMessages: number; + maxTransportMessages: number; + jsExecutions: number; + maxJsExecutions: number; + emails: number; + maxEmails: number; + sms: number; + maxSms: number; + alarms: number; + maxAlarms: number; +} diff --git a/ui-ngx/src/app/shared/models/user-settings.models.ts b/ui-ngx/src/app/shared/models/user-settings.models.ts index 5e902a9973..b20b0b07e8 100644 --- a/ui-ngx/src/app/shared/models/user-settings.models.ts +++ b/ui-ngx/src/app/shared/models/user-settings.models.ts @@ -40,6 +40,10 @@ export interface DocumentationLinks { links?: DocumentationLink[]; } +export interface QuickLinks { + links?: string[]; +} + export interface GettingStarted { maxSelectedIndex?: number; lastSelectedIndex?: number; diff --git a/ui-ngx/src/app/shared/pipe/short-number.pipe.ts b/ui-ngx/src/app/shared/pipe/short-number.pipe.ts new file mode 100644 index 0000000000..d89bc21b4a --- /dev/null +++ b/ui-ngx/src/app/shared/pipe/short-number.pipe.ts @@ -0,0 +1,53 @@ +/// +/// 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 { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'shortNumber' +}) +export class ShortNumberPipe implements PipeTransform { + + transform(number: number, args?: any): any { + if (isNaN(number)) return 0; + if (number === null) return 0; + if (number === 0) return 0; + let abs = Math.abs(number); + const rounder = Math.pow(10, 1); + const isNegative = number < 0; + const isLong = args && args.long; + let key = ''; + + const powers = [ + {key: 'Q', longKey: ' quadrillion', value: Math.pow(10, 15)}, + {key: 'T', longKey: ' trillion', value: Math.pow(10, 12)}, + {key: 'B', longKey: ' billion', value: Math.pow(10, 9)}, + {key: 'M', longKey: ' million', value: Math.pow(10, 6)}, + {key: 'K', longKey: ' thousand', value: 1000} + ]; + + for (let i = 0; i < powers.length; i++) { + let reduced = abs / powers[i].value; + reduced = Math.round(reduced * rounder) / rounder; + if (reduced >= 1) { + abs = reduced; + key = isLong ? powers[i].longKey : powers[i].key; + break; + } + } + return (isNegative ? '-' : '') + abs + key; + } +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index e548ff14c4..a67a4c68ea 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -187,6 +187,7 @@ import { GtMdLgLayoutGapDirective, GtMdLgShowHideDirective } from '@shared/layout/layout.directives'; +import { ShortNumberPipe } from '@shared/pipe/short-number.pipe'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -203,7 +204,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) FileSizePipe, DateAgoPipe, SafePipe, - DateAgoPipe, + ShortNumberPipe, { provide: FlowInjectionToken, useValue: Flow @@ -327,6 +328,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) FileSizePipe, DateAgoPipe, SafePipe, + ShortNumberPipe, SelectableColumnsPipe, KeyboardShortcutPipe, TbJsonToStringDirective, @@ -345,7 +347,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) NotificationComponent, TemplateAutocompleteComponent, SlackConversationAutocompleteComponent, - DateAgoPipe, MdLgLayoutDirective, MdLgLayoutAlignDirective, MdLgLayoutGapDirective, @@ -550,6 +551,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) FileSizePipe, DateAgoPipe, SafePipe, + ShortNumberPipe, SelectableColumnsPipe, RouterModule, TranslateModule, @@ -568,7 +570,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) NotificationComponent, TemplateAutocompleteComponent, SlackConversationAutocompleteComponent, - DateAgoPipe, MdLgLayoutDirective, MdLgLayoutAlignDirective, MdLgLayoutGapDirective, 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 0c318d4849..e9017be3a3 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4170,6 +4170,7 @@ "line-settings": "Line settings", "show-line": "Show line", "fill-line": "Fill line", + "fill-line-opacity": "Fill opacity", "points-settings": "Points settings", "show-points": "Show points", "points-line-width": "Line width of points", @@ -5127,6 +5128,11 @@ "link-required": "Link is required.", "columns": "Columns" }, + "quick-links": { + "title": "Quick links", + "add-link": "Add link", + "columns": "Columns" + }, "configured-features": { "title": "Configured features", "info": "Status of features that require configuration", @@ -5148,6 +5154,11 @@ "upgrade": "Upgrade", "version-is-up-to-date": "Version is up to date" }, + "usage-info": { + "title": "Usage", + "entities": "Entities", + "api-calls": "API calls" + }, "functions": { "title": "Functions", "pe-feature-tooltip": "Only on ThingsBoard\nProfessional Edition",