To optimize the shared module and apply it into the page

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

24 files changed, 1017 insertions, 585 deletions

diff --git a/components/datalake-handler/admin/src/package.json b/components/datalake-handler/admin/src/package.json
index de89944b..d4e0444c 100644
--- a/components/datalake-handler/admin/src/package.json
+++ b/components/datalake-handler/admin/src/package.json
@@ -13,11 +13,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "^7.2.15",
+    "@angular/cdk": "^7.3.7",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
+    "@angular/material": "^7.3.7",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
index ae2f9b6e..e0484a4f 100644
--- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app-routing.module.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.
@@ -28,15 +28,15 @@ import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
 
 //test components for module testing
-import { TestComponent } from './views/test/test.component';
+import { TestComponent } from "./views/test/test.component";
 
 import { FeederComponent } from "./views/feeder/feeder.component";
 import { KafkaComponent } from "./views/kafka/kafka.component";
 import { TopicsComponent } from "./views/topics/topics.component";
 import { DatabaseComponent } from "./views/database/database.component";
 import { AboutComponent } from "./views/about/about.component";
-import { TemplateComponent } from './views/dashboard-setting/template/template.component';
-import {ToolsComponent} from "./views/tools/tools.component";
+import { TemplateComponent } from "./views/dashboard-setting/template/template.component";
+import { ToolsComponent } from "./views/tools/tools.component";
 
 const routes: Routes = [
   { path: "", redirectTo: "/feeder", pathMatch: "full" },
@@ -46,8 +46,8 @@ const routes: Routes = [
   { path: "topics", component: TopicsComponent },
   { path: "database", component: DatabaseComponent },
   { path: "about", component: AboutComponent },
-  { path: 'tools', component: ToolsComponent },
-  { path: 'dashboard-setting/template', component: TemplateComponent },
+  { path: "tools", component: ToolsComponent },
+  { path: "dashboard-setting/template", component: TemplateComponent }
 ];
 
 @NgModule({
@@ -58,4 +58,4 @@ const routes: Routes = [
   ],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
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 2f968bfb..ddc0c10c 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.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.
@@ -65,12 +65,12 @@ import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdf
 import { DatabaseAddModalComponent } from "./views/database/database-list/database-add-modal/database-add-modal.component";
 import { ElasticsearchComponent } from "./views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
 import { DruidComponent } from "./views/database/database-list/dbs-modal/druid/druid.component";
-import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component';
-import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component';
-import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component';
-import { ToolsComponent } from './views/tools/tools.component';
-import { ModalToolsComponent } from './views/tools/modal-tools/modal-tools.component';
-import { ToolAddModalComponent } from './views/tools/tool-add-modal/tool-add-modal.component';
+import { KafkaListComponent } from "./views/kafka/kafka-list/kafka-list.component";
+import { NewKafkaModalComponent } from "./views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component";
+import { EditKafkaModalComponent } from "./views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component";
+import { ToolsComponent } from "./views/tools/tools.component";
+import { ModalToolsComponent } from "./views/tools/modal-tools/modal-tools.component";
+import { ToolAddModalComponent } from "./views/tools/tool-add-modal/tool-add-modal.component";
 
 // Modals
 import { TopicDetailModalComponent } from "./views/topics/topic-list/topic-detail-modal/topic-detail-modal.component";
@@ -97,10 +97,14 @@ import { CardComponent } from "./shared/modules/card/card.component";
 import { ButtonComponent } from "./shared/components/Button/button.component";
 import { ModalDirective } from "./shared/modules/modal/modal.directive";
 import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component";
-import { KafkaComponent } from './views/kafka/kafka.component';
+import { KafkaComponent } from "./views/kafka/kafka.component";
 // Angular SVG Icon
 import { AngularSvgIconModule } from "angular-svg-icon";
-import { IconComponent } from './shared/components/icon/icon.component';
+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";
 
 @NgModule({
   declarations: [
@@ -146,7 +150,8 @@ import { IconComponent } from './shared/components/icon/icon.component';
     ToolsComponent,
     ModalToolsComponent,
     ToolAddModalComponent,
-    IconComponent
+    IconComponent,
+    TopicModalComponent
   ],
   imports: [
     BrowserModule,
@@ -163,7 +168,9 @@ import { IconComponent } from './shared/components/icon/icon.component';
     FormsModule,
     NgxDatatableModule,
     NgxSpinnerModule,
-    AngularSvgIconModule
+    AngularSvgIconModule,
+    MatTabsModule,
+    BrowserAnimationsModule
   ],
   providers: [AdminService, RestApiService, ToastrNotificationService],
   bootstrap: [AppComponent],
@@ -187,7 +194,8 @@ import { IconComponent } from './shared/components/icon/icon.component';
     NewKafkaModalComponent,
     EditKafkaModalComponent,
     ToolAddModalComponent,
-    ModalToolsComponent
+    ModalToolsComponent,
+    TopicModalComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts
index ca7f379e..3de8f213 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/db.model.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.
@@ -35,4 +35,6 @@ export class Db {
   login: string;
   pass: string;
   dbTypeId: string;
+  // for UI display
+  checkedToSave: boolean;
 }
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 40a7e26d..34f283fb 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
@@ -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.
@@ -29,4 +29,6 @@ export class Kafka {
   excludedTopic: string;
   consumerCount: number;
   timeout: number;
+  // for UI display
+  checkedToSave: boolean;
 }
diff --git a/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts b/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts
index 18faa582..be225da9 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/topic.model.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.
@@ -41,50 +41,21 @@ export class Topic {
   public flattenArrayPath: string;
   public enbabledKafkas: Array<string>;
   public kafkas: Array<string>;
+  public countsDb: CountsDb;
+  public countsKafka: number;
   // properties only for UI
   public config: boolean; //true: Configure, otherwise false: Unconfiure
-  public kafkaName: string;
-  public countCouchbase: number;
-  public countDruid: number;
-  public countEs: number;
-  public countMongo: number;
-  public countHadoop: number;
+  public countsMONGO: number;
+  public countsDRUID: number;
+  public countsHDFS: number;
+  public countsES: number;
+  public countsCB: number;
+}
 
-  constructor(
-    id: number,
-    name: string,
-    login: string,
-    password: string,
-    enabledSinkdbs: Array<string>,
-    sinkdbs: Array<string>,
-    enabled: boolean,
-    saveRaw: boolean,
-    dataFormat: string,
-    ttl: number,
-    correlateClearedMessage: boolean,
-    messageIdPath: string,
-    aggregateArrayPath: string,
-    flattenArrayPath: string,
-    enbabledKafkas: Array<string>,
-    kafkas: Array<string>,
-    config: boolean
-  ) {
-    this.id = id;
-    this.name = name;
-    this.login = login;
-    this.password = password;
-    this.enabledSinkdbs = enabledSinkdbs;
-    this.sinkdbs = sinkdbs;
-    this.enabled = enabled;
-    this.saveRaw = saveRaw;
-    this.dataFormat = dataFormat;
-    this.ttl = ttl;
-    this.correlateClearedMessage = correlateClearedMessage;
-    this.messageIdPath = messageIdPath;
-    this.aggregateArrayPath = aggregateArrayPath;
-    this.flattenArrayPath = flattenArrayPath;
-    this.enbabledKafkas = enbabledKafkas;
-    this.kafkas = kafkas;
-    this.config = config;
-  }
+class CountsDb {
+  MONGO: number;
+  DRUID: number;
+  HDFS: number;
+  ES: number;
+  CB: number;
 }
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 0c520895..b3ed616f 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
@@ -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.
@@ -77,7 +77,7 @@ export class RestApiService {
   }
 
   /*
-    Topic default config
+    Topics
   */
   public getTopicDefault(): Observable<Topic> {
     return this.http
@@ -85,19 +85,6 @@ export class RestApiService {
       .pipe(retry(1), catchError(this.handleError));
   }
 
-  // updateTopicDefaultConfig(t: Topic): Observable<any> {
-  //   return this.http
-  //     .put(prefix + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions)
-  //     .pipe(
-  //       retry(1),
-  //       tap(_ => this.extractData),
-  //       catchError(this.handleError)
-  //     );
-  // }
-
-  /*
-    Topics
-  */
   public getTopicList(): Observable<string[]> {
     return this.http
       .get<string[]>(prefix + "topics")
@@ -110,12 +97,43 @@ export class RestApiService {
       .pipe(retry(1), catchError(this.handleError));
   }
 
-  public getTopic(id: string): Observable<Topic> {
+  // Get topic names for adding
+  public getTopicNames(): Observable<string[]> {
+    return this.http
+      .get<string[]>(prefix + "topicNames")
+      .pipe(retry(1), catchError(this.handleError));
+  }
+
+  public getTopic(id: string | number): Observable<Topic> {
     return this.http
       .get<Topic>(prefix + "topics/" + id)
       .pipe(retry(1), catchError(this.handleError));
   }
 
+  public updateTopic(t: Topic): Observable<Topic> {
+    return this.http.put<Topic>(prefix + "topics/" + t.id, t).pipe(
+      retry(1),
+      tap(_ => this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  public addTopic(t: Topic): Observable<Topic> {
+    return this.http.post<Topic>(prefix + "topics", t).pipe(
+      retry(1),
+      tap(_ => console.log(`add topic name=${t.name}`)),
+      catchError(this.handleError)
+    );
+  }
+
+  public deleteTopic(id: number | string): Observable<Topic> {
+    return this.http.delete<Topic>(prefix + "topics/" + id).pipe(
+      retry(1),
+      tap(_ => console.log(`deleted topic name=${name}`)),
+      catchError(this.handleError)
+    );
+  }
+
   // TODO
   getTopicsFromFeeder(): Observable<any> {
     return this.http
@@ -123,41 +141,15 @@ export class RestApiService {
       .pipe(retry(1), map(this.extractData), catchError(this.handleError));
   }
 
-  // addNewTopic(t: Topic): Observable<any> {
-  //   return this.http.post<any>(prefix + "topics", t).pipe(
-  //     retry(1),
-  //     tap(_ => console.log(`add topic name=${t.name}`)),
-  //     catchError(this.handleError)
-  //   );
-  // }
-
-  // addTopic(t: Topic): Observable<any> {
-  //   return this.http.post<any>(prefix + "topics", t).pipe(
-  //     retry(1),
-  //     tap(_ => console.log(`add topic name=${t.name}`)),
-  //     catchError(this.handleError)
-  //   );
-  // }
-
-  // upadteTopic(t: Topic): Observable<any> {
-  //   return this.http.put(prefix + "topics/" + t.name, t).pipe(
-  //     retry(1),
-  //     tap(_ => this.extractData),
-  //     catchError(this.handleError)
-  //   );
-  // }
-
-  // deleteTopic(name: string): Observable<any> {
-  //   return this.http.delete(prefix + "topics/" + name).pipe(
-  //     retry(1),
-  //     tap(_ => console.log(`deleted topic name=${name}`)),
-  //     catchError(this.handleError)
-  //   );
-  // }
-
   /*
     Database
   */
+  public getAllDbs(): Observable<Db[]> {
+    return this.http
+      .get<Db[]>(prefix + "dbs/list?isDb=true")
+      .pipe(retry(1), catchError(this.handleError));
+  }
+
   getDbEncryptList(flag): Observable<any> {
     return this.http
       .get(prefix + "dbs/list?tool=" + flag)
@@ -201,6 +193,7 @@ export class RestApiService {
     );
   }
 
+  // Deprecated
   getDbTypeList(): Observable<any> {
     return this.http
       .get(prefix + "db_type")
@@ -233,8 +226,8 @@ export class RestApiService {
   }
 
   /*
-Dashboard
-*/
+  Dashboard
+  */
   getDashboardList(): Observable<any> {
     let url = prefix + "portals"; //onilne
     return this.http
@@ -263,7 +256,7 @@ Dashboard
 
   /*
   Template
-*/
+  */
   getTemplateAll(): Observable<any> {
     return this.http.get(prefix + "designs/").pipe(
       //onlin
@@ -332,11 +325,11 @@ Dashboard
   }
 
   /*
-  Kafka
-*/
-  public getAllKafkaList(): Observable<string[]> {
+    Kafka
+  */
+  public getAllKafka(): Observable<Kafka[]> {
     return this.http
-      .get<string[]>(prefix + "kafkas")
+      .get<Kafka[]>(prefix + "kafkas")
       .pipe(retry(1), catchError(this.handleError));
   }
 
@@ -346,6 +339,12 @@ Dashboard
       .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
diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
index 7986886a..9a6f9f44 100644
--- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
@@ -1,17 +1,37 @@
+<!--
+============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=========================================================
+-->
+
 <!-- block type buttons -->
 <button type="button" *ngIf="this.buttonstyle===1"
   [class]="this.buttoncolor===1? 'btn dl-btn-light btn-block':'btn dl-btn-dark btn-block'">
-  <span> {{this.text | translate}}</span>
+  <span class="p-0"> {{this.text | translate}}</span>
 </button>
 
 <!-- inline type buttons -->
 <button type="button" *ngIf="this.buttonstyle===2" [class]="this.buttoncolor===1? 'btn dl-btn-light':'btn dl-btn-dark'">
-  <span> {{this.text | translate}}</span>
+  <span class="p-0"> {{this.text | translate}}</span>
 </button>
 
 <!-- inline icon buttons -->
 <button *ngIf="this.buttonstyle===4" [class]="this.buttoncolor===1? 'btn dl-btn-light':'btn dl-btn-dark'">
-  <span>
+  <span class="p-0">
     <i *ngIf="this.text==='search'" class="fa fa-search"></i>
     <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
     <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
@@ -20,7 +40,7 @@
 </button>
 
 <!-- icon type buttons -->
-<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2" (click)="buttonClick(this.text)">
+<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-1" (click)="buttonClick(this.text)">
   <i *ngIf="this.text==='search'" class="fa fa-search"></i>
   <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
   <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html
index 38654bcd..137e14d2 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.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.
@@ -25,27 +25,20 @@ limitations under the License.
     <div class="container-fluid">
 
       <!-- Page Title -->
-      <div class="row">
-        <div class="col-md-12">
-          <label *ngIf="this.contentComponent.data.state == 'edit'" class="dl-h3">Edit&nbsp;</label>
-          <label class="dl-h3">{{ this.contentComponent.data.title | translate }}</label>
-        </div>
-      </div>
+      <label class="modal-title dl-h3">{{ this.title | translate }}</label>
       <!-- Page Title End -->
 
       <div class="row">
         <div class="col-md-12">
           <hr />
         </div>
-
         <!-- Notice -->
-        <div *ngIf="this.contentComponent.data.notice" class="col-md-12">
+        <div *ngIf="this.notice" class="col-md-12">
           <div class="dl-notice">
-            {{ this.contentComponent.data.notice | translate}}
+            {{ this.notice | translate }}
           </div>
         </div>
         <!-- Notice End -->
-
       </div>
 
     </div>
@@ -63,7 +56,6 @@ limitations under the License.
         </div>
       </div>
       <!-- Modal Content End -->
-
     </div>
   </div>
   <!-- Modal Body End -->
@@ -75,19 +67,15 @@ limitations under the License.
         <div class="col-md-12">
           <div class="d-flex justify-content-end">
             <div class="p-1">
-              <span>
-                <app-button *ngIf="this.contentComponent.data.state == 'new'" [text]="'Next'" [style]="'inline'"
-                  [color]="'dark'" (click)="this.nextPage()"></app-button>
-                <app-button *ngIf="this.contentComponent.data.state == 'edit'" [text]="'Save'" [style]="'inline'"
-                  [color]="'dark'" (click)="this.passBack()"></app-button>
-              </span>
+              <!-- <app-button *ngIf="this.mode == 'new'" [text]="'Next'" [style]="'inline'" [color]="'dark'"
+                (click)="this.nextPage()"></app-button> -->
+              <!-- <app-button *ngIf="this.mode == 'edit'" [text]="'Save'" [style]="'inline'" [color]="'dark'"
+                (click)="this.passBack()"></app-button> -->
+              <app-button [text]="'Save'" [style]="'inline'" [color]="'dark'" (click)="this.passBack()"></app-button>
             </div>
-
             <div class="p-1">
-              <span>
-                <app-button [text]="'Cancel'" [style]="'inline'" [color]="'light'"
-                  (click)="activeModal.close('Close click')"></app-button>
-              </span>
+              <app-button [text]="'Cancel'" [style]="'inline'" [color]="'light'"
+                (click)="activeModal.close('Close click')"></app-button>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts
index 0eade628..da757bef 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.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.
@@ -45,10 +45,19 @@ import { ModalInterface } from "src/app/shared/modules/modal/modal.interface";
   styleUrls: ["./modal.component.css"]
 })
 export class ModalComponent implements OnInit {
-  @Input() contentComponent: ModalContentData;
+  @Input() title: string;
+  @Input() notice: string;
+  @Input() mode: string;
+  @Input() component: ModalContentData;
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
   @ViewChild(ModalDirective) modalContent: ModalDirective;
 
+  emitData: any; // temp data for two way binding
+  selectedIndex: number = 0; // number to switch tab
+  componentFactory: any;
+  viewContainerRef: any;
+  componentRef: any;
+
   constructor(
     public activeModal: NgbActiveModal,
     private componentFactoryResolver: ComponentFactoryResolver
@@ -59,26 +68,31 @@ export class ModalComponent implements OnInit {
   }
 
   loadComponent() {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.contentComponent.component
+    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      this.component.modalComponent
     );
 
-    const viewContainerRef = this.modalContent.viewContainerRef;
-    viewContainerRef.clear();
+    this.viewContainerRef = this.modalContent.viewContainerRef;
+    this.viewContainerRef.clear();
+
+    this.componentRef = this.viewContainerRef.createComponent(
+      this.componentFactory
+    );
 
-    const componentRef = viewContainerRef.createComponent(componentFactory);
-    (<ModalInterface>componentRef.instance).data = this.contentComponent.data;
+    this.emitData = Object.assign({}, this.component.data);
+    (<ModalInterface>this.componentRef.instance).data = this.emitData;
+    (<ModalInterface>this.componentRef.instance).mode = this.mode;
+    (<ModalInterface>(
+      this.componentRef.instance
+    )).selectedIndex = this.selectedIndex;
   }
 
   nextPage() {
-    console.log("nextpage");
-    //TODO: Switch the pages
+    (<ModalInterface>this.componentRef.instance).selectedIndex++;
   }
 
   passBack() {
-    console.log("passback");
-    //TODO: Save the data
-
-    this.passEntry.emit("save....");
+    this.component.data = this.emitData;
+    this.passEntry.emit(this.component.data);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts
index ff2f0152..c5cb89b4 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.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.
@@ -27,5 +27,11 @@
 import { Type } from "@angular/core";
 
 export class ModalContentData {
-  constructor(public component: Type<any>, public data: any) {}
+  public modalComponent: Type<any>;
+  public data: any;
+
+  constructor(modalComponent: Type<any>, data: any) {
+    this.modalComponent = modalComponent;
+    this.data = data;
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts
index a3b47282..556d4c61 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.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,6 +23,9 @@
  * @author Ekko Chang
  *
  */
+
 export interface ModalInterface {
   data: any;
+  mode: string;
+  selectedIndex: number;
 }
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
index c0e0971c..d4162ee6 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.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.
@@ -20,7 +20,6 @@ limitations under the License.
 
 <div class="row">
   <div class="col-md-12">
-
     <ngx-datatable #mytemlate class="bootstrap" [rows]="data" [columnMode]="'force'" [headerHeight]="40"
       [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [loadingIndicator]="loadingIndicator"
       [messages]="mesgNoData" [limit]="10" (activate)="rowOnActivate($event)">
@@ -29,39 +28,43 @@ limitations under the License.
         headerClass="d-flex justify-content-center justify-content-start" cellClass="d-flex justify-content-center">
         <!-- template of header -->
         <ng-template ngx-datatable-header-template>
-
           <!-- display string -->
-          <span *ngIf="column.headerName&&column.headerName.length!==0">{{ column.headerName | translate}}</span>
+          <span *ngIf="column.headerName && column.headerName.length !== 0">{{
+            column.headerName | translate
+          }}</span>
 
           <!-- display icon -->
-          <span *ngIf="column.headerIcon&&column.headerIcon.length!==0">
-            <svg-icon [src]="column.headerIcon" [svgStyle]="{ 'height.px':20 }"></svg-icon>
+          <span *ngIf="column.headerIcon && column.headerIcon.length !== 0" placement="bottom" container="body"
+            ngbTooltip="{{column.headerIconInfo}}" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300"
+            [closeDelay]="300">
+            <svg-icon [src]="column.headerIcon" [svgStyle]="{ 'height.px': 20 }">
+            </svg-icon>
           </span>
         </ng-template>
 
         <!-- template of cell -->
         <ng-template let-row="row" ngx-datatable-cell-template>
           <!-- display data -->
-          <span *ngIf="column.dataIndex&&column.dataIndex.length!==0&&!column.icon">{{row[column.dataIndex]}}</span>
+          <span *ngIf="
+              column.dataIndex && column.dataIndex.length !== 0 && !column.icon
+            ">{{ row[column.dataIndex] }}</span>
 
           <!-- display button with text -->
-          <span *ngIf="column.textButton&&column.textButton.length!==0">
+          <span *ngIf="column.textButton && column.textButton.length !== 0">
             <app-button [text]="column.textButton" [style]="'inline'" [color]="'dark'"></app-button>
           </span>
 
           <!-- display button with icon -->
-          <span *ngIf="column.iconButton&&column.iconButton.length!==0">
+          <span *ngIf="column.iconButton && column.iconButton.length !== 0">
             <app-button [text]="column.iconButton" [style]="'icon'" [color]="'dark'"
-              (btnAction)="tableAction($event, row.id)"></app-button>
+              (click)="tableAction(column.action, row.id)"></app-button>
           </span>
 
           <!-- display pure icon -->
-          <span *ngIf="column.icon&&column.icon.length!==0">
+          <span *ngIf="column.icon && column.icon.length !== 0">
             <app-icon [type]="column.icon" [enabled]="row[column.dataIndex]"></app-icon>
           </span>
-
         </ng-template>
-
       </ngx-datatable-column>
     </ngx-datatable>
   </div>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
index 8adb8370..94526979 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
@@ -1,9 +1,31 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+/*
+ * ============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=========================================================
+ */
 
 /**
+ *
  * @contributor Chunmeng Guo
+ *
  */
 
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+
 @Component({
   selector: "app-table",
   templateUrl: "./table.component.html",
@@ -34,22 +56,28 @@ export class TableComponent implements OnInit {
     }, 500);
   }
 
-  tableAction(event: any, actionId: number) {
-    console.log("action id: " + actionId);
-    console.log("edit: " + event.row.id);
+  tableAction(action: string, id: number | string) {
     let passValueArr: Array<any> = [];
-    passValueArr.push(event);
-    passValueArr.push(actionId);
+    passValueArr.push(action);
+    passValueArr.push(id);
+
+    // array[0] for action
+    // array[1] for value
+    console.log("tableAction");
     this.btnTableAction.emit(passValueArr);
   }
 
   rowOnActivate(event: any) {
     const emitType = event.type;
+
     if (emitType == "dblclick") {
-      console.log("Activate Event", event);
-      let name = event.row.id;
-      // this.openTopicModal(name);
-      console.log("row name: " + name);
+      let passValueArr: Array<any> = [];
+      passValueArr.push("edit");
+      passValueArr.push(event.row.id);
+
+      // // array[0] for action
+      // // array[1] for value
+      this.btnTableAction.emit(passValueArr);
     }
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.html
index 3fbbc420..17d77f9b 100644
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.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.
@@ -32,10 +32,12 @@ limitations under the License.
 
         <!-- button -->
         <div class="p-1">
-          <app-button [text]="'DEFAULT_CONFIGURATIONS'" [style]="'inline'" [color]="'dark'" (click)="buttonAction('default')"></app-button>
+          <app-button [text]="'DEFAULT_CONFIGURATIONS'" [style]="'inline'" [color]="'dark'"
+            (click)="openModal('default')"></app-button>
         </div>
         <div class="p-1">
-          <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="buttonAction('new')"></app-button>
+          <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')">
+          </app-button>
         </div>
       </div>
     </div>
@@ -44,7 +46,7 @@ limitations under the License.
   <!-- datatable -->
   <div class="row">
     <div class="col-md-12">
-      <app-table [data]="topics" [columns]="columns"></app-table>
+      <app-table [data]="topics" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table>
     </div>
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.ts
index d2d983f9..2c6fe3e3 100644
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-list.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.
@@ -29,12 +29,7 @@ import { RestApiService } from "src/app/core/services/rest-api.service";
 import { Topic } from "src/app/core/models/topic.model";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 
-// modal
-import { TopicDetailModalComponent } from "./topic-detail-modal/topic-detail-modal.component";
-import { TopicConfigModalComponent } from "./topic-config-modal/topic-config-modal.component";
-import { NewTopicModelComponent } from "./new-topic-model/new-topic-model.component";
-
-// notify
+// Notify
 import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
 
 // Loading spinner
@@ -43,7 +38,11 @@ import { NgxSpinnerService } from "ngx-spinner";
 import { AlertComponent } from "src/app/shared/components/alert/alert.component";
 import { map, mergeMap } from "rxjs/operators";
 import { forkJoin, from } from "rxjs";
-import { HttpClient } from "@angular/common/http";
+
+// Modal
+import { ModalComponent } from "src/app/shared/modules/modal/modal.component";
+import { ModalContentData } from "src/app/shared/modules/modal/modal.data";
+import { TopicModalComponent } from "src/app/views/topics/topic-list/topic-modal/topic-modal.component";
 
 @Component({
   selector: "app-topic-list",
@@ -52,8 +51,12 @@ import { HttpClient } from "@angular/common/http";
 })
 export class TopicListComponent {
   topics: Array<Topic> = []; // data of table
-  columns: Array<any> = []; // column of table
   t_temp: Array<Topic> = []; // cache for topics
+  t_default: Topic = new Topic();
+
+  columns: Array<any> = []; // column of table
+
+  @ViewChild("searchText") searchText: ElementRef;
 
   //TODO
   //tempTopicDetail: Topic; // temp for a topic
@@ -63,43 +66,44 @@ export class TopicListComponent {
     private restApiService: RestApiService,
     private modalService: NgbModal,
     private notificationService: ToastrNotificationService,
-    private spinner: NgxSpinnerService,
-    public http: HttpClient
+    private spinner: NgxSpinnerService
   ) {}
 
   ngOnInit() {
-    //this.spinner.show();
+    this.spinner.show();
     let t_feeder: Array<Topic> = [];
-    let t_kafka: Object = {};
 
     const get_t_feeder = this.restApiService.getTopicList().pipe(
       mergeMap(ids => from(ids)),
       mergeMap(id => this.restApiService.getTopic(id)),
       map(t => {
         t.config = true;
+        t.countsDb.MONGO > 0
+          ? (t.countsMONGO = t.countsDb.MONGO)
+          : (t.countsMONGO = 0);
+        t.countsDb.DRUID > 0
+          ? (t.countsDRUID = t.countsDb.DRUID)
+          : (t.countsDRUID = 0);
+        t.countsDb.HDFS > 0
+          ? (t.countsHDFS = t.countsDb.HDFS)
+          : (t.countsHDFS = 0);
+        t.countsDb.ES > 0 ? (t.countsES = t.countsDb.ES) : (t.countsES = 0);
+        t.countsDb.CB > 0 ? (t.countsCB = t.countsDb.CB) : (t.countsCB = 0);
         t_feeder.push(t);
       })
     );
 
-    const get_t_kafka = this.restApiService.getAllKafkaList().pipe(
-      mergeMap(ids => from(ids)),
-      mergeMap(id =>
-        this.restApiService
-          .getTopicListFromKafka(id)
-          .pipe(map(t => (t_kafka[id] = t)))
-      )
-    );
-
     const get_t_default = this.restApiService.getTopicDefault();
 
-    forkJoin(get_t_feeder, get_t_kafka, get_t_default).subscribe(data => {
+    forkJoin(get_t_feeder, get_t_default).subscribe(data => {
       this.columns = this.initColumn();
-      this.topics = this.initRow(t_feeder, t_kafka, data[2]);
+      this.t_default = data[1];
+      this.topics = t_feeder;
       this.t_temp = [...this.topics];
-      // setTimeout(() => {
-      //   //this.spinner.hide();
-      //   this.loadingIndicator = false;
-      // }, 500);
+      this.updateFilter(this.searchText.nativeElement.value);
+      setTimeout(() => {
+        this.spinner.hide();
+      }, 500);
     });
   }
 
@@ -115,53 +119,58 @@ export class TopicListComponent {
         icon: "status"
       },
       {
-        headerName: "NAME",
-        width: "420",
+        headerName: "ID",
+        width: "15",
         sortable: true,
-        dataIndex: "name"
+        dataIndex: "id"
       },
       {
-        headerName: "SETTING",
-        width: "30",
+        headerName: "NAME",
+        width: "420",
         sortable: true,
-        dataIndex: "config",
-        icon: "check"
+        dataIndex: "name"
       },
       {
-        headerIcon: "assets/icons/kibana_able.svg",
+        headerIcon: "assets/icons/kafka_able.svg",
+        headerIconInfo: "Kafka",
         width: "10",
         sortable: true,
-        dataIndex: "kafkas"
+        dataIndex: "countsKafka"
       },
       {
         headerIcon: "assets/icons/couchbase_able.svg",
+        headerIconInfo: "Couchbase",
         width: "10",
         sortable: true,
-        dataIndex: "sinkdbs"
+        dataIndex: "countsCB"
       },
       {
         headerIcon: "assets/icons/druid_able.svg",
+        headerIconInfo: "Druid",
         width: "10",
         sortable: true,
-        dataIndex: "sinkdbs"
+        dataIndex: "countsDRUID"
       },
       {
         headerIcon: "assets/icons/elasticsearch_able.svg",
+        headerIconInfo: "Elasticsearch",
         width: "10",
         sortable: true,
-        dataIndex: "sinkdbs"
+        dataIndex: "countsES"
       },
       {
         headerIcon: "assets/icons/mongoDB_able.svg",
+        headerIconInfo: "MongoDB",
         width: "10",
         sortable: true,
-        dataIndex: "sinkdbs"
+        dataIndex: "countsMONGO"
       },
       {
         headerIcon: "assets/icons/hadoop_able.svg",
+        headerIconInfo: "Hadoop",
         width: "10",
         sortable: true,
-        dataIndex: "sinkdbs"
+        dataIndex: "countsHDFS"
       },
       {
         headerName: "TTL",
@@ -177,65 +186,150 @@ export class TopicListComponent {
         icon: "check"
       },
       {
-        width: "20",
-        iconButton: "cog"
+        width: "2",
+        iconButton: "cog",
+        action: "edit"
+      },
+      {
+        width: "2",
+        iconButton: "trash",
+        action: "delete"
       }
     ];
 
     return t_columns;
   }
 
-  initRow(t_feeder: Array<Topic>, t_kafka: Object, t_default: Topic) {
-    let t_topics: Array<Topic> = [];
+  btnTableAction(passValueArr: Array<any>) {
+    let action = passValueArr[0];
+    let id = passValueArr[1];
 
-    // Save topics which are already configured.
-    t_topics = t_feeder;
+    switch (action) {
+      case "edit":
+        this.openModal("edit", id);
+        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.deleteTopic(id).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_DELETED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
+    }
+  }
 
-    // Save the topic which is unconfigured yet.
-    Object.keys(t_kafka).forEach(k_id => {
-      Object.values(t_kafka[k_id]).forEach((k_t_name: string) => {
-        let found: Topic = t_feeder.find(
-          t =>
-            t.name == k_t_name &&
-            t.kafkas.map(ids => ids.toString()).includes(k_id)
-        );
-        if (!found) {
-          let seed: Topic;
-          seed = JSON.parse(JSON.stringify(t_default));
-          seed.id = null;
-          seed.name = k_t_name;
-          seed.kafkas = [];
-          seed.kafkas.push(k_id);
-          seed.config = false;
-          t_topics.push(seed);
-        }
-      });
+  openModal(mode: string = "", t_id: number | string) {
+    const modalRef = this.modalService.open(ModalComponent, {
+      size: "lg",
+      centered: true,
+      backdrop: "static"
     });
 
-    return t_topics;
-  }
-
-  buttonAction(string: string = "") {
-    switch (string) {
+    switch (mode) {
       case "new":
-        // Open new topic modal
-        console.log("new modal");
+        // Open new modal for topic
+        let newTopic: Topic;
+        newTopic = Object.assign({}, this.t_default);
+        newTopic.id = null;
+        newTopic.name = "";
+        let componentNew = new ModalContentData(TopicModalComponent, newTopic);
+
+        modalRef.componentInstance.title = "NEW_TOPIC";
+        modalRef.componentInstance.notice = "TOPIC_NEW_NOTICE";
+        modalRef.componentInstance.mode = "new";
+        modalRef.componentInstance.component = componentNew;
+
+        modalRef.componentInstance.passEntry.subscribe((data: Topic) => {
+          newTopic = Object.assign({}, data);
+          this.restApiService.addTopic(newTopic).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_CREARED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
         break;
       case "edit":
-        // Open edit of topic modal
-        console.log("edit modal");
+        // Open edit modal for topic
+        let index: number = this.topics.findIndex(t => t.id === t_id);
+        let editTopic: Topic = this.topics[index];
+        let componentEdit = new ModalContentData(
+          TopicModalComponent,
+          editTopic
+        );
+
+        modalRef.componentInstance.title = editTopic.name;
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "edit";
+        modalRef.componentInstance.component = componentEdit;
+
+        modalRef.componentInstance.passEntry.subscribe((data: Topic) => {
+          editTopic = Object.assign({}, data);
+          this.restApiService.updateTopic(editTopic).subscribe(
+            res => {
+              // this.topics[index] = editTopic;
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_UPDATED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
         break;
       case "default":
-        // Open default config of topic modal
-        console.log("default modal");
-        break;
-      default:
-        this.notificationService.success(string + " action successful!");
+        // Open default config modal for topic
+        let componentDefault = new ModalContentData(
+          TopicModalComponent,
+          this.t_default
+        );
+
+        modalRef.componentInstance.title = "DEFAULT_CONFIGURATIONS";
+        modalRef.componentInstance.notice = "TOPIC_DEFAULT_CONF_NOTICE";
+        modalRef.componentInstance.mode = "edit";
+        modalRef.componentInstance.component = componentDefault;
+
+        modalRef.componentInstance.passEntry.subscribe((data: Topic) => {
+          this.t_default = Object.assign({}, data);
+          this.restApiService.updateTopic(this.t_default).subscribe(
+            res => {
+              this.notificationService.success("SUCCESSFULLY_UPDATED");
+            },
+            err => {
+              this.notificationService.error("FAILED_UPDATED");
+            }
+          );
+          modalRef.close();
+        });
         break;
     }
   }
 
-  updateFilter(searchValue) {
+  updateFilter(searchValue: string) {
     const val = searchValue.toLowerCase();
 
     // filter our data
@@ -246,266 +340,4 @@ export class TopicListComponent {
     // update the rows
     this.topics = temp;
   }
-
-  // async initData() {
-  //   this.topicListFeeder = [];
-  //   this.topicListFeeder = await this.getTopicList("feeder");
-
-  //   //this.topicDefaultConfig = new Topic();
-  //   this.topicDefaultConfig = await this.getTopicDefaultConfig();
-
-  //   return true;
-  // }
-
-  // getTopicList(type: string) {
-  //   var data: any;
-
-  //   switch (type) {
-  //     case "feeder": {
-  //       data = this.restApiService.getTopicsFromFeeder().toPromise();
-  //       break;
-  //     }
-  //   }
-  //   return data;
-  // }
-
-  // getTopicDefaultConfig() {
-  //   return this.restApiService.getTopicDefaultConfig().toPromise();
-  // }
-
-  // async initTopicList(dmaapList: [], feederList: []) {
-  //   // var t: Topic[] = [];
-  //   // // dmaap has no topics, only show topic in db
-  //   // for (var i = 0; i < feederList.length; i++) {
-  //   //   let data = await this.getTopicDetail(feederList[i]);
-  //   //   let dbinfo = [];
-  //   //   var totalCB = 0;
-  //   //   var totalDRUID = 0;
-  //   //   var totalES = 0;
-  //   //   var totalHDFS = 0;
-  //   //   var totalMONGO = 0;
-  //   //   for (var x = 0; x < data.enabledSinkdbs.length; x++) {
-  //   //     let dbdata = await this.getDbDetail(data.enabledSinkdbs[x]);
-  //   //     dbinfo.push(dbdata);
-  //   //     if (dbinfo != undefined && dbinfo[x].type == "CB") {
-  //   //       totalCB = totalCB + 1;
-  //   //     } if (dbinfo != undefined && dbinfo[x].type == "DRUID") {
-  //   //       totalDRUID = totalDRUID + 1;
-  //   //     } if (dbinfo != undefined && dbinfo[x].type == "ES") {
-  //   //       totalES = totalES + 1;
-  //   //     } if (dbinfo != undefined && dbinfo[x].type == "HDFS") {
-  //   //       totalHDFS = totalHDFS + 1;
-  //   //     } if (dbinfo != undefined && dbinfo[x].type == "MONGO") {
-  //   //       totalMONGO = totalMONGO + 1;
-  //   //     }
-  //   //   }
-  //   //   let feed = {
-  //   //     name: data.name,
-  //   //     login: data.login,
-  //   //     password: data.password,
-  //   //     enabledSinkdbs: data.enabledSinkdbs,
-  //   //     sinkdbs: data.sinkdbs,
-  //   //     enabled: data.enabled,
-  //   //     saveRaw: data.saveRaw,
-  //   //     dataFormat: data.dataFormat,
-  //   //     ttl: data.ttl,
-  //   //     correlateClearedMessage: data.correlateClearedMessage,
-  //   //     messageIdPath: data.messageIdPath,
-  //   //     kafkas: data.kafkas.length,
-  //   //     type: data.type,
-  //   //     CB: totalCB,
-  //   //     DRUID: totalDRUID,
-  //   //     ES: totalES,
-  //   //     HDFS: totalHDFS,
-  //   //     MONGO: totalMONGO
-  //   //   };
-  //   //   t.push(feed);
-  //   // }
-  //   // return t;
-  // }
-
-  // onActivate(event) {
-  //   const emitType = event.type;
-  //   if (emitType == "dblclick") {
-  //     console.log("Activate Event", event);
-  //     let name = event.row.name;
-  //     this.openTopicModal(name);
-  //   }
-  // }
-
-  // openNewTopicModal() {
-  //   const modalRef = this.modalService.open(NewTopicModelComponent, {
-  //     size: "lg",
-  //     centered: true
-  //   });
-  //   modalRef.componentInstance.newTopic = this.tempNewTopic;
-  //   modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-  //     console.log(receivedEntry, "newtopic receivedEntry");
-  //     this.tempNewTopic = receivedEntry;
-  //     this.restApiService.addNewTopic(this.tempNewTopic).subscribe(
-  //       res => {
-  //         this.init();
-  //         this.notificationService.success("SUCCESSFULLY_CREARED");
-  //         modalRef.close();
-  //         this.updateFilter(this.searchText.nativeElement.value);
-  //       },
-  //       err => {
-  //         this.notificationService.error(err);
-  //         modalRef.close();
-  //         this.updateFilter(this.searchText.nativeElement.value);
-  //       }
-  //     );
-  //   });
-  // }
-
-  // openTopicModal(name: string) {
-  //   if (name == "config") {
-  //     const modalRef = this.modalService.open(TopicConfigModalComponent, {
-  //       windowClass: "dl-md-modal",
-  //       centered: true
-  //     });
-  //     modalRef.componentInstance.title = "Topics Default Configurations";
-  //     modalRef.componentInstance.topic = this.topicDefaultConfig;
-  //     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-  //       this.restApiService
-  //         .updateTopicDefaultConfig(this.topicDefaultConfig)
-  //         .subscribe(
-  //           res => {
-  //             this.topicDefaultConfig = receivedEntry;
-  //             this.topics.forEach(t => {
-  //               if (!t.type) {
-  //                 // Unconfigure topics
-  //                 t.login = this.topicDefaultConfig.login;
-  //                 t.password = this.topicDefaultConfig.password;
-  //                 t.enabledSinkdbs = this.topicDefaultConfig.enabledSinkdbs;
-  //                 // t.sinkdbs = this.topicDefaultConfig.sinkdbs; //todo
-  //                 t.enabled = this.topicDefaultConfig.enabled;
-  //                 t.saveRaw = this.topicDefaultConfig.saveRaw;
-  //                 t.dataFormat = this.topicDefaultConfig.dataFormat;
-  //                 t.ttl = this.topicDefaultConfig.ttl;
-  //                 t.correlateClearedMessage = this.topicDefaultConfig.correlateClearedMessage;
-  //                 t.messageIdPath = this.topicDefaultConfig.messageIdPath;
-  //               }
-  //             });
-  //             this.notificationService.success("Success updated.");
-  //             modalRef.close();
-  //           },
-  //           err => {
-  //             this.notificationService.error(err);
-  //             modalRef.close();
-  //           }
-  //         );
-  //     });
-  //   } else {
-  //     const index = this.temp.findIndex(t => t.name === name);
-  //     const modalRef = this.modalService.open(TopicDetailModalComponent, {
-  //       size: "lg",
-  //       centered: true
-  //     });
-  //     modalRef.componentInstance.topic = this.temp[index];
-  //     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-  //       this.tempTopicDetail = receivedEntry;
-  //       // Configured topic
-  //       if (this.tempTopicDetail.type) {
-  //         this.restApiService.getTopicsFromFeeder().subscribe(
-  //           res => {
-  //             if (res.find(name => name === this.tempTopicDetail.name)) {
-  //               // Update topic from db
-  //               this.restApiService.upadteTopic(this.tempTopicDetail).subscribe(
-  //                 res => {
-  //                   this.temp[index] = this.tempTopicDetail;
-  //                   this.topics = this.temp;
-  //                   this.notificationService.success("SUCCESSFULLY_UPDATED");
-  //                   modalRef.close();
-  //                   this.updateFilter(this.searchText.nativeElement.value);
-  //                 },
-  //                 err => {
-  //                   this.notificationService.error(err);
-  //                   modalRef.close();
-  //                   this.updateFilter(this.searchText.nativeElement.value);
-  //                 }
-  //               );
-  //             } else {
-  //               // Insert topic from db
-  //               this.restApiService.addTopic(this.tempTopicDetail).subscribe(
-  //                 res => {
-  //                   this.init();
-  //                   this.notificationService.success("SUCCESSFULLY_CREARED");
-  //                   modalRef.close();
-  //                   this.updateFilter(this.searchText.nativeElement.value);
-  //                 },
-  //                 err => {
-  //                   this.notificationService.error(err);
-  //                   modalRef.close();
-  //                   this.updateFilter(this.searchText.nativeElement.value);
-  //                 }
-  //               );
-  //             }
-  //           },
-  //           err => {
-  //             this.notificationService.error(err);
-  //             modalRef.close();
-  //           }
-  //         );
-  //       } else {
-  //         // Reset to default and delete topic from db
-  //         this.restApiService.deleteTopic(this.tempTopicDetail.name).subscribe(
-  //           res => {
-  //             this.init();
-  //             this.notificationService.success("SUCCESSFULLY_DELETED");
-  //             modalRef.close();
-  //             this.updateFilter(this.searchText.nativeElement.value);
-  //           },
-  //           err => {
-  //             this.notificationService.error(err);
-  //             modalRef.close();
-  //             this.updateFilter(this.searchText.nativeElement.value);
-  //           }
-  //         );
-  //       }
-  //     });
-  //   }
-  // }
-
-  // deleteTopicModal(name: string) {
-  //   const index = this.temp.findIndex(t => t.name === name);
-  //   const modalRef = this.modalService.open(AlertComponent, {
-  //     size: "sm",
-  //     centered: true
-  //   });
-  //   modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
-  //   console.log(this.temp[index]);
-  //   modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-  //     this.restApiService.deleteTopic(this.temp[index].name).subscribe(
-  //       res => {
-  //         this.init();
-  //         this.notificationService.success("SUCCESSFULLY_DELETED");
-  //         modalRef.close();
-  //         this.updateFilter(this.searchText.nativeElement.value);
-  //       },
-  //       err => {
-  //         this.notificationService.error(err);
-  //         modalRef.close();
-  //         this.updateFilter(this.searchText.nativeElement.value);
-  //       }
-  //     );
-  //   });
-  // }
-
-  // getTopicDetail(id) {
-  //   return this.restApiService.getTopicDetail(id).toPromise();
-  // }
-
-  // getDbDetail(id) {
-  //   return this.restApiService.getDbDetail(id).toPromise();
-  // }
-
-  // GroupByDbType = (array, key) => {
-  //   return array.reduce((result, currentValue) => {
-  //     (result[currentValue.type] = result[currentValue.type] || []).push(
-  //       currentValue
-  //     );
-  //     return result;
-  //   }, {});
-  // };
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.css
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.css
@@ -0,0 +1 @@
+
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
new file mode 100644
index 00000000..f5f3a7ed
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html
@@ -0,0 +1,213 @@
+<!--
+============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=========================================================
+-->
+
+<mat-tab-group #tabRef [selectedIndex]="this.selectedIndex" (click)="this.onClickMatTab(tabRef.selectedIndex)"
+  mat-align-tabs="center">
+  <mat-tab label="Information">
+    <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">
+            <!-- For new topic -->
+            <div *ngIf="isAddingMode()">
+              <input id="tname" type="text" class="form-control dl-input-text" [(ngModel)]="this.data.name"
+                [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)"
+                (click)="click$.next($event.target.value)" #instance="ngbTypeahead" />
+            </div>
+            <!-- For modified topic -->
+            <div *ngIf="!isAddingMode()">
+              <input [(ngModel)]="this.data.name" [disabled]="true" class="form-control dl-input-text" type="text" />
+            </div>
+          </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">{{ "DATA_FORMAT" | translate }}</label>
+          </div>
+          <div class="col-md-6">
+            <label class="dl-emphasis1">{{ "TTL" | translate }} (days)</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <select [(ngModel)]="this.data.dataFormat" class="custom-select dl-input-text">
+              <option *ngFor="let item of dataFormats" [selected]="item == this.data.dataFormat">
+                {{ item }}
+              </option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <input [(ngModel)]="this.data.ttl" class="form-control dl-input-text" type="text" placeholder="3650"
+              (input)="this.adminService.onKeyPressNumber($event)" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-6">
+            <label class="dl-emphasis1">{{
+              "SAVE_RAW_DATA" | translate
+            }}</label>
+          </div>
+          <div class="col-md-6">
+            <label class="dl-emphasis1">{{
+              "CORRELATE_CLEARED_MESSAGE" | translate
+            }}</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="input-group-text dl-input-chk-label">
+                  <input [(ngModel)]="this.data.saveRaw" id="chkSaveRaw" type="checkbox" />
+                  <span class="dl-input-checkmark"></span>
+                </label>
+              </div>
+              <label class="form-control dl-input-chk" for="chkSaveRaw">
+                Save
+              </label>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="input-group-text dl-input-chk-label">
+                  <input [(ngModel)]="this.data.correlateClearedMessage" id="chkMsg" type="checkbox" />
+                  <span class="dl-input-checkmark"></span>
+                </label>
+              </div>
+              <label class="form-control dl-input-chk" for="chkMsg">
+                Correlate
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-6">
+            <label class="dl-emphasis1">{{
+              "ID_EXTRACTION" | translate
+            }}</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-9">
+            <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()" />
+              </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>
+  </mat-tab>
+
+  <mat-tab label="Kafka">
+    <div class="container p-4">
+      <div class="form-group" *ngFor="let item of this.kafkas; let i = index">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="input-group">
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <label class="input-group-text dl-input-chk-label">
+                    <input id="chkSaveRaw{{ i }}" [(ngModel)]="item.checkedToSave" type="checkbox" (change)="
+                        this.onChabgeSelKafka($event.target.checked, item.id)
+                      " />
+                    <span class="dl-input-checkmark"></span>
+                  </label>
+                </div>
+                <label class="form-control dl-input-chk" for="chkSaveRaw{{ i }}">
+                  {{ item.name }}
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </mat-tab>
+
+  <mat-tab label="Sink">
+    <div class="container p-4">
+      <div class="form-group" *ngFor="let dbType of this.dbTypeIds">
+        <div class="row">
+          <div class="col-md-6">
+            <label class="dl-emphasis1">{{ dbType }}</label>
+          </div>
+        </div>
+
+        <div class="row" *ngFor="let db of this.dbs; let i = index">
+          <div class="col-md-6 p-1" *ngIf="db.dbTypeId == dbType">
+            <div class="input-group">
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <label class="input-group-text dl-input-chk-label">
+                    <input id="chkSaveRaw{{ i }}" [(ngModel)]="db.checkedToSave" type="checkbox" (change)="
+                        this.onChabgeSelDb($event.target.checked, db.id)
+                      " />
+                    <span class="dl-input-checkmark"></span>
+                  </label>
+                </div>
+                <label class="form-control dl-input-chk" for="chkSaveRaw{{ i }}">
+                  {{ db.name }}
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </mat-tab>
+</mat-tab-group>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts
new file mode 100644
index 00000000..a856a757
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts
@@ -0,0 +1,50 @@
+/*
+ * ============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 { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { TopicModalComponent } from "./topic-modal.component";
+
+describe("TopicModalComponent", () => {
+  let component: TopicModalComponent;
+  let fixture: ComponentFixture<TopicModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TopicModalComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopicModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..3f0223eb
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts
@@ -0,0 +1,262 @@
+/*
+ * ============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, ViewChild } from "@angular/core";
+
+import { NgbActiveModal, NgbTypeahead } from "@ng-bootstrap/ng-bootstrap";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+import { AdminService } from "src/app/core/services/admin.service";
+import { Topic } from "src/app/core/models/topic.model";
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  mergeMap
+} from "rxjs/operators";
+import { from, Subject, Observable, merge } from "rxjs";
+import { Kafka } from "src/app/core/models/kafka.model";
+import { Db } from "src/app/core/models/db.model";
+
+@Component({
+  selector: "app-topic-modal",
+  templateUrl: "./topic-modal.component.html",
+  styleUrls: ["./topic-modal.component.css"]
+})
+export class TopicModalComponent implements OnInit {
+  @Input() data: Topic;
+  @Input() mode: string;
+  @Input() selectedIndex: number;
+
+  dataFormats: Array<string> = ["JSON", "XML"];
+  idExFields: Array<any> = [];
+  idExNewField: any = {};
+
+  kafkas: Array<Kafka> = [];
+  dbs: Array<Db> = [];
+  dbTypeIds: Array<string> = [];
+
+  // Autocomplete input
+  @ViewChild("instance") instance: NgbTypeahead;
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+  newTopicList: Array<string>;
+
+  search = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged()
+    );
+    const clicksWithClosedPopup$ = this.click$.pipe(
+      filter(() => !this.instance.isPopupOpen())
+    );
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+      map(term =>
+        (term === ""
+          ? this.newTopicList
+          : this.newTopicList.filter(
+              v => v.toLowerCase().indexOf(term.toLowerCase()) > -1
+            )
+        ).slice(0, 10)
+      )
+    );
+  };
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService,
+    private restApiService: RestApiService
+  ) {}
+
+  ngOnInit() {
+    // Get ID extration field
+    this.idExFields = [];
+    if (this.data.messageIdPath != null) {
+      let feed = this.data.messageIdPath.split(",");
+      for (let i = 0; i < feed.length; i++) {
+        let data = { item: feed[i] };
+        this.idExFields.push(data);
+      }
+    } else {
+      this.idExFields.push([]);
+    }
+
+    // Init data
+    this.initData();
+  }
+
+  initData() {
+    this.getKafkas();
+    this.getDbs();
+
+    if (this.mode === "new") {
+      this.getNewTopicList();
+    }
+  }
+
+  getKafkas() {
+    const get_kafkas = this.restApiService.getAllKafka().pipe(
+      mergeMap(ks => from(ks)),
+      map(k => {
+        if (
+          this.data.kafkas &&
+          this.data.kafkas.toString().includes(k.id.toString())
+        ) {
+          k.checkedToSave = true;
+        } else {
+          k.checkedToSave = false;
+        }
+        this.kafkas.push(k);
+      })
+    );
+
+    get_kafkas.subscribe();
+  }
+
+  getDbs() {
+    const get_dbs = this.restApiService.getAllDbs().pipe(
+      mergeMap(dbs => from(dbs)),
+      map(db => {
+        if (!this.dbTypeIds.includes(db.dbTypeId)) {
+          this.dbTypeIds.push(db.dbTypeId);
+        }
+        if (
+          this.data.sinkdbs &&
+          this.data.sinkdbs.toString().includes(db.id.toString())
+        ) {
+          db.checkedToSave = true;
+        } else {
+          db.checkedToSave = false;
+        }
+        this.dbs.push(db);
+      })
+    );
+
+    get_dbs.subscribe();
+  }
+
+  getNewTopicList() {
+    const get_topicName = this.restApiService.getTopicNames().pipe(
+      map(names => {
+        this.newTopicList = names;
+      })
+    );
+
+    get_topicName.subscribe();
+  }
+
+  onChabgeSelKafka(checked: boolean, id: string | number) {
+    // Array initialize
+    if (!this.data.kafkas) this.data.kafkas = [];
+
+    if (checked) {
+      // Add kafka_id into topic.kafkas
+      if (
+        this.data.kafkas &&
+        !this.data.kafkas.toString().includes(id.toString())
+      ) {
+        this.data.kafkas.push(id.toString());
+      }
+    } else {
+      // Remove kafka_id from topic.kafkas
+      if (
+        this.data.kafkas &&
+        this.data.kafkas.toString().includes(id.toString())
+      ) {
+        this.data.kafkas.forEach((k_id, index) => {
+          if (k_id.toString() === id.toString()) {
+            this.data.kafkas.splice(index, 1);
+            return;
+          }
+        });
+      }
+    }
+  }
+
+  onChabgeSelDb(checked: boolean, id: string | number) {
+    // Array initialize
+    if (!this.data.sinkdbs) this.data.sinkdbs = [];
+
+    if (checked) {
+      // Add db_id into topic.sinkdbs
+      if (
+        this.data.sinkdbs &&
+        !this.data.sinkdbs.toString().includes(id.toString())
+      ) {
+        this.data.sinkdbs.push(id.toString());
+      }
+    } else {
+      // Remove db_id from "topic.sinkdbs"
+      if (
+        this.data.sinkdbs &&
+        this.data.sinkdbs.toString().includes(id.toString())
+      ) {
+        this.data.sinkdbs.forEach((db_id, index) => {
+          if (db_id.toString() === id.toString()) {
+            this.data.sinkdbs.splice(index, 1);
+            return;
+          }
+        });
+      }
+    }
+  }
+
+  onClickAddIdField() {
+    this.idExFields.push(this.idExNewField);
+    this.idExNewField = {};
+  }
+
+  onClickDelIdField(index: number) {
+    if (this.idExFields.length > 1) {
+      this.idExFields.splice(index, 1);
+    }
+  }
+
+  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;
+      }
+    }
+  }
+
+  onClickMatTab(index: number) {
+    this.selectedIndex = index;
+  }
+
+  isAddingMode() {
+    let flag: boolean = false;
+
+    if (this.mode === "new") flag = true;
+
+    return flag;
+  }
+}
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 13872a41..11654612 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": {
-    "FEEDER": "DataLake Feeder",
+    "FEEDFER": "DataLake Feeder",
     "KAFKA": "Kafka",
     "TOPICS": "Topics",
     "DATABASE": "Database",
@@ -11,7 +11,7 @@
   },
   "NAME": "Name",
   "STATUS": "Status",
-  "SINK": "Target",
+  "SINK": "Sink",
   "AUTHENTICATION": "Authentication",
   "DATA_FORMAT": "Data format",
   "TTL": "TTL",
@@ -35,6 +35,7 @@
   "ERROR_CODE": "Error Code",
   "SUCCESS_UPDATED": "Success updated",
   "TOPIC_DEFAULT_CONF_NOTICE": "Notice: This topic uses the default topics settings.",
+  "TOPIC_NEW_NOTICE": "Notice: A new topic will be created.",
   "HOME": "Home",
   "ConfigDashboard": "Config Portal",
   "EDIT": "Edit",
@@ -56,7 +57,7 @@
   "NODATA": "No Data",
   "NEW_TEMPLATE": "New design",
   "TEMPLATE_BODY": "Body",
-  "FIELUPLOAD": "Select File ...",
+  "FIELUPLOAD": "Import",
   "SUCCESSFULLY_CREARED": "Successfully created.",
   "FAILED_CREARED": "Failed updated.",
   "SUCCESSFULLY_UPDATED": "Successfully updated.",
@@ -83,6 +84,5 @@
   "NEW_HDFS": "New Hdfs",
   "SECURE_COMMUNICATION": "Secure Communication",
   "NEW_TOOL": "New Tool",
-  "NEW_KIBANA": "New Kibana",
-  "DATABASE": "Database"
+  "NEW_KIBANA": "New Kibana"
 }
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
index 0ba8503f..cce513b2 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
@@ -1,40 +1,41 @@
 {
   "SIDEBAR": {
-    "FEEDER": "DataLake Feeder",
+    "FEEDFER": "DataLake Feeder",
     "TOPICS": "Topics",
-    "KAFKA":"Kafka",
+    "KAFKA": "卡夫卡",
     "DATABASE": "Database",
-    "DASHBOARD": "工具设置",
-    "DASHBOARDLIST": "工具",
+    "DASHBOARD": "仪表板设置",
+    "DASHBOARDLIST": "仪表板",
     "TEMPLATE": "模板",
     "ABOUT": "About"
   },
   "NAME": "名称",
   "STATUS": "状态",
   "SINK": "数据库",
-  "AUTHENTICATION": "身份验证​",
+  "AUTHENTICATION": "身份验证",
   "DATA_FORMAT": "数据格式",
   "TTL": "失效时间(天)",
   "SAVE_RAW_DATA": "保存原始数据",
-  "CORRELATE_CLEARED_MESSAGE": "关联已清除的消息​",
-  "DEFAULT_CONFIGURATIONS": "默认配置​",
-  "ID_EXTRACTION": "ID提取​",
+  "CORRELATE_CLEARED_MESSAGE": "关联已清除的消息",
+  "DEFAULT_CONFIGURATIONS": "默认配置",
+  "ID_EXTRACTION": "ID提取",
   "CONFIGURED": "已配置",
-  "UNCONFIGURED": "未配置​",
+  "UNCONFIGURED": "未配置",
   "NEW_TOPIC": "新建主题",
-  "DATABASE_CONNECTIONS": "数据库连接​",
+  "DATABASE_CONNECTIONS": "数据库连接",
   "BUCKET": "Bucket",
-  "HOST": "主机​",
-  "PORT": "端口​",
-  "ENABLE_SSL": "加密通信​",
-  "VERIFY": "验证​",
+  "HOST": "主机",
+  "PORT": "端口",
+  "ENABLE_SSL": "加密通信",
+  "VERIFY": "验证",
   "SETTING": "设置",
   "DOCUMENT_STORE": "文档存储",
   "SEARCH_ENGINE": "搜索引擎",
   "DELETE": "删除",
-  "ERROR_CODE": "错误代码​",
-  "SUCCESS_UPDATED": "更新成功​",
-  "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置。​",
+  "ERROR_CODE": "错误代码",
+  "SUCCESS_UPDATED": "更新成功",
+  "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置",
+  "TOPIC_NEW_NOTICE": "注意: 一个新Topic将会被创建",
   "HOME": "首页",
   "ConfigDashboard": "配置仪表板",
   "EDIT": "编辑",
@@ -65,5 +66,5 @@
   "FAILED_DELETED": "删除失败",
   "Deploy_SUCCESSFULLY": "部署成功",
   "Deploy_FAILED": "部署失败",
-  "ARE_YOU_SURE_DELETE": "您确定您要删除吗？"
-}
\ No newline at end of file
+  "ARE_YOU_SURE_DELETE": "您确定您要删除吗?"
+}
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
index a3649be0..88c2c8f6 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
@@ -1,40 +1,41 @@
 {
   "SIDEBAR": {
-    "FEEDER": "DataLake Feeder",
-    "KAFKA":"Kafka",
+    "FEEDFER": "DataLake Feeder",
+    "KAFKA": "卡夫卡",
     "TOPICS": "Topics",
     "DATABASE": "Database",
-    "DASHBOARD": "工具設置",
-    "DASHBOARDLIST": "工具",
+    "DASHBOARD": "儀表板設置",
+    "DASHBOARDLIST": "儀表板",
     "TEMPLATE": "模板",
     "ABOUT": "About"
   },
   "NAME": "名稱",
-  "STATUS": "狀態​",
+  "STATUS": "狀態",
   "SINK": "資料庫",
-  "AUTHENTICATION": "身份驗證​",
-  "DATA_FORMAT": "檔案格式​",
-  "TTL": "存活時間​(天)",
-  "SAVE_RAW_DATA": "保存原始資料​",
-  "CORRELATE_CLEARED_MESSAGE": "關聯已清除的訊息​",
-  "DEFAULT_CONFIGURATIONS": "預設配置​",
-  "ID_EXTRACTION": "ID提取​",
+  "AUTHENTICATION": "身份驗證",
+  "DATA_FORMAT": "檔案格式",
+  "TTL": "存活時間(天)",
+  "SAVE_RAW_DATA": "保存原始資料",
+  "CORRELATE_CLEARED_MESSAGE": "關聯已清除的訊息",
+  "DEFAULT_CONFIGURATIONS": "預設配置",
+  "ID_EXTRACTION": "ID提取",
   "CONFIGURED": "已配置",
-  "UNCONFIGURED": "未配置​",
+  "UNCONFIGURED": "未配置",
   "NEW_TOPIC": "新建主題",
-  "DATABASE_CONNECTIONS": "資料庫連線​",
+  "DATABASE_CONNECTIONS": "資料庫連線",
   "BUCKET": "Bucket",
   "HOST": "主機",
   "PORT": "埠",
-  "ENABLE_SSL": "加密通信​",
-  "VERIFY": "驗證​",
+  "ENABLE_SSL": "加密通信",
+  "VERIFY": "驗證",
   "SETTING": "設定",
   "DOCUMENT_STORE": "文檔儲存",
   "SEARCH_ENGINE": "搜尋引擎",
   "DELETE": "刪除",
   "ERROR_CODE": "錯誤代碼",
-  "SUCCESS_UPDATED": "更新成功​",
-  "TOPIC_DEFAULT_CONF_NOTICE": "注意：此Topic目前使用預設配置。​",
+  "SUCCESS_UPDATED": "更新成功",
+  "TOPIC_DEFAULT_CONF_NOTICE": "注意: 此Topic目前使用預設配置",
+  "TOPIC_NEW_NOTICE": "注意: 一個新Topic將會被新增",
   "HOME": "首頁",
   "ConfigDashboard": "配置儀表板",
   "EDIT": "編輯",
@@ -65,5 +66,5 @@
   "FAILED_DELETED": "删除失败",
   "Deploy_SUCCESSFULLY": "部署成功",
   "Deploy_FAILED": "部署失败",
-  "ARE_YOU_SURE_DELETE": "您確定您要刪除嗎？"
-}
\ No newline at end of file
+  "ARE_YOU_SURE_DELETE": "您確定您要刪除嗎?"
+}
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index 096bd228..64cc8eae 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.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.
@@ -25,6 +25,8 @@
  *
  */
 
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
 html {
   height: 100%;
 }
@@ -235,6 +237,16 @@ hr {
   line-height: 27px;
 }
 
+/* override mat-tab active color*/
+.mat-tab-label-active {
+  color: #5dbebb;
+}
+
+.mat-tab-group.mat-primary .mat-ink-bar,
+.mat-tab-nav-bar.mat-primary .mat-ink-bar {
+  background: #5dbebb;
+}
+
 .dl-icon-enable {
   color: #5dbebb;
 }
@@ -642,18 +654,30 @@ ngb-modal-window.templatess .modal-dialog-centered {
   color: #BDBEC0
 }
 
+/* placeholder */
 input::-webkit-input-placeholder {
-  color: #313032 !important;
+  color: #c1bdc5 !important;
+  opacity: 1;
 }
 
 :-moz-placeholder {
-  color: #313032 !important;
+  color: #c1bdc5 !important;
+  opacity: 1;
 }
 
 ::-moz-placeholder {
-  color: #313032 !important;
+  color: #c1bdc5 !important;
+  opacity: 1;
 }
 
 :-ms-input-placeholder {
-  color: #313032 !important;
+  color: #c1bdc5 !important;
+  opacity: 1;
+}
+
+::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #c1bdc5;
+  opacity: 1;
+  /* Firefox */
 }