dbs ui code

Change-Id: I7e4c2501ba8437394cff6355671755e53071f2a3
Issue-ID: DCAEGEN2-1877
Signed-off-by: ZhangZihao <zhangzihao@chinamobile.com>

24 files changed, 1326 insertions, 990 deletions

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 84d17524..ca7f379e 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
@@ -25,6 +25,7 @@
  */
 
 export class Db {
+  id: number;
   name: string;
   enabled: boolean;
   host: string;
@@ -33,4 +34,5 @@ export class Db {
   encrypt: boolean;
   login: string;
   pass: string;
+  dbTypeId: string;
 }
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 cb210086..e5d6e708 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
@@ -165,6 +165,14 @@ export class RestApiService {
   /*
     Database
   */
+  getDbEncryptList(flag): Observable<any> {
+    return this.http.get(prefix + "dbs/list/?encrypt="+flag).pipe(
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
   getDbList(): Observable<any> {
     return this.http.get(prefix + "dbs").pipe(
       retry(1),
@@ -181,7 +189,15 @@ export class RestApiService {
     );
   }
 
-  upadteDb(d: Db): Observable<any> {
+  deleteDb(id): Observable<any> {
+    return this.http.delete(prefix + "dbs/" + id).pipe( //online
+      retry(1),
+      map(this.extractData2),
+      catchError(this.handleError)
+    );
+  }
+
+  updateDb(d: Db): Observable<any> {
     return this.http
       .put(prefix + "dbs", d)
       .pipe(
@@ -191,6 +207,16 @@ export class RestApiService {
       );
   }
 
+  createDb(d: Db): Observable<any> {
+    return this.http
+      .post(prefix + "dbs", d)
+      .pipe(
+        retry(1),
+        tap(_ => this.extractData),
+        catchError(this.handleError)
+      );
+  }
+
   /*
     Feeder
   */
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html
index 490bf49e..21a06e98 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html
@@ -19,37 +19,23 @@ limitations under the License.
 -->
 
 <div class="p-0">
-  <div class="modal-title p-0 pb-4 w-25 border-right">
-
-  </div>
-
-  <div class="modal-body p-0">
-    <div class="d-flex">
-
-      <!-- Menu -->
-      <div class="flex-fill w-25 border-right">
-        <div class="nav flex-column nav-pills" id="menu-tab1" role="tablist" aria-orientation="vertical">
-
-          <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab"
-            aria-controls="v-pills-all" aria-selected="true">All</a>
-
-          <a class="nav-link" id="v-pills-olap-tab" data-toggle="pill" href="#v-pills-olap" role="tab"
-            aria-controls="v-pills-olap" aria-selected="false">OLAP</a>
-
-          <a class="nav-link" id="v-pills-doc-tab" data-toggle="pill" href="#v-pills-doc" role="tab"
-            aria-controls="v-pills-doc" aria-selected="false">Document</a>
-
-          <a class="nav-link" id="v-pills-search-tab" data-toggle="pill" href="#v-pills-search" role="tab"
-            aria-controls="v-pills-search" aria-selected="false">Search Engine</a>
-          <a class="nav-link" id="v-pills-hadoop-tab" data-toggle="pill" href="#v-pills-hadoop" role="tab"
-            aria-controls="v-pills-hadoop" aria-selected="false">Hadoop</a>
+  <div class="modal-header pb-0 border-0">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ 'NEW_DB' | translate }}</label>
         </div>
       </div>
-
-      <!-- Content -->
-      <div class="flex-fill w-75">
-
-        <div class="tab-content mb-auto" id="v-pills-tabContent" style="height: 320px;">
+      <div class="row">
+        <div class="col-md-12">
+          <hr/>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-body p-0">
+    <div class="container-fluid">
+        <div class="tab-content mb-auto" id="v-pills-tabContent">
           <!-- All -->
           <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
             <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
@@ -61,44 +47,11 @@ limitations under the License.
                 aria-selected="true">Elasticsearch</a>
               <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab"
                 aria-selected="true">MongoDB</a>
-            </div>
-          </div>
-
-          <!-- OLAP -->
-          <div class="tab-pane fade" id="v-pills-olap" role="tabpanel" aria-labelledby="v-pills-olap-tab">
-            <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
-              <a class="nav-link" (click)="this.clickItem('Druid')" data-toggle="pill" role="tab"
-                aria-selected="true">Druid</a>
-            </div>
-          </div>
-
-          <!-- Document -->
-          <div class="tab-pane fade" id="v-pills-doc" role="tabpanel" aria-labelledby="v-pills-doc-tab">
-            <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
-              <a class="nav-link" (click)="this.clickItem('Couchbase')" data-toggle="pill" role="tab"
-                aria-selected="true">Couchbase</a>
-              <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab"
-                aria-selected="true">MongoDB</a>
-            </div>
-          </div>
-
-          <!-- Search engine -->
-          <div class="tab-pane fade" id="v-pills-search" role="tabpanel" aria-labelledby="v-pills-search-tab">
-            <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
-              <a class="nav-link" (click)="this.clickItem('Elasticsearch')" data-toggle="pill" role="tab"
-                aria-selected="true">Elasticsearch</a>
-            </div>
-          </div>
-
-          <!-- Hadoop -->
-          <div class="tab-pane fade" id="v-pills-hadoop" role="tabpanel" aria-labelledby="v-pills-hadoop-tab">
-            <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
               <a class="nav-link" (click)="this.clickItem('HDFS')" data-toggle="pill" role="tab"
-                aria-selected="true">HDFS</a>
+                 aria-selected="true">HDFS</a>
             </div>
           </div>
         </div>
-
         <div class="d-flex mt-auto justify-content-end p-3">
           <div class="p-1 col-sm-3">
             <span>
@@ -114,10 +67,7 @@ limitations under the License.
               </button>
             </span>
           </div>
-        </div>
-
       </div>
     </div>
-
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts
index 3f47bdd1..30665d87 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts
@@ -22,10 +22,21 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Output, EventEmitter } from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import {Component, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
+import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {CouchbaseComponent} from "src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component";
+import {DruidComponent} from "src/app/views/database/database-list/dbs-modal/druid/druid.component";
+import {ElasticsearchComponent} from "src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
+import {MongodbComponent} from "src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component";
+import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component";
+import {Db} from "src/app/core/models/db.model";
+import {RestApiService} from "src/app/core/services/rest-api.service";
+import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-database-add-modal",
@@ -35,8 +46,18 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 export class DatabaseAddModalComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
   seletedItem: string = "";
-
-  constructor(public activeModal: NgbActiveModal) {}
+  dbList: any = [];
+  dbs: Db[] = [];
+  loading: Boolean = true;
+  dbNew: Db;
+  db_NewBody: Db;
+  constructor(
+    public activeModal: NgbActiveModal,
+    private spinner: NgxSpinnerService,
+    private notificationService: ToastrNotificationService,
+    private modalService: NgbModal,
+    private dbApiService: RestApiService
+  ) {}
 
   ngOnInit() {}
 
@@ -45,6 +66,88 @@ export class DatabaseAddModalComponent {
   }
 
   passBack() {
-    this.passEntry.emit(this.seletedItem);
+    console.log(this.seletedItem, "next");
+    this.openNewModal(this.seletedItem);
+  }
+
+  newDb(modalRef) {
+    this.dbNew = new Db();
+    this.db_NewBody = new Db();
+    modalRef.componentInstance.db = this.db_NewBody;
+    modalRef.componentInstance.dbList_length = this.dbList.length;
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      this.db_NewBody = receivedEntry;
+      this.dbApiService
+        .createDb(this.db_NewBody)
+        .subscribe(
+          res => {
+            this.spinner.hide();
+            if (res.statusCode == 200) {
+              this.dbNew = res.returnBody;
+              this.dbList.push(this.dbNew);
+              this.dbList = [...this.dbList];
+              this.notificationService.success("SUCCESSFULLY_CREARED");
+            } else {
+              this.notificationService.error("FAILED_CREARED");
+            }
+            modalRef.close();
+          },
+          err => {
+            this.spinner.hide();
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    });
+  }
+
+  openNewModal(name: string) {
+    var modalRef;
+
+    switch (name) {
+      case "Couchbase": {
+        modalRef = this.modalService.open(CouchbaseComponent, {
+          size: "lg",
+          centered: true
+        });
+        this.newDb(modalRef);
+        break;
+      }
+      case "Druid": {
+        modalRef = this.modalService.open(DruidComponent, {
+          size: "lg",
+          centered: true
+        });
+        this.newDb(modalRef);
+        break;
+      }
+      case "Elasticsearch": {
+        modalRef = this.modalService.open(ElasticsearchComponent, {
+          size: "lg",
+          centered: true
+        });
+        this.newDb(modalRef);
+        break;
+      }
+      case "MongoDB": {
+        modalRef = this.modalService.open(MongodbComponent, {
+          size: "lg",
+          centered: true
+        });
+        this.newDb(modalRef);
+        break;
+      }
+      case "HDFS": {
+        modalRef = this.modalService.open(HdfsComponent, {
+          size: "lg",
+          centered: true
+        });
+        this.newDb(modalRef);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css
index 15261b48..042506d2 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.css
@@ -1,63 +1,20 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
-*/
-
+    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
 
-.db-block {
-  min-width: 180px;
-  min-height: 180px;
-  padding: 10px;
-}
+            http://www.apache.org/licenses/LICENSE-2.0
 
-.db-panel {
+    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.
+*/
+.topic-list-panel {
   background: #FFFFFF;
   box-shadow: 3px 3px 11px 0 #D2D3D5;
   border-radius: 20px;
-  position: relative;
-  font-family: "Open Sans", sans-serif;
-  font-weight: 600;
-  font-size: 18px;
-  color: #313032;
-  text-align: center;
-  padding: 10px;
-}
-
-.db-dropdown {
-  background-color: #ffffff;
-}
-
-.db-dropdown:hover {
-  background-color: #ffffff;
-}
-
-.db-config-icon {
-  color: #5DBEBB;
-  background-color: #ffffff;
-}
-
-.db-config-icon:hover {
-  background-color: #D2D3D5;
-}
-
-.dropdown-item {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html
index 829d6c62..ca33d91f 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.html
@@ -1,235 +1,91 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
 
-     http://www.apache.org/licenses/LICENSE-2.0
+    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
 
-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="d-flex flex-wrap">
-  <!-- Database list -->
-  <div *ngFor="let db of this.dbs" class="col-sm-3 db-block">
-    <div class="db-panel" (click)="this.openDetailModal(db.name)" style="cursor: pointer;padding: 40px;">
-      <div class="d-flex flex-column align-content-center">
-        <div class="db-box">
-            <div class="align-self-center" style="height: 130px;">
-              <!-- Couchbase -->
-              <div class="p-0" *ngIf="db.name == 'Couchbase'">
-                <span data-toggle="tooltip" title="Couchbase">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    x="0px" y="0px" width="100" height="100" viewBox="-408 285.3 25 25"
-                    style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
-                    <path style="fill: #313032"
-                      d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
-                                            M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
-                                          c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
-                                          c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
-                  </svg>
-                </span>
-              </div>
+            http://www.apache.org/licenses/LICENSE-2.0
 
-              <!-- Druid -->
-              <div class="p-0" *ngIf="db.name == 'Druid'">
-                <span class="pr-1" data-toggle="tooltip" title="Druid">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    x="0px" y="0px" width="100" height="100" viewBox="-403 285.3 34 25"
-                    style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
-                    <g>
-                      <path style="fill: #313032"
-                        d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
-                                       c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
-                                       c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
-                                       c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
-                      <path style="fill: #313032" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
-                                       c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
-                                       c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
-                                       h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
-                                        M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
-                                       c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
-                                       c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
-                                       c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
-                    </g>
-                  </svg>
-                </span>
-              </div>
-
-              <!-- Elasticsearch -->
-              <div class="p-0" *ngIf="db.name == 'Elasticsearch'">
-                <span class="pr-1" data-toggle="tooltip" title="Elasticsearch">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    x="0px" y="0px" width="100" height="100" viewBox="2066.4 284.8 25.1 25"
-                    style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
-                    <g>
-                      <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
-                                   c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
-                                   c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
-                                   c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
-                      <path style="fill: #313032" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
-                                   L2076.3,295.5L2076.3,295.5z" />
-                      <path style="fill: #313032" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
-                                   L2070.5,301.4L2070.5,301.4z" />
-                      <path style="fill: #313032" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
-                                   C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
-                      <path style="fill: #313032"
-                        d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
-                      <path style="fill: #313032" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
-                                   L2082.9,306.3z" />
-                      <path style="fill: #313032"
-                        d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
-                    </g>
-                  </svg>
-                </span>
-              </div>
+    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.
+-->
+<div class="topic-list-panel">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="d-flex justify-content-end p-2">
+        <!-- Search bar -->
+        <div class="p-1">
+          <div class="input-group">
+            <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
+                   (keyup)="this.updateFilter($event.target.value)" />
+            <div class="input-group-append">
+              <button type="button" class="btn dl-btn-dark">
+                <i class="fa fa-search"></i>
+              </button>
+            </div>
+          </div>
+        </div>
 
-              <!-- MongoDB -->
-              <div class="p-0" *ngIf="db.name == 'MongoDB'">
-                <span class="pr-1" data-toggle="tooltip" title="MongoDB">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    x="0px" y="0px" width="100" height="100" viewBox="-397.2 285.8 11.2 25"
-                    style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
-                    <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
-                      <path style="fill: #313032"
-                        d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
-                                     c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
-                                     c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
-                      <path style="fill: #313032"
-                        d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
-                                     c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
-                                     c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
-                      <path style="fill: #313032" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
-                                     c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
-                                     v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
-                                     C-294,259.3-294,259.1-294,258.9z" />
-                    </g>
-                  </svg>
-                </span>
-              </div>
+        <!-- button -->
+        <div class="p-1">
+          <button class="btn dl-btn-dark" (click)="newDbModal();">
+            {{ "NEW_DB" | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- datatable -->
+  <div class="row">
+    <div class="col-md-12">
+      <ngx-datatable #mytemlate class="bootstrap" [rows]="dbList" [columnMode]="'force'" [headerHeight]="40"
+                     [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
+                     [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)">
+        <ngx-datatable-column [width]="100" name="{{ 'STATUS' | translate }}" prop="enabled"
+                              headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span *ngIf="row.enabled">
+              <i class="fas fa-circle dl-icon-enable fa-xs" aria-hidden="true"></i>
+            </span>
+            <span *ngIf="!row.enabled">
+              <i class="fas fa-circle dl-icon-disable fa-xs" aria-hidden="true"></i>
+            </span>
+          </ng-template>
+        </ngx-datatable-column>
 
-              <!-- HDFS -->
-              <div class="p-0" *ngIf="db.name == 'HDFS'">
-                <span class="pr-1" data-toggle="tooltip" title="HDFS">
-                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100" height="100"
-                    viewBox="290 -397 2500 1875" style="enable-background:new 290 -397 2500 1875;" xml:space="preserve">
-                    <style type="text/css">
-                      .st0 {
-                        fill: #313032;
-                      }
+        <ngx-datatable-column name="{{ 'TEMPLATE_NAME' | translate }}" prop="name"
+                              headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>{{ row.name }}</span>
+          </ng-template>
+        </ngx-datatable-column>
 
-                      .st1 {
-                        fill: #FFFFFF;
-                      }
+        <ngx-datatable-column name="{{ 'DB_TYPE' | translate }}" prop="topic">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>{{ row.dbTypeId }}</span>
+          </ng-template>
+        </ngx-datatable-column>
 
-                    </style>
-                    <path class="st0"
-                      d="M2149.4,171.3c-85.6,46.1-167.6,92.4-211.3,180C1938,240.2,2049.6,191.3,2149.4,171.3 M1921-47.2
-	c-63.6,43.3-108.5,130.8-102.9,216c-20.7-73.8-13.4-143.5,50.2-194.5c10.7-5.2,21.5-10.4,32.2-15.6 C1907.4-43.3,1914.2-45.2,1921-47.2" />
-                    <path class="st0" d="M2776.4,154c-11.5-72.7-30.6-143.2-57.2-194c-3.2-6.2-8.1-12.5-14.2-18.5c-13.2-13-32.7-25.3-52.8-32.2
-	c-21.3-7.3-43.9-8.8-61.7,0.5c-4.6,2.4-9,5.6-12.8,9.5c-11.6,11.7-21.3,26-31.1,40.2c-10.9,15.9-21.8,31.9-34.9,43
-	c-15.2,13-34.1,20.8-52,28c-7.5-18.3-16.6-35.9-27.1-52.6c-12.2-19.5-26.2-37.8-41.5-56.1c-11.2-13.5-23.9-25.6-37.9-36.2
-	c-13.2-10.1-26.8-18.6-42.5-28.4c-42.3-26.5-78.2-58-114.9-90.2c-16.7-14.6-33.5-29.4-50-43c-87.4-72.1-168.9-107-256.1-112.5
-	c-86.6-5.4-178,18.3-286,63.8c-52.1,21.9-90.8,47.8-124.5,79c-32.2,29.8-59.5,64.1-89.6,104.1c-17.5,1.2-33,3.8-48.8,10.2
-	c-17.4,7-35,18.3-56,36.8c-14.6,12.9-29,26.1-43,39.7c-12.8,12.5-25.5,25.1-37.8,38.1c-98.3,15.8-178.4,33.2-250.1,61
-	c-73.3,28.4-138,67.5-204.4,126.4c-26.1,23.1-50,48.7-71.2,76.4c-20.2,26.5-37.5,54.3-52.6,83.6c-13.3,14.7-26.6,29.5-41,42.5
-	c-14,12.6-29,23.3-45.8,29.8l0,0c-9.8,3.8-13.8,6-14.2,5.8c-0.5-0.3-0.8-1.7-1.4-4.4c24.1-23,27.9-56.8,30.1-90.3
-	c2.9,3.5,5.7,7.7,8.5,12.2c3.2,4.9,6.4,10,10.4,14.9l16.4,20.6l5.7-25.7c4.8-21.6,8.4-50.3,2.8-75.2c-3.6-16.2-11.1-30.6-24.2-40.8
-	c1.2-3.3,2.4-6.3,3.6-9.2c4.1-10.5,8.3-21.3,11.9-31.4l7.1-20.2l-21.1,3.7c-28.1,4.9-88.4,38-130.9,82.1
-	c-15.8,16.4-29.3,34.5-38.2,53.5c-9.3,19.8-13.4,40.4-9.8,61.1c3.1,18.1,12.2,35.8,28.6,52.6c3,12.1,5.8,22.6,8.7,32
-	c3.4,10.8,7,20.4,11.6,29.8c12.4,25.7,32.1,41.4,54.9,48.7c18.3,5.9,38.6,6.2,58.5,1.8c-4,23.7-6.5,47.6-7.3,71.6
-	c-1.3,33.5,0,70.6,3.7,113.6c0.8,9.4,2,19.8,3.6,31.1c1.4,9.6,3,19.1,4.7,28.5c-3.7,10.1-7.5,20.3-11.2,30.4L534,846.9l-38.2,37.8
-	c-11.9,11.7-23.8,23.5-35.6,35.3c-1,1-5,4.8-8.6,8.3c-24.1,23.2-28.8,27.8-22,68.5c4.4,26.1,12.9,51.3,25.2,74.7
-	c11.8,22.5,27.7,44.4,48,64.8c25.4,25.4,67,57.1,110.6,73.6c24.9,9.5,50.6,14.1,74.7,10.2c-1.2,3.7-2.4,7.4-3.8,11.1
-	c-3.8,10.6-8,21-12.7,31.2c-29.6,64.8,0.8,98.6,48,120.2c23.6,10.7,51.6,18,77.7,24.8c5.3,1.4,10.7,2.8,17.4,4.6
-	c30.9,8.3,84.2,23.7,132.9,26.7c53.2,3.4,101.1-7.6,114-55.3c5.1-18.9,8-33.4,9.2-47.6c1.1-13.2,0.7-26.5-0.9-42.9
-	c15.2-33.6,21.6-43,32.7-59.2c2.2-3.2,4.8-7,5.6-8.2c11.9-17.6,17.5-30.1,19.5-44.2c2-13.6,0.3-27.1-2.2-47.8
-	c-0.2-2-0.6-4.8-1.1-8.6c30.6,4,61.4,6.1,92.3,6.3c15.5,0.1,31-0.4,46.4-1.2c-4,2-7.8,4-12.1,6.2l-5.8,3
-	c-41.1,21.1-42.8,61.1-29.9,102.2c11.6,37.1,35.4,75,50.4,98c31.4,48.5,61.5,89.5,97.8,111.8c38.1,23.4,81.7,26.1,137.9-4.3
-	c28.6-15.5,37.6-31.3,49.8-52.6c3.7-6.5,7.8-13.6,12.4-20.6c11.8-7.8,41.2-32.1,70.1-56c9.8-8.1,19.7-16.2,30.7-25.2
-	c7.6,5.6,16.9,9.5,28,12.2c14.5,3.5,31.7,5,52.4,6.5c15.5,1.1,65.9,1.1,98.4,1.1c10.1,0,18.4,0,23.4,0c33.6,0.2,60.8-1.6,81.3-13.2
-	c21.9-12.4,34.8-34.3,37.6-73.7c1.2-17.5,1.5-28.3-1-39.3c-2.3-10.3-6.7-19.7-14.3-33.3c-0.5-17-0.9-34-1.4-51
-	c-0.5-18-1-36.1-1.4-54.1c-0.6-21.3-2.9-38.6-7.2-55.6c-4.3-16.9-10.4-33.1-18.6-52.6c-5.1-12.3-9.9-24.7-14.4-37.2l-11.8,4.3
-	l1.8-0.7l10-3.7v0c-7-19-14-37.4-23.7-57.2c0.6-3.8,1.3-7.9,1.9-12.3l18.7,18.1l27.6,26.6c21.1,20.3,40.3,38.8,63,52.1
-	c23.4,13.8,49.7,21.8,83.8,20.2c35.7-1.7,73.9-16.7,105.3-39.9c30.4-22.5,54.8-52.7,65-86.2l8.8-29.1l7.1-23.2
-	c50,8.5,103.7,11.2,155.6,5.8c50.1-5.3,98.4-18,140.1-40.3c61.3-32.7,107.3-80.9,140.3-138.1h0c36.9-63.9,57.6-139.3,65.4-216.8
-	C2792.8,320.1,2789.3,235.5,2776.4,154L2776.4,154z M2128.1,676.7c-28.8-9.7-48.9-23.9-74.2-39.8c6.9,31.1,10,64,0.8,95
-	c-14.6,49.2-38.1,129.8,28.7,144.6c25.4,5.6,37,4.8,72.9-13.7c-29.1,6.6-43.7,5-63.7,1.3c-18.1-3.3-27.7-14.8-32.8-28.4
-	c6.3,4.6,16.6,7,34.3,11.3c49.6,12,96.8-11.9,106-46.3c5.4-20.1,4.5-30.6,15.9-58c10.3,3.2,20.8,6.1,31.7,8.7l-18.4,60
-	c-15.9,52-78,93.8-132.8,92.9c-50.6-0.9-82.8-32.6-117.7-63.7c-24.1-21.4-47.3-41.9-70.2-62.3c-63-19.9-113.6-43.1-172.1-86.4
-	c41.6,48.9,69.9,76,127.9,100.4c-8.4,86.1-38.4,148.9-63.9,231.4c-11.6,37.3-102.7,186.6-128,201.2c-18,10.4-130.9,105.4-152.1,118
-	c-15.8,21-29.7,50-53.5,62.6c-72.4,38.3-119-35-158-97c-17.7-28.2-67-109.5-24.1-132.3c40.6-21.5,63.4-36.9,104.8-64.1
-	c6.1,11.1,16.5,21.8,23.3,32.9l-4.5-36.4c-2.7-22-2.6-39.8-0.9-61.9c1.7-21.4,3.4-42.8,5.1-64.2c-6.2,21.8-18.7,43.5-24.9,65.3
-	c-2.5,8.7-4.6,15.7-5.7,22.3c-93,19-185.3,20.2-278.4,3.6c-5.9-34.4-13.2-70.3-19.2-96.1c-1.8,28.8-0.7,108.5-0.8,153.1
-	c-0.1,34.6-1.6,46.4-19.4,75.8c-16.7,27.5-23.7,33.8-47.1,80.3c2,29.3,2,48.7-5.8,76.6c-13,46.3-143.8,10.4-178.2,1
-	c-42.5-11.6-130.3-28.9-108.2-85.5c19.4-49.8,31.8-102.4,41.3-172.1c-77.8-112.1-150.2-265.8-164.1-402
-	c-10.8-105.7-4.3-170.8,18.6-235.4c36.2-102.5,87-191.2,168.3-262.6c109.8-96.3,212.4-135,373-159.5c-38.6,43.3-76.9,89-118.5,138
-	c-42.2,49.6-67.2,99.8-94,154.1c-37,75-36.2,103.5,12.8,169.4c42.3,56.7,65.1,82.3,83.5,137.8c-15.2,31.4-20.8,58-25.9,100.8
-	c51.7,56.6,90.2,95.3,140.4,107.3c49.3,11.7,90.4,9.5,134.5-13.1c97.9-50.1,188.5-114.7,299-117.4c51.1-125.6,45.9-230.6,21.4-352.2
-	c-16.8-83-23.5-161.6-28.7-246.2c-20.7,87.2-24.6,163.8-9.2,250.6c18.5,104.6,32.9,220.2-18.6,312.2c-99.9,7.6-185.5,68.4-275.5,115
-	c-36.2,18.8-73.9,20.6-113.9,9.6c-37.2-10.2-62.3-34.8-102.3-81c-0.6-46.4,9.8-67.8,31.1-109.8c34.2-67.5,72-130.2,113.4-196.6
-	c-50.7,61.3-98.8,112.4-138.8,174c-15.3-43.5-37.1-65.6-73.3-114.6c-35.3-47.8-39-68.8-12.6-124.2c26.6-55.6,49.1-104.5,94.3-153.3
-	c78.1-84.3,149.6-178.2,235.1-261.3c46.4-45.1,65.2-43.5,126.7-52.9c55.6-8.4,109.9-19.1,166.6-32.2c-54.8,5.1-107.8,7-161.2,8.3
-	l-1.7,0c52.5-67.1,83-104.5,168.3-141.5c210-91.2,343.5-101.1,508.5,37.6c42.8,36,80.1,70.8,123.5,101.9
-	c-15.7,1.3-29.3,4.2-47.2,11.2c21.8-4.2,47,0,69.6,4.1c6.3,4.1,12.9,8.1,19.6,12.1c30.6,18,48,28,68.7,56.8
-	c21.9,30.5,40.1,60.9,56.2,94.5c-10.5-3.8-19.4-6.9-27.2-9.3c-17.8-8.2-38.6-6.9-55.2,3.4l-1.3,0.6c-16.9,8.3-43.2,17.6-60.7,20.5
-	c9,3.1,28.8,4.2,38.1,0.5c1.2-0.5,2.5-0.9,3.8-1.2c-4.3,7.4-7,15.6-7.8,24.1c-1.1,11.2,1.1,22.5,6.3,32.6l0,0.1
-	c1.6,3.7,3.8,7.2,6.2,9.6c-8,3-16.2,6.3-24.7,10c39.2-6,74.4-7,112.6-2c2.5,12,5.1,24.8,7.4,37.8l-14.2,1.1c-0.4,0-0.8,0.1-1.1,0.1
-	c-18.1-14.4-38.2-12-65.7-5.7c-83.7,19.1-64,66-102.5,136.8c40-48.8,37-100,102.1-115.4c15.2-3.6,25.5-8.1,35.8-6.5
-	c-18.5,9.3-34.5,24.7-40.8,42.6c-17.9,50.5-6.8,93-26.4,140.2c24.3-42.1,25.8-83.3,47.5-127.6c7.8-15.9,36.8-41.4,54.6-41.8
-	l14.6-0.3c4.3,28,6.9,55.9,5.2,79c-3,42.2-14,104.8-20.5,128.7c22-28.3,32.1-88.3,41.7-130.6c10.1-44,7.5-96.7-1.3-144
-	c-12.1-64.8,54.6-54.3,93.4-84.8c28.5-22.5,48.1-58.3,74.2-83.7c25.9-25.2,66.7,11.8,76.9,36.4c44.2,106.9,64.3,275.1,52.6,382.8
-	c-13.1,120.9-71.5,252.9-178.2,312.5C2423.5,768.5,2263.2,722.2,2128.1,676.7L2128.1,676.7z M1934.9,1213.7
-	c-4.4,49.9-21.1,53.2-64.9,52.4c-19.9-0.4-99.2-0.7-119.3-2.4c-28.4-2.5-44.4-5-53.1-11.5c44.6-32.8,120.5-168.1,135.3-214.7
-	c15.6-49.2,32.8-92.2,45.5-137.7c5.9,19,10.5,37.9,19,58c14.2,33.7,21.2,54.6,22.2,90.8l3.2,114.6
-	C1935.1,1184.7,1937.1,1189.3,1934.9,1213.7L1934.9,1213.7z M591.2,835.8c28.3,98.1,76.7,194.5,130.2,275.5v1.4
-	c-3.4,13.9-7.2,27.5-15.4,38.4c-38.3,51.2-135.6-24-163.8-52.7c-30.8-31.5-51.4-68.7-56.3-103.6c-3.6-25.5-0.1-26.1,17.7-44.1
-	l71.9-72.8L591.2,835.8L591.2,835.8z M537.1,219c-7.3,15.6-12.4,27.4-15.9,39.6c-15.3,52.7,6.9,99.8-41,138
-	c22.5,45.4,21.5,63.5,73.8,42.5c20.2-8.1,36.8-19.4,51.7-32.9c-7.2,18.7-13.8,37.6-19.8,56.7c-1,3.2-2,6.5-3,9.7
-	c-37.4,15.9-86.6,26-105.4-13.3c-9.1-19.1-14.3-37.8-21-61.9C394.8,333.5,486.9,249.2,537.1,219L537.1,219z M567.3,286.6
-	c-7.6-7.6-13.7-12.8-23.5-11.7c0.8-6.4,1.9-12.7,3.5-18.5c0.8-3,1.6-6,2.5-8.9C562.6,254.9,565.9,268.4,567.3,286.6L567.3,286.6z
-	 M2414.8,48.2c2.3,4.9,4.6,9.9,6.9,14.9c-1.9,1.4-3.6,2.8-5.3,4.3c-3-7.1-7.4-13.5-12.9-18.9C2407.1,48.4,2410.9,48.2,2414.8,48.2
-	L2414.8,48.2z M636,337.9L636,337.9L636,337.9L636,337.9z M1109.6,1110.4L1109.6,1110.4L1109.6,1110.4z M1665,1276.2L1665,1276.2
-	L1665,1276.2z M1890.6,847.2L1890.6,847.2L1890.6,847.2L1890.6,847.2z M543.4,414.6L543.4,414.6l-0.4-1.1L543.4,414.6L543.4,414.6z
-	 M2710,592.7l0.3,0.2L2710,592.7z M326,399.3c9.8-111,31.4-158.9,110.3-242.5C337.3,226.5,312.7,258.2,326,399.3" />
-                    <path class="st0" d="M300.5,308.6c10.9-50,21-68.8,51.9-109.8C302.4,233.7,295.9,248,300.5,308.6 M1461.1-387.9
-	c-59.3,14.3-70.6,25.2-88.3,83.3C1401.2-347.1,1417.5-360.9,1461.1-387.9" />
-                    <path class="st0" d="M1554.6-396.3c-117.5,28.8-152.1,49.3-191.1,185.5C1413.1-310.6,1450.7-347.3,1554.6-396.3 M1807.8,100.3
-	c12.5-55.5,34.8-109,121-150.4C1814.5-21.5,1793.1,26.5,1807.8,100.3 M2534.8,104.1c67.7-24.1,100.3-78.5,116.5-142.5
-	c-26.5,53.6-67.4,98.5-122.9,126c-29.8,14.7-48.8,9.6-82.1,6.4C2480.1,103.8,2501.6,116,2534.8,104.1 M2073.8,158.5
-	c-8.7-18.2-24.2-32.3-43.1-39.2c16.6-8.9,32.9-18.2,45.6-29.7c-37.3,17.2-80.6,13-112.6,34.6c-28.2,19-67,79.3-95.6,104.9
-	c20.7-8,40.7-22,59.1-36.6c0.2,28.4,16.1,54.3,41.2,67.4c-10.6,13.9-19,29.2-25,45.6c54.5-64.6,133.5-113.3,207.8-134.2
-	c-20.8-0.3-45.3,3.6-70.4,11.8C2079.9,174.6,2077.5,166.3,2073.8,158.5 M1995.4,646.4c-2.6,16.7-6.3,37.5-8.9,54.2
-	c7.1-18.9,15.6-40.9,23.8-59c8.7-19.1,13.6-20.9,32.2-31c13.1-7.1,37-17,50.1-24.1c-13.5,2.3-37.7,7.2-51.2,9.5
-	C2005.3,602.2,2001,610.9,1995.4,646.4 M1378.9,0.9c-41.9,41.4-82.6,183.5-95.6,240.4c20.5-47.2,71.7-179.3,111-212.9
-	c10.9-9.3,18.4-15,26.6-19.1c-28.1,47.2-26.1,58.9-16.2,122.2c8.4-64.3,30.6-89.1,67.1-137.1c40-10,77.4-22.1,118.4-38
-	c-46.2,5.2-92.4,10-138.7,14.4C1412.7-25.7,1406.4-26.3,1378.9,0.9" />
-                    <path class="st1"
-                      d="M1949.6,242.8c-7.6-16-0.8-35.2,15.2-42.8c16.1-7.6,35.4-0.8,43,15.3c0.7,1.4,1.3,2.9,1.7,4.5
-	c-15.3,11.4-29.3,24.7-41.1,40.2C1960.5,256.8,1953.5,251,1949.6,242.8 M2307.3,104.4c1.3-13.2,12.6-23,25.8-21.7
-	c13.3,1.3,23,13.1,21.7,26.3c-0.3,2.7-1,5.4-2.2,7.9c-12.1,2.1-24.2,5.6-36.7,10.2C2310.7,121.8,2306.6,112,2307.3,104.4" />
-                  </svg>
-                </span>
-              </div>
-            </div>
-            <div class="mt-auto">
-              <i class="fa fa-check-circle" aria-hidden="true"
-                 [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
-              {{ db.name }}
-            </div>
-        </div>
+        <ngx-datatable-column name="" sortable="false" cellClass="d-flex justify-content-center">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>
+              <button class="btn action-icon-setting" (click)="this.deleteDbModel(row.id);">
+                <i class="fas fa-trash-alt fa-xs"></i>
+              </button>
+            </span>
+            <span>
+              <button class="btn action-icon-setting" (click)="this.updateDbModel(row.id, row.dbTypeId);">
+                <i class="fas fa-cog fa-xs"></i>
+              </button>
+            </span>
+          </ng-template>
+        </ngx-datatable-column>
 
-      </div>
+      </ngx-datatable>
     </div>
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts
index 5b937301..ed25a707 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-list.component.ts
@@ -22,22 +22,19 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
-import { Db } from "../../../core/models/db.model";
+import { Db } from "src/app/core/models/db.model";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { DatabaseAddModalComponent } from "./database-add-modal/database-add-modal.component";
+import { DatabaseAddModalComponent } from "src/app/views/database/database-list/database-add-modal/database-add-modal.component";
 
 // DB modal components
 import { RestApiService } from "src/app/core/services/rest-api.service";
 
 // Modal
-import { CouchbaseComponent } from "./dbs-modal/couchbase/couchbase.component";
-import { DruidComponent } from "./dbs-modal/druid/druid.component";
-import { ElasticsearchComponent } from "./dbs-modal/elasticsearch/elasticsearch.component";
-import { MongodbComponent } from "./dbs-modal/mongodb/mongodb.component";
-import { HdfsComponent } from "./dbs-modal/hdfs/hdfs.component";
 import { AlertComponent } from "src/app/shared/components/alert/alert.component";
 
 // Notify
@@ -45,6 +42,11 @@ import { ToastrNotificationService } from "src/app/shared/components/toastr-noti
 
 // Loading spinner
 import { NgxSpinnerService } from "ngx-spinner";
+import {CouchbaseComponent} from "src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component";
+import {DruidComponent} from "src/app/views/database/database-list/dbs-modal/druid/druid.component";
+import {ElasticsearchComponent} from "src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
+import {MongodbComponent} from "src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component";
+import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component";
 
 @Component({
   selector: "app-database-list",
@@ -56,16 +58,29 @@ export class DatabaseListComponent implements OnInit {
 
   dbList: any = [];
   dbs: Db[] = [];
-
+  dbNew: Db;
+  db_NewBody: Db;
   loading: Boolean = true;
+  flag: Boolean = true;
+  loadingIndicator: boolean = true;
+
+  mesgNoData = {
+    emptyMessage: `
+      <div class="d-flex justify-content-center">
+        <div class="p-2">
+          <label class="dl-nodata">No Data</label>
+        </div>
+      </div>
+    `
+  };
 
-  tempDbDetail: Db;
+  @ViewChild("searchText") searchText: ElementRef;
 
   constructor(
-    private restApiService: RestApiService,
-    private notificationService: ToastrNotificationService,
-    private modalService: NgbModal,
-    private spinner: NgxSpinnerService
+      private dbApiService: RestApiService,
+      private notificationService: ToastrNotificationService,
+      private modalService: NgbModal,
+      private spinner: NgxSpinnerService
   ) {
     this.initData().then(data => {
       this.initDbsList(this.dbList).then(data => {
@@ -79,46 +94,43 @@ export class DatabaseListComponent implements OnInit {
   }
 
   async initData() {
-    this.dbList = [];
-    this.dbList = await this.getDbList();
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
+      this.dbList = [];
+      this.dbList = await this.getDbList(this.flag);
+      setTimeout(() => {
+          this.spinner.hide();
+      }, 500);
   }
 
-  getDbList() {
-    var data: any;
+  getDbList(flag) {
+    return this.dbApiService.getDbEncryptList(flag).toPromise();
 
-    data = this.restApiService.getDbList().toPromise();
-
-    return data;
   }
 
   async initDbsList(dbList: []) {
     var d: Db[] = [];
 
-    if (dbList.length > 0) {
-      for (var i = 0; i < dbList.length; i++) {
-        let data = await this.getDbDetail(dbList[i]);
-        let feed = {
-          name: dbList[i],
-          enabled: data.enabled,
-          host: data.host,
-          port: data.port,
-          database: data.database,
-          encrypt: data.encrypt,
-          login: data.login,
-          pass: data.pass
-        };
-        d.push(feed);
-      }
+    for (var i = 0; i < dbList.length; i++) {
+      let data = dbList[i];
+      let feed = {
+        id: data["id"],
+        name: data["name"],
+        enabled: data["enabled"],
+        host: data["host"],
+        port: data["port"],
+        database: data["database"],
+        encrypt: data["encrypt"],
+        login: data["login"],
+        pass: data["pass"],
+        dbTypeId: data["dbTypeId"],
+      };
+      d.push(feed);
     }
     return d;
   }
 
-  getDbDetail(name: string) {
-    return this.restApiService.getDbDetail(name).toPromise();
-  }
+  // getDbDetail(name: string) {
+  //   return this.restApiService.getDbDetail(name).toPromise();
+  // }
 
   openAddModal() {
     const modalRef = this.modalService.open(DatabaseAddModalComponent, {
@@ -129,41 +141,97 @@ export class DatabaseListComponent implements OnInit {
     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
       if (receivedEntry) {
         modalRef.close();
-        this.openDetailModal(receivedEntry);
+        //this.openDetailModal(receivedEntry);
       }
     });
   }
 
-  openDetailModal(name: string) {
-    var modalRef, index;
+  updateFilter(searchValue) {
+    const val = searchValue.toLowerCase();
+    // filter our data
+    const temps = this.dbList.filter(function (d) {
+      return d.name.toLowerCase().indexOf(val) != -1 || !val;
+    });
+    // update the rows
+    this.dbList = temps;
+  }
+
+  newDbModal() {
+    const modalRef = this.modalService.open(DatabaseAddModalComponent, {
+      windowClass: "dl-md-modal dbs",
+      centered: true
+    });
+  }
+
+  deleteDbModel(id: number) {
+
+    console.log("delete id", id);
+    const index = this.dbList.findIndex(t => t.id === id);
+    const modalRef = this.modalService.open(AlertComponent, {
+      size: "sm",
+      centered: true
+    });
+    modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      // Delete db
+      this.dbApiService.deleteDb(id).subscribe(
+        res => {
+          console.log(res);
+          if (JSON.stringify(res).length <= 2) {
+            this.dbList.splice(index, 1);
+            this.dbList = [...this.dbList];
+            this.initData();
+            this.notificationService.success("SUCCESSFULLY_DELETED");
+
+          } else {
+            this.initData();
+            this.notificationService.error("FAILED_DELETED");
+          }
+
+          modalRef.close();
+        },
+        err => {
+          this.notificationService.error(err);
+          modalRef.close();
+        }
+      );
+    });
+  }
 
-    switch (name) {
-      case "Couchbase": {
+  updateDbModel(id: number, dbType: string) {
+    var modalRef;
+    console.log(dbType, "dbType");
+    switch (dbType) {
+      case "CB": {
         modalRef = this.modalService.open(CouchbaseComponent, {
           size: "lg",
           centered: true
         });
+        this.editDbModal(id, modalRef);
         break;
       }
-      case "Druid": {
+      case "DRUID": {
         modalRef = this.modalService.open(DruidComponent, {
           size: "lg",
           centered: true
         });
+        this.editDbModal(id, modalRef);
         break;
       }
-      case "Elasticsearch": {
+      case "ES": {
         modalRef = this.modalService.open(ElasticsearchComponent, {
           size: "lg",
           centered: true
         });
+        this.editDbModal(id, modalRef);
         break;
       }
-      case "MongoDB": {
+      case "MONGO": {
         modalRef = this.modalService.open(MongodbComponent, {
           size: "lg",
           centered: true
         });
+        this.editDbModal(id, modalRef);
         break;
       }
       case "HDFS": {
@@ -171,33 +239,33 @@ export class DatabaseListComponent implements OnInit {
           size: "lg",
           centered: true
         });
+        this.editDbModal(id, modalRef);
         break;
       }
       default: {
         break;
       }
     }
+  }
 
-    index = this.dbs.findIndex(d => d.name === name);
-    this.tempDbDetail = new Db();
-    if (index != -1) {
-      modalRef.componentInstance.db = this.dbs[index];
-    } else {
-      modalRef.componentInstance.db = this.tempDbDetail;
-    }
-    modalRef.componentInstance.passEntry.subscribe(receiveEntry => {
-      this.tempDbDetail = receiveEntry;
-      let enabled = receiveEntry.enabled;
-      console.log(this.tempDbDetail, "this.tempDbDetail");
-      if (enabled == true) {
-        this.restApiService.upadteDb(this.tempDbDetail).subscribe(
+  editDbModal(id: number, modalRef) {
+    console.log("id", id);
+    const index = this.dbList.findIndex(t => t.id === id);
+    modalRef.componentInstance.editDb = this.dbList[index];
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      this.dbNew = receivedEntry;
+      this.dbApiService
+        .updateDb(this.dbNew)
+        .subscribe(
           res => {
-            console.log(res);
             if (res.statusCode == 200) {
-              this.dbs[index] = this.tempDbDetail;
+              this.dbList[index] = this.dbNew;
+              this.dbList = [...this.dbList];
               this.notificationService.success("SUCCESSFULLY_UPDATED");
+              this.initData();
             } else {
               this.notificationService.error("FAILED_UPDATED");
+              this.initData();
             }
             modalRef.close();
           },
@@ -206,24 +274,10 @@ export class DatabaseListComponent implements OnInit {
             modalRef.close();
           }
         );
-      } else {
-        this.restApiService.upadteDb(this.dbs[index]).subscribe(
-          res => {
-            console.log(res);
-            if (res.statusCode == 200) {
-              this.dbs[index] = this.tempDbDetail;
-              this.notificationService.success("SUCCESSFULLY_DELETED");
-            } else {
-              this.dbs[index].encrypt = true;
-            }
-            modalRef.close();
-          },
-          err => {
-            this.notificationService.error(err);
-            modalRef.close();
-          }
-        );
-      }
-    });
+    })
+  }
+
+  onActivate(event) {
+
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css
index d6d32ca4..7752355c 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css
@@ -1,19 +1,57 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
+    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.
 */
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+
+.input_style {
+  width: 200px;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html
index c67ab85c..b58b6d2d 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html
@@ -1,33 +1,26 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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=========================================================
--->
+    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.
+-->
 <div class="p-1">
   <div class="modal-header pb-0 border-0">
-    <div class="container">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-md-12">
-          <label class="dl-h3">{{ 'DOCUMENT_STORE' | translate }} | Couchbase</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
+          <label class="dl-h3">{{ this.dbInputTitle }}</label>
         </div>
       </div>
-
       <div class="row">
         <div class="col-md-12">
           <hr>
@@ -36,86 +29,99 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-body border-0 ml-4 mr-4">
+  <div class="modal-body border-0">
     <div class="container">
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">Bucket</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.database" class="form-control dl-input-text" id="inputBucket" type="text"
-              placeholder="">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
-              placeholder="">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
-          <div class="col-md-2">
-            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1"
-              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
           </div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
-              placeholder="Password">
+          <div>
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="login" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
           </div>
         </div>
       </div>
 
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
+          </div>
+          <div class="input-group" style="width: 120px">
+            <label class="input-group-text dl-input-chk-label">
+              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
+          </div>
+          <div>
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -144,3 +150,4 @@ limitations under the License.
     </div>
   </div>
 </div>
+
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts
index 4ce7f2ab..be3b2517 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts
@@ -22,12 +22,15 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { Db } from "src/app/core/models/db.model";
 import { AdminService } from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-couchbase",
@@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service";
 })
 export class CouchbaseComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editDb: Db;
   @Input() db: Db;
-  tempDb: Db;
+  @Input() dbList_length;
+  dbInput: Db;
+  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
+  defaultDbType: string;
+  dbInputTitle = "";
   constructor(
     public activeModal: NgbActiveModal,
-    public adminService: AdminService
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
   ) { }
 
   ngOnInit() {
-    // cache for display
-    this.tempDb = new Db();
-    const feed = {
-      name: "Couchbase",
-      enabled: this.db.enabled,
-      host: this.db.host,
-      port: this.db.port,
-      database: this.db.database,
-      encrypt: this.db.encrypt,
-      login: this.db.login,
-      pass: this.db.pass
-    };
-    this.tempDb = feed;
+    if (this.editDb == null) {
+      this.dbInput = new Db();
+      const feed = {
+        id: null,
+        name: this.db.name,
+        enabled: this.db.enabled,
+        host: this.db.host,
+        port: this.db.port,
+        database: this.db.database,
+        encrypt: this.db.encrypt,
+        login: this.db.login,
+        pass: this.db.pass,
+        dbTypeId: this.db.dbTypeId
+      }
+      this.dbInput = feed;
+      this.dbInputTitle = "New Couchbase";
+      console.log("create db");
+
+    } else {
+      this.dbInput = this.editDb;
+      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.defaultDbType = this.dbInput.dbTypeId;
+      console.log("edit db");
+    }
   }
 
   passBack() {
-    this.db = this.tempDb;
-    this.passEntry.emit(this.db);
+    this.spinner.show();
+    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
+      return false;
+    }
+    this.editDb = this.dbInput;
+    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
+    console.log(this.editDb, "db");
+    this.passEntry.emit(this.editDb);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css
index d6d32ca4..7752355c 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css
@@ -1,19 +1,57 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
+    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.
 */
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+
+.input_style {
+  width: 200px;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html
index 5d5a38cf..b58b6d2d 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html
@@ -1,33 +1,26 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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=========================================================
--->
+    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.
+-->
 <div class="p-1">
   <div class="modal-header pb-0 border-0">
-    <div class="container">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-md-12">
-          <label class="dl-h3">OLAP store | Druid</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
+          <label class="dl-h3">{{ this.dbInputTitle }}</label>
         </div>
       </div>
-
       <div class="row">
         <div class="col-md-12">
           <hr>
@@ -36,86 +29,99 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-body border-0 ml-4 mr-4">
+  <div class="modal-body border-0">
     <div class="container">
 
-      <!--<div class="form-group">-->
-        <!--<div class="row">-->
-          <!--<div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">Database</label></div>-->
-          <!--<div class="col-md-4">-->
-            <!--<input [(ngModel)]="this.tempDb.database" class="form-control dl-input-text" id="inputBucket" type="text"-->
-              <!--placeholder="">-->
-          <!--</div>-->
-        <!--</div>-->
-      <!--</div>-->
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
-              placeholder="">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
-          <div class="col-md-2">
-            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1"
-              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
           </div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
-              placeholder="Password">
+          <div>
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="login" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
           </div>
         </div>
       </div>
 
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
+          </div>
+          <div class="input-group" style="width: 120px">
+            <label class="input-group-text dl-input-chk-label">
+              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
+          </div>
+          <div>
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -144,3 +150,4 @@ limitations under the License.
     </div>
   </div>
 </div>
+
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts
index 4de2fdd8..5c424fce 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts
@@ -22,12 +22,15 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { Db } from "src/app/core/models/db.model";
 import { AdminService } from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-druid",
@@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service";
 })
 export class DruidComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editDb: Db;
   @Input() db: Db;
-  tempDb: Db;
+  @Input() dbList_length;
+  dbInput: Db;
+  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
+  defaultDbType: string;
+  dbInputTitle = "";
   constructor(
     public activeModal: NgbActiveModal,
-    public adminService: AdminService
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
   ) { }
 
   ngOnInit() {
-    // cache for display
-    this.tempDb = new Db();
-    const feed = {
-      name: "Druid",
-      enabled: this.db.enabled,
-      host: this.db.host,
-      port: this.db.port,
-      database: this.db.database,
-      encrypt: this.db.encrypt,
-      login: this.db.login,
-      pass: this.db.pass
-    };
-    this.tempDb = feed;
+    if (this.editDb == null) {
+      this.dbInput = new Db();
+      const feed = {
+        id: null,
+        name: this.db.name,
+        enabled: this.db.enabled,
+        host: this.db.host,
+        port: this.db.port,
+        database: this.db.database,
+        encrypt: this.db.encrypt,
+        login: this.db.login,
+        pass: this.db.pass,
+        dbTypeId: this.db.dbTypeId
+      }
+      this.dbInput = feed;
+      this.dbInputTitle = "New Druid";
+      console.log("create db");
+
+    } else {
+      this.dbInput = this.editDb;
+      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.defaultDbType = this.dbInput.dbTypeId;
+      console.log("edit db");
+    }
   }
 
   passBack() {
-    this.db = this.tempDb;
-    this.passEntry.emit(this.db);
+    this.spinner.show();
+    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
+      return false;
+    }
+    this.editDb = this.dbInput;
+    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
+    console.log(this.editDb, "db");
+    this.passEntry.emit(this.editDb);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css
index d6d32ca4..7752355c 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css
@@ -1,19 +1,57 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
+    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.
 */
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+
+.input_style {
+  width: 200px;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
index 1a7e7e80..b58b6d2d 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
@@ -1,33 +1,26 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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=========================================================
--->
+    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.
+-->
 <div class="p-1">
   <div class="modal-header pb-0 border-0">
-    <div class="container">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-md-12">
-          <label class="dl-h3"> {{ 'SEARCH_ENGINE' | translate }} | Elasticsearch</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
+          <label class="dl-h3">{{ this.dbInputTitle }}</label>
         </div>
       </div>
-
       <div class="row">
         <div class="col-md-12">
           <hr>
@@ -36,76 +29,99 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-body border-0 ml-4 mr-4">
+  <div class="modal-body border-0">
     <div class="container">
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
-              placeholder="">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
-          <div class="col-md-2">
-            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1"
-              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
           </div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
-              placeholder="Password">
+          <div>
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="login" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
           </div>
         </div>
       </div>
 
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
+          </div>
+          <div class="input-group" style="width: 120px">
+            <label class="input-group-text dl-input-chk-label">
+              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
+          </div>
+          <div>
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -134,3 +150,4 @@ limitations under the License.
     </div>
   </div>
 </div>
+
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
index 29e2125e..ed3e513b 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
@@ -22,12 +22,15 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { Db } from "src/app/core/models/db.model";
 import { AdminService } from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-elasticsearch",
@@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service";
 })
 export class ElasticsearchComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editDb: Db;
   @Input() db: Db;
-  tempDb: Db;
+  @Input() dbList_length;
+  dbInput: Db;
+  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
+  defaultDbType: string;
+  dbInputTitle = "";
   constructor(
     public activeModal: NgbActiveModal,
-    public adminService: AdminService
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
   ) { }
 
   ngOnInit() {
-    // cache for display
-    this.tempDb = new Db();
-    const feed = {
-      name: "Elasticsearch",
-      enabled: this.db.enabled,
-      host: this.db.host,
-      port: this.db.port,
-      database: this.db.database,
-      encrypt: this.db.encrypt,
-      login: this.db.login,
-      pass: this.db.pass
-    };
-    this.tempDb = feed;
+    if (this.editDb == null) {
+      this.dbInput = new Db();
+      const feed = {
+        id: null,
+        name: this.db.name,
+        enabled: this.db.enabled,
+        host: this.db.host,
+        port: this.db.port,
+        database: this.db.database,
+        encrypt: this.db.encrypt,
+        login: this.db.login,
+        pass: this.db.pass,
+        dbTypeId: this.db.dbTypeId
+      }
+      this.dbInput = feed;
+      this.dbInputTitle = "New Elasticsearch";
+      console.log("create db");
+
+    } else {
+      this.dbInput = this.editDb;
+      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.defaultDbType = this.dbInput.dbTypeId;
+      console.log("edit db");
+    }
   }
 
   passBack() {
-    this.db = this.tempDb;
-    this.passEntry.emit(this.db);
+    this.spinner.show();
+    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
+      return false;
+    }
+    this.editDb = this.dbInput;
+    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
+    console.log(this.editDb, "db");
+    this.passEntry.emit(this.editDb);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css
index d6d32ca4..7752355c 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css
@@ -1,19 +1,57 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
+    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.
 */
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+
+.input_style {
+  width: 200px;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html
index 39b905b3..d13cbeec 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html
@@ -1,33 +1,26 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
 
-     http://www.apache.org/licenses/LICENSE-2.0
+    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
 
-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=========================================================
--->
+            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.
+-->
 <div class="p-1">
   <div class="modal-header pb-0 border-0">
-    <div class="container">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-md-12">
-          <label class="dl-h3">Hadoop | HDFS</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
+          <label class="dl-h3">{{ this.dbInputTitle }}</label>
         </div>
       </div>
-
       <div class="row">
         <div class="col-md-12">
           <hr>
@@ -36,76 +29,79 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-body border-0 ml-4 mr-4">
+  <div class="modal-body border-0">
     <div class="container">
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
-              placeholder="">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
-          <div class="col-md-2">
-            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1"
-              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
           </div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
-              placeholder="Password">
+          <div>
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
+          </div>
+          <div class="input-group" style="width: 120px">
+            <label class="input-group-text dl-input-chk-label">
+              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
           </div>
         </div>
-      </div>
 
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
+          </div>
+          <div>
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -134,3 +130,4 @@ limitations under the License.
     </div>
   </div>
 </div>
+
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts
index 42ac7748..2c161fdb 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts
@@ -22,12 +22,15 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { Db } from "src/app/core/models/db.model";
 import { AdminService } from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-hdfs",
@@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service";
 })
 export class HdfsComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editDb: Db;
   @Input() db: Db;
-  tempDb: Db;
+  @Input() dbList_length;
+  dbInput: Db;
+  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
+  defaultDbType: string;
+  dbInputTitle = "";
   constructor(
     public activeModal: NgbActiveModal,
-    public adminService: AdminService
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
   ) { }
 
   ngOnInit() {
-    // cache for display
-    this.tempDb = new Db();
-    const feed = {
-      name: "HDFS",
-      enabled: this.db.enabled,
-      host: this.db.host,
-      port: this.db.port,
-      database: this.db.database,
-      encrypt: this.db.encrypt,
-      login: this.db.login,
-      pass: this.db.pass
-    };
-    this.tempDb = feed;
+    if (this.editDb == null) {
+      this.dbInput = new Db();
+      const feed = {
+        id: null,
+        name: this.db.name,
+        enabled: this.db.enabled,
+        host: this.db.host,
+        port: this.db.port,
+        database: this.db.database,
+        encrypt: this.db.encrypt,
+        login: this.db.login,
+        pass: this.db.pass,
+        dbTypeId: this.db.dbTypeId
+      }
+      this.dbInput = feed;
+      this.dbInputTitle = "New Hdfs";
+      console.log("create db");
+
+    } else {
+      this.dbInput = this.editDb;
+      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.defaultDbType = this.dbInput.dbTypeId;
+      console.log("edit db");
+    }
   }
 
   passBack() {
-    this.db = this.tempDb;
-    this.passEntry.emit(this.db);
+    this.spinner.show();
+    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
+      return false;
+    }
+    this.editDb = this.dbInput;
+    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
+    console.log(this.editDb, "db");
+    this.passEntry.emit(this.editDb);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css
index d6d32ca4..7752355c 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css
@@ -1,19 +1,57 @@
 /*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 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=========================================================
+    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.
 */
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+
+.input_style {
+  width: 200px;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html
index 48dc0516..b58b6d2d 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html
@@ -1,33 +1,26 @@
 <!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 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=========================================================
--->
+    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.
+-->
 <div class="p-1">
   <div class="modal-header pb-0 border-0">
-    <div class="container">
+    <div class="container-fluid">
       <div class="row">
         <div class="col-md-12">
-          <label class="dl-h3">Document store | MongoDB</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
+          <label class="dl-h3">{{ this.dbInputTitle }}</label>
         </div>
       </div>
-
       <div class="row">
         <div class="col-md-12">
           <hr>
@@ -36,86 +29,99 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-body border-0 ml-4 mr-4">
+  <div class="modal-body border-0">
     <div class="container">
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">Database</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.database" class="form-control dl-input-text" id="inputBucket" type="text"
-              placeholder="">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
-              placeholder="">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
-          <div class="col-md-2">
-            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1"
-              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
           </div>
-          <div class="col-sm-4">
-            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
-              placeholder="Password">
+          <div>
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
           </div>
         </div>
       </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="login" required="required" />
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="dl-switch">
-                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
-                  <span class="dl-slider round"></span>
-                </label>
-              </div>
-            </div>
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
           </div>
         </div>
       </div>
 
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
+          </div>
+          <div class="input-group" style="width: 120px">
+            <label class="input-group-text dl-input-chk-label">
+              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
+          </div>
+          <div>
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -144,3 +150,4 @@ limitations under the License.
     </div>
   </div>
 </div>
+
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts
index 606a132d..765da258 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts
@@ -22,12 +22,15 @@
  *
  * @author Ekko Chang
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { Db } from "src/app/core/models/db.model";
 import { AdminService } from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
 
 @Component({
   selector: "app-mongodb",
@@ -36,32 +39,59 @@ import { AdminService } from "src/app/core/services/admin.service";
 })
 export class MongodbComponent {
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editDb: Db;
   @Input() db: Db;
-  tempDb: Db;
+  @Input() dbList_length;
+  dbInput: Db;
+  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
+  defaultDbType: string;
+  dbInputTitle = "";
   constructor(
     public activeModal: NgbActiveModal,
-    public adminService: AdminService
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
   ) { }
 
   ngOnInit() {
-    // cache for display
-    this.tempDb = new Db();
-    const feed = {
-      name: "MongoDB",
-      enabled: this.db.enabled,
-      host: this.db.host,
-      port: this.db.port,
-      database: this.db.database,
-      encrypt: this.db.encrypt,
-      login: this.db.login,
-      pass: this.db.pass
-    };
-    this.tempDb = feed;
+    if (this.editDb == null) {
+      this.dbInput = new Db();
+      const feed = {
+        id: null,
+        name: this.db.name,
+        enabled: this.db.enabled,
+        host: this.db.host,
+        port: this.db.port,
+        database: this.db.database,
+        encrypt: this.db.encrypt,
+        login: this.db.login,
+        pass: this.db.pass,
+        dbTypeId: this.db.dbTypeId
+      }
+      this.dbInput = feed;
+      this.dbInputTitle = "New MongoDb";
+      console.log("create db");
+
+    } else {
+      this.dbInput = this.editDb;
+      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.defaultDbType = this.dbInput.dbTypeId;
+      console.log("edit db");
+    }
   }
 
   passBack() {
-    this.db = this.tempDb;
-    this.passEntry.emit(this.db);
+    this.spinner.show();
+    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
+      return false;
+    }
+    this.editDb = this.dbInput;
+    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
+    console.log(this.editDb, "db");
+    this.passEntry.emit(this.editDb);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database.component.html b/components/datalake-handler/admin/src/src/app/views/database/database.component.html
index 5ba0e314..faacde00 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/database/database.component.html
@@ -20,9 +20,13 @@ limitations under the License.
 
 
 <div class="row">
-  <div class="col-md-12 path">
+  <div class="col-md-12 pb-2 path">
     Home > Database Connections
   </div>
+  <div class="col-md-12">
+    <app-database-list></app-database-list>
+  </div>
 </div>
 
-<app-database-list></app-database-list>
+
+
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 436fcc22..046a57f7 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
@@ -73,5 +73,14 @@
   "GROUP": "Group",
   "EXCLUDED_TOPICS": "Excluded topics",
   "TIME_OUT": "Time out(sec)",
-  "EDIT_KAFKA": "Edit Kafka"
+  "EDIT_KAFKA": "Edit Kafka",
+  "NEW_DB": "New Database",
+  "DB_TYPE": "DbType",
+  "NEW_DRUID": "New Druid",
+  "NEW_ELASTICSEARCH": "New Elasticsearch",
+  "NEW_COUCHBASE": "New Couchbase",
+  "NEW_MONGODB": "New MongoDB",
+  "NEW_HDFS": "New Hdfs",
+  "SECURE_COMMUNICATION": "Secure Communication",
+  "DB_TYPE": "DbType"
 }