tools code

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

20 files changed, 951 insertions, 20 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
index 71c11201..ae2f9b6e 100644
--- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
@@ -35,9 +35,8 @@ import { KafkaComponent } from "./views/kafka/kafka.component";
 import { TopicsComponent } from "./views/topics/topics.component";
 import { DatabaseComponent } from "./views/database/database.component";
 import { AboutComponent } from "./views/about/about.component";
-import { DashboardSettingComponent } from './views/dashboard-setting/dashboard-setting.component';
-import { DashboardListComponent } from './views/dashboard-setting/dashboard-list/dashboard-list.component';
 import { TemplateComponent } from './views/dashboard-setting/template/template.component';
+import {ToolsComponent} from "./views/tools/tools.component";
 
 const routes: Routes = [
   { path: "", redirectTo: "/feeder", pathMatch: "full" },
@@ -47,7 +46,7 @@ const routes: Routes = [
   { path: "topics", component: TopicsComponent },
   { path: "database", component: DatabaseComponent },
   { path: "about", component: AboutComponent },
-  { path: 'dashboard-setting/dashboard-list', component: DashboardListComponent },
+  { path: 'tools', component: ToolsComponent },
   { path: 'dashboard-setting/template', component: TemplateComponent },
 ];
 
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 3c52716c..927f229a 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -65,6 +65,12 @@ import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdf
 import { DatabaseAddModalComponent } from "./views/database/database-list/database-add-modal/database-add-modal.component";
 import { ElasticsearchComponent } from "./views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
 import { DruidComponent } from "./views/database/database-list/dbs-modal/druid/druid.component";
+import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component';
+import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component';
+import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component';
+import { ToolsComponent } from './views/tools/tools.component';
+import { ModalToolsComponent } from './views/tools/modal-tools/modal-tools.component';
+import { ToolAddModalComponent } from './views/tools/tool-add-modal/tool-add-modal.component';
 
 // Modals
 import { TopicDetailModalComponent } from "./views/topics/topic-list/topic-detail-modal/topic-detail-modal.component";
@@ -94,10 +100,6 @@ import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component
 import { KafkaComponent } from './views/kafka/kafka.component';
 // Angular SVG Icon
 import { AngularSvgIconModule } from "angular-svg-icon";
-import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component';
-import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component';
-import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component';
-
 
 @NgModule({
   declarations: [
@@ -139,7 +141,10 @@ import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-mod
     KafkaComponent,
     KafkaListComponent,
     NewKafkaModalComponent,
-    EditKafkaModalComponent
+    EditKafkaModalComponent,
+    ToolsComponent,
+    ModalToolsComponent,
+    ToolAddModalComponent
   ],
   imports: [
     BrowserModule,
@@ -178,7 +183,9 @@ import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-mod
     ModalDemoComponent,
     KafkaComponent,
     NewKafkaModalComponent,
-    EditKafkaModalComponent
+    EditKafkaModalComponent,
+    ToolAddModalComponent,
+    ModalToolsComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
index 3e753df3..7986886a 100644
--- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html
@@ -15,12 +15,14 @@
     <i *ngIf="this.text==='search'" class="fa fa-search"></i>
     <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
     <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
+    <i *ngIf="this.text==='cog'" class="fas fa-cog fa-xs" aria-hidden="true"></i>
   </span>
 </button>
 
 <!-- icon type buttons -->
-<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2">
+<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2" (click)="buttonClick(this.text)">
   <i *ngIf="this.text==='search'" class="fa fa-search"></i>
   <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i>
   <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i>
-</button>
\ No newline at end of file
+  <i *ngIf="this.text==='cog'" class="fas fa-cog fa-xs" aria-hidden="true"></i>
+</button>
diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts
index b01260e9..c78bfe51 100644
--- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts
@@ -20,9 +20,11 @@
  *
  * @author Xu Ran
  *
+ * @contributor Chunmeng Guo
+ *
  */
 
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 
 @Component({
   selector: 'app-button',
@@ -42,6 +44,7 @@ export class ButtonComponent implements OnInit {
   @Input() text: string;
   @Input() style: string;
   @Input() color: string;
+  @Output() btnAction = new EventEmitter<object>()
   buttonstyle: number;
   buttoncolor: number;
   constructor() { }
@@ -72,4 +75,7 @@ export class ButtonComponent implements OnInit {
     }
   }
 
+  buttonClick(string) {
+    this.btnAction.emit(string);
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
index 42835a54..2e463883 100644
--- a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
@@ -59,8 +59,7 @@ limitations under the License.
 
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
-           routerLink="/dashboard-setting/dashboard-list"
-        >
+           routerLink="/tools">
           <i class="fas fa-external-link-alt" aria-hidden="true">&nbsp;</i>
           {{"SIDEBAR.DASHBOARDLIST" | translate}}
         </a>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
index e37065bc..80be23dd 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
@@ -19,7 +19,7 @@
             </app-button>
           </span>
           <span *ngIf="column.icon&&column.icon.length!==0">
-            <app-button [text]="column.icon" [style]="'icon'" [color]="'dark'">
+            <app-button [text]="column.icon" [style]="'icon'" [color]="'dark'" (btnAction)="tableAction($event, row.id)">
             </app-button>
           </span>
         </ng-template>
@@ -37,4 +37,4 @@
 
     </ngx-datatable>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
index 933582a4..9c69e125 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts
@@ -1,4 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+
+/**
+ * @contributor Chunmeng Guo
+ */
 
 @Component({
   selector: 'app-table',
@@ -8,7 +12,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class TableComponent implements OnInit {
   @Input() columns: Array<any> = [];
   @Input() data: Array<any> = [];
-
+  @Output() btnTableAction = new EventEmitter<object>()
   loadingIndicator: boolean = false;
   template_list: Array<any> = [];
 
@@ -27,4 +31,11 @@ export class TableComponent implements OnInit {
   ngOnInit() {
 
   }
+
+  tableAction($event, actionId: number) {
+    let passValueArr: Array<any> = [];
+    passValueArr.push($event);
+    passValueArr.push(actionId);
+    this.btnTableAction.emit(passValueArr);
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css
new file mode 100644
index 00000000..1d234f73
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css
@@ -0,0 +1,58 @@
+/*
+    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/tools/modal-tools/modal-tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html
new file mode 100644
index 00000000..0b0b4622
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html
@@ -0,0 +1,125 @@
+<!--
+    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-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ this.toolInputTitle }}</label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body border-0">
+    <div class="container">
+
+      <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.toolInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input [(ngModel)]="this.toolInput.enabled" id="switch" type="checkbox" />
+              <span class="dl-slider round"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <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.toolInput.host" class="form-control dl-input-text input_style" type="text" placeholder="0.0.0.0" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.toolInput.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 row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.toolInput.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.toolInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="pass" required="required" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="modal-footer border-0 pt-0 pb-2">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6 p-0">
+
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts
new file mode 100644
index 00000000..44c6e2ce
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts
@@ -0,0 +1,47 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalToolsComponent } from './modal-tools.component';
+
+describe('ModalToolsComponent', () => {
+  let component: ModalToolsComponent;
+  let fixture: ComponentFixture<ModalToolsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalToolsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts
new file mode 100644
index 00000000..8ffeaadf
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts
@@ -0,0 +1,98 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Db} from "src/app/core/models/db.model";
+import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+import {AdminService} from "src/app/core/services/admin.service";
+import {NgxSpinnerService} from "ngx-spinner";
+
+@Component({
+  selector: 'app-modal-tools',
+  templateUrl: './modal-tools.component.html',
+  styleUrls: ['./modal-tools.component.css']
+})
+export class ModalToolsComponent implements OnInit {
+
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() editTool: Db;
+  @Input() tool: Db;
+  @Input() toolList_length;
+  toolInput: Db;
+  d_dbTypeId: string = "";
+
+  defaultDbType: string;
+  toolInputTitle = "";
+  data: string;
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService,
+    private spinner: NgxSpinnerService
+  ) { }
+
+  ngOnInit() {
+    if (this.editTool == null) {
+      this.toolInput = new Db();
+      const feed = {
+        id: null,
+        name: this.tool.name,
+        enabled: this.tool.enabled,
+        host: this.tool.host,
+        port: this.tool.port,
+        database: this.tool.database,
+        encrypt: this.tool.encrypt,
+        login: this.tool.login,
+        pass: this.tool.pass,
+        dbTypeId: this.tool.dbTypeId
+      }
+      this.toolInput = feed;
+      this.toolInputTitle = this.data === "Kibana" ? "New Kibana" : "New Superset";
+      console.log("create db");
+
+    } else {
+      this.toolInput = this.editTool;
+      this.toolInputTitle = "Edit " + this.editTool.name;
+      this.defaultDbType = this.toolInput.dbTypeId;
+      console.log("edit db");
+    }
+  }
+
+  passBack() {
+    this.spinner.show();
+    if (this.toolInput.name == '' || this.toolInput.name == undefined) {
+      return false;
+    }
+    this.editTool = this.toolInput;
+    if (this.data == '' || this.data == undefined) {
+      this.editTool.dbTypeId = this.toolInput.dbTypeId;
+    } else {
+      this.editTool.dbTypeId = this.data === "Kibana" ? "KIBANA" : "SUPERSET";
+    }
+    this.editTool.encrypt = false;
+    console.log(this.editTool, "editTool");
+    this.passEntry.emit(this.editTool);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css
new file mode 100644
index 00000000..b55b3001
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css
@@ -0,0 +1,34 @@
+/*
+    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.
+*/
+
+.nav-pills .nav-link.active,
+.nav-pills .nav-link:hover {
+  color: #ffffff;
+  background-color: #5DBEBB;
+}
+
+.nav-link {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: #313449;
+  text-align: left;
+  border-radius: 0px;
+}
+
+.nav-pills .show>.nav-link {
+  background-color: #FFFFFF;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html
new file mode 100644
index 00000000..2169325f
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html
@@ -0,0 +1,63 @@
+<!--
+    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-0">
+  <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_TOOL' | translate }}</label>
+        </div>
+      </div>
+      <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">
+            <a class="nav-link" (click)="this.clickItem('Kibana')" data-toggle="pill" role="tab"
+               aria-selected="true">Kibana</a>
+            <a class="nav-link" (click)="this.clickItem('Superset')" data-toggle="pill" role="tab"
+               aria-selected="true">Superset</a>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex mt-auto justify-content-end p-3">
+        <div class="p-1 col-sm-3">
+            <span>
+              <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+                Next
+              </button>
+            </span>
+        </div>
+        <div class="p-1 col-sm-3">
+            <span>
+              <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+                Cancel
+              </button>
+            </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts
new file mode 100644
index 00000000..cabc951e
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts
@@ -0,0 +1,47 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolAddModalComponent } from './tool-add-modal.component';
+
+describe('ToolAddModalComponent', () => {
+  let component: ToolAddModalComponent;
+  let fixture: ComponentFixture<ToolAddModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ToolAddModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolAddModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts
new file mode 100644
index 00000000..25087d80
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts
@@ -0,0 +1,123 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {Db} from "src/app/core/models/db.model";
+import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgxSpinnerService} from "ngx-spinner";
+import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service";
+import {RestApiService} from "src/app/core/services/rest-api.service";
+import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component";
+
+@Component({
+  selector: 'app-tool-add-modal',
+  templateUrl: './tool-add-modal.component.html',
+  styleUrls: ['./tool-add-modal.component.css']
+})
+export class ToolAddModalComponent implements OnInit {
+
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  seletedItem: string = "";
+  toolList: any = [];
+  loading: Boolean = true;
+  toolNew: Db;
+  tool_NewBody: Db;
+  constructor(
+    public activeModal: NgbActiveModal,
+    private spinner: NgxSpinnerService,
+    private notificationService: ToastrNotificationService,
+    private modalService: NgbModal,
+    private dbApiService: RestApiService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  clickItem(name: string) {
+    this.seletedItem = name;
+  }
+
+  passBack() {
+    console.log(this.seletedItem, "next");
+    this.openNewModal(this.seletedItem);
+  }
+
+  newTool(modalRef) {
+    this.toolNew = new Db();
+    this.tool_NewBody = new Db();
+    modalRef.componentInstance.tool = this.tool_NewBody;
+    modalRef.componentInstance.toolList_length = this.toolList.length;
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      this.tool_NewBody = receivedEntry;
+      this.dbApiService
+        .createDb(this.tool_NewBody)
+        .subscribe(
+          res => {
+            this.spinner.hide();
+            if (res.statusCode == 200) {
+              this.toolNew = res.returnBody;
+              this.toolList.push(this.toolNew);
+              this.toolList = [...this.toolList];
+              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) {
+    let modalRef;
+
+    switch (name) {
+      case "Kibana": {
+        modalRef = this.modalService.open(ModalToolsComponent, {
+          size: "lg",
+          centered: true
+        });
+        modalRef.componentInstance.data = name;
+        this.newTool(modalRef);
+        break;
+      }
+      case "Superset": {
+        modalRef = this.modalService.open(ModalToolsComponent, {
+          size: "lg",
+          centered: true
+        });
+        modalRef.componentInstance.data = name;
+        this.newTool(modalRef);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css
new file mode 100644
index 00000000..2fabd8a0
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.css
@@ -0,0 +1,21 @@
+/*
+    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.
+*/
+
+.topic-list-panel {
+  background: #FFFFFF;
+  box-shadow: 3px 3px 11px 0 #D2D3D5;
+  border-radius: 20px;
+}
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
new file mode 100644
index 00000000..c55fa463
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html
@@ -0,0 +1,58 @@
+<!--
+    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="row">
+  <div class="col-md-12 pb-2 path">
+    Home > Tools
+  </div>
+  <div class="col-md-12">
+    <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>
+
+            <!-- button -->
+            <div class="p-1">
+              <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModalDemo()"></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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts
new file mode 100644
index 00000000..6c02dd8c
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.spec.ts
@@ -0,0 +1,47 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolsComponent } from './tools.component';
+
+describe('ToolsComponent', () => {
+  let component: ToolsComponent;
+  let fixture: ComponentFixture<ToolsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ToolsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..ebe33e49
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts
@@ -0,0 +1,184 @@
+/*
+    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.
+*/
+
+/**
+ *
+ * @author Chunmeng Guo
+ *
+ */
+
+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";
+
+@Component({
+  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;
+
+  @ViewChild("searchText") searchText: ElementRef;
+
+  constructor(
+    private adminService: AdminService,
+    private notificationService: ToastrNotificationService,
+    private modalService: NgbModal,
+    private dbApiService: RestApiService,
+  ) {
+    this.adminService.setTitle("SIDEBAR.DASHBOARDLIST");
+    this.initData().then(data => { });
+  }
+
+  ngOnInit() {
+    this.toolsColumns = [
+      {
+        name: "STATUS",
+        width: "50",
+        dataIndex: "enabled"
+      },
+      {
+        name: "NAME",
+        width: "220",
+        dataIndex: "name"
+      },
+      {
+        name: "DB_TYPE",
+        width: "220",
+        dataIndex: "dbTypeId"
+      },
+      {
+        name: "",
+        width: "5",
+        dataIndex: "",
+        icon: "trash"
+      },
+      {
+        name: "",
+        width: "5",
+        dataIndex: "",
+        icon: "cog"
+      }
+    ];
+  }
+
+  async initData() {
+    this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise();
+  }
+
+  updateFilter(searchValue) {
+    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
+    });
+  }
+
+  dataAction($event) {
+    if($event[0] == "trash"){
+      console.log($event, "tools 中触发执行删除操作");
+      this.deleteToolModel($event[1]);
+    }else {
+      console.log($event, "tools 中触发执行修改操作");
+      this.updateToolModel($event[1]);
+    }
+  }
+
+  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");
+            this.initData();
+          }
+          modalRef.close();
+        },
+        err => {
+          this.notificationService.error(err);
+          modalRef.close();
+        }
+      );
+    });
+  }
+
+  updateToolModel(id: number) {
+    const modalRef = this.modalService.open(ModalToolsComponent, {
+      size: "lg",
+      centered: true
+    });
+    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");
+              this.initData();
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    })
+
+  }
+}
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 046a57f7..05730d9d 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
@@ -5,7 +5,7 @@
     "TOPICS": "Topics",
     "DATABASE": "Database",
     "DASHBOARD": "Portal Setting",
-    "DASHBOARDLIST": "Portal",
+    "DASHBOARDLIST": "Tools",
     "TEMPLATE": "Design",
     "ABOUT": "About"
   },
@@ -82,5 +82,7 @@
   "NEW_MONGODB": "New MongoDB",
   "NEW_HDFS": "New Hdfs",
   "SECURE_COMMUNICATION": "Secure Communication",
-  "DB_TYPE": "DbType"
+  "DB_TYPE": "DbType",
+  "NEW_TOOL": "New Tool",
+  "NEW_KIBANA": "New Kibana"
 }