To apply the shared module into the kafka page

Issue-ID: DCAEGEN2-2010
Signed-off-by: Ekko Chang <ekko.chang@qct.io>
Change-Id: I830dcc1094d8e70045e0c0744f13f6a7b83d7cc1

18 files changed, 509 insertions, 320 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index ddc0c10c..e15876a8 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -105,6 +105,7 @@ import { IconComponent } from "./shared/components/icon/icon.component";
 import { MatTabsModule } from "@angular/material";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component";
+import { KafkaModalComponent } from './views/kafka/kafka-list/kafka-modal/kafka-modal.component';
 
 @NgModule({
   declarations: [
@@ -151,7 +152,8 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic
     ModalToolsComponent,
     ToolAddModalComponent,
     IconComponent,
-    TopicModalComponent
+    TopicModalComponent,
+    KafkaModalComponent
   ],
   imports: [
     BrowserModule,
@@ -195,7 +197,8 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic
     EditKafkaModalComponent,
     ToolAddModalComponent,
     ModalToolsComponent,
-    TopicModalComponent
+    TopicModalComponent,
+    KafkaModalComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
index 34f283fb..2b1803f3 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
@@ -15,20 +15,21 @@
 */
 
 export class Kafka {
-  id: number;
-  name: string;
-  enabled: boolean;
-  brokerList: string;
-  zooKeeper: string;
-  group: string;
-  secure: boolean;
-  login: string;
-  pass: string;
-  securityProtocol: string;
-  includedTopic: string;
-  excludedTopic: string;
-  consumerCount: number;
-  timeout: number;
+  public id: number;
+  public name: string;
+  public enabled: boolean;
+  public brokerList: string;
+  public zooKeeper: string;
+  public group: string;
+  public secure: boolean;
+  public login: string;
+  public pass: string;
+  public securityProtocol: string;
+  public includedTopic: string;
+  public excludedTopic: string;
+  public consumerCount: number;
+  public timeout: number;
   // for UI display
-  checkedToSave: boolean;
+  public checkedToSave: boolean;
+  public iconPath: string;
 }
diff --git a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
index 8e126a0d..307f51e9 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP : DataLake
  * ================================================================================
- * Copyright 2019 QCT
+ * Copyright 2019 - 2020 QCT
  *=================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -47,4 +47,11 @@ export class AdminService {
   onKeyPressNumber(data: any) {
     return (data.target.value = data.target.value.replace(/[^0-9.]/g, ""));
   }
+
+  onKeyPressSymbol(data: any) {
+    return (data.target.value = data.target.value.replace(
+      /[~`!#$%\^&*+=\-\[\]\\';,/{}()|\\":<>\?@.]/g,
+      ""
+    ));
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
index 98eef9ab..83d814e3 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
@@ -339,34 +339,26 @@ export class RestApiService {
       .pipe(retry(1), catchError(this.handleError));
   }
 
-  getAllKafkaList(): Observable<any> {
-    return this.http
-      .get<any>(prefix + "kafkas")
-      .pipe(retry(1), catchError(this.handleError));
-  }
-
-  deleteKafka(id): Observable<any> {
-    return this.http.delete(prefix + "kafkas/" + id).pipe(
-      //online
+  public updateKafka(k: Kafka): Observable<Kafka> {
+    return this.http.put<Kafka>(prefix + "kafkas/" + k.id, k).pipe(
       retry(1),
-      map(this.extractData2),
+      tap(_ => this.extractData),
       catchError(this.handleError)
     );
   }
 
-  createNewKafka(k: Kafka): Observable<any> {
-    return this.http.post(prefix + "kafkas", k).pipe(
+  public addKafka(k: Kafka): Observable<Kafka> {
+    return this.http.post<Kafka>(prefix + "kafkas", k).pipe(
       retry(1),
       tap(_ => this.extractData),
       catchError(this.handleError)
     );
   }
 
-  updateKafka(k: Kafka): Observable<any> {
-    let id = k.id;
-    return this.http.put(prefix + "kafkas/" + id, k).pipe(
+  public deleteKafka(id: string | number): Observable<Kafka> {
+    return this.http.delete<Kafka>(prefix + "kafkas/" + id).pipe(
       retry(1),
-      tap(_ => this.extractData),
+      tap(_ => console.log(`deleted kafka id=${id}`)),
       catchError(this.handleError)
     );
   }
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css
index 4b76e13c..7340ac85 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css
@@ -2,7 +2,7 @@
 * ============LICENSE_START=======================================================
 * ONAP : DataLake
 * ================================================================================
-* Copyright 2019 QCT
+* Copyright 2019 - 2020 QCT
 *=================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -36,3 +36,7 @@
   font-weight: 600;
   font-size: 16px;
 }
+
+.card-panel .add-style {
+  cursor: pointer;
+}
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
index 7b8d865b..101b7fc5 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html
@@ -2,7 +2,7 @@
 ============LICENSE_START=======================================================
 ONAP : DataLake
 ================================================================================
-Copyright 2019 QCT
+Copyright 2019 - 2020 QCT
 =================================================================================
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,47 +17,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END=========================================================
 -->
-<div class="card-panel d-flex flex-column" (click)="cardClick()">
-  <div class="d-flex flex-row p-2">
+<div class="card-panel d-flex flex-column">
+  <div class="d-flex flex-row">
     <div class="dl-h4 title mr-auto ml-3 mt-2">{{ this.title }}</div>
 
-    <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown" data-boundary="window">
+    <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown mr-1 mt-1" data-boundary="window">
+
       <a class="badge badge-light action-icon-dropdown" data-toggle="dropdown" style="cursor: pointer">
-        <i class="fas fa-ellipsis-h fa-2x dl-icon-enable"></i>
+        <i class="m-2 fas fa-ellipsis-h fa-2x dl-icon-enable"></i>
       </a>
+
+
       <div class="dropdown-menu action-icon-btn">
-        <button class="dropdown-item" type="button" (click)="cardMoreAction('edit')">
-          {{ 'EDIT' | translate }}
+        <button class="dropdown-item" type="button" (click)="cardMoreClickAction('edit')">
+          {{ "EDIT" | translate }}
         </button>
-        <button class="dropdown-item" type="button" (click)="cardMoreAction('delete')">
-          {{ 'DELETE' | translate }}
+        <button class="dropdown-item" type="button" (click)="cardMoreClickAction('delete')">
+          {{ "DELETE" | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <div class="mt-auto align-self-center p-2">
+  <div class="mt-auto align-self-center">
     <!-- show icon -->
-    <div *ngIf="this.iconPath">
-      <span [ngSwitch]="this.iconSize">
-        <span *ngSwitchCase="'sm'">
-          <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':80 }"></svg-icon>
-        </span>
-        <span *ngSwitchCase="'lg'">
-          <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':180 }"></svg-icon>
-        </span>
-        <span *ngSwitchDefault>
-          <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':150 }"></svg-icon>
-        </span>
-      </span>
+    <div *ngIf="this.iconPath" class="add-style" (click)="cardClickAction()">
+      <div [ngSwitch]=" this.iconSize">
+        <div *ngSwitchCase="'sm'">
+          <img src="{{ this.iconPath }}" style="width: 60px; height:60px;">
+        </div>
+        <div *ngSwitchCase="'md'">
+          <img src="{{ this.iconPath }}" style="width: 100px; height:100px;">
+        </div>
+        <div *ngSwitchCase="'lg'">
+          <img src="{{ this.iconPath }}" style="width: 140px; height:140px;">
+        </div>
+      </div>
     </div>
+
     <!-- show string -->
     <div *ngIf="this.content" class="dl-h1">
       {{ this.content }}
     </div>
   </div>
 
-  <div class="infoname align-self-center mt-auto p-2">
+  <div class="infoname align-self-center mt-auto pb-2">
     {{ this.subcontent }}
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
index 9be0b84a..792aa8cc 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP : DataLake
  * ================================================================================
- * Copyright 2019 QCT
+ * Copyright 2019 - 2020 QCT
  *=================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
  * @author Ekko Chang
  *
  */
-import { Component, OnInit, Input, Output, EventEmitter  } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 
 @Component({
   selector: "app-card",
@@ -38,19 +38,18 @@ export class CardComponent implements OnInit {
   @Input() modifiable: boolean;
   @Input() iconSize: string[] = ["sm", "md", "lg"];
 
-  @Output() cardAction = new EventEmitter<object>();
-  @Output() edit = new EventEmitter<object>();
+  @Output() cardClick = new EventEmitter<object>();
+  @Output() cardMoreActionClick = new EventEmitter<object>();
 
-  constructor() {}
+  constructor() { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
-  cardClick() {
-    this.cardAction.emit();
+  cardClickAction() {
+    this.cardClick.emit();
   }
 
-  cardMoreAction(type) {
-    this.edit.emit(type);
+  cardMoreClickAction(action: any) {
+    this.cardMoreActionClick.emit(action);
   }
-
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css
index 1c7a3867..8b137891 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css
@@ -1,42 +1 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    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.
-*/
-.dashboard-kafka{
-  padding: 0;
-}
-.kafka-li{
-  float: left;
-  list-style: none;
-  padding: 0;
-  width: 23.5%;
-  hight: 23.5%;
-  margin-right: 2%;
-  margin-bottom: 2%;
-}
-li:nth-child(4n){
-  margin-right: 0;
-}
-.add-kafka{
-  cursor: pointer;
-}
-.kafka-list{
-  padding: 0;
-  width: 100%;
-  hight: 100%;
-}
-.add-style{
-
-}
 
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html
index ec611cc0..b0390d7d 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -13,18 +13,17 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-  <div class="col-md-12 dashboard-kafka">
-      <ul class="kafka-list clearfix">
-        <li class="add-style" *ngFor="let kafka of this.kafkas; let thisIndex=index;" class="col-md-3 kafka-li">
-          <app-card [iconPath]="cardIconPathList[thisIndex]" [iconSize]="'sm'" [subcontent]="kafka.name"
-                    [modifiable]="this.cardModifiable" (edit)="cardMoreAction($event, kafka.id)">
-          </app-card>
-        </li>
 
+<div class="d-flex flex-row flex-nowrap">
+  <div class="col-md-3" *ngFor="let kafka of this.kafkas; let thisIndex = index">
+    <app-card [iconPath]="kafka.iconPath" [iconSize]="'md'" [subcontent]="kafka.name" [modifiable]="this.cardModifiable"
+      (cardClick)="openModal('edit', kafka)" (cardMoreActionClick)="cardMoreClickAction($event, kafka)">
+    </app-card>
+  </div>
 
-        <li class="col-md-3 kafka-li add-kafka">
-          <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (click)="newKafkaModal()">
-          </app-card>
-        </li>
-      </ul>
+  <div class="col-md-3">
+    <app-card [iconPath]="this.cardAddiconPath" [iconSize]="'sm'" (click)="openModal('new')">
+    </app-card>
   </div>
+
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts
index b8dbb0e0..46a46a02 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -16,238 +16,161 @@
 
 /**
  * @author Chunmeng Guo
+ * @contributor Ekko Chang
  */
 
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 import { RestApiService } from "src/app/core/services/rest-api.service";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { Kafka } from "../../../core/models/kafka.model";
+import { Kafka } from "src/app/core/models/kafka.model";
 
 // Loading spinner
 import { NgxSpinnerService } from "ngx-spinner";
 
-// notify
+import { map, mergeMap } from "rxjs/operators";
+import { from, forkJoin } from "rxjs";
+
+// Notify
 import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
-import {AlertComponent} from "../../../shared/components/alert/alert.component";
-import {NewKafkaModalComponent} from "./new-kafka-modal/new-kafka-modal.component";
-import {EditKafkaModalComponent} from "./edit-kafka-modal/edit-kafka-modal.component";
+import { AlertComponent } from "src/app/shared/components/alert/alert.component";
+import { ModalContentData } from "src/app/shared/modules/modal/modal.data";
+import { ModalComponent } from "src/app/shared/modules/modal/modal.component";
+import { KafkaModalComponent } from "src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component";
 
 @Component({
-  selector: 'app-kafka-list',
-  templateUrl: './kafka-list.component.html',
-  styleUrls: ['./kafka-list.component.css']
+  selector: "app-kafka-list",
+  templateUrl: "./kafka-list.component.html",
+  styleUrls: ["./kafka-list.component.css"]
 })
 export class KafkaListComponent implements OnInit {
+  kafkas: Array<Kafka> = [];
 
-  kafkaList: any = [];
-  kafkas: Kafka[] = [];
-  cardIconPath: string;
-  cardModifiable: boolean;
-  cardAddicon: string;
-  Kafka_New: Kafka;
-  Kafka_Newbody: Kafka;
-  cardIconPathList: any = [];
-  kafkaData: any = [];
+  // app-card parameters
+  cardModifiable: boolean = true;
+  cardAddiconPath: string = "assets/icons/add.svg";
 
   constructor(
-    private kafkaApiService: RestApiService,
+    private restApiService: RestApiService,
     private notificationService: ToastrNotificationService,
     private modalService: NgbModal,
     private spinner: NgxSpinnerService
-  ) {
-    this.initList();
-  }
+  ) {}
 
   ngOnInit() {
     this.spinner.show();
-    this.cardModifiable = true;
-    this.cardAddicon = "assets/icons/add.svg";
-  }
-
-  initList() {
-    this.initData().then(data => {
-      this.initKafkasList(this.kafkaList).then(data => {
-        this.kafkas = data;
-        if (this.kafkas.length > 0) {
-          let a = "assets/icons/kafka_able.svg";
-          let b = "assets/icons/kafka_disable.svg";
-          this.cardIconPathList.splice(0,this.cardIconPathList.length);
-          for (let i = 0; i < this.kafkas.length; i++) {
-            this.cardIconPath = (this.kafkas[i].enabled == true) ? a : b;
-            this.cardIconPathList.push(this.cardIconPath);
-          }
+    let t_kafkas: Array<Kafka> = [];
+
+    const get_kafkas = this.restApiService.getAllKafka().pipe(
+      mergeMap(ks => from(ks)),
+      map(k => {
+        if (k.enabled == true) {
+          k.iconPath = "assets/icons/kafka_able.svg";
+        } else {
+          k.iconPath = "assets/icons/kafka_disable.svg";
         }
-        console.log(this.cardIconPathList, "kafkas[]");
-      });
+        t_kafkas.push(k);
+      })
+    );
+
+    forkJoin(get_kafkas).subscribe(data => {
+      this.kafkas = t_kafkas;
+      setTimeout(() => {
+        this.spinner.hide();
+      }, 500);
     });
   }
 
-  async initData() {
-    this.kafkaList = [];
-    this.kafkaList = await this.getKafkaList();
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-
-  getKafkaList() {
-    let data: any;
-    data = this.kafkaApiService.getAllKafkaList().toPromise();
-    return data;
-  }
-
-  async getKafkaDetailModal(id: number) {
-    this.kafkaData = [];
-    this.kafkaData = await this.getKafkaModal(id);
-    return this.kafkaData;
-  }
-
-  getKafkaModal(id: number) {
-    return this.kafkaApiService.getKafka(id).toPromise();
-  }
-
-  async initKafkasList(kafkaList: []) {
-    let k: Kafka[] = [];
-    if (kafkaList.length > 0) {
-      for (let i = 0; i < kafkaList.length; i++) {
-        let data = kafkaList[i];
-        let feed = {
-          id: data["id"],
-          name: data["name"],
-          enabled: data["enabled"],
-          brokerList: data["brokerList"],
-          zooKeeper: data["zooKeeper"],
-          group: data["group"],
-          secure: data["secure"],
-          login: data["login"],
-          pass: data["pass"],
-          securityProtocol: data["securityProtocol"],
-          includedTopic: data["includedTopic"],
-          excludedTopic: data["excludedTopic"],
-          consumerCount: data["consumerCount"],
-          timeout: data["timeout"]
-        };
-        k.push(feed);
-      }
+  cardMoreClickAction(mode: string, k: Kafka) {
+    switch (mode) {
+      case "edit":
+        this.openModal("edit", k);
+        break;
+      case "delete":
+        const modalRef = this.modalService.open(AlertComponent, {
+          size: "sm",
+          centered: true,
+          backdrop: "static"
+        });
+        modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
+        modalRef.componentInstance.passEntry.subscribe(recevicedEntry => {
+          this.restApiService.deleteKafka(k.id).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_DELETED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
     }
-    return k;
   }
 
-  deleteKafkaModel(id: number) {
-    const index = this.kafkaList.findIndex(t => t.id === id);
-    const modalRef = this.modalService.open(AlertComponent, {
-      size: "sm",
-      centered: true
+  openModal(mode: string, k: Kafka) {
+    const modalRef = this.modalService.open(ModalComponent, {
+      size: "lg",
+      centered: true,
+      backdrop: "static"
     });
-    modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      // Delete kafka
-      this.kafkaApiService.deleteKafka(id).subscribe(
-        res => {
-          console.log(res);
-          if (JSON.stringify(res).length <= 2) {
-            this.kafkaList.splice(index, 1);
-            this.kafkaList = [...this.kafkaList];
-            this.initList();
-            this.notificationService.success("SUCCESSFULLY_DELETED");
-
-          } else {
-            this.initList();
-            this.notificationService.error("FAILED_DELETED");
-          }
 
-          modalRef.close();
-        },
-        err => {
-          this.notificationService.error(err);
-          modalRef.close();
-        }
-      );
-    });
+    switch (mode) {
+      case "new":
+        let newKafka: Kafka;
+        let componentNew = new ModalContentData(KafkaModalComponent, newKafka);
 
-  }
-
-  newKafkaModal() {
-    const modalRef = this.modalService.open(NewKafkaModalComponent, {
-      windowClass: "dl-md-modal kafkas",
-      centered: true
-    });
+        modalRef.componentInstance.title = "NEW_KAFKA";
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "new";
+        modalRef.componentInstance.component = componentNew;
 
-    this.Kafka_New = new Kafka();
-    this.Kafka_Newbody = new Kafka();
-    modalRef.componentInstance.kafka = this.Kafka_Newbody;
-    modalRef.componentInstance.kafkaList_length = this.kafkaList.length;
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.Kafka_Newbody = receivedEntry;
-      this.kafkaApiService
-        .createNewKafka(this.Kafka_Newbody)
-        .subscribe(
-          res => {
-            this.spinner.hide();
-            if (res.statusCode == 200) {
-              this.Kafka_New = res.returnBody;
-              this.kafkaList.push(this.Kafka_New);
-              this.kafkaList = [...this.kafkaList];
-              this.initList();
-              this.notificationService.success("SUCCESSFULLY_CREARED");
-            } else {
-              this.initList();
-              this.notificationService.error("FAILED_CREARED");
+        modalRef.componentInstance.passEntry.subscribe((data: Kafka) => {
+          newKafka = Object.assign({}, data);
+          this.restApiService.addKafka(newKafka).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_CREARED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
             }
-            modalRef.close();
-          },
-          err => {
-            this.spinner.hide();
-            this.notificationService.error(err);
-            modalRef.close();
-          }
+          );
+          modalRef.close();
+        });
+        break;
+      case "edit":
+        let editKafka: Kafka = k;
+        let componentEdit = new ModalContentData(
+          KafkaModalComponent,
+          editKafka
         );
-    });
-  }
 
-  cardMoreAction($event, id) {
-
-    if($event == "edit"){
-      this.editKafkaModal(id);
-    }else {
-      console.log($event,id);
-      this.deleteKafkaModel(id);
-    }
-  }
+        modalRef.componentInstance.title = editKafka.name;
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "edit";
+        modalRef.componentInstance.component = componentEdit;
 
-  editKafkaModal(id: number) {
-    this.getKafkaDetailModal(id).then(data => {
-      console.log("id", id);
-      const index = this.kafkaList.findIndex(t => t.id === id);
-      const modalRef = this.modalService.open(EditKafkaModalComponent, {
-        windowClass: "dl-md-modal kafkas",
-        centered: true
-      });
-      modalRef.componentInstance.editKafka = data;
-      modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-        this.Kafka_New = receivedEntry;
-        this.kafkaApiService
-          .updateKafka(this.Kafka_New)
-          .subscribe(
+        modalRef.componentInstance.passEntry.subscribe((data: Kafka) => {
+          editKafka = Object.assign({}, data);
+          this.restApiService.updateKafka(editKafka).subscribe(
             res => {
-              this.spinner.hide();
-              if (res.statusCode == 200) {
-                this.kafkaList[index] = this.Kafka_New;
-                this.kafkaList = [...this.kafkaList];
+              this.ngOnInit();
+              setTimeout(() => {
                 this.notificationService.success("SUCCESSFULLY_UPDATED");
-                this.initList();
-              } else {
-                this.notificationService.error("FAILED_UPDATED");
-              }
-              modalRef.close();
+              }, 500);
             },
             err => {
               this.notificationService.error(err);
-              modalRef.close();
             }
           );
-      });
-    });
-
+          modalRef.close();
+        });
+        break;
+    }
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html
new file mode 100644
index 00000000..a0930958
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html
@@ -0,0 +1,157 @@
+<!--
+============LICENSE_START=======================================================
+ONAP : DataLake
+================================================================================
+Copyright 2019 - 2020 QCT
+=================================================================================
+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.
+============LICENSE_END=========================================================
+-->
+
+
+<div class="container p-4">
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "NAME" | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-6">
+        <label class="dl-switch">
+          <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" />
+          <span class="dl-slider round"></span>
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'BROKER_LIST' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'ZOOKEEPER' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.brokerList" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.zooKeeper" class="form-control dl-input-text" type="text" />
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'Username' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'Password' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" />
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'SECURITY_PROTOCOL' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-switch">
+          <input id="switch" type="checkbox" [(ngModel)]="this.data.secure" />
+          <span class="dl-slider round"></span>
+        </label>
+      </div>
+      <div class="col-md-6">
+        <select [(ngModel)]="this.data.securityProtocol" class="custom-select dl-input-text">
+          <option *ngFor="let item of securityProtocol" [selected]="item == this.data.securityProtocol">
+            {{ item }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'GROUP' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'TIME_OUT' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.group" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.timeout" class="form-control dl-input-text" type="text"
+          (input)="this.adminService.onKeyPressNumber($event)" />
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'EXCLUDED_TOPICS' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-9">
+        <div class="d-flex row align-items-center" *ngFor="let field of extenFields; let i = index">
+          <div class="col-md-8 order-1">
+            <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="AAI-EVENT" type="text"
+              (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" />
+          </div>
+          <div class="order-2">
+            <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)">
+              <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="order-3">
+            <button type="button" class="btn dl-icon-enable p-2" (click)="onClickDelIdField(i)">
+              <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts
new file mode 100644
index 00000000..c6da2218
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 - 2020 QCT
+ *=================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KafkaModalComponent } from './kafka-modal.component';
+
+describe('KafkaModalComponent', () => {
+  let component: KafkaModalComponent;
+  let fixture: ComponentFixture<KafkaModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KafkaModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KafkaModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts
new file mode 100644
index 00000000..0c747d99
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts
@@ -0,0 +1,91 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 - 2020 QCT
+ *=================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ *
+ * @author Ekko Chang
+ *
+ */
+
+import { Component, OnInit, Input } from "@angular/core";
+
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { AdminService } from "src/app/core/services/admin.service";
+import { Kafka } from "src/app/core/models/kafka.model";
+
+@Component({
+  selector: "app-kafka-modal",
+  templateUrl: "./kafka-modal.component.html",
+  styleUrls: ["./kafka-modal.component.css"]
+})
+export class KafkaModalComponent implements OnInit {
+  @Input() data: Kafka;
+  @Input() mode: string;
+
+  securityProtocol: Array<string> = ["None", "SASL_PLAINTEXT"];
+  extenFields: Array<any> = [];
+  newField: any = {};
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService
+  ) {}
+
+  ngOnInit() {
+    // Get excludedTopic field
+    this.extenFields = [];
+    if (this.data.excludedTopic != null) {
+      let feed = this.data.excludedTopic.split(",");
+      for (let i = 0; i < feed.length; i++) {
+        let data = { item: feed[i] };
+        this.extenFields.push(data);
+      }
+    } else {
+      this.extenFields.push([]);
+    }
+  }
+
+  onClickAddIdField() {
+    this.extenFields.push(this.newField);
+    this.newField = {};
+    this.onChangeSaveIdField();
+  }
+
+  onClickDelIdField(index: number) {
+    if (this.extenFields.length > 1) {
+      this.extenFields.splice(index, 1);
+      this.onChangeSaveIdField();
+    }
+  }
+
+  onChangeSaveIdField() {
+    this.data.excludedTopic = "";
+
+    for (let i = 0; i < this.extenFields.length; i++) {
+      if (this.extenFields[i].item) {
+        if (this.data.excludedTopic == "") {
+          this.data.excludedTopic = this.extenFields[i].item;
+        } else {
+          this.data.excludedTopic += "," + this.extenFields[i].item;
+        }
+      }
+    }
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html
index 549fa545..75d0e1fb 100644
--- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html
@@ -9,7 +9,7 @@
     <app-card [title]="this.cardTitle" [content]="this.cardContent">
     </app-card>
     <br>
-    <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (cardAction)="cardClick()">
+    <app-card [iconPath]="assets/icons/add.svg" [iconSize]="'sm'" (cardAction)="cardClick()">
     </app-card>
     <br>
   </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html
index f5f3a7ed..849c145a 100644
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html
@@ -134,7 +134,7 @@ limitations under the License.
             <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index">
               <div class="col-md-8 order-1">
                 <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id"
-                  type="text" [value]="field.item" (change)="onChangeSaveIdField()" />
+                  type="text" (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" />
               </div>
               <div class="order-2">
                 <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)">
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts
index 3f0223eb..9289861b 100644
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts
@@ -229,21 +229,26 @@ export class TopicModalComponent implements OnInit {
   onClickAddIdField() {
     this.idExFields.push(this.idExNewField);
     this.idExNewField = {};
+    this.onChangeSaveIdField();
   }
 
   onClickDelIdField(index: number) {
     if (this.idExFields.length > 1) {
       this.idExFields.splice(index, 1);
+      this.onChangeSaveIdField();
     }
   }
 
   onChangeSaveIdField() {
     this.data.messageIdPath = "";
+
     for (let i = 0; i < this.idExFields.length; i++) {
-      if (i == 0) {
-        this.data.messageIdPath = this.idExFields[i].item;
-      } else {
-        this.data.messageIdPath += "," + this.idExFields[i].item;
+      if (this.idExFields[i].item) {
+        if (this.data.messageIdPath == "") {
+          this.data.messageIdPath = this.idExFields[i].item;
+        } else {
+          this.data.messageIdPath += "," + this.idExFields[i].item;
+        }
       }
     }
   }
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
index 11654612..2e0892fa 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
@@ -1,6 +1,6 @@
 {
   "SIDEBAR": {
-    "FEEDFER": "DataLake Feeder",
+    "FEEDER": "DataLake Feeder",
     "KAFKA": "Kafka",
     "TOPICS": "Topics",
     "DATABASE": "Database",