UI: Add notification setting

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',

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: {

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

@@ -32,6 +32,7 @@ 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,

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>

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;
+  }
+
+}

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%;
    }

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">

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": {