From 855c69e0d68c57d3b9d714f94aacbdf0006c591f Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 10 Apr 2023 16:10:44 +0300 Subject: [PATCH] UI: Update sys admin home page. Add translations. --- .../widget_bundles/home_page_widgets.json | 21 ++- .../data/settings/UserSettingsType.java | 2 +- .../app/core/http/user-settings.service.ts | 11 ++ .../filter/filters-dialog.component.html | 2 +- .../add-doc-link-dialog.component.html | 2 +- .../cluster-info-table.component.html | 12 +- .../home-page/cluster-info-table.component.ts | 14 +- .../configured-features.component.html | 14 +- .../configured-features.component.ts | 6 +- .../lib/home-page/doc-link.component.html | 8 +- .../home-page/doc-links-widget.component.html | 6 +- .../edit-doc-links-dialog.component.html | 4 +- ...ng-started-completed-dialog.component.html | 34 ++++ ...ng-started-completed-dialog.component.scss | 62 +++++++ ...ting-started-completed-dialog.component.ts | 46 +++++ .../getting-started-widget.component.html | 101 +++++++++++ .../getting-started-widget.component.scss | 118 +++++++++++++ .../getting-started-widget.component.ts | 134 ++++++++++++++ .../lib/home-page/home-page-widgets.module.ts | 12 +- .../lib/home-page/version-info.component.html | 16 +- .../lib/home-page/version-info.component.scss | 3 - .../doc-links-widget-settings.component.html | 2 +- .../pages/home-links/sys_admin_home_page.raw | 164 +++++++----------- .../app/shared/models/user-settings.models.ts | 8 +- .../assets/locale/locale.constant-en_US.json | 109 +++++++++++- 25 files changed, 756 insertions(+), 155 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.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 f84d4cbbc6..fc5b13154c 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 @@ -24,7 +24,26 @@ "settingsSchema": "", "dataKeySettingsSchema": "", "settingsDirective": "tb-doc-links-widget-settings", - "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"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}" + } + }, + { + "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}" } } ] diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/settings/UserSettingsType.java b/common/data/src/main/java/org/thingsboard/server/common/data/settings/UserSettingsType.java index 97ef85a5f2..b19dbbbaee 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/settings/UserSettingsType.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/settings/UserSettingsType.java @@ -19,7 +19,7 @@ import lombok.Getter; public enum UserSettingsType { - GENERAL, VISITED_DASHBOARDS(true), QUICK_LINKS, DOC_LINKS, DASHBOARDS; + GENERAL, VISITED_DASHBOARDS(true), QUICK_LINKS, DOC_LINKS, DASHBOARDS, GETTING_STARTED; @Getter private final boolean reserved; 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 82bc726f72..55ce524750 100644 --- a/ui-ngx/src/app/core/http/user-settings.service.ts +++ b/ui-ngx/src/app/core/http/user-settings.service.ts @@ -18,6 +18,7 @@ import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { DocumentationLink, DocumentationLinks, + GettingStarted, initialUserSettings, UserSettings, UserSettingsType @@ -66,4 +67,14 @@ export class UserSettingsService { defaultHttpOptionsFromConfig(config)); } + public getGettingStarted(config?: RequestConfig): Observable { + return this.http.get(`/api/user/settings/${UserSettingsType.GETTING_STARTED}`, + defaultHttpOptionsFromConfig(config)); + } + + public updateGettingStarted(gettingStarted: GettingStarted, config?: RequestConfig): Observable { + return this.http.put(`/api/user/settings/${UserSettingsType.GETTING_STARTED}`, gettingStarted, + defaultHttpOptionsFromConfig(config)); + } + } diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html index 2d24bc479f..69f72c8aaf 100644 --- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html @@ -69,7 +69,7 @@ style="min-width: 48px;" type="button" (click)="duplicateFilter($index)" - matTooltip="{{ 'filter.duplicate-filter' | translate }}" + matTooltip="{{ 'filter.duplicate-filter-action' | translate }}" matTooltipPosition="above"> content_copy diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html index 92e46e8cf0..b276301ec8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html @@ -17,7 +17,7 @@ -->
-

Add documentation link

+

widgets.documentation.add-link-title

+ +
+
+ done +
+
+
+
widgets.getting-started.done-welcome-title
+
widgets.getting-started.done-welcome-text
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.scss new file mode 100644 index 0000000000..e440fa89a0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.scss @@ -0,0 +1,62 @@ +/** + * 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. + */ +.tb-getting-started-completed-dialog { + .mat-mdc-dialog-container .mdc-dialog__surface { + border-radius: 8px; + background-image: url(/assets/home/greetings_bg.svg); + background-repeat: no-repeat; + } + + .tb-getting-started-completed-dialog-container { + width: 500px; + height: 290px; + } + + .tb-done-container { + width: 70px; + height: 70px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.05); + } + + .tb-done-icon { + width: 62px; + height: 62px; + line-height: 56px; + font-size: 36px; + text-align: center; + border-radius: 50%; + border: 2px solid #305680; + background: #FFFFFF; + } + + .tb-done-welcome-title { + font-weight: 600; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.1px; + color: rgba(0, 0, 0, 0.87); + padding-bottom: 8px; + } + + .tb-done-welcome-text { + font-weight: 400; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.54); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.ts new file mode 100644 index 0000000000..087b70f3d8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.ts @@ -0,0 +1,46 @@ +/// +/// 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, ViewEncapsulation } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { UntypedFormGroup } from '@angular/forms'; +import { DialogComponent } from '@shared/components/dialog.component'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'tb-getting-started-completed-dialog', + templateUrl: './getting-started-completed-dialog.component.html', + styleUrls: ['./getting-started-completed-dialog.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class GettingStartedCompletedDialogComponent extends + DialogComponent { + + addDocLinkFormGroup: UntypedFormGroup; + + constructor(protected store: Store, + protected router: Router, + public dialogRef: MatDialogRef) { + super(store, router, dialogRef); + dialogRef.addPanelClass('tb-getting-started-completed-dialog'); + } + + close(): void { + this.dialogRef.close(); + } +} 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 new file mode 100644 index 0000000000..b1b4aa582f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html @@ -0,0 +1,101 @@ + +
widgets.getting-started.get-started
+
+ + + {{ index + 1 }} + + + + + +
+
widgets.getting-started.sys-admin.step1.title
+ {{ 'tenant.tenants' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step1.how-to-create-tenant' | translate }} + + + +
+
widgets.getting-started.sys-admin.step2.title
+ {{ 'admin.settings' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step2.how-to-configure-mail-server' | translate }} + + + +
+
widgets.getting-started.sys-admin.step3.title
+ {{ 'admin.settings' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step3.how-to-configure-sms-provider' | translate }} + + + +
+
widgets.getting-started.sys-admin.step4.title
+ {{ 'admin.settings' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step4.how-to-configure-2fa' | translate }} + + + +
+
widgets.getting-started.sys-admin.step5.title
+ {{ 'admin.settings' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step5.how-to-configure-oauth2' | translate }} + + + +
+
widgets.getting-started.sys-admin.step6.title
+ {{ 'admin.settings' | translate }} +
+ +
+ + description{{ 'widgets.getting-started.sys-admin.step6.how-to-configure-notifications' | translate }} + + + + +
+ +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss new file mode 100644 index 0000000000..234a8facca --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss @@ -0,0 +1,118 @@ +/** + * 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. + */ +:host { + display: flex; + flex-direction: column; + height: 100%; + + .tb-title { + font-weight: 600; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.1px; + color: rgba(0, 0, 0, 0.76); + padding-bottom: 24px; + @media screen and (min-width: 960px) and (max-width: 1819px) { + font-weight: 500; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + padding-bottom: 20px; + } + } + .tb-get-started-container { + flex: 1; + overflow: auto; + } +} + +:host ::ng-deep { + + .tb-get-started .mat-vertical-stepper-header { + border-radius: 12px; + padding: 12px; + height: auto; + } + + .tb-get-started .mat-vertical-stepper-header[aria-selected="true"] { + background: rgba(0, 0, 0, 0.03); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .tb-get-started .mat-vertical-content-container { + margin-left: 0; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + background: rgba(0, 0, 0, 0.03); + } + + .tb-get-started .mat-stepper-vertical-line::before { + content: none; + } + + .tb-get-started .mat-step-label { + width: 100%; + white-space: inherit; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: rgba(0, 0, 0, 0.76); + } + + .tb-get-started .mat-step-label.mat-step-label-selected { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: rgba(0, 0, 0, 0.87); + } + + .tb-get-started .mat-vertical-content p { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.2px; + color: rgba(0, 0, 0, 0.54); + } + + @media screen and (min-width: 960px) and (max-width: 1819px) { + .tb-get-started .mat-step-label { + font-size: 12px; + line-height: 16px; + } + .tb-get-started .mat-step-label.mat-step-label-selected { + font-size: 13px; + line-height: 16px; + } + + .tb-get-started .mdc-button { + font-size: 12px; + line-height: 16px; + } + + .tb-get-started .mat-vertical-content p { + font-size: 12px; + line-height: 16px; + letter-spacing: 0.25px; + } + + .tb-get-started .mat-vertical-content { + padding: 0 16px 16px 16px; + } + + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.ts new file mode 100644 index 0000000000..9c07e62978 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.ts @@ -0,0 +1,134 @@ +/// +/// 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, ViewChild } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +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 { + GettingStartedCompletedDialogComponent +} from '@home/components/widget/lib/home-page/getting-started-completed-dialog.component'; +import { GettingStarted } from '@shared/models/user-settings.models'; +import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper'; +import { isUndefined } from '@core/utils'; +import { MatStepper } from '@angular/material/stepper'; +import { first } from 'rxjs/operators'; +import { Authority } from '@shared/models/authority.enum'; + +@Component({ + selector: 'tb-getting-started-widget', + templateUrl: './getting-started-widget.component.html', + styleUrls: ['./getting-started-widget.component.scss'] +}) +export class GettingStartedWidgetComponent extends PageComponent implements OnInit, OnDestroy { + + @ViewChild('matStepper') + matStepper: MatStepper; + + @Input() + ctx: WidgetContext; + + authority = Authority; + + authUser = getCurrentAuthUser(this.store); + gettingStarted: GettingStarted = { + lastSelectedIndex: 0, + maxSelectedIndex: 0 + }; + allCompleted = false; + + constructor(protected store: Store, + private cd: ChangeDetectorRef, + private userSettingsService: UserSettingsService, + private dialog: MatDialog) { + super(store); + } + + ngOnInit() { + this.userSettingsService.getGettingStarted().subscribe( + (gettingStarted) => { + if (gettingStarted) { + this.gettingStarted = gettingStarted; + if (isUndefined(this.gettingStarted.lastSelectedIndex)) { + this.gettingStarted.lastSelectedIndex = 0; + } + if (isUndefined(this.gettingStarted.maxSelectedIndex)) { + this.gettingStarted.maxSelectedIndex = 0; + } + if (this.gettingStarted.lastSelectedIndex > 0 && this.gettingStarted.lastSelectedIndex < this.matStepper.steps.length) { + const animationDuration = this.matStepper.animationDuration; + this.matStepper.animationDuration = '0'; + this.matStepper.selectedIndex = this.gettingStarted.lastSelectedIndex; + this.matStepper.animationDone.pipe(first()).subscribe(() => { + setTimeout(() => {this.matStepper.animationDuration = animationDuration;}, 0); + }); + } + if (this.matStepper.steps.length) { + this.updateCompletedSteps(); + this.cd.markForCheck(); + } else { + this.matStepper.steps.changes.subscribe( + () => { + this.updateCompletedSteps(); + this.cd.markForCheck(); + } + ); + } + } + } + ); + } + + ngOnDestroy() { + super.ngOnDestroy(); + } + + isSelected(step: CdkStep) { + return this.matStepper?.selected === step; + } + + gettingStartedCompleted() { + this.dialog.open(GettingStartedCompletedDialogComponent, { + disableClose: true, + autoFocus: false, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + }).afterClosed().subscribe(); + } + + updateSelectedIndex(event: StepperSelectionEvent) { + if (this.gettingStarted.lastSelectedIndex !== event.selectedIndex) { + this.gettingStarted.lastSelectedIndex = event.selectedIndex; + if (event.selectedIndex > this.gettingStarted.maxSelectedIndex) { + this.gettingStarted.maxSelectedIndex = event.selectedIndex; + this.updateCompletedSteps(); + } + this.userSettingsService + .updateGettingStarted(this.gettingStarted, {ignoreLoading: true}).subscribe(); + } + } + + updateCompletedSteps() { + if (this.gettingStarted.maxSelectedIndex >= this.matStepper.steps.length-1) { + this.allCompleted = true; + } + } + +} 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 b485e1adf0..3be30dad30 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 @@ -24,6 +24,10 @@ import { DocLinksWidgetComponent } from '@home/components/widget/lib/home-page/d import { DocLinkComponent } from '@home/components/widget/lib/home-page/doc-link.component'; import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component'; import { EditDocLinksDialogComponent } from '@home/components/widget/lib/home-page/edit-doc-links-dialog.component'; +import { GettingStartedWidgetComponent } from '@home/components/widget/lib/home-page/getting-started-widget.component'; +import { + GettingStartedCompletedDialogComponent +} from '@home/components/widget/lib/home-page/getting-started-completed-dialog.component'; @NgModule({ declarations: @@ -34,7 +38,9 @@ import { EditDocLinksDialogComponent } from '@home/components/widget/lib/home-pa DocLinksWidgetComponent, DocLinkComponent, AddDocLinkDialogComponent, - EditDocLinksDialogComponent + EditDocLinksDialogComponent, + GettingStartedWidgetComponent, + GettingStartedCompletedDialogComponent ], imports: [ CommonModule, @@ -47,7 +53,9 @@ import { EditDocLinksDialogComponent } from '@home/components/widget/lib/home-pa DocLinksWidgetComponent, DocLinkComponent, AddDocLinkDialogComponent, - EditDocLinksDialogComponent + EditDocLinksDialogComponent, + GettingStartedWidgetComponent, + GettingStartedCompletedDialogComponent ] }) export class HomePageWidgetsModule { } 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 ba80378f38..462e01cd35 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 @@ -16,21 +16,23 @@ -->
-
-
Version
- Contact us +
+
+
widgets.version-info.title
+
+ {{ 'widgets.version-info.contact-us' | translate }}
- Current version + {{ 'widgets.version-info.current-version' | translate }}
{{ updateMessage?.currentVersion }}
- Available version - Upgrade + {{ 'widgets.version-info.available-version' | translate }} + {{ 'widgets.version-info.upgrade' | translate }}
{{ updateMessage?.latestVersion }}
@@ -39,6 +41,6 @@
check
-
Version is up to date
+
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 e6e45382c3..2116676fe7 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 @@ -24,9 +24,6 @@ flex-direction: row; justify-content: space-between; align-items: center; - } - - .tb-card-title { margin-bottom: 8px; @media screen and (min-width: 960px) and (max-width: 1819px) { margin-bottom: 4px; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html index 025beb45dc..08d2d8d8e0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html @@ -17,7 +17,7 @@ -->
- Columns + widgets.documentation.columns
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 d50014a0d5..8d9887bec4 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 @@ -552,91 +552,6 @@ "col": 0, "id": "5d02c63b-bcb1-aaf3-f35d-de4dbaca96c2" }, - "e70b51f8-04dd-985f-be81-d0c76c589d4a": { - "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": 1680183320196, - "endTimeMs": 1680269720196 - }, - "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": "
Get started
\n\n \n {{ index + 1 }}\n \n -1\">\n \n
\n
Create Tenant and Tenant Administrator
\n {{ 'tenant.tenants' | translate }}\n
\n \n

\n A tenant is an individual or organization that owns or produces devices and assets. Tenants can create Tenant administrator users.\n

\n

\n Follow the documentation on how to do it: \n

\n descriptionHow to create Tenant\n \n 0\">\n \n
\n
Configure feature: Mail server
\n {{ 'admin.settings' | translate }}\n
\n \n

\n Users will receive activation and password reset emails from the System Administrator via an SMTP server.\n

\n

\n Follow the documentation on how to do it:\n

\n descriptionHow to configure Mail server\n \n 1\">\n \n
\n
Configure feature: SMS provider
\n {{ 'admin.settings' | translate }}\n
\n \n

\n To distribute SMS messages about alarms, the System Administrator can configure SMS providers.\n

\n

\n Follow the documentation on how to do it:\n

\n descriptionHow to configure SMS provider\n \n 2\">\n \n
\n
Configure feature: 2FA
\n {{ 'admin.settings' | translate }}\n
\n \n

\n Adding two-factor authentication to your account increases security and prevents malicious access.\n

\n

\n Follow the documentation on how to do it:\n

\n descriptionHow to configure 2FA\n \n 3\">\n \n
\n
Configure feature: OAuth 2
\n {{ 'admin.settings' | translate }}\n
\n \n

\n You can provide your customers with Single Sign-On functionality and automatically create tenants, customers, or sub-customers by using external user management platforms that support OAuth 2.0.\n

\n

\n Follow the documentation on how to do it:\n

\n descriptionHow to configure OAuth 2\n \n 4\">\n \n
\n
Configure feature: Notifications
\n {{ 'admin.settings' | translate }}\n
\n \n

\n Some text\n

\n

\n Follow the documentation on how to do it:\n

\n descriptionHow to configure Notifications\n \n\n
\n \n
\n\n", - "applyDefaultMarkdownStyle": false, - "markdownCss": ".tb-title {\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n padding-bottom: 24px;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-title {\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n padding-bottom: 20px;\n }\n}\n" - }, - "title": "Get started", - "showTitleIcon": false, - "iconColor": "rgba(0, 0, 0, 0.87)", - "iconSize": "24px", - "titleTooltip": "", - "dropShadow": false, - "enableFullscreen": false, - "widgetStyle": {}, - "titleStyle": { - "fontSize": "16px", - "fontWeight": 400 - }, - "showLegend": false, - "widgetCss": "\n.tb-get-started .mat-vertical-stepper-header {\n border-radius: 12px;\n padding: 12px;\n height: auto;\n}\n\n.tb-get-started .mat-vertical-stepper-header[aria-selected=\"true\"] {\n background: rgba(0, 0, 0, 0.03);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.tb-get-started .mat-vertical-content-container {\n margin-left: 0px;\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n background: rgba(0, 0, 0, 0.03);\n}\n\n.tb-get-started .mat-stepper-vertical-line::before {\n content: none;\n}\n\n.tb-get-started .mat-step-label {\n width: 100%;\n white-space: inherit;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-get-started .mat-step-label.mat-step-label-selected {\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n color: rgba(0, 0, 0, 0.87);\n}\n\n.tb-get-started .mat-vertical-content p {\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-get-started .mat-step-label {\n font-size: 12px;\n line-height: 16px;\n }\n .tb-get-started .mat-step-label.mat-step-label-selected {\n font-size: 13px;\n line-height: 16px;\n }\n\n .tb-get-started .mdc-button {\n font-size: 12px;\n line-height: 16px;\n }\n \n .tb-get-started .mat-vertical-content p {\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.25px;\n }\n \n .tb-get-started .mat-vertical-content {\n padding: 0 16px 16px 16px;\n }\n\n}\n", - "pageSize": 1024, - "noDataDisplayMessage": "", - "actions": { - "elementClick": [ - { - "name": "getting-started-finish", - "icon": "more_horiz", - "useShowWidgetActionFunction": null, - "showWidgetActionFunction": "return true;", - "type": "customPretty", - "customHtml": "
\n
\n \n \n
\n
\n
\n done\n
\n
\n
\n
Welcome on board
\n
You did great with it!
\n
\n
\n", - "customCss": ".tb-congrat-dialog .mat-mdc-dialog-container .mdc-dialog__surface {\n border-radius: 8px;\n background-image: url(/assets/home/greetings_bg.svg);\n background-repeat: no-repeat;\n}\n\n.tb-congrat-dialog-container {\n width: 500px;\n height: 290px;\n}\n\n.tb-done-container {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.05);\n}\n\n.tb-done-icon {\n width: 62px;\n height: 62px;\n line-height: 56px;\n font-size: 36px;\n text-align: center;\n border-radius: 50%;\n border: 2px solid #305680;\n background: #FFFFFF;\n}\n\n.tb-done-welcome-title {\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.87);\n padding-bottom: 8px;\n}\n\n.tb-done-welcome-text {\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgba(0, 0, 0, 0.54);\n}", - "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenGreetingDialog();\n\nfunction openGreetingDialog() {\n customDialog.customDialog(htmlTemplate, GreetingDialogController, null, {autoFocus: false}).subscribe();\n}\n\nfunction GreetingDialogController(instance) {\n let vm = instance;\n vm.dialogRef.addPanelClass(\"tb-congrat-dialog\");\n \n vm.close = function() {\n vm.dialogRef.close(null);\n };\n}\n\n", - "customResources": [], - "openInSeparateDialog": false, - "openInPopover": false, - "id": "d7d0b8a5-ead7-a29c-2c10-5c9704fb3739" - } - ] - } - }, - "row": 0, - "col": 0, - "id": "e70b51f8-04dd-985f-be81-d0c76c589d4a" - }, "d70cc256-4c7b-ee06-9905-b8c5e546605f": { "isSystemType": true, "bundleAlias": "cards", @@ -679,7 +594,7 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
Transport messages\n info\n
\n
\n \n
", + "markdownTextPattern": "
\n
\n
{{ 'widgets.transport-messages.title' | translate }}\n info\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" }, @@ -726,7 +641,7 @@ { "name": "transportMsgCountHourly", "type": "timeseries", - "label": "Transport messages", + "label": "{i18n:widgets.transport-messages.title}", "color": "#305680", "settings": {}, "_hash": 0.2880464219129071, @@ -1000,7 +915,7 @@ "decimals": null, "funcBody": null, "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = 'Critically high CPU usage. To avoid system failure, optimize system performance.';\n} else if (value > 75) {\n text = 'Running high on CPU usage. To avoid system failure, optimize system performance.';\n}\nreturn text;" + "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" } ] } @@ -1035,7 +950,7 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
CPU
\n
\n
\n
\n ${cpuUsage:0}%\n | ${cpuCount:0} cores\n
\n
", + "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}" }, @@ -1082,7 +997,7 @@ { "name": "cpuUsage", "type": "timeseries", - "label": "CPU", + "label": "{i18n:widgets.system-info.cpu}", "color": "#305680", "settings": { "hideDataByDefault": false, @@ -1117,7 +1032,7 @@ { "name": "memoryUsage", "type": "timeseries", - "label": "RAM", + "label": "{i18n:widgets.system-info.ram}", "color": "#ac3bc9", "settings": { "hideDataByDefault": false, @@ -1152,7 +1067,7 @@ { "name": "discUsage", "type": "timeseries", - "label": "Disk", + "label": "{i18n:widgets.system-info.disk}", "color": "#40d0ae", "settings": { "hideDataByDefault": false, @@ -1359,7 +1274,7 @@ "decimals": null, "funcBody": null, "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = 'Critically low reserve of RAM. To avoid system failure,
optimize system performance or increase the size of RAM.';\n} else if (value > 75) {\n text = 'Running low on reserve of RAM. To avoid system failure,
optimize system performance or increase the size of RAM.';\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" } ] } @@ -1394,7 +1309,7 @@ "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 '
RAM
' +\n '
' +\n '
' +\n '
' +\n '${memoryUsage:0}%' +\n '| ${totalMemory: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}" }, @@ -1492,7 +1407,7 @@ "decimals": null, "funcBody": null, "usePostProcessing": true, - "postFuncBody": "var text = '';\nif (value > 85) {\n text = 'Critically low disk space. To avoid data loss, free up or expand the disk space.';\n} else if (value > 75) {\n text = 'Running low on disk space. To avoid data loss, free up or expand the disk space.';\n}\nreturn text;" + "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;" } ] } @@ -1527,7 +1442,7 @@ "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 '
Disk
' +\n '
' +\n '
' +\n '
' +\n '${discUsage:0}%' +\n '| ${totalDiscSpace:0} Gb' +\n '
' +\n '
';", + "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-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}" }, @@ -1595,7 +1510,7 @@ "padding": "16px", "settings": { "useMarkdownTextFunction": false, - "markdownTextPattern": "
\n
\n
\n
Functions
\n
\n Switch to PE\n
\n
\n
\n
Alarms
\n
Dashboards
\n
Entities & Relations
\n
Profiles
\n
Advanced features
\n
\n
\n
Notification center
\n
API usage
\n
Customers
\n
Customers hierarchy
\n
Roles & Permissions
\n
\n
\n
Groups
\n
Integrations
\n
Solution templates
\n
Scheduler
\n
White-labeling
\n
\n
\n
", + "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.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" }, @@ -1791,6 +1706,43 @@ "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" } }, "states": { @@ -1848,13 +1800,6 @@ "mobileOrder": 5, "mobileHeight": 4 }, - "e70b51f8-04dd-985f-be81-d0c76c589d4a": { - "sizeX": 35, - "sizeY": 58, - "row": 0, - "col": 85, - "mobileHide": true - }, "d70cc256-4c7b-ee06-9905-b8c5e546605f": { "sizeX": 41, "sizeY": 18, @@ -1900,6 +1845,13 @@ "row": 15, "col": 0, "mobileHide": true + }, + "a23185ad-dc46-806c-0e50-5b21fb080ace": { + "sizeX": 35, + "sizeY": 58, + "row": 0, + "col": 85, + "mobileHide": true } }, "gridSettings": { @@ -2010,7 +1962,7 @@ "filter": { "type": "entityType", "resolveMultiple": true, - "entityType": "TENANT" + "entityType": "TENANT_PROFILE" } }, "a1ddb8fa-90ff-5598-e7f2-e254194d055d": { @@ -2108,4 +2060,4 @@ }, "externalId": null, "name": "System Administrator Home Page" -} \ No newline at end of file +} 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 d9cf96dac0..5e902a9973 100644 --- a/ui-ngx/src/app/shared/models/user-settings.models.ts +++ b/ui-ngx/src/app/shared/models/user-settings.models.ts @@ -26,7 +26,8 @@ export enum UserSettingsType { GENERAL = 'GENERAL', QUICK_LINKS = 'QUICK_LINKS', DOC_LINKS = 'DOC_LINKS', - DASHBOARDS = 'DASHBOARDS' + DASHBOARDS = 'DASHBOARDS', + GETTING_STARTED = 'GETTING_STARTED' } export interface DocumentationLink { @@ -38,3 +39,8 @@ export interface DocumentationLink { export interface DocumentationLinks { links?: DocumentationLink[]; } + +export interface GettingStarted { + maxSelectedIndex?: number; + lastSelectedIndex?: number; +} 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 7b3f24445f..94fe523ae6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2385,7 +2385,7 @@ "ignore-case": "ignore case", "value": "Value", "remove-filter": "Remove filter", - "duplicate-filter": "Duplicate filter", + "duplicate-filter-action": "Duplicate filter", "preview": "Filter preview", "no-filters": "No filters configured", "add-filter": "Add filter", @@ -5060,6 +5060,113 @@ "font-weight-lighter": "Lighter", "color": "Color", "shadow-color": "Shadow color" + }, + "system-info": { + "cpu": "CPU", + "ram": "RAM", + "disk": "Disk", + "cpu-warning-text": "Running high on CPU usage. To avoid system failure, optimize system performance.", + "cpu-critical-text": "Critically high CPU usage. To avoid system failure, optimize system performance.", + "ram-warning-text": "Running low on reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.", + "ram-critical-text": "Critically low reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.", + "disk-warning-text": "Running low on disk space. To avoid data loss, free up or expand the disk space.", + "disk-critical-text": "Critically low disk space. To avoid data loss, free up or expand the disk space." + }, + "cluster-info": { + "service-id": "Service id", + "service-type": "Service type", + "no-data": "No data" + }, + "transport-messages": { + "title": "Transport messages", + "info": "All the messages that came from devices" + }, + "documentation": { + "title": "Documentation", + "add-link": "Add link", + "add-link-title": "Add documentation link", + "name": "Name", + "name-required": "Name is required.", + "link": "Link", + "link-required": "Link is required.", + "columns": "Columns" + }, + "configured-features": { + "title": "Configured features", + "info": "Status of features that require configuration", + "email-feature": "Email", + "sms-feature": "SMS", + "slack-feature": "Slack", + "oauth2-feature": "OAuth 2", + "2fa-feature": "2FA", + "feature-configured": "Feature is configured.\nClick to setup", + "feature-not-configured": "Feature is not configured.\nClick to setup" + }, + "version-info": { + "title": "Version", + "contact-us": "Contact us", + "current-version": "Current version", + "available-version": "Available version", + "upgrade": "Upgrade", + "version-is-up-to-date": "Version is up to date" + }, + "functions": { + "title": "Functions", + "pe-feature-tooltip": "Only on ThingsBoard\nProfessional Edition", + "switch-to-pe": "Switch to PE", + "alarms": "Alarms", + "dashboards": "Dashboards", + "entities-and-relations": "Entities & Relations", + "profiles": "Profiles", + "advanced-features": "Advanced features", + "notification-center": "Notification center", + "api-usage": "API usage", + "customers": "Customers", + "customers-hierarchy": "Customers hierarchy", + "roles-and-permissions": "Roles & Permissions", + "groups": "Groups", + "integrations": "Integrations", + "solution-templates": "Solution templates", + "scheduler": "Scheduler", + "white-labeling": "White-labeling" + }, + "getting-started": { + "get-started": "Get started", + "finish": "Finish", + "done-welcome-title": "Welcome on board", + "done-welcome-text": "You did great with it!", + "sys-admin": { + "step1": { + "title": "Create Tenant and Tenant Administrator", + "content": "

A tenant is an individual or organization that owns or produces devices and assets. Tenants can create Tenant administrator users.

Follow the documentation on how to do it:

", + "how-to-create-tenant": "How to create Tenant" + }, + "step2": { + "title": "Configure feature: Mail server", + "content": "

Users will receive activation and password reset emails from the System Administrator via an SMTP server.

Follow the documentation on how to do it:

", + "how-to-configure-mail-server": "How to configure Mail server" + }, + "step3": { + "title": "Configure feature: SMS provider", + "content": "

To distribute SMS messages about alarms, the System Administrator can configure SMS providers.

Follow the documentation on how to do it:

", + "how-to-configure-sms-provider": "How to configure SMS provider" + }, + "step4": { + "title": "Configure feature: 2FA", + "content": "

Adding two-factor authentication to your account increases security and prevents malicious access.

Follow the documentation on how to do it:

", + "how-to-configure-2fa": "How to configure 2FA" + }, + "step5": { + "title": "Configure feature: OAuth 2", + "content": "

You can provide your customers with Single Sign-On functionality and automatically create tenants, customers, or sub-customers by using external user management platforms that support OAuth 2.0.

Follow the documentation on how to do it:

", + "how-to-configure-oauth2": "How to configure OAuth 2" + }, + "step6": { + "title": "Configure feature: Notifications", + "content": "

Some text

Follow the documentation on how to do it:

", + "how-to-configure-notifications": "How to configure Notifications" + } + } } }, "icon": {