Support for notification type - tables and forms extended (#390)

ludeknovy · Mar 8, 2024 · 745a25c · 745a25c
1 parent b5a6e78
commit 745a25c
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 37 deletions.
diff --git a/...l-notification/add-new-external-notification/add-new-external-notification.component.html b/...l-notification/add-new-external-notification/add-new-external-notification.component.html
@@ -16,15 +16,25 @@ <h5 class="modal-title" id="modal-basic-title">Webhook</h5>
       </div>
       <p class="text-secondary"></p>
 
-      <label for="channel" class="form-label">Channel</label>
-      <select class="form-select mb-3" id="channel" (change)="changeNotification($event)"  formControlName="notificationType">
-        <option *ngFor="let notification of notifications" [value]="notification">
-          {{ notification }}
+      <label for="channel" class="form-label">Channel <span class="text-danger">*</span></label>
+      <select class="form-select mb-3" id="channel" (change)="changeNotification($event)"  formControlName="channel">
+        <option *ngFor="let channel of notificationChannels" [value]="channel">
+          {{ channel }}
         </option>
       </select>
 
+      <label for="channel" class="form-label">Type <span class="text-danger">*</span></label>
+      <select class="form-select mb-3" id="notificationType" formControlName="notificationType">
+        <option *ngFor="let type of notificationTypes" [value]="type">
+          {{ type }}
+        </option>
+      </select>
+      <div class="form-control-feedback" *ngIf="notificationType.errors && (notificationType.dirty || notificationType.touched)">
+        <p class="form-validation-error" *ngIf="notificationType.errors.required">Type required</p>
+      </div>
+
       <div class="form-group mb-3">
-        <label for="webhookUrl" class="form-label">Webhook Url</label>
+        <label for="webhookUrl" class="form-label">Webhook Url <span class="text-danger">*</span></label>
         <input type="input" id="webhookUrl" class="form-control" formControlName="url" aria-label="Default"
                aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="url.errors && (url.dirty || url.touched)">
@@ -33,7 +43,7 @@ <h5 class="modal-title" id="modal-basic-title">Webhook</h5>
         </div>
       </div>
       <div class="form-group mb-3">
-        <label for="name" class="form-label">Name</label>
+        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
         <input type="input" id="name" class="form-control" formControlName="name" aria-label="Default"
                aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="name.errors && (name.dirty || name.touched)">

diff --git a/...nal-notification/add-new-external-notification/add-new-external-notification.component.ts b/...nal-notification/add-new-external-notification/add-new-external-notification.component.ts
@@ -6,40 +6,39 @@ import { catchError } from "rxjs/operators";
 import { NotificationMessage } from "src/app/notification/notification-messages";
 import { ScenarioApiService } from "src/app/scenario-api.service";
 import { ScenarioService } from "src/app/scenario.service";
+import { notificationConfig } from "../notificationConfig";
 
 @Component({
-  selector: "app-add-new-external-notification",
-  templateUrl: "./add-new-external-notification.component.html",
-  styleUrls: ["./add-new-external-notification.component.css"]
+  selector: 'app-add-new-external-notification',
+  templateUrl: './add-new-external-notification.component.html',
+  styleUrls: ['./add-new-external-notification.component.css']
 })
 export class AddNewExternalNotificationComponent implements OnInit {
-  notificationConfig = new Map([
-    ["MS Teams", { key: "ms-teams", helpUrl: "https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#add-an-incoming-webhook-to-a-teams-channel" }],
-    ["GChat", { key: "gchat", helpUrl: "https://developers.google.com/chat/how-tos/webhooks#create_a_webhook" }],
-    ["Slack", { key: "slack", helpUrl: "https://api.slack.com/messaging/webhooks#getting_started" }]
-  ])
-
   myform: FormGroup;
   url;
   name;
+  channel;
   notificationType;
   modal: NgbActiveModal;
-  notifications: string[] = Array.from(this.notificationConfig.keys());
+  notificationChannels: string[] = Array.from(notificationConfig.channels.keys());
+  notificationTypes: string[] = Array.from(notificationConfig.notificationType.values());
   helpUrl: string;
   @Input() params;
-  private DEFAULT_NOTIFICATION = 0
+  private DEFAULT_NOTIFICATION_CHANNEL = 0;
+  private DEFAULT_NOTIFICATION_TYPE = 0;
 
   constructor(
     private modalService: NgbModal,
     private notification: NotificationMessage,
     private scenarioApiService: ScenarioApiService,
     private scenarioService: ScenarioService,
-  ) { }
+  ) {
+  }
 
   ngOnInit() {
     this.createFormControls();
     this.createForm();
-    this.setHelpUrl(this.notifications[this.DEFAULT_NOTIFICATION])
+    this.setHelpUrl(this.notificationChannels[this.DEFAULT_NOTIFICATION_CHANNEL]);
   }
 
   open(content) {
@@ -55,41 +54,45 @@ export class AddNewExternalNotificationComponent implements OnInit {
       Validators.maxLength(100),
       Validators.required
     ]);
-    this.notificationType = new FormControl(this.notifications[this.DEFAULT_NOTIFICATION], [Validators.required])
+    this.channel = new FormControl(this.notificationChannels[this.DEFAULT_NOTIFICATION_CHANNEL], [Validators.required]);
+    this.notificationType = new FormControl(this.notificationTypes[this.DEFAULT_NOTIFICATION_TYPE], [Validators.required]);
   }
 
   createForm() {
     this.myform = new FormGroup({
       url: this.url,
       name: this.name,
-      notificationType: this.notificationType
+      channel: this.channel,
+      notificationType: this.notificationType,
     });
   }
 
   changeNotification(e) {
-    this.notificationType?.setValue(e.target.value);
-    if (this.notificationConfig.has(e.target.value)) {
-      this.setHelpUrl(e.target.value)
+    this.channel?.setValue(e.target.value);
+    if (notificationConfig.channels.has(e.target.value)) {
+      this.setHelpUrl(e.target.value);
     } else {
-      this.helpUrl = null
+      this.helpUrl = null;
     }
   }
 
-  setHelpUrl(notificationType: string) {
-    const notification = this.notificationConfig.get(notificationType)
-    this.helpUrl = notification.helpUrl
+  setHelpUrl(channel: string) {
+    const notification = notificationConfig.channels.get(channel);
+    this.helpUrl = notification.helpUrl;
   }
 
   onSubmit() {
-    this.formCheck()
+    this.formCheck();
     if (this.myform.valid) {
       const { projectName, scenarioName } = this.params;
-      const { url, notificationType, name } = this.myform.value
-      const type = this.notificationConfig.get(notificationType).key
+      const { url, channel, notificationType, name } = this.myform.value;
+      const channelKey = notificationConfig.channels.get(channel).key;
+      const typeKey = Array.from(notificationConfig.notificationType.entries()).find(([key, val]) => val === notificationType)[0];
       const body = {
         name,
         url,
-        type
+        channel: channelKey,
+        type: typeKey
       };
 
       this.scenarioApiService.createNewScenarioNotification(projectName, scenarioName, body)
@@ -99,8 +102,11 @@ export class AddNewExternalNotificationComponent implements OnInit {
           this.scenarioApiService.setData(message);
           this.scenarioService.fetchScenarioNotifications(projectName, scenarioName);
         });
-      this.myform.reset({ notificationType: this.notifications[this.DEFAULT_NOTIFICATION ] });
-      this.setHelpUrl(this.notifications[this.DEFAULT_NOTIFICATION ])
+      this.myform.reset({
+        channel: this.notificationChannels[this.DEFAULT_NOTIFICATION_CHANNEL],
+        notificationType: this.notificationTypes[this.DEFAULT_NOTIFICATION_TYPE]
+      });
+      this.setHelpUrl(this.notificationChannels[this.DEFAULT_NOTIFICATION_CHANNEL]);
       this.modal.close();
     }
   }

diff --git a/src/app/scenario/external-notification/external-notification.component.html b/src/app/scenario/external-notification/external-notification.component.html
@@ -17,6 +17,9 @@ <h5 class="modal-title" id="modal-basic-title">External notifications</h5>
               <th scope="col" class="jtl-head jtl-head-color">
                 <mfDefaultSorter by="name">Name</mfDefaultSorter>
               </th>
+              <th scope="col" class="jtl-head jtl-head-color">
+                <mfDefaultSorter by="type">Channel</mfDefaultSorter>
+              </th>
               <th scope="col" class="jtl-head jtl-head-color">
                 <mfDefaultSorter by="type">Type</mfDefaultSorter>
               </th>
@@ -29,7 +32,7 @@ <h5 class="modal-title" id="modal-basic-title">External notifications</h5>
             </thead>
             <tbody *ngIf="notifications.length === 0">
             <tr>
-              <td colspan="4" class="text-muted text-center">Nothing here yet! Add your first notification.</td>
+              <td colspan="5" class="text-muted text-center">Nothing here yet! Add your first notification.</td>
 
             </tr>
             </tbody>
@@ -39,12 +42,15 @@ <h5 class="modal-title" id="modal-basic-title">External notifications</h5>
                 {{_.name}}
               </td>
               <td>
-                {{_.type}}
+                {{_.channel}}
+              </td>
+              <td>
+                {{notificationConfig.notificationType.get(_.type)}}
               </td>
               <td class="ellipsis">
                 <span title={{_.url}}>{{_.url}}</span>
               </td>
-              <td><app-delete-external-notification [notificationInput]="{id: _.id, name: _.name}" [params]="params"></app-delete-external-notification></td>
+              <td><app-delete-external-notification [notificationInput]="{id: _.id, name: _.name}" [params]="params" class="float-end"></app-delete-external-notification></td>
             </tr>
             </tbody>
           </table>

diff --git a/src/app/scenario/external-notification/external-notification.component.ts b/src/app/scenario/external-notification/external-notification.component.ts
@@ -5,6 +5,7 @@ import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { ScenarioNotifications } from "../../items.service.model";
 import { ScenarioService } from "src/app/scenario.service";
 import { Observable } from "rxjs";
+import { notificationConfig } from "./notificationConfig";
 
 @Component({
   selector: "app-external-notification",
@@ -42,4 +43,5 @@ export class ExternalNotificationComponent implements OnInit {
     this.modalService.open(content, { ariaLabelledBy: "modal-basic-title", size: "lg" });
   }
 
+  protected readonly notificationConfig = notificationConfig;
 }
diff --git a/src/app/scenario/external-notification/notificationConfig.ts b/src/app/scenario/external-notification/notificationConfig.ts
@@ -0,0 +1,14 @@
+export const notificationConfig = {
+  notificationType: new Map([
+    ["report_detail", "Report generated"],
+    ["degradation", `Degradation of performance`]
+  ]),
+  channels: new Map([
+    ["MS Teams", {
+      key: "ms-teams",
+      helpUrl: "https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#add-an-incoming-webhook-to-a-teams-channel"
+    }],
+    ["GChat", { key: "gchat", helpUrl: "https://developers.google.com/chat/how-tos/webhooks#create_a_webhook" }],
+    ["Slack", { key: "slack", helpUrl: "https://api.slack.com/messaging/webhooks#getting_started" }]
+  ])
+};