Browse Source

UI: Add notification setting

pull/7911/head
Vladyslav_Prykhodko 4 years ago
parent
commit
6ac0024944
  1. 28
      ui-ngx/src/app/core/services/menu.service.ts
  2. 14
      ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
  3. 6
      ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
  4. 47
      ui-ngx/src/app/modules/home/pages/admin/notification-settings.component.html
  5. 86
      ui-ngx/src/app/modules/home/pages/admin/notification-settings.component.ts
  6. 11
      ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
  7. 4
      ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html
  8. 5
      ui-ngx/src/assets/locale/locale.constant-en_US.json

28
ui-ngx/src/app/core/services/menu.service.ts

@ -115,7 +115,7 @@ export class MenuService {
name: 'admin.system-settings',
type: 'toggle',
path: '/settings',
height: '320px',
height: '360px',
icon: 'settings',
pages: [
{
@ -139,6 +139,13 @@ export class MenuService {
path: '/settings/sms-provider',
icon: 'sms'
},
{
id: guid(),
name: 'notification.notification',
type: 'link',
path: '/settings/notification',
icon: 'notifications'
},
{
id: guid(),
name: 'admin.security-settings',
@ -238,6 +245,11 @@ export class MenuService {
icon: 'sms',
path: '/settings/sms-provider'
},
{
name: 'notification.notification',
icon: 'notifications',
path: '/settings/notification'
},
{
name: 'admin.security-settings',
icon: 'security',
@ -425,7 +437,7 @@ export class MenuService {
name: 'admin.system-settings',
type: 'toggle',
path: '/settings',
height: '160px',
height: '200px',
icon: 'settings',
pages: [
{
@ -435,6 +447,13 @@ export class MenuService {
path: '/settings/home',
icon: 'settings_applications'
},
{
id: guid(),
name: 'notification.notification',
type: 'link',
path: '/settings/notification',
icon: 'notifications'
},
{
id: guid(),
name: 'resource.resources-library',
@ -611,6 +630,11 @@ export class MenuService {
icon: 'settings_applications',
path: '/settings/home'
},
{
name: 'notification.notification',
icon: 'notifications',
path: '/settings/notification'
},
{
name: 'resource.resources-library',
icon: 'folder',

14
ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts

@ -36,6 +36,7 @@ import { QueuesTableConfigResolver } from '@home/pages/admin/queue/queues-table-
import { RepositoryAdminSettingsComponent } from '@home/pages/admin/repository-admin-settings.component';
import { AutoCommitAdminSettingsComponent } from '@home/pages/admin/auto-commit-admin-settings.component';
import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
import { NotificationSettingsComponent } from '@home/pages/admin/notification-settings.component';
@Injectable()
export class OAuth2LoginProcessingUrlResolver implements Resolve<string> {
@ -150,6 +151,19 @@ const routes: Routes = [
}
}
},
{
path: 'notification',
component: NotificationSettingsComponent,
canDeactivate: [ConfirmOnExitGuard],
data: {
auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
title: 'admin.notification.notification-settings',
breadcrumb: {
label: 'admin.notification.notification-settings',
icon: 'notifications'
}
}
},
{
path: 'resources-library',
data: {

6
ui-ngx/src/app/modules/home/pages/admin/admin.module.ts

@ -28,10 +28,11 @@ import { SmsProviderComponent } from '@home/pages/admin/sms-provider.component';
import { SendTestSmsDialogComponent } from '@home/pages/admin/send-test-sms-dialog.component';
import { HomeSettingsComponent } from '@home/pages/admin/home-settings.component';
import { ResourcesLibraryComponent } from '@home/pages/admin/resource/resources-library.component';
import { QueueComponent} from '@home/pages/admin/queue/queue.component';
import { QueueComponent } from '@home/pages/admin/queue/queue.component';
import { RepositoryAdminSettingsComponent } from '@home/pages/admin/repository-admin-settings.component';
import { AutoCommitAdminSettingsComponent } from '@home/pages/admin/auto-commit-admin-settings.component';
import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
import { NotificationSettingsComponent } from '@home/pages/admin/notification-settings.component';
@NgModule({
declarations:
@ -47,7 +48,8 @@ import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-aut
QueueComponent,
RepositoryAdminSettingsComponent,
AutoCommitAdminSettingsComponent,
TwoFactorAuthSettingsComponent
TwoFactorAuthSettingsComponent,
NotificationSettingsComponent
],
imports: [
CommonModule,

47
ui-ngx/src/app/modules/home/pages/admin/notification-settings.component.html

@ -0,0 +1,47 @@
<!--
Copyright © 2016-2022 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.
-->
<div>
<mat-card class="settings-card">
<mat-card-title>
<div fxLayout="row">
<span class="mat-headline" translate>admin.notification.notification-settings</span>
</div>
</mat-card-title>
<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)="save()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<fieldset class="fields-group" formGroupName="SLACK">
<legend class="group-title" translate>admin.notification.slack</legend>
<mat-form-field class="mat-block">
<mat-label translate>admin.notification.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>

86
ui-ngx/src/app/modules/home/pages/admin/notification-settings.component.ts

@ -0,0 +1,86 @@
///
/// Copyright © 2016-2022 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, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { PageComponent } from '@shared/components/page.component';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
import { NotificationService } from '@core/http/notification.service';
import { NotificationSettings } from '@shared/models/notification.models';
import { deepTrim, isEmptyStr } from '@core/utils';
@Component({
selector: 'tb-notification-settings',
templateUrl: './notification-settings.component.html',
styleUrls: ['./settings-card.scss']
})
export class NotificationSettingsComponent extends PageComponent implements OnInit, HasConfirmForm {
notificationSettingsForm: FormGroup;
private notificationSettings: NotificationSettings;
constructor(protected store: Store<AppState>,
private notificationService: NotificationService,
public fb: FormBuilder) {
super(store);
}
ngOnInit() {
this.buildGeneralServerSettingsForm();
this.notificationService.getNotificationSettings().subscribe(
(settings) => {
this.notificationSettings = settings;
this.notificationSettingsForm.reset(this.notificationSettings);
}
);
}
buildGeneralServerSettingsForm() {
this.notificationSettingsForm = this.fb.group({
deliveryMethodsConfigs: this.fb.group({
SLACK: this.fb.group({
botToken: ['']
})
})
});
}
save(): void {
this.notificationSettings = deepTrim({
...this.notificationSettings,
...this.notificationSettingsForm.value
});
for (const method in this.notificationSettings.deliveryMethodsConfigs) {
const keys = Object.keys(this.notificationSettings.deliveryMethodsConfigs[method]);
if (keys.some(item => isEmptyStr(this.notificationSettings.deliveryMethodsConfigs[method][item]))) {
delete this.notificationSettings.deliveryMethodsConfigs[method];
} else {
this.notificationSettings.deliveryMethodsConfigs[method].method = method;
}
}
this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => {
this.notificationSettings = setting;
this.notificationSettingsForm.reset(this.notificationSettings);
});
}
confirmForm(): FormGroup {
return this.notificationSettingsForm;
}
}

11
ui-ngx/src/app/modules/home/pages/admin/settings-card.scss

@ -19,6 +19,17 @@
mat-card.settings-card {
margin: 8px;
.fields-group {
padding: 8px 16px 0;
margin: 10px 0;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend {
color: rgba(0, 0, 0, .7);
}
}
@media #{$mat-md} {
width: 80%;
}

4
ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html

@ -208,12 +208,12 @@
required
formControlName="targets"
[entityType]="entityType.NOTIFICATION_TARGET"
placeholderText="notification.target">
placeholderText="{{ 'notification.target' | translate }}">
</tb-entity-list>
</section>
</form>
<form [formGroup]="ruleNotificationForm">
<section formGroupName="additionalConfig">
<section formGroupName="additionalConfig">;
<mat-form-field class="mat-block">
<mat-label translate>notification.description</mat-label>
<input matInput formControlName="description">

5
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -407,6 +407,11 @@
"generate-key": "Generate key",
"info-header": "All users will be to re-logined",
"info-message": "Change of the JWT Signing Key will cause all issued tokens to be invalid. All users will need to re-login. This will also affect scripts that use Rest API/Websockets."
},
"notification": {
"notification-settings": "Notification settings",
"slack-api-token": "Slack api token",
"slack": "Slack"
}
},
"alarm": {

Loading…
Cancel
Save