From 6028c14a841c5fdb2fbf5a662d83d18bf3d9d682 Mon Sep 17 00:00:00 2001
From: "vladyslav.pavlenko" <vladyslav.pavlenko@cloudera.com>
Date: Thu, 6 Apr 2023 13:28:04 +0300
Subject: [PATCH 1/2] [CYB-143] Delete button removes incorrect item on UI

* Fixed issue with delete chains button.
---
 .../chain-list-page.actions.ts                |  20 +++
 .../chain-list-page.component.html            | 120 +++++++++---------
 .../chain-list-page.component.ts              |  44 ++++---
 .../chain-list-page.effects.ts                |  44 ++++---
 .../chain-list-page.reducers.ts               |  49 ++++++-
 5 files changed, 173 insertions(+), 104 deletions(-)

diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts
index 1561fd000..dae2adce8 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts
@@ -18,11 +18,14 @@ export const LOAD_CHAINS = '[Chain List] load all start';
 export const LOAD_CHAINS_SUCCESS = '[Chain List] load all success';
 export const LOAD_CHAINS_FAIL = '[Chain List] load all fail';
 export const DELETE_CHAIN = '[Chain List] delete item';
+export const DELETE_CHAIN_SELECT = '[Chain List] prepare delete item';
 export const DELETE_CHAIN_SUCCESS = '[Chain List] delete item success';
 export const DELETE_CHAIN_FAIL = '[Chain List] delete item fail';
 export const CREATE_CHAIN = '[Chain List] create item';
 export const SHOW_CREATE_MODAL = '[Chain List] show create modal';
 export const HIDE_CREATE_MODAL = '[Chain List] hide create modal';
+export const SHOW_DELETE_MODAL = '[Chain List] show delete modal';
+export const HIDE_DELETE_MODAL = '[Chain List] hide delete modal';
 export const CREATE_CHAIN_SUCCESS = '[Chain List] create item success';
 export const CREATE_CHAIN_FAIL = '[Chain List] create item fail';
 
@@ -49,6 +52,10 @@ export class DeleteChainAction implements Action {
   readonly type = DELETE_CHAIN;
   constructor(public chainId: string, public chainName: string) {}
 }
+export class SelectDeleteChainAction implements Action {
+  readonly type = DELETE_CHAIN_SELECT;
+  constructor(public chainId: string) {}
+}
 
 export class DeleteChainSuccessAction implements Action {
   readonly type = DELETE_CHAIN_SUCCESS;
@@ -75,6 +82,16 @@ export class HideCreateModalAction implements Action {
     constructor() {}
 }
 
+export class ShowDeleteModalAction implements Action {
+  readonly type = SHOW_DELETE_MODAL;
+  constructor() {}
+}
+
+export class HideDeleteModalAction implements Action {
+  readonly type = HIDE_DELETE_MODAL;
+  constructor() {}
+}
+
 export class CreateChainSuccessAction implements Action {
     readonly type = CREATE_CHAIN_SUCCESS;
     constructor(public chain: ChainModel) {}
@@ -88,6 +105,9 @@ export class CreateChainFailAction implements Action {
 export type ChainListAction = LoadChainsAction
   | LoadChainsSuccessAction
   | LoadChainsFailAction
+  | ShowDeleteModalAction
+  | HideDeleteModalAction
+  | SelectDeleteChainAction
   | DeleteChainAction
   | DeleteChainSuccessAction
   | DeleteChainFailAction
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
index f38798839..9340ffd15 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
@@ -11,76 +11,74 @@
   -->
 
 <ng-template #AddButton>
-    <button
-            class="add-new-chain-button"
-            nz-tooltip="Add New Chain ToolTip"
-            nzTooltipTitle="Add New Chain"
-            nzTooltipPlacement="left"
-            nz-button
-            data-qe-id="add-chain-btn"
-            nzType="primary"
-            (click)="showAddChainModal()"
-    >
-        <i nz-icon nzType="plus" nzTheme="outline"></i>
-    </button>
+  <button
+    class="add-new-chain-button"
+    nz-tooltip="Add New Chain ToolTip"
+    nzTooltipTitle="Add New Chain"
+    nzTooltipPlacement="left"
+    nz-button
+    data-qe-id="add-chain-btn"
+    nzType="primary"
+    (click)="showAddChainModal()"
+  >
+    <i nz-icon nzType="plus" nzTheme="outline"></i>
+  </button>
 </ng-template>
 <nz-modal
-        [nzVisible]="isChainCreateModalVisible$ | async"
-        nzTitle="Add Chain Name"
-        (nzOnCancel)="handleCancelChainModal()"
-        (nzOnOk)="pushChain()"
-        [nzOkDisabled]="!newChainForm.valid"
-        [nzOkLoading]="isOkLoading$ | async"
+  [nzVisible]="isChainCreateModalVisible$ | async"
+  nzTitle="Add Chain Name"
+  (nzOnCancel)="handleCancelChainModal()"
+  (nzOnOk)="pushChain()"
+  [nzOkDisabled]="!newChainForm.valid"
+  [nzOkLoading]="isOkLoading$ | async"
 >
-    <form nz-form *nzModalContent [formGroup]="newChainForm"  (ngSubmit)='pushChain()' [nzLayout]="'vertical'">
-        <nz-form-item>
-            <nz-form-label>Chain name:</nz-form-label>
-            <nz-form-control nzErrorTip="Chain Name is Required with at least 3 characters" nzSpan="14">
-                <input nz-input data-qe-id="chain-name" formControlName="chainName" type="text" id="chainName"
-                       placeholder="Parser Chain Name">
-            </nz-form-control>
-        </nz-form-item>
-    </form>
+  <form nz-form *nzModalContent [formGroup]="newChainForm" (ngSubmit)='pushChain()' [nzLayout]="'vertical'">
+    <nz-form-item>
+      <nz-form-label>Chain name:</nz-form-label>
+      <nz-form-control nzErrorTip="Chain Name is Required with at least 3 characters" nzSpan="14">
+        <input nz-input data-qe-id="chain-name" formControlName="chainName" type="text" id="chainName"
+               placeholder="Parser Chain Name">
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
+<nz-modal
+  *ngIf="deleteChainItem$ | async as deleteChainItem"
+  nzModalType="confirm"
+  [nzVisible]="isChainDeleteModalVisible$ | async"
+  nzTitle="Delete Chain Name"
+  (nzOnCancel)="handleCancelDeleteModal()"
+  (nzOnOk)="deleteChain(deleteChainItem.id, deleteChainItem.name)"
+  [nzOkLoading]="isOkLoading$ | async">
+  <p *nzModalContent>Are you sure you want to delete the chain {{deleteChainItem.name}}?</p>
 </nz-modal>
 
 <nz-card nzTitle="Parser Chains" [nzExtra]="AddButton">
-    <nz-table #basicTable [nzData]="$any(chainDataSorted$ | async)" [nzShowPagination]="false">
-        <thead>
-        <tr>
-            <th nzShowSort nzSortKey="name">Name</th>
-            <th>Action</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let data of basicTable.data">
-            <td>{{ data.name }}</td>
-            <td>
-                <a routerLink="{{ 'chains/' + data.id }}" class="chain-open-btn"><i nz-icon nzType="right-square"
-                                                                                    nzTheme="fill"></i>Open</a>
-                <nz-divider nzType="vertical"></nz-divider>
-                <span nz-tooltip nzTitle="Remove" nzPlacement="right">
+  <nz-table #basicTable [nzData]="$any(chainDataSorted$ | async)" [nzShowPagination]="false">
+    <thead>
+    <tr>
+      <th nzShowSort nzSortKey="name">Name</th>
+      <th>Action</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of basicTable.data">
+      <td>{{ data.name }}</td>
+      <td>
+        <a routerLink="{{ 'chains/' + data.id }}" class="chain-open-btn"><i nz-icon nzType="right-square"
+                                                                            nzTheme="fill"></i>Open</a>
+        <nz-divider nzType="vertical"></nz-divider>
+        <span nz-tooltip="Remove">
             <a
-                    class="chain-delete-btn"
-                    nz-popconfirm
-                    nzTitle="Are you Sure to Delete?"
-                    (click)="showDeleteModal()"
-                    nzOkType="primary"
-                    nzPlacement="right"
+              class="chain-delete-btn"
+              title="Are you Sure to Delete?"
+              (click)="showDeleteModal(data.id)"
             >
               <i nz-icon nzType="delete" nzTheme="fill"></i> <span>Delete</span>
           </a>
         </span>
-                <nz-modal
-                        nzModalType="confirm"
-                        [(nzVisible)]="isVisibleDeleteModal"
-                        nzTitle="Delete Chain Name"
-                        (nzOnCancel)="handleCancelDeleteModal()"
-                        (nzOnOk)="deleteChain(data.id, data.name)"
-                        [nzOkLoading]="isOkLoading$ | async">
-                    <p *nzModalContent>Are you sure you want to delete the chain '{{data.name}}'?</p>
-                </nz-modal>
-            </td>
-        </tr>
-        </tbody>
-    </nz-table>
+      </td>
+    </tr>
+    </tbody>
+  </nz-table>
 </nz-card>
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.ts
index 0325757e3..958b671ff 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.ts
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.ts
@@ -10,22 +10,23 @@
  * limitations governing your use of the file.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { select, Store } from '@ngrx/store';
-import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {ActivatedRoute} from '@angular/router';
+import {select, Store} from '@ngrx/store';
+import {BehaviorSubject, combineLatest, Observable, of} from 'rxjs';
+import {switchMap, take} from 'rxjs/operators';
 
-import { LoadChainsAction } from './chain-list-page.actions';
 import * as fromActions from './chain-list-page.actions';
+import {LoadChainsAction} from './chain-list-page.actions';
 import {
   ChainListPageState,
   getChains,
-  getCreateModalVisible,
+  getCreateModalVisible, getDeleteChain,
+  getDeleteModalVisible,
   getLoading,
 } from './chain-list-page.reducers';
-import { ChainModel, ChainOperationalModel } from './chain.model';
+import {ChainModel, ChainOperationalModel} from './chain.model';
 import {NzMessageService} from "ng-zorro-antd/message";
 
 @Component({
@@ -35,12 +36,13 @@ import {NzMessageService} from "ng-zorro-antd/message";
 })
 export class ChainListPageComponent implements OnInit {
   isChainCreateModalVisible$: Observable<boolean>;
-  isVisibleDeleteModal: boolean = false;
   isOkLoading$: Observable<boolean>;
   chains$: Observable<ChainModel[]>;
+  isChainDeleteModalVisible$: Observable<boolean>;
+  deleteChainItem$: Observable<ChainModel>;
   totalRecords = 200;
   chainDataSorted$: Observable<ChainModel[]>;
-  sortDescription$: BehaviorSubject<{key: string, value: string}> = new BehaviorSubject({ key: 'name', value: '' });
+  sortDescription$: BehaviorSubject<{ key: string, value: string }> = new BehaviorSubject({key: 'name', value: ''});
   newChainForm: FormGroup;
 
   constructor(
@@ -49,18 +51,18 @@ export class ChainListPageComponent implements OnInit {
     private route: ActivatedRoute,
     private messageService: NzMessageService,
   ) {
-    this.route.queryParams.subscribe(() => {
-      store.dispatch(new LoadChainsAction());
-      this.chains$ = store.pipe(select(getChains));
-      this.isOkLoading$ = store.pipe(select(getLoading));
-      this.isChainCreateModalVisible$ = store.pipe(select(getCreateModalVisible));
-    });
+    store.dispatch(new LoadChainsAction());
+    this.chains$ = store.pipe(select(getChains));
+    this.isOkLoading$ = store.pipe(select(getLoading));
+    this.isChainCreateModalVisible$ = store.pipe(select(getCreateModalVisible));
+    this.isChainDeleteModalVisible$ = store.pipe(select(getDeleteModalVisible));
+    this.deleteChainItem$ = this.store.pipe(select(getDeleteChain));
 
     this.chainDataSorted$ = combineLatest([
       this.chains$,
       this.sortDescription$
     ]).pipe(
-      switchMap(([ chains, sortDescription ]) => this.sortTable(chains, sortDescription))
+      switchMap(([chains, sortDescription]) => this.sortTable(chains, sortDescription))
     );
   }
 
@@ -72,8 +74,8 @@ export class ChainListPageComponent implements OnInit {
     this.store.dispatch(new fromActions.ShowCreateModalAction());
   }
 
-  showDeleteModal(): void {
-    this.isVisibleDeleteModal = true;
+  showDeleteModal(id): void {
+    this.store.dispatch(new fromActions.SelectDeleteChainAction(id));
   }
 
   pushChain(): void {
@@ -101,7 +103,7 @@ export class ChainListPageComponent implements OnInit {
   }
 
   handleCancelDeleteModal(): void {
-    this.isVisibleDeleteModal = false;
+    this.store.dispatch(new fromActions.HideDeleteModalAction());
   }
 
   sortTable(data: ChainModel[], sortDescription: any): Observable<ChainModel[]> {
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.effects.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.effects.ts
index 7edda4918..89ef7bdf4 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.effects.ts
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.effects.ts
@@ -10,16 +10,16 @@
  * limitations governing your use of the file.
  */
 
-import { Injectable } from '@angular/core';
-import { Actions, createEffect, Effect, ofType } from '@ngrx/effects';
-import { Action } from '@ngrx/store';
-import { NzMessageService } from 'ng-zorro-antd/message';
-import { Observable, of } from 'rxjs';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {Actions, createEffect, Effect, ofType} from '@ngrx/effects';
+import {Action} from '@ngrx/store';
+import {NzMessageService} from 'ng-zorro-antd/message';
+import {Observable, of} from 'rxjs';
+import {catchError, map, switchMap} from 'rxjs/operators';
 
-import { ChainListPageService } from '../services/chain-list-page.service';
+import {ChainListPageService} from '../services/chain-list-page.service';
 import * as fromActions from './chain-list-page.actions';
-import { ChainModel } from './chain.model';
+import {ChainModel} from './chain.model';
 
 @Injectable()
 export class ChainListEffects {
@@ -27,7 +27,8 @@ export class ChainListEffects {
     private actions$: Actions,
     private messageService: NzMessageService,
     private chainListService: ChainListPageService
-  ) { }
+  ) {
+  }
 
   loadChains$: Observable<Action> = createEffect(() => this.actions$.pipe(
     ofType(fromActions.LOAD_CHAINS),
@@ -63,14 +64,27 @@ export class ChainListEffects {
   ));
 
   hideCreateModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
-      ofType(
-          fromActions.CREATE_CHAIN_SUCCESS,
-          fromActions.CREATE_CHAIN_FAIL
-      ),
-      map(() => new fromActions.HideCreateModalAction())
+    ofType(
+      fromActions.CREATE_CHAIN_SUCCESS,
+      fromActions.CREATE_CHAIN_FAIL
+    ),
+    map(() => new fromActions.HideCreateModalAction())
   ))
+  hideDeleteModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
+    ofType(
+      fromActions.DELETE_CHAIN_SUCCESS,
+      fromActions.DELETE_CHAIN_FAIL
+    ),
+    map(() => new fromActions.HideDeleteModalAction())
+  ))
+
+  showDeleteModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
+      ofType(fromActions.DELETE_CHAIN_SELECT),
+      map(() => new fromActions.ShowDeleteModalAction())
+    ),
+  )
 
-  deleteChain$: Observable<Action> = createEffect(()=> this.actions$.pipe(
+  deleteChain$: Observable<Action> = createEffect(() => this.actions$.pipe(
     ofType(fromActions.DELETE_CHAIN),
     switchMap((action: fromActions.DeleteChainAction) => {
       return this.chainListService.deleteChain(action.chainId)
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.reducers.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.reducers.ts
index 7e8caba2d..1d493d8cd 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.reducers.ts
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.reducers.ts
@@ -10,14 +10,16 @@
  * limitations governing your use of the file.
  */
 
-import { createSelector } from '@ngrx/store';
+import {createSelector} from '@ngrx/store';
 
 import * as chainListPageActions from './chain-list-page.actions';
-import { ChainModel } from './chain.model';
+import {ChainModel} from './chain.model';
 
 export interface ChainListPageState {
   loading: boolean;
   createModalVisible: boolean;
+  deleteModalVisible: boolean;
+  deleteItem: ChainModel;
   error: string;
   items: ChainModel[];
 }
@@ -25,6 +27,8 @@ export interface ChainListPageState {
 export const initialState: ChainListPageState = {
   loading: false,
   createModalVisible: false,
+  deleteModalVisible: false,
+  deleteItem: null,
   items: [],
   error: ''
 };
@@ -74,6 +78,19 @@ export function reducer(
         createModalVisible: false,
       }
     }
+    case chainListPageActions.SHOW_DELETE_MODAL: {
+      return {
+        ...state,
+        deleteModalVisible: true,
+      }
+    }
+    case chainListPageActions.HIDE_DELETE_MODAL: {
+      return {
+        ...state,
+        deleteModalVisible: false,
+        items: state.items.map(chainItem => ({...chainItem, selected: false}))
+      }
+    }
     case chainListPageActions.CREATE_CHAIN_SUCCESS: {
       return {
         ...state,
@@ -88,6 +105,12 @@ export function reducer(
         loading: false,
       };
     }
+    case chainListPageActions.DELETE_CHAIN_SELECT: {
+      return {
+        ...state,
+        deleteItem: state.items.find(chainItem => chainItem.id === action.chainId)
+      };
+    }
     case chainListPageActions.DELETE_CHAIN: {
       return {
         ...state,
@@ -98,7 +121,8 @@ export function reducer(
       return {
         ...state,
         loading: false,
-        items: state.items.filter(chainItem => chainItem.id !== action.chainId)
+        items: state.items.filter(chainItem => chainItem.id !== action.chainId),
+        deleteItem: null,
       };
     }
     case chainListPageActions.DELETE_CHAIN_FAIL: {
@@ -106,6 +130,7 @@ export function reducer(
         ...state,
         error: action.error.message,
         loading: false,
+        deleteItem: null,
       };
     }
     default: {
@@ -124,11 +149,21 @@ export const getChains = createSelector(
 );
 
 export const getLoading = createSelector(
-    getChainListPageState,
-    (state: ChainListPageState) => state.loading
+  getChainListPageState,
+  (state: ChainListPageState) => state.loading
 );
 
 export const getCreateModalVisible = createSelector(
-    getChainListPageState,
-    (state: ChainListPageState) => state.createModalVisible
+  getChainListPageState,
+  (state: ChainListPageState) => state.createModalVisible
+);
+
+export const getDeleteModalVisible = createSelector(
+  getChainListPageState,
+  (state: ChainListPageState) => state.deleteModalVisible
+);
+
+export const getDeleteChain = createSelector(
+  getChainListPageState,
+  (state: ChainListPageState) => state.deleteItem
 );

From c0bf6b3050970688bbbd3845b03321b109d37075 Mon Sep 17 00:00:00 2001
From: "vladyslav.pavlenko" <vladyslav.pavlenko@cloudera.com>
Date: Tue, 16 May 2023 12:42:13 +0300
Subject: [PATCH 2/2] [CYB-143] Delete button removes incorrect item on UI

* Changed the structure of the modal window for removing chains.
---
 .../chain-list-page.component.html             | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
index 9340ffd15..717c1111c 100644
--- a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
@@ -44,13 +44,19 @@
 </nz-modal>
 <nz-modal
   *ngIf="deleteChainItem$ | async as deleteChainItem"
-  nzModalType="confirm"
   [nzVisible]="isChainDeleteModalVisible$ | async"
-  nzTitle="Delete Chain Name"
-  (nzOnCancel)="handleCancelDeleteModal()"
-  (nzOnOk)="deleteChain(deleteChainItem.id, deleteChainItem.name)"
-  [nzOkLoading]="isOkLoading$ | async">
-  <p *nzModalContent>Are you sure you want to delete the chain {{deleteChainItem.name}}?</p>
+  [nzTitle]="modalTitle"
+  [nzContent]="modalContent"
+  [nzFooter]="modalFooter"
+  (nzOnCancel)="handleCancelDeleteModal()">
+  <ng-template #modalTitle>Delete Chain Name</ng-template>
+  <ng-template #modalContent>
+    <p>Are you sure you want to delete the chain <b>{{deleteChainItem.name}}</b>?</p>
+  </ng-template>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="handleCancelDeleteModal()">Cancel</button>
+    <button nz-button nzType="primary" (click)="deleteChain(deleteChainItem.id, deleteChainItem.name)" [nzLoading]="isOkLoading$ | async">Delete</button>
+  </ng-template>
 </nz-modal>
 
 <nz-card nzTitle="Parser Chains" [nzExtra]="AddButton">