From 926c364575fe873d8f718797e53af2b6bb6f3478 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 10 Mar 2023 14:58:16 +0200 Subject: [PATCH] UI: Router tabs component improvements. Remove alarm rules page. --- ui-ngx/src/app/core/services/menu.service.ts | 20 +--- .../home/components/route-tabs.component.scss | 8 +- .../components/router-tabs.component.html | 7 +- .../home/pages/alarm/alarm-routing.module.ts | 86 +-------------- .../alarm/alarm-rule-tabs.component.html | 21 ---- .../pages/alarm/alarm-rule-tabs.component.ts | 38 ------- .../pages/alarm/alarm-rule.component.html | 47 -------- .../home/pages/alarm/alarm-rule.component.ts | 63 ----------- .../alarm-rules-table-config.resolver.ts | 100 ------------------ .../modules/home/pages/alarm/alarm.module.ts | 7 +- .../app/shared/models/alarm-rule.models.ts | 24 ----- .../app/shared/models/entity-type.models.ts | 20 ---- .../src/app/shared/models/id/alarm-rule-id.ts | 26 ----- ui-ngx/src/app/shared/models/id/public-api.ts | 1 - ui-ngx/src/app/shared/models/public-api.ts | 1 - .../assets/locale/locale.constant-en_US.json | 21 ---- 16 files changed, 11 insertions(+), 479 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.html delete mode 100644 ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.ts delete mode 100644 ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.html delete mode 100644 ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.ts delete mode 100644 ui-ngx/src/app/modules/home/pages/alarm/alarm-rules-table-config.resolver.ts delete mode 100644 ui-ngx/src/app/shared/models/alarm-rule.models.ts delete mode 100644 ui-ngx/src/app/shared/models/id/alarm-rule-id.ts diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index d07d85d724..27fce29aa8 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -306,24 +306,8 @@ export class MenuService { id: guid(), name: 'alarm.alarms', type: 'link', - path: '/alarm', - icon: 'notifications', - pages: [ - { - id: guid(), - name: 'alarm.all-alarms', - type: 'link', - path: '/alarm/alarms', - icon: 'notifications' - }, - { - id: guid(), - name: 'alarm-rule.rules', - type: 'link', - path: '/alarm/rules', - icon: 'edit_notifications' - } - ] + path: '/alarms', + icon: 'notifications' }, { id: guid(), diff --git a/ui-ngx/src/app/modules/home/components/route-tabs.component.scss b/ui-ngx/src/app/modules/home/components/route-tabs.component.scss index b04ce97565..51614aecd7 100644 --- a/ui-ngx/src/app/modules/home/components/route-tabs.component.scss +++ b/ui-ngx/src/app/modules/home/components/route-tabs.component.scss @@ -18,15 +18,13 @@ width: 100%; height: 100%; - .mat-tab-nav-bar.tb-router-tabs { - a.mat-tab-link { + .mat-mdc-tab-nav-bar.tb-router-tabs { + a.mat-mdc-tab-link { display: inline-flex; align-items: center; overflow: hidden; line-height: 40px; - &.tb-active { - opacity: 1; - } + min-width: 200px; mat-icon { margin-right: 8px; margin-left: 0; diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html index 9cc3e1155b..c14238d0eb 100644 --- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html +++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html @@ -16,20 +16,19 @@ -->
-
diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts index b94d2ec466..30a6cbb8fd 100644 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts @@ -16,17 +16,10 @@ import { Injectable, NgModule } from '@angular/core'; import { Resolve, RouterModule, Routes } from '@angular/router'; -import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard'; import { Authority } from '@shared/models/authority.enum'; import { Observable } from 'rxjs'; import { OAuth2Service } from '@core/http/oauth2.service'; -import { EntitiesTableComponent } from '@home/components/entity/entities-table.component'; -import { EntityDetailsPageComponent } from '@home/components/entity/entity-details-page.component'; -import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models'; -import { BreadCrumbConfig } from '@shared/components/breadcrumb'; -import { RouterTabsComponent } from '@home/components/router-tabs.component'; import { AlarmTableComponent } from '@home/components/alarm/alarm-table.component'; -import { AlarmRulesTableConfigResolver } from '@home/pages/alarm/alarm-rules-table-config.resolver'; import { AlarmsMode } from '@shared/models/alarm.models'; @Injectable() @@ -41,84 +34,11 @@ export class OAuth2LoginProcessingUrlResolver implements Resolve { } const routes: Routes = [ - { - path: 'alarm', - component: RouterTabsComponent, - data: { - auth: [Authority.TENANT_ADMIN], - breadcrumb: { - label: 'alarm.alarms', - icon: 'notifications' - } - }, - children: [ - { - path: '', - children: [], - data: { - auth: [Authority.TENANT_ADMIN], - redirectTo: '/alarm/alarms' - } - }, - { - path: 'alarms', - component: AlarmTableComponent, - data: { - auth: [Authority.TENANT_ADMIN], - title: 'alarm.all-alarms', - breadcrumb: { - label: 'alarm.all-alarms', - icon: 'notifications' - }, - isPage: true, - alarmsMode: AlarmsMode.ALL - } - }, - { - path: 'rules', - data: { - breadcrumb: { - label: 'alarm-rule.rules', - icon: 'edit_notifications' - } - }, - children: [ - { - path: '', - component: EntitiesTableComponent, - data: { - auth: [Authority.TENANT_ADMIN], - title: 'alarm-rule.alarm-rules' - }, - resolve: { - entitiesTableConfig: AlarmRulesTableConfigResolver - } - }, - { - path: ':entityId', - component: EntityDetailsPageComponent, - canDeactivate: [ConfirmOnExitGuard], - data: { - breadcrumb: { - labelFunction: entityDetailsPageBreadcrumbLabelFunction, - icon: 'domain' - } as BreadCrumbConfig, - auth: [Authority.TENANT_ADMIN], - title: 'alarm-rule.alarm-rules' - }, - resolve: { - entitiesTableConfig: AlarmRulesTableConfigResolver - } - } - ] - } - ] - }, { path: 'alarms', component: AlarmTableComponent, data: { - auth: [Authority.CUSTOMER_USER], + auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER], title: 'alarm.alarms', breadcrumb: { label: 'alarm.alarms', @@ -133,8 +53,6 @@ const routes: Routes = [ @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], - providers: [ - AlarmRulesTableConfigResolver - ] + providers: [] }) export class AlarmRoutingModule { } diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.html b/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.html deleted file mode 100644 index 4caaa3b523..0000000000 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.ts deleted file mode 100644 index a65cf5e28a..0000000000 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule-tabs.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/// -/// 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 { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { EntityTabsComponent } from '../../components/entity/entity-tabs.component'; -import { AlarmRule } from '@shared/models/alarm-rule.models'; - -@Component({ - selector: 'tb-alarm-rule-tabs', - templateUrl: './alarm-rule-tabs.component.html', - styleUrls: [] -}) -export class AlarmRuleTabsComponent extends EntityTabsComponent { - - constructor(protected store: Store) { - super(store); - } - - ngOnInit() { - super.ngOnInit(); - } - -} diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.html deleted file mode 100644 index ea4db3de82..0000000000 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.html +++ /dev/null @@ -1,47 +0,0 @@ - -
- - -
-
-
-
- - alarm-rule.name - - - {{ 'alarm-rule.name-required' | translate }} - - - {{ 'alarm-rule.name-max-length' | translate }} - - -
-
-
diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.ts deleted file mode 100644 index 1f1131a105..0000000000 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rule.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -/// -/// 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, Inject, Optional } from '@angular/core'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; -import { TranslateService } from '@ngx-translate/core'; -import { EntityTableConfig } from '@home/models/entity/entities-table-config.models'; -import { EntityComponent } from '@home/components/entity/entity.component'; -import { AlarmRule } from '@shared/models/alarm-rule.models'; - -@Component({ - selector: 'tb-alarm-rule', - templateUrl: './alarm-rule.component.html', - styleUrls: [] -}) -export class AlarmRuleComponent extends EntityComponent { - - constructor(protected store: Store, - protected translate: TranslateService, - @Optional() @Inject('entity') protected entityValue: AlarmRule, - @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig, - protected fb: UntypedFormBuilder, - protected cd: ChangeDetectorRef) { - super(store, fb, entityValue, entitiesTableConfigValue, cd); - } - - hideDelete() { - if (this.entitiesTableConfig) { - return !this.entitiesTableConfig.deleteEnabled(this.entity); - } else { - return false; - } - } - - buildForm(entity: AlarmRule): UntypedFormGroup { - const form = this.fb.group( - { - name: [entity ? entity.name : '', [Validators.required, Validators.maxLength(255)]] - } - ); - return form; - } - - updateForm(entity: AlarmRule) { - this.entityForm.patchValue({name: entity.name}); - } - -} diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rules-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm-rules-table-config.resolver.ts deleted file mode 100644 index 2bfb9a3c9c..0000000000 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-rules-table-config.resolver.ts +++ /dev/null @@ -1,100 +0,0 @@ -/// -/// 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 { Resolve, Router } from '@angular/router'; -import { - DateEntityTableColumn, - EntityTableColumn, - EntityTableConfig -} from '@home/models/entity/entities-table-config.models'; -import { TranslateService } from '@ngx-translate/core'; -import { DatePipe } from '@angular/common'; -import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models'; -import { EntityAction } from '@home/models/entity/entity-component.models'; -import { DialogService } from '@core/services/dialog.service'; -import { MatDialog } from '@angular/material/dialog'; -import { ImportExportService } from '@home/components/import-export/import-export.service'; -import { HomeDialogsService } from '@home/dialogs/home-dialogs.service'; -import { AlarmRuleComponent } from '@home/pages/alarm/alarm-rule.component'; -import { AlarmRuleTabsComponent } from '@home/pages/alarm/alarm-rule-tabs.component'; -import { AlarmRule } from '@shared/models/alarm-rule.models'; -import { emptyPageData } from '@shared/models/page/page-data'; -import { of } from 'rxjs'; - -@Injectable() -export class AlarmRulesTableConfigResolver implements Resolve> { - - private readonly config: EntityTableConfig = new EntityTableConfig(); - - constructor(private importExport: ImportExportService, - private homeDialogs: HomeDialogsService, - private translate: TranslateService, - private datePipe: DatePipe, - private dialogService: DialogService, - private router: Router, - private dialog: MatDialog) { - - this.config.entityType = EntityType.ALARM_RULE; - this.config.entityComponent = AlarmRuleComponent; - this.config.entityTabsComponent = AlarmRuleTabsComponent; - this.config.entityTranslations = entityTypeTranslations.get(EntityType.ALARM_RULE); - this.config.entityResources = entityTypeResources.get(EntityType.ALARM_RULE); - - this.config.hideDetailsTabsOnEdit = false; - - this.config.columns.push( - new DateEntityTableColumn('createdTime', 'common.created-time', this.datePipe, '150px'), - new EntityTableColumn('name', 'alarm-rule.name', '50%') - ); - - this.config.deleteEntityTitle = alarmRule => this.translate.instant('alarm-rule.delete-alarm-rule-title', - { alarmRuleName: alarmRule.name }); - this.config.deleteEntityContent = () => this.translate.instant('alarm-rule.delete-alarm-rule-text'); - this.config.deleteEntitiesTitle = count => this.translate.instant('alarm-rule.delete-alarm-rules-title', {count}); - this.config.deleteEntitiesContent = () => this.translate.instant('alarm-rule.delete-alarm-rules-text'); - - this.config.entitiesFetchFunction = pageLink => of(emptyPageData()); // TODO - this.config.loadEntity = id => of(null); // TODO - this.config.saveEntity = alarmRule => of(alarmRule); // TODO - this.config.deleteEntity = id => of(null); // TODO - this.config.onEntityAction = action => this.onAlarmRuleAction(action); - } - - resolve(): EntityTableConfig { - this.config.tableTitle = this.translate.instant('alarm-rule.alarm-rules'); - - return this.config; - } - - private openAlarmRule($event: Event, alarmRule: AlarmRule) { - if ($event) { - $event.stopPropagation(); - } - const url = this.router.createUrlTree(['alarm', 'rules', alarmRule.id.id]); - this.router.navigateByUrl(url); - } - - onAlarmRuleAction(action: EntityAction): boolean { - switch (action.action) { - case 'open': - this.openAlarmRule(action.event, action.entity); - return true; - } - return false; - } - -} diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm.module.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm.module.ts index 6c06e3ffda..cd6f257833 100644 --- a/ui-ngx/src/app/modules/home/pages/alarm/alarm.module.ts +++ b/ui-ngx/src/app/modules/home/pages/alarm/alarm.module.ts @@ -20,14 +20,9 @@ import { SharedModule } from '@shared/shared.module'; import { HomeDialogsModule } from '../../dialogs/home-dialogs.module'; import { HomeComponentsModule } from '@modules/home/components/home-components.module'; import { AlarmRoutingModule } from '@home/pages/alarm/alarm-routing.module'; -import { AlarmRuleComponent } from '@home/pages/alarm/alarm-rule.component'; -import { AlarmRuleTabsComponent } from '@home/pages/alarm/alarm-rule-tabs.component'; @NgModule({ - declarations: [ - AlarmRuleComponent, - AlarmRuleTabsComponent - ], + declarations: [], imports: [ CommonModule, SharedModule, diff --git a/ui-ngx/src/app/shared/models/alarm-rule.models.ts b/ui-ngx/src/app/shared/models/alarm-rule.models.ts deleted file mode 100644 index 688fa629c1..0000000000 --- a/ui-ngx/src/app/shared/models/alarm-rule.models.ts +++ /dev/null @@ -1,24 +0,0 @@ -/// -/// 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 { BaseData } from '@shared/models/base-data'; -import { TenantId } from '@shared/models/id/tenant-id'; -import { AlarmRuleId } from '@shared/models/id/alarm-rule-id'; - -export interface AlarmRule extends BaseData { - tenantId: TenantId; - name: string; -} diff --git a/ui-ngx/src/app/shared/models/entity-type.models.ts b/ui-ngx/src/app/shared/models/entity-type.models.ts index 4a393d9d86..987384ee50 100644 --- a/ui-ngx/src/app/shared/models/entity-type.models.ts +++ b/ui-ngx/src/app/shared/models/entity-type.models.ts @@ -28,7 +28,6 @@ export enum EntityType { DEVICE_PROFILE = 'DEVICE_PROFILE', ASSET_PROFILE = 'ASSET_PROFILE', ALARM = 'ALARM', - ALARM_RULE = 'ALARM_RULE', RULE_CHAIN = 'RULE_CHAIN', RULE_NODE = 'RULE_NODE', EDGE = 'EDGE', @@ -258,19 +257,6 @@ export const entityTypeTranslations = new Map