From 9f6d81592c6c87aa89762e52935ccfffc2c6e030 Mon Sep 17 00:00:00 2001
From: Ludek <13610612+ludeknovy@users.noreply.github.com>
Date: Tue, 9 Feb 2021 22:36:12 +0100
Subject: [PATCH] external notifications (#86)

---
 src/app/administration/administration.css     | 10 ---
 .../api-token/api-keys.component.html         | 10 +--
 .../projects/administration.component.html    | 10 +--
 .../administration/users/users.component.html |  8 +-
 src/app/app.module.ts                         |  8 ++
 src/app/dashboard/dashboard.component.css     |  7 --
 src/app/dashboard/dashboard.component.html    | 10 +--
 src/app/items.service.model.ts                |  7 ++
 src/app/notification/notification-messages.ts |  8 ++
 src/app/scenario-api.service.ts               | 18 ++++-
 src/app/scenario.service.ts                   |  9 +++
 ...dd-new-external-notification.component.css |  0
 ...d-new-external-notification.component.html | 44 +++++++++++
 ...ew-external-notification.component.spec.ts | 29 +++++++
 ...add-new-external-notification.component.ts | 77 +++++++++++++++++++
 ...delete-external-notification.component.css |  0
 ...elete-external-notification.component.html | 25 ++++++
 ...te-external-notification.component.spec.ts | 29 +++++++
 .../delete-external-notification.component.ts | 58 ++++++++++++++
 .../external-notification.component.css       | 13 ++++
 .../external-notification.component.html      | 63 +++++++++++++++
 .../external-notification.component.spec.ts   | 35 +++++++++
 .../external-notification.component.ts        | 47 +++++++++++
 src/app/scenario/scenario.component.html      | 17 ++--
 src/app/scenario/scenario.component.scss      |  7 --
 src/app/scenario/scenario.component.spec.ts   |  4 +-
 src/app/scenario/scenario.component.ts        |  1 -
 src/styles.scss                               |  9 +++
 28 files changed, 507 insertions(+), 56 deletions(-)
 create mode 100644 src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.css
 create mode 100644 src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html
 create mode 100644 src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.spec.ts
 create mode 100644 src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts
 create mode 100644 src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.css
 create mode 100644 src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.html
 create mode 100644 src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.spec.ts
 create mode 100644 src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.ts
 create mode 100644 src/app/scenario/external-notification/external-notification.component.css
 create mode 100644 src/app/scenario/external-notification/external-notification.component.html
 create mode 100644 src/app/scenario/external-notification/external-notification.component.spec.ts
 create mode 100644 src/app/scenario/external-notification/external-notification.component.ts

diff --git a/src/app/administration/administration.css b/src/app/administration/administration.css
index e2b3bf6e..30922844 100644
--- a/src/app/administration/administration.css
+++ b/src/app/administration/administration.css
@@ -22,15 +22,6 @@ a {
   font-size: 12px;
 }
 
-.head {
-  font-size: 12px;
-  padding-bottom: 5px;
-  border-top: 0px;
-  width: 30rem;
-  height: 43px;
-  color: #343a40;
-}
-
 .card-body {
   padding: 0px;
 }
@@ -65,7 +56,6 @@ a {
 
 th {
   padding-left: 20px;
-  color: #888888c7;
 }
 
 td {
diff --git a/src/app/administration/api-token/api-keys.component.html b/src/app/administration/api-token/api-keys.component.html
index 641d2618..ed8527a8 100644
--- a/src/app/administration/api-token/api-keys.component.html
+++ b/src/app/administration/api-token/api-keys.component.html
@@ -15,11 +15,11 @@
                 <table class="table items">
                   <thead>
                     <tr>
-                      <th scope="col" class="head">token</th>
-                      <th scope="col" class="head">description</th>
-                      <th scope="col" class="head">created at</th>
-                      <th scope="col" class="head">created by</th>
-                      <th scope="col" class="head"></th>
+                      <th scope="col" class="jtl-head">token</th>
+                      <th scope="col" class="jtl-head">description</th>
+                      <th scope="col" class="jtl-head">created at</th>
+                      <th scope="col" class="jtl-head">created by</th>
+                      <th scope="col" class="jtl-head"></th>
                     </tr>
                   </thead>
                   <tbody>
diff --git a/src/app/administration/projects/administration.component.html b/src/app/administration/projects/administration.component.html
index 6b4f8235..4d4f717b 100644
--- a/src/app/administration/projects/administration.component.html
+++ b/src/app/administration/projects/administration.component.html
@@ -15,11 +15,11 @@
                 <table class="table items">
                   <thead>
                     <tr>
-                      <th scope="col" class="head">project name</th>
-                      <th scope="col" class="head">number of launches</th>
-                      <th scope="col" class="head">number of scenarios</th>
-                      <th scope="col" class="head">last run</th>
-                      <th scope="col" class="head"></th>
+                      <th scope="col" class="jtl-head">project name</th>
+                      <th scope="col" class="jtl-head">number of launches</th>
+                      <th scope="col" class="jtl-head">number of scenarios</th>
+                      <th scope="col" class="jtl-head">last run</th>
+                      <th scope="col" class="jtl-head"></th>
                     </tr>
                   </thead>
                   <tbody>
diff --git a/src/app/administration/users/users.component.html b/src/app/administration/users/users.component.html
index 5f5d4ebf..68842600 100644
--- a/src/app/administration/users/users.component.html
+++ b/src/app/administration/users/users.component.html
@@ -15,10 +15,10 @@
                   <table class="table items">
                     <thead>
                       <tr>
-                        <th scope="col" class="head">username</th>
-                        <th scope="col" class="head">create date</th>
-                        <th scope="col" class="head"># of tokens</th>
-                        <th scope="col" class="head"></th>
+                        <th scope="col" class="jtl-head">username</th>
+                        <th scope="col" class="jtl-head">create date</th>
+                        <th scope="col" class="jtl-head"># of tokens</th>
+                        <th scope="col" class="jtl-head"></th>
                       </tr>
                     </thead>
                     <tbody>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ceb6e19b..e544379c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -50,6 +50,11 @@ import { MyProfileComponent } from './administration/my-profile/my-profile.compo
 import { UsersComponent } from './administration/users/users.component';
 import { AddUserComponent } from './administration/users/add-user/add-user.component';
 import { DeleteUserComponent } from './administration/users/delete-user/delete-user.component';
+import { ExternalNotificationComponent } from './scenario/external-notification/external-notification.component';
+// tslint:disable-next-line:max-line-length
+import { AddNewExternalNotificationComponent } from './scenario/external-notification/add-new-external-notification/add-new-external-notification.component';
+// tslint:disable-next-line:max-line-length
+import { DeleteExternalNotificationComponent } from './scenario/external-notification/delete-external-notification/delete-external-notification.component';
 
 const appRoutes: Routes = [
   { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
@@ -122,6 +127,9 @@ const appRoutes: Routes = [
     UsersComponent,
     AddUserComponent,
     DeleteUserComponent,
+    ExternalNotificationComponent,
+    AddNewExternalNotificationComponent,
+    DeleteExternalNotificationComponent,
   ],
   imports: [
     RouterModule.forRoot(
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
index 6c4296e2..bf73a994 100644
--- a/src/app/dashboard/dashboard.component.css
+++ b/src/app/dashboard/dashboard.component.css
@@ -22,13 +22,6 @@ a {
   font-size: 12px;
 }
 
-.head {
-  font-size: 12px;
-  color: #888888c7;
-  border-top: 0px;
-  min-width: 8rem;
-}
-
 .recent-runs .card-body {
   padding-top: 0.2rem;
 }
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index ed0f551d..d1c166f7 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -72,11 +72,11 @@ <h6 class="card-header bg-transparent">Recent Test Runs</h6>
                 <table class="table items">
                   <thead>
                     <tr>
-                      <th scope="col" class="head">scenario</th>
-                      <th scope="col" class="head">project name</th>
-                      <th scope="col" class="head">environment</th>
-                      <th scope="col" class="head">start time</th>
-                      <th scope="col" class="head">status</th>
+                      <th scope="col" class="jtl-head">scenario</th>
+                      <th scope="col" class="jtl-head">project name</th>
+                      <th scope="col" class="jtl-head">environment</th>
+                      <th scope="col" class="jtl-head">start time</th>
+                      <th scope="col" class="jtl-head">status</th>
                     </tr>
                   </thead>
                   <tbody>
diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts
index 962b8348..f58c67ac 100644
--- a/src/app/items.service.model.ts
+++ b/src/app/items.service.model.ts
@@ -157,3 +157,10 @@ export interface LabelMaxVu {
     count: number;
   }];
 }
+
+export interface ScenarioNotifications {
+  id: string;
+  url: string;
+  type: string;
+}
+
diff --git a/src/app/notification/notification-messages.ts b/src/app/notification/notification-messages.ts
index d5542b73..821c7090 100644
--- a/src/app/notification/notification-messages.ts
+++ b/src/app/notification/notification-messages.ts
@@ -62,6 +62,14 @@ export class NotificationMessage {
     return this.statusCodeMessage(response, 'User has been deleted');
   }
 
+  deleteScenarioNotification(response) {
+    return this.statusCodeMessage(response, 'Notification has been deleted');
+  }
+
+  createScenarioNotification(response) {
+    return this.statusCodeMessage(response, 'Notification has been created');
+  }
+
   private statusCodeMessage(response, succesMessgae) {
     let message = { success: false, message: `Something went wrong` };
     if (response.status >= 200 && response.status < 300) {
diff --git a/src/app/scenario-api.service.ts b/src/app/scenario-api.service.ts
index 2aaf348c..120e1ae5 100644
--- a/src/app/scenario-api.service.ts
+++ b/src/app/scenario-api.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IScenarios } from './items.service.model';
+import {IScenarios, ScenarioNotifications} from './items.service.model';
 
 @Injectable({
   providedIn: 'root'
@@ -11,8 +11,7 @@ export class ScenarioApiService {
   private response = new BehaviorSubject<any>({});
   public response$ = this.response.asObservable();
 
-  constructor(private http: HttpClient) {
-  }
+  constructor(private http: HttpClient) {}
 
   updateScenario(projectName, scenarioName, body): Observable<{}> {
     return this.http.put(`projects/${projectName}/scenarios/${scenarioName}`, body, { observe: 'response'});
@@ -35,6 +34,19 @@ export class ScenarioApiService {
     return this.http.post(`projects/${projectName}/scenarios`, body, { observe: 'response'});
   }
 
+  fetchScenarioNotification(projectName, scenarioName): Observable<ScenarioNotifications[]> {
+    return this.http.get<ScenarioNotifications[]>(`projects/${projectName}/scenarios/${scenarioName}/notifications`);
+  }
+
+  deleteScenarioNotification(projectName, scenarioName, id): Observable<{}> {
+    return this.http.delete<{}>(`projects/${projectName}/scenarios/${scenarioName}/notifications/${id}`, { observe: 'response'});
+  }
+
+  createNewScenarioNotification(projectName, scenarioName, body): Observable<{}> {
+    return this.http.post(`projects/${projectName}/scenarios/${scenarioName}/notifications`, body, { observe: 'response' });
+
+  }
+
   setData(data) {
     this.response.next(data);
   }
diff --git a/src/app/scenario.service.ts b/src/app/scenario.service.ts
index 5ddeb6e1..c4ddf34f 100644
--- a/src/app/scenario.service.ts
+++ b/src/app/scenario.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, interval } from 'rxjs';
 import { scenarioHistoryGraphs } from './graphs/scenario-trends';
+import { ScenarioNotifications } from './items.service.model';
 import { ScenarioApiService } from './scenario-api.service';
 
 @Injectable({
@@ -12,6 +13,9 @@ export class ScenarioService {
   private trends = new BehaviorSubject<{}>({});
   public trends$ = this.trends.asObservable();
 
+  private notifications = new BehaviorSubject<ScenarioNotifications[]>([]);
+  public notifications$ = this.notifications.asObservable();
+
   constructor(
     private scenarioApiService: ScenarioApiService
   ) { }
@@ -22,4 +26,9 @@ export class ScenarioService {
       .subscribe(_ => this.trends.next(scenarioHistoryGraphs(_, projectName, scenarioName)));
   }
 
+  fetchScenarioNotifications(projectName, scenarioName) {
+    this.scenarioApiService.fetchScenarioNotification(projectName, scenarioName)
+      .subscribe(_ => this.notifications.next(_));
+  }
+
 }
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.css b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html
new file mode 100644
index 00000000..b7725801
--- /dev/null
+++ b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html
@@ -0,0 +1,44 @@
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">MS Teams Webhook</h4>
+    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <form [formGroup]="myform" (ngSubmit)="onSubmit()">
+    <div class="modal-body">
+      <div class="alert alert-primary" role="alert">
+        <i class="fas fa-info-circle"> </i>
+        Follow the instructions on how to set up <a href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#add-an-incoming-webhook-to-a-teams-channel">Incoming Webhook</a> for a channel.
+      </div>
+      <p class="text-secondary"></p>
+      <div class="input-group mb-3">
+        <div class="input-group-prepend">
+          <span class="input-group-text" id="inputGroup-sizing-default">Webhook Url</span>
+        </div>
+        <input type="input" class="form-control" formControlName="url" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+      </div>
+      <div class="input-group mb-3">
+        <div class="input-group-prepend">
+          <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
+        </div>
+        <input type="input" class="form-control" formControlName="name" aria-label="Default" aria-describedby="inputGroup-sizing-default">
+      </div>
+      <div class="form-control-feedback" *ngIf="url.errors && (url.dirty || url.touched)">
+        <p class="alert alert-danger" *ngIf="url.errors.required">Webhook Url required</p>
+        <p class="alert alert-danger" *ngIf="url.errors.maxlength">The url is too long.</p>
+      </div>
+      <div class="form-control-feedback" *ngIf="name.errors && (name.dirty || name.touched)">
+        <p class="alert alert-danger" *ngIf="name.errors.required">Name required</p>
+        <p class="alert alert-danger" *ngIf="name.errors.maxlength">Name is too long.</p>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </div>
+  </form>
+
+</ng-template>
+
+<button class="notification btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-bell"></i> new MS Teams notification</button>
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.spec.ts b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.spec.ts
new file mode 100644
index 00000000..d205206a
--- /dev/null
+++ b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.spec.ts
@@ -0,0 +1,29 @@
+import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { AddNewExternalNotificationComponent } from './add-new-external-notification.component';
+
+describe('AddNewExternalNotificationComponent', () => {
+  let component: AddNewExternalNotificationComponent;
+  let fixture: ComponentFixture<AddNewExternalNotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddNewExternalNotificationComponent ],
+      imports: [RouterTestingModule, ReactiveFormsModule, HttpClientModule],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddNewExternalNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts
new file mode 100644
index 00000000..ec563007
--- /dev/null
+++ b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts
@@ -0,0 +1,77 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, Validators, FormGroup } from '@angular/forms';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { of } from 'rxjs';
+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';
+
+@Component({
+  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 {
+
+  myform: FormGroup;
+  url;
+  name;
+  modal: NgbActiveModal;
+  @Input() params;
+
+  constructor(
+    private modalService: NgbModal,
+    private notification: NotificationMessage,
+    private scenarioApiService: ScenarioApiService,
+    private scenarioService: ScenarioService,
+  ) { }
+
+  ngOnInit() {
+    this.createFormControls();
+    this.createForm();
+  }
+
+  open(content) {
+    this.modal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
+  }
+
+  createFormControls() {
+    this.url = new FormControl('', [
+      Validators.maxLength(400),
+      Validators.required
+    ]);
+    this.name = new FormControl('', [
+      Validators.maxLength(100),
+      Validators.required
+    ]);
+  }
+
+  createForm() {
+    this.myform = new FormGroup({
+      url: this.url,
+      name: this.name
+    });
+  }
+
+  onSubmit() {
+    if (this.myform.valid) {
+      const { projectName, scenarioName } = this.params;
+      const body = {
+        ...this.myform.value,
+        type: 'ms-teams'
+      };
+
+      this.scenarioApiService.createNewScenarioNotification(projectName, scenarioName, body)
+        .pipe(catchError(r => of(r)))
+        .subscribe(_ => {
+          const message = this.notification.createScenarioNotification(_);
+          this.scenarioApiService.setData(message);
+          this.scenarioService.fetchScenarioNotifications(projectName, scenarioName);
+        });
+      this.myform.reset();
+      this.modal.close();
+    }
+  }
+
+}
diff --git a/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.css b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.html b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.html
new file mode 100644
index 00000000..c233f3ab
--- /dev/null
+++ b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.html
@@ -0,0 +1,25 @@
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Delete Notification</h4>
+    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <form [formGroup]="myform" (ngSubmit)="onSubmit()">
+    <div class="modal-body">
+
+      <div class="alert alert-primary" role="alert">
+        Are you sure you want to delete <strong>{{notificationInput.name}} </strong> notification?
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-secondary" (click)="modal.dismiss('Cross click')">Close</button>
+      <button type="submit" class="btn btn-danger float-left">Delete</button>
+    </div>
+  </form>
+
+</ng-template>
+
+<button class="btn btn-link btn-sm text-danger float-right" (click)="open(content)">
+    <i class="fas fa-trash-alt"></i>
+</button>
diff --git a/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.spec.ts b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.spec.ts
new file mode 100644
index 00000000..7c08f6d9
--- /dev/null
+++ b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.spec.ts
@@ -0,0 +1,29 @@
+import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DeleteExternalNotificationComponent } from './delete-external-notification.component';
+
+describe('DeleteExternalNotificationComponent', () => {
+  let component: DeleteExternalNotificationComponent;
+  let fixture: ComponentFixture<DeleteExternalNotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeleteExternalNotificationComponent ],
+      imports: [RouterTestingModule, ReactiveFormsModule, HttpClientModule],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteExternalNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.ts b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.ts
new file mode 100644
index 00000000..789087ee
--- /dev/null
+++ b/src/app/scenario/external-notification/delete-external-notification/delete-external-notification.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { of } from 'rxjs';
+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';
+
+@Component({
+  selector: 'app-delete-external-notification',
+  templateUrl: './delete-external-notification.component.html',
+  styleUrls: ['./delete-external-notification.component.css']
+})
+export class DeleteExternalNotificationComponent implements OnInit {
+
+  myform: FormGroup;
+  modal: NgbActiveModal;
+  @Input() notificationInput: { id: string, name: string };
+  @Input() params: { projectName: string, scenarioName: string };
+
+  constructor(
+    private modalService: NgbModal,
+    private scenarioApiService: ScenarioApiService,
+    private notification: NotificationMessage,
+    private scenarioService: ScenarioService
+  ) { }
+
+  ngOnInit(): void {
+    this.createForm();
+  }
+
+
+  createForm() {
+    this.myform = new FormGroup({});
+  }
+
+  open(content) {
+    this.modal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
+  }
+
+  onSubmit() {
+    if (this.myform.valid) {
+      const { projectName, scenarioName } = this.params;
+      this.scenarioApiService.deleteScenarioNotification(projectName, scenarioName, this.notificationInput.id)
+        .pipe(catchError(r => of(r)))
+        .subscribe(_ => {
+          const message = this.notification.deleteScenarioNotification(_);
+          this.scenarioApiService.setData(message);
+          this.scenarioService.fetchScenarioNotifications(projectName, scenarioName);
+        });
+      this.myform.reset();
+      this.modal.close();
+    }
+  }
+
+
+}
diff --git a/src/app/scenario/external-notification/external-notification.component.css b/src/app/scenario/external-notification/external-notification.component.css
new file mode 100644
index 00000000..1364fa13
--- /dev/null
+++ b/src/app/scenario/external-notification/external-notification.component.css
@@ -0,0 +1,13 @@
+.btn {
+  margin-right: 15px;
+}
+
+.notif-control-panel {
+  margin-bottom: 10px;
+}
+.ellipsis {
+  max-width: 15rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/src/app/scenario/external-notification/external-notification.component.html b/src/app/scenario/external-notification/external-notification.component.html
new file mode 100644
index 00000000..029bacd9
--- /dev/null
+++ b/src/app/scenario/external-notification/external-notification.component.html
@@ -0,0 +1,63 @@
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">External notifications</h4>
+    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <form [formGroup]="myform" >
+    <div class="modal-body">
+      <div class="notif-control-panel">
+        <app-add-new-external-notification [params]="params"></app-add-new-external-notification>
+      </div>
+        <div class="responsive-table" *ngIf="notifications$ | async; let notifications">
+          <table class="table items" [mfData]="notifications" #mf="mfDataTable">
+            <thead>
+            <tr>
+              <th scope="col" class="jtl-head">
+                <mfDefaultSorter by="name">Name</mfDefaultSorter>
+              </th>
+              <th scope="col" class="jtl-head">
+                <mfDefaultSorter by="type">Type</mfDefaultSorter>
+              </th>
+              <th scope="col" class="jtl-head">
+                <mfDefaultSorter by="url">URL</mfDefaultSorter>
+              </th>
+              <th class="jtl-head">
+              </th>
+            </tr>
+            </thead>
+            <tbody *ngIf="notifications.length === 0">
+            <tr>
+              <td></td>
+              <td>
+                <div class="empty-table">No data found.</div>
+              </td>
+              <td></td>
+            </tr>
+            </tbody>
+            <tbody *ngIf="notifications.length > 0">
+            <tr *ngFor="let _ of mf.data">
+              <td>
+                {{_.name}}
+              </td>
+              <td>
+                {{_.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>
+            </tr>
+            </tbody>
+          </table>
+
+          </div>
+        </div>
+<!--    <div class="modal-footer">
+    </div>-->
+  </form>
+
+</ng-template>
+
+<button class="notification btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-bell"></i> notification</button>
diff --git a/src/app/scenario/external-notification/external-notification.component.spec.ts b/src/app/scenario/external-notification/external-notification.component.spec.ts
new file mode 100644
index 00000000..7210b00a
--- /dev/null
+++ b/src/app/scenario/external-notification/external-notification.component.spec.ts
@@ -0,0 +1,35 @@
+import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DataTableModule } from '@rushvora/ng-datatable';
+import { AddNewExternalNotificationComponent } from './add-new-external-notification/add-new-external-notification.component';
+import { DeleteExternalNotificationComponent } from './delete-external-notification/delete-external-notification.component';
+
+import { ExternalNotificationComponent } from './external-notification.component';
+
+describe('ExternalNotificationComponent', () => {
+  let component: ExternalNotificationComponent;
+  let fixture: ComponentFixture<ExternalNotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ExternalNotificationComponent,
+        AddNewExternalNotificationComponent,
+        DeleteExternalNotificationComponent],
+      imports: [RouterTestingModule, ReactiveFormsModule, HttpClientModule, DataTableModule],
+
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExternalNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/scenario/external-notification/external-notification.component.ts b/src/app/scenario/external-notification/external-notification.component.ts
new file mode 100644
index 00000000..99fbaf2b
--- /dev/null
+++ b/src/app/scenario/external-notification/external-notification.component.ts
@@ -0,0 +1,47 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {ActivatedRoute} from '@angular/router';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {ScenarioApiService} from '../../scenario-api.service';
+import {ScenarioNotifications} from '../../items.service.model';
+import { ScenarioService } from 'src/app/scenario.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-external-notification',
+  templateUrl: './external-notification.component.html',
+  styleUrls: ['./external-notification.component.css']
+})
+export class ExternalNotificationComponent implements OnInit {
+
+  myform: FormGroup;
+  params;
+  notifications$: Observable<ScenarioNotifications[]>;
+
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private modalService: NgbModal,
+    private scenarioApiService: ScenarioApiService,
+    private scenarioService: ScenarioService
+  ) {
+    this.notifications$ = this.scenarioService.notifications$;
+
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(_ => this.params = _);
+    this.createForm();
+    this.scenarioService.fetchScenarioNotifications(this.params.projectName, this.params.scenarioName);
+  }
+
+  createForm() {
+    this.myform = new FormGroup({});
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'lg' });
+  }
+
+}
diff --git a/src/app/scenario/scenario.component.html b/src/app/scenario/scenario.component.html
index b363bafb..88eabff4 100644
--- a/src/app/scenario/scenario.component.html
+++ b/src/app/scenario/scenario.component.html
@@ -8,6 +8,7 @@
   <div>
     <app-add-new-item-modal></app-add-new-item-modal>
     <app-edit-scenario [scenarioData]="items$"></app-edit-scenario>
+    <app-external-notification></app-external-notification>
     <app-delete-scenario [scenarioData]="params"></app-delete-scenario>
   </div>
 
@@ -60,28 +61,28 @@ <h6 class="card-header bg-transparent">Test Runs
               <table class="table items" [mfData]="items.data" #mf="mfDataTable">
                 <thead>
                   <tr>
-                    <th scope="col" class="head vu">
+                    <th scope="col" class="jtl-head vu">
                       <mfDefaultSorter by="maxVu">virtual users</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head duration">
+                    <th scope="col" class="jtl-head duration">
                       <mfDefaultSorter by="duration">duration</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head environment">
+                    <th scope="col" class="jtl-head environment">
                       <mfDefaultSorter by="environment">environment</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head">
+                    <th scope="col" class="jtl-head">
                       <mfDefaultSorter by="note">note</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head start-time">
+                    <th scope="col" class="jtl-head start-time">
                       <mfDefaultSorter by="start_time">start time</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head hostname">
+                    <th scope="col" class="jtl-head hostname">
                       <mfDefaultSorter by="hostname">hostname</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head status">
+                    <th scope="col" class="jtl-head status">
                       <mfDefaultSorter by="status">status</mfDefaultSorter>
                     </th>
-                    <th scope="col" class="head base">
+                    <th scope="col" class="jtl-head base">
                       <mfDefaultSorter by="base"></mfDefaultSorter>
                     </th>
                   </tr>
diff --git a/src/app/scenario/scenario.component.scss b/src/app/scenario/scenario.component.scss
index 40237a4b..cce3b1e7 100644
--- a/src/app/scenario/scenario.component.scss
+++ b/src/app/scenario/scenario.component.scss
@@ -26,13 +26,6 @@ a {
   font-size: 12px;
 }
 
-.head  {
-  font-size: 12px;
-  color: #888888c7;
-  border-top: 0px;
-  border-bottom: 2px solid #a5a2a247;
-}
-
 .vu, .duration, .status, .base {
   max-width: 5rem;
 }
diff --git a/src/app/scenario/scenario.component.spec.ts b/src/app/scenario/scenario.component.spec.ts
index 99bce0c2..fdf2d0a4 100644
--- a/src/app/scenario/scenario.component.spec.ts
+++ b/src/app/scenario/scenario.component.spec.ts
@@ -13,6 +13,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { DataTableModule } from '@rushvora/ng-datatable';
+import { ExternalNotificationComponent } from './external-notification/external-notification.component';
 
 describe('ScenarioComponent', () => {
   let component: ScenarioComponent;
@@ -27,7 +28,8 @@ describe('ScenarioComponent', () => {
         EditScenarioComponent,
         DeleteScenarioComponent,
         ControlPanelComponent,
-        ScenarioGraphComponent
+        ScenarioGraphComponent,
+        ExternalNotificationComponent,
       ],
       imports: [
         NgxSpinnerModule,
diff --git a/src/app/scenario/scenario.component.ts b/src/app/scenario/scenario.component.ts
index f88675c7..39683ec0 100644
--- a/src/app/scenario/scenario.component.ts
+++ b/src/app/scenario/scenario.component.ts
@@ -3,7 +3,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { of, Observable, Subscription } from 'rxjs';
 import { switchMap, catchError } from 'rxjs/operators';
 import { ProjectOverview, Items } from '../items.service.model';
-import { ProjectService } from '../project.service';
 import { ItemsService } from '../items.service';
 import { SharedMainBarService } from '../shared-main-bar.service';
 import { ScenarioService } from '../scenario.service';
diff --git a/src/styles.scss b/src/styles.scss
index f721deb5..666203c9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -93,3 +93,12 @@ a:hover {
 .icon-primary:hover {
   color: #105196
 }
+
+.jtl-head {
+  font-size: 12px;
+  padding-bottom: 5px;
+  border-top: 0 !important;
+  width: 30rem;
+  height: 43px;
+  color: #54545491;
+}