To apply the shared module into the 3rd party tools management page

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

10 files changed, 448 insertions, 132 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index eb7db267..53b4e064 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -107,6 +107,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component";
 import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component";
 import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component";
+import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component";
 
 @NgModule({
   declarations: [
@@ -155,7 +156,8 @@ import { DbModalComponent } from "./views/database/database-list/db-modal/db-mod
     IconComponent,
     TopicModalComponent,
     KafkaModalComponent,
-    DbModalComponent
+    DbModalComponent,
+    ToolModalComponent
   ],
   imports: [
     BrowserModule,
@@ -201,7 +203,8 @@ import { DbModalComponent } from "./views/database/database-list/db-modal/db-mod
     ModalToolsComponent,
     TopicModalComponent,
     KafkaModalComponent,
-    DbModalComponent
+    DbModalComponent,
+    ToolModalComponent
   ]
 })
 export class AppModule {}
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 97421e42..ec5e2dce 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
@@ -142,7 +142,7 @@ export class RestApiService {
   }
 
   /*
-    Database
+    Database and tools
   */
   public getAllDbs(): Observable<Db[]> {
     return this.http
@@ -150,6 +150,12 @@ export class RestApiService {
       .pipe(retry(1), catchError(this.handleError));
   }
 
+  public getAllTools(): Observable<Db[]> {
+    return this.http
+      .get<Db[]>(prefix + "dbs/list?isDb=false")
+      .pipe(retry(1), catchError(this.handleError));
+  }
+
   public getDbTypes(): Observable<DbType[]> {
     return this.http
       .get<DbType[]>(prefix + "dbs/dbtypes")
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css
new file mode 100644
index 00000000..0b713d55
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css
@@ -0,0 +1,25 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : DataLake
+* ================================================================================
+* Copyright 2019 - 2020 QCT
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+
+/*
+ * For every Angular component you write, you may define not only an HTML template,
+ * but also the CSS styles that go with that template, specifying any selectors,
+ * rules, and media queries that you need.
+*/
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html
new file mode 100644
index 00000000..81e3b583
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html
@@ -0,0 +1,107 @@
+<!--
+============LICENSE_START=======================================================
+ONAP : DataLake
+================================================================================
+Copyright 2019 - 2020 QCT
+=================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END=========================================================
+-->
+
+<div class="container p-4">
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-switch">
+          <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" />
+          <span class="dl-slider round"></span>
+        </label>
+      </div>
+      <div class="col-md-6">
+
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "NAME" | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'TOOL_TYPE' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-3">
+        <select [(ngModel)]="this.data.dbTypeId" class="custom-select dl-input-text">
+          <option *ngFor="let item of dbTypes" [value]="item.id" [selected]="item.id==this.data.dbTypeId">
+            {{ item.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'HOST' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'Port' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.host" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-3">
+        <input [(ngModel)]="this.data.port" class="form-control dl-input-text" type="text"
+          (input)="this.adminService.onKeyPressNumber($event)" />
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'Username' | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ 'Password' | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" />
+      </div>
+      <div class="col-md-6">
+        <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" />
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts
new file mode 100644
index 00000000..2f22cd68
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 - 2020 QCT
+ *=================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { ToolModalComponent } from "./tool-modal.component";
+
+describe("ToolModalComponent", () => {
+  let component: ToolModalComponent;
+  let fixture: ComponentFixture<ToolModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ToolModalComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts
new file mode 100644
index 00000000..038d7464
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts
@@ -0,0 +1,74 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 - 2020 QCT
+ *=================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ *
+ * @author Ekko Chang
+ *
+ */
+
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { NgxSpinnerService } from "ngx-spinner";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+import { AdminService } from "src/app/core/services/admin.service";
+import { Db, DbType } from "src/app/core/models/db.model";
+import { from, forkJoin } from "rxjs";
+import { mergeMap, map } from "rxjs/operators";
+
+@Component({
+  selector: "app-tool-modal",
+  templateUrl: "./tool-modal.component.html",
+  styleUrls: ["./tool-modal.component.css"]
+})
+export class ToolModalComponent implements OnInit {
+  @Input() data: Db;
+  @Input() mode: string;
+
+  dbTypes: Array<DbType> = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService,
+    private restApiService: RestApiService,
+    private spinner: NgxSpinnerService
+  ) {}
+
+  ngOnInit() {
+    // this.spinner.show();
+
+    // get database types
+    const get_dbTypes = this.restApiService.getDbTypes().pipe(
+      mergeMap(dbTypes => from(dbTypes)),
+      map(dbType => {
+        if (dbType.tool) this.dbTypes.push(dbType);
+      })
+    );
+
+    forkJoin(get_dbTypes).subscribe(data => {
+      if (this.mode === "new") {
+        // default value
+        if (this.dbTypes.length > 0) {
+          this.data.dbTypeId = this.dbTypes[0].id;
+        }
+      }
+    });
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html
index c55fa463..434846c7 100644
--- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
     Home > Tools
   </div>
   <div class="col-md-12">
-    <div class="topic-list-panel">
+    <div class="table-panel">
       <div class="row">
         <div class="col-md-12">
           <div class="d-flex justify-content-end p-2">
@@ -27,32 +27,24 @@
             <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>
+                  (keyup)="this.updateFilter($event.target.value)" />
               </div>
             </div>
-
             <!-- button -->
             <div class="p-1">
-              <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModalDemo()"></app-button>
+              <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')">
+              </app-button>
             </div>
           </div>
         </div>
       </div>
+
       <!-- datatable -->
       <div class="row">
         <div class="col-md-12">
-          <app-table [data]="toolsList" [columns]="toolsColumns" (btnTableAction)="dataAction($event)">
-          </app-table>
+          <app-table [data]="tools" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table>
         </div>
       </div>
     </div>
   </div>
 </div>
-
-
-
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts
index 65de6ada..a7fe3019 100644
--- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -18,31 +18,35 @@
  *
  * @author Chunmeng Guo
  *
+ * @constructor Ekko Chang
  */
 
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {AdminService} from "src/app/core/services/admin.service";
-import {Db} from "src/app/core/models/db.model";
-import {RestApiService} from "src/app/core/services/rest-api.service";
-import {AlertComponent} from "src/app/shared/components/alert/alert.component";
-import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {ToolAddModalComponent} from "src/app/views/tools/tool-add-modal/tool-add-modal.component";
-import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component";
+import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+import { AdminService } from "src/app/core/services/admin.service";
+import { Db } from "src/app/core/models/db.model";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+
+// Modal
+import { AlertComponent } from "src/app/shared/components/alert/alert.component";
+import { ModalComponent } from "src/app/shared/modules/modal/modal.component";
+import { ModalContentData } from "src/app/shared/modules/modal/modal.data";
+import { ToolModalComponent } from "src/app/views/tools/tool-modal/tool-modal.component";
+import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+
+import { NgxSpinnerService } from "ngx-spinner";
+import { map, mergeMap } from "rxjs/operators";
+import { forkJoin, from } from "rxjs";
 
 @Component({
-  selector: 'app-tools',
-  templateUrl: './tools.component.html',
-  styleUrls: ['./tools.component.css']
+  selector: "app-tools",
+  templateUrl: "./tools.component.html",
+  styleUrls: ["./tools.component.css"]
 })
 export class ToolsComponent implements OnInit {
-
-  toolsColumns: Array<any> = [];
-  toolsList: Array<any> = [];
-  dbs: Db[] = [];
-  toolNew: Db;
-  loading: Boolean = true;
-  flag: Boolean = false;
+  columns: Array<any> = [];
+  tools: Array<any> = [];
+  t_temp: Array<any> = []; // cache for tools
 
   @ViewChild("searchText") searchText: ElementRef;
 
@@ -50,132 +54,186 @@ export class ToolsComponent implements OnInit {
     private adminService: AdminService,
     private notificationService: ToastrNotificationService,
     private modalService: NgbModal,
-    private dbApiService: RestApiService
+    private restApiService: RestApiService,
+    private spinner: NgxSpinnerService
   ) {
     this.adminService.setTitle("SIDEBAR.DASHBOARDLIST");
-    this.initData().then(data => { });
+    // this.initData().then(data => {});
   }
 
   ngOnInit() {
-    this.toolsColumns = [
+    this.spinner.show();
+
+    let t_tools: Array<Db> = [];
+
+    const get_tools = this.restApiService.getAllTools().pipe(
+      mergeMap(tools => from(tools)),
+      map(tool => {
+        t_tools.push(tool);
+      })
+    );
+
+    forkJoin(get_tools).subscribe(data => {
+      this.columns = this.initColumn();
+      this.tools = t_tools;
+      this.t_temp = [...this.tools];
+      this.updateFilter(this.searchText.nativeElement.value);
+      setTimeout(() => {
+        this.spinner.hide();
+      }, 500);
+    });
+  }
+
+  initColumn() {
+    let t_columns: Array<any> = [];
+
+    t_columns = [
       {
-        name: "STATUS",
-        width: "50",
-        dataIndex: "enabled"
+        headerName: "STATUS",
+        width: "15",
+        sortable: true,
+        dataIndex: "enabled",
+        icon: "status"
       },
       {
-        name: "NAME",
-        width: "220",
+        headerName: "NAME",
+        width: "420",
+        sortable: true,
         dataIndex: "name"
       },
       {
-        name: "DB_TYPE",
-        width: "220",
+        headerName: "Type",
+        width: "50",
+        sortable: true,
         dataIndex: "dbTypeId"
       },
       {
-        name: "",
-        width: "5",
-        dataIndex: "",
-        icon: "trash"
+        headerName: "Host",
+        width: "100",
+        sortable: true,
+        dataIndex: "host"
+      },
+      {
+        width: "2",
+        iconButton: "cog",
+        action: "edit"
       },
       {
-        name: "",
-        width: "5",
-        dataIndex: "",
-        icon: "cog"
+        width: "2",
+        iconButton: "trash",
+        action: "delete"
       }
     ];
-  }
 
-  async initData() {
-    this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise();
+    return t_columns;
   }
 
-  updateFilter(searchValue) {
+  updateFilter(searchValue: string) {
     const val = searchValue.toLowerCase();
-    // filter our data
-    const temps = this.toolsList.filter(function (d) {
-      return d.name.toLowerCase().indexOf(val) != -1 || !val;
-    });
-    // update the rows
-    this.toolsList = temps;
-  }
 
-  openModalDemo() {
-    this.modalService.open(ToolAddModalComponent, {
-      windowClass: "dl-md-modal dbs",
-      size: "sm",
-      centered: true
+    // filter our data
+    const temp = this.t_temp.filter(t => {
+      return t.name.toLowerCase().indexOf(val) !== -1 || !val;
     });
-  }
 
-  dataAction($event) {
-    if($event[0] == "trash"){
-      console.log($event, "tools delete");
-      this.deleteToolModel($event[1]);
-    }else {
-      console.log($event, "tools update");
-      this.updateToolModel($event[1]);
-    }
+    // update the rows
+    this.tools = temp;
   }
 
-  deleteToolModel(id: number) {
-
-    const modalRef = this.modalService.open(AlertComponent, {
-      size: "sm",
-      centered: true
-    });
-    modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      // Delete tool
-      this.dbApiService.deleteDb(id).subscribe(
-        res => {
-          if (JSON.stringify(res).length <= 2) {
-            this.toolsList = [...this.toolsList];
-            this.notificationService.success("SUCCESSFULLY_DELETED");
-            this.initData();
-          } else {
-            this.notificationService.error("FAILED_DELETED");
-          }
-          modalRef.close();
-        },
-        err => {
-          this.notificationService.error(err);
+  btnTableAction(passValueArr: Array<any>) {
+    let action = passValueArr[0];
+    let id = passValueArr[1];
+
+    switch (action) {
+      case "edit":
+        this.openModal("edit", id);
+        break;
+      case "delete":
+        const modalRef = this.modalService.open(AlertComponent, {
+          size: "sm",
+          centered: true,
+          backdrop: "static"
+        });
+        modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
+        modalRef.componentInstance.passEntry.subscribe(recevicedEntry => {
+          this.restApiService.deleteDb(id).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_DELETED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
           modalRef.close();
-        }
-      );
-    });
+        });
+        break;
+    }
   }
 
-  updateToolModel(id: number) {
-    const modalRef = this.modalService.open(ModalToolsComponent, {
+  openModal(mode: string = "", id: number | string) {
+    const modalRef = this.modalService.open(ModalComponent, {
       size: "lg",
-      centered: true
+      centered: true,
+      backdrop: "static"
     });
-    const index = this.toolsList.findIndex(t => t.id === id);
-    modalRef.componentInstance.editTool = this.toolsList[index];
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.toolNew = receivedEntry;
-      this.dbApiService
-        .updateDb(this.toolNew)
-        .subscribe(
-          res => {
-            if (res.statusCode == 200) {
-              this.toolsList[index] = this.toolNew;
-              this.toolsList = [...this.toolsList];
-              this.notificationService.success("SUCCESSFULLY_UPDATED");
-              this.initData();
-            } else {
-              this.notificationService.error("FAILED_UPDATED");
+
+    switch (mode) {
+      case "new":
+        let newTool: Db = new Db();
+        let componentNew = new ModalContentData(ToolModalComponent, newTool);
+
+        modalRef.componentInstance.title = "NEW_TOOL";
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "new";
+        modalRef.componentInstance.component = componentNew;
+
+        modalRef.componentInstance.passEntry.subscribe((data: Db) => {
+          newTool = Object.assign({}, data);
+          console.log(newTool.dbTypeId);
+          console.log(newTool);
+          this.restApiService.addDb(newTool).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_CREARED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
             }
-            modalRef.close();
-          },
-          err => {
-            this.notificationService.error(err);
-            modalRef.close();
-          }
-        );
-    });
+          );
+          modalRef.close();
+        });
+        break;
+      case "edit":
+        let index: number = this.tools.findIndex(db => db.id === id);
+        let editTool: Db = this.tools[index];
+        let componentEdit = new ModalContentData(ToolModalComponent, editTool);
+
+        modalRef.componentInstance.title = editTool.name;
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "edit";
+        modalRef.componentInstance.component = componentEdit;
+
+        modalRef.componentInstance.passEntry.subscribe((data: Db) => {
+          editTool = Object.assign({}, data);
+          this.restApiService.updateDb(editTool).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_UPDATED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
+    }
   }
 }
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 b5e7d28a..3f4959bf 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
@@ -77,6 +77,7 @@
   "EDIT_KAFKA": "Edit Kafka",
   "NEW_DB": "New Database",
   "DB_TYPE": "Db Type",
+  "TOOL_TYPE": "Tool Type",
   "NEW_DRUID": "New Druid",
   "NEW_ELASTICSEARCH": "New Elasticsearch",
   "NEW_COUCHBASE": "New Couchbase",
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index 64cc8eae..958bb669 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -135,6 +135,12 @@ hr {
 /*
   bootstrap table theme
 */
+.table-panel {
+  background: #FFFFFF;
+  box-shadow: 3px 3px 11px 0 #D2D3D5;
+  border-radius: 20px;
+}
+
 .ngx-datatable.bootstrap {
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;