dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add tenant admin notification settings

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-04-03 17:39:58 +03:00
parent 299c159ca1
commit f4de754202
6 changed files with 102 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/src/app/core/services/menu.service.ts
View File

@ -573,6 +573,14 @@ export class MenuService {
path: '/settings/home', path: '/settings/home',
icon: 'settings_applications' icon: 'settings_applications'
}, },
{
id: guid(),
name: 'admin.notifications',
type: 'link',
path: '/settings/notifications',
icon: 'mdi:message-badge',
isMdiIcon: true
},
{ {
id: guid(), id: guid(),
name: 'admin.repository', name: 'admin.repository',

2
ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
View File

@ -164,7 +164,7 @@ const routes: Routes = [
component: SmsProviderComponent, component: SmsProviderComponent,
canDeactivate: [ConfirmOnExitGuard], canDeactivate: [ConfirmOnExitGuard],
data: { data: {
auth: [Authority.SYS_ADMIN], auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
title: 'admin.notifications-settings', title: 'admin.notifications-settings',
breadcrumb: { breadcrumb: {
label: 'admin.notifications', label: 'admin.notifications',

113
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
View File

@ -15,66 +15,63 @@
limitations under the License. limitations under the License.
--> -->
<div> <mat-card appearance="outlined" class="settings-card" *ngIf="isSysAdmin()">
<mat-card appearance="outlined" class="settings-card"> <mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.sms-provider-settings</span>
</mat-card-title>
<span fxFlex></span>
<div tb-help="smsProviderSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="smsProvider" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async">
<tb-sms-provider-configuration
required
formControlName="configuration">
</tb-sms-provider-configuration>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
<button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
{{'admin.send-test-sms' | translate}}
</button>
<button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</fieldset>
</form>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined" class="settings-card">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.notifications-settings</span> <span class="mat-headline-5" translate>admin.slack-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span fxFlex></span>
<div tb-help="smsProviderSettings"></div> <div tb-help="slackSettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="smsProvider" (ngSubmit)="save()"> <form [formGroup]="slackSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<tb-sms-provider-configuration <section formGroupName="SLACK">
required <mat-form-field class="mat-block">
formControlName="configuration"> <mat-label translate>admin.slack-api-token</mat-label>
</tb-sms-provider-configuration> <input matInput formControlName="botToken" />
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px"> </mat-form-field>
<button mat-raised-button type="button" </section>
[disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()"> <div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
{{'admin.send-test-sms' | translate}} <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || slackSettingsForm.invalid || !slackSettingsForm.dirty"
</button> type="submit">{{'action.save' | translate}}
<button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || smsProvider.invalid || !smsProvider.dirty" </button>
type="submit">{{'action.save' | translate}} </div>
</button> </fieldset>
</div> </form>
</fieldset> </mat-card-content>
</form> </mat-card>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined" class="settings-card">
<!-- <mat-card-header>-->
<!-- <mat-card-title>-->
<!-- <div fxLayout="row">-->
<!-- <span class="mat-headline-5" translate>admin.notifications-settings</span>-->
<!-- </div>-->
<!-- </mat-card-title>-->
<!-- </mat-card-header>-->
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<fieldset class="fields-group" formGroupName="SLACK">
<legend class="group-title" translate>admin.slack</legend>
<mat-form-field class="mat-block">
<mat-label translate>admin.slack-api-token</mat-label>
<input matInput formControlName="botToken" />
</mat-form-field>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</fieldset>
</form>
</mat-card-content>
</mat-card>
</div>

60
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
@ -28,20 +28,25 @@ import { SendTestSmsDialogComponent, SendTestSmsDialogData } from '@home/pages/a
import { NotificationSettings } from '@shared/models/notification.models'; import { NotificationSettings } from '@shared/models/notification.models';
import { deepTrim, isEmptyStr } from '@core/utils'; import { deepTrim, isEmptyStr } from '@core/utils';
import { NotificationService } from '@core/http/notification.service'; import { NotificationService } from '@core/http/notification.service';
import { Authority } from '@shared/models/authority.enum';
import { AuthUser } from '@shared/models/user.model';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
@Component({ @Component({
selector: 'tb-sms-provider', selector: 'tb-sms-provider',
templateUrl: './sms-provider.component.html', templateUrl: './sms-provider.component.html',
styleUrls: ['./sms-provider.component.scss', './settings-card.scss'] styleUrls: ['./sms-provider.component.scss', './settings-card.scss']
}) })
export class SmsProviderComponent extends PageComponent implements OnInit, HasConfirmForm { export class SmsProviderComponent extends PageComponent implements HasConfirmForm {
smsProvider: FormGroup; smsProvider: FormGroup;
adminSettings: AdminSettings<SmsProviderConfiguration>; private adminSettings: AdminSettings<SmsProviderConfiguration>;
notificationSettingsForm: FormGroup; slackSettingsForm: FormGroup;
private notificationSettings: NotificationSettings; private notificationSettings: NotificationSettings;
private readonly authUser: AuthUser;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private router: Router, private router: Router,
private adminService: AdminService, private adminService: AdminService,
@ -49,30 +54,30 @@ export class SmsProviderComponent extends PageComponent implements OnInit, HasCo
private dialog: MatDialog, private dialog: MatDialog,
public fb: FormBuilder) { public fb: FormBuilder) {
super(store); super(store);
} this.authUser = getCurrentAuthUser(this.store);
ngOnInit() {
this.buildSmsProviderForm(); this.buildSmsProviderForm();
this.buildGeneralServerSettingsForm(); this.buildGeneralServerSettingsForm();
this.notificationService.getNotificationSettings().subscribe( this.notificationService.getNotificationSettings().subscribe(
(settings) => { (settings) => {
this.notificationSettings = settings; this.notificationSettings = settings;
this.notificationSettingsForm.reset(this.notificationSettings); this.slackSettingsForm.reset(this.notificationSettings);
} }
); );
this.adminService.getAdminSettings<SmsProviderConfiguration>('sms', {ignoreErrors: true}).subscribe({ if (this.isSysAdmin()) {
next: adminSettings => { this.adminService.getAdminSettings<SmsProviderConfiguration>('sms', {ignoreErrors: true}).subscribe({
this.adminSettings = adminSettings; next: adminSettings => {
this.smsProvider.reset({configuration: this.adminSettings.jsonValue}); this.adminSettings = adminSettings;
}, this.smsProvider.reset({configuration: this.adminSettings.jsonValue});
error: () => { },
this.adminSettings = { error: () => {
key: 'sms', this.adminSettings = {
jsonValue: null key: 'sms',
}; jsonValue: null
this.smsProvider.reset({configuration: this.adminSettings.jsonValue}); };
} this.smsProvider.reset({configuration: this.adminSettings.jsonValue});
}); }
});
}
} }
private buildSmsProviderForm() { private buildSmsProviderForm() {
@ -103,23 +108,24 @@ export class SmsProviderComponent extends PageComponent implements OnInit, HasCo
} }
confirmForm(): FormGroup { confirmForm(): FormGroup {
return this.smsProvider.dirty ? this.smsProvider : this.notificationSettingsForm; return this.smsProvider.dirty ? this.smsProvider : this.slackSettingsForm;
} }
private buildGeneralServerSettingsForm() { private buildGeneralServerSettingsForm() {
this.notificationSettingsForm = this.fb.group({ this.slackSettingsForm = this.fb.group({
deliveryMethodsConfigs: this.fb.group({ deliveryMethodsConfigs: this.fb.group({
SLACK: this.fb.group({ SLACK: this.fb.group({
botToken: [''] botToken: ['']
}) })
}) })
}); });
this.registerDisableOnLoadFormControl(this.slackSettingsForm.get('deliveryMethodsConfigs'));
} }
saveNotification(): void { saveNotification(): void {
this.notificationSettings = deepTrim({ this.notificationSettings = deepTrim({
...this.notificationSettings, ...this.notificationSettings,
...this.notificationSettingsForm.value ...this.slackSettingsForm.value
}); });
// eslint-disable-next-line guard-for-in // eslint-disable-next-line guard-for-in
for (const method in this.notificationSettings.deliveryMethodsConfigs) { for (const method in this.notificationSettings.deliveryMethodsConfigs) {
@ -132,8 +138,12 @@ export class SmsProviderComponent extends PageComponent implements OnInit, HasCo
} }
this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => { this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => {
this.notificationSettings = setting; this.notificationSettings = setting;
this.notificationSettingsForm.reset(this.notificationSettings); this.slackSettingsForm.reset(this.notificationSettings);
}); });
} }
isSysAdmin(): boolean {
return this.authUser.authority === Authority.SYS_ADMIN;
}
} }

1
ui-ngx/src/app/shared/models/constants.ts
View File

@ -76,6 +76,7 @@ export const HelpLinks = {
linksMap: { linksMap: {
outgoingMailSettings: helpBaseUrl + '/docs/user-guide/ui/mail-settings', outgoingMailSettings: helpBaseUrl + '/docs/user-guide/ui/mail-settings',
smsProviderSettings: helpBaseUrl + '/docs/user-guide/ui/sms-provider-settings', smsProviderSettings: helpBaseUrl + '/docs/user-guide/ui/sms-provider-settings',
slackSettings: helpBaseUrl + '/docs/user-guide/ui/slack-settings',
securitySettings: helpBaseUrl + '/docs/user-guide/ui/security-settings', securitySettings: helpBaseUrl + '/docs/user-guide/ui/security-settings',
oauth2Settings: helpBaseUrl + '/docs/user-guide/oauth-2-support/', oauth2Settings: helpBaseUrl + '/docs/user-guide/oauth-2-support/',
twoFactorAuthSettings: helpBaseUrl + '/docs/', twoFactorAuthSettings: helpBaseUrl + '/docs/',

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -417,7 +417,8 @@
"notifications": "Notifications", "notifications": "Notifications",
"notifications-settings": "Notifications settings", "notifications-settings": "Notifications settings",
"slack-api-token": "Slack api token", "slack-api-token": "Slack api token",
"slack": "Slack" "slack": "Slack",
"slack-settings": "Slack settings"
}, },
"alarm": { "alarm": {
"alarm": "Alarm", "alarm": "Alarm",