Merge "fix db and tools ui"

15 files changed, 128 insertions, 58 deletions

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 ca33d91f..db75f713 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
@@ -32,9 +32,7 @@
 
         <!-- button -->
         <div class="p-1">
-          <button class="btn dl-btn-dark" (click)="newDbModal();">
-            {{ "NEW_DB" | translate }}
-          </button>
+          <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="newDbModal()"></app-button>
         </div>
       </div>
     </div>
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 b58b6d2d..0eb67366 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
@@ -61,7 +61,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -90,7 +90,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -116,12 +116,23 @@
             <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
           </div>
           <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
               <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
             </select>
           </div>
         </div>
       </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </div>
+        </div>
+      </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 be3b2517..5c347ad0 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
@@ -43,7 +43,7 @@ export class CouchbaseComponent {
   @Input() db: Db;
   @Input() dbList_length;
   dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  dbTypeIdList: Array<string> = ["CB"];
   @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
   defaultDbType: string;
@@ -75,7 +75,7 @@ export class CouchbaseComponent {
 
     } else {
       this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
       this.defaultDbType = this.dbInput.dbTypeId;
       console.log("edit db");
     }
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 b58b6d2d..0eb67366 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
@@ -61,7 +61,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -90,7 +90,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -116,12 +116,23 @@
             <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
           </div>
           <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
               <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
             </select>
           </div>
         </div>
       </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </div>
+        </div>
+      </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 5c424fce..cf4027a6 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
@@ -43,7 +43,7 @@ export class DruidComponent {
   @Input() db: Db;
   @Input() dbList_length;
   dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  dbTypeIdList: Array<string> = ["DRUID"];
   @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
   defaultDbType: string;
@@ -75,7 +75,7 @@ export class DruidComponent {
 
     } else {
       this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
       this.defaultDbType = this.dbInput.dbTypeId;
       console.log("edit db");
     }
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 b58b6d2d..0eb67366 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
@@ -61,7 +61,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -90,7 +90,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -116,12 +116,23 @@
             <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
           </div>
           <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
               <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
             </select>
           </div>
         </div>
       </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </div>
+        </div>
+      </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 ed3e513b..4331bc7e 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
@@ -43,7 +43,7 @@ export class ElasticsearchComponent {
   @Input() db: Db;
   @Input() dbList_length;
   dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  dbTypeIdList: Array<string> = ["ES"];
   @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
   defaultDbType: string;
@@ -75,7 +75,7 @@ export class ElasticsearchComponent {
 
     } else {
       this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
       this.defaultDbType = this.dbInput.dbTypeId;
       console.log("edit db");
     }
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 d13cbeec..a12165cd 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
@@ -61,7 +61,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -96,12 +96,23 @@
             <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
           </div>
           <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
               <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
             </select>
           </div>
         </div>
       </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </div>
+        </div>
+      </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 2c161fdb..f471e828 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
@@ -43,7 +43,7 @@ export class HdfsComponent {
   @Input() db: Db;
   @Input() dbList_length;
   dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  dbTypeIdList: Array<string> = ["HDFS"];
   @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
   defaultDbType: string;
@@ -75,7 +75,7 @@ export class HdfsComponent {
 
     } else {
       this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
       this.defaultDbType = this.dbInput.dbTypeId;
       console.log("edit db");
     }
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 b58b6d2d..0eb67366 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
@@ -61,7 +61,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -90,7 +90,7 @@
             <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" />
+            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -116,12 +116,23 @@
             <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
           </div>
           <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" >
+            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
               <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
             </select>
           </div>
         </div>
       </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </div>
+        </div>
+      </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 765da258..bcd2e880 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
@@ -43,7 +43,7 @@ export class MongodbComponent {
   @Input() db: Db;
   @Input() dbList_length;
   dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB", "DRUID", "ES", "HDFS", "MONGO"];
+  dbTypeIdList: Array<string> = ["MONGO"];
   @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
 
   defaultDbType: string;
@@ -75,7 +75,7 @@ export class MongodbComponent {
 
     } else {
       this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit " + this.editDb.name;
+      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
       this.defaultDbType = this.dbInput.dbTypeId;
       console.log("edit db");
     }
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
index 0b0b4622..f4f9abad 100644
--- 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
@@ -62,7 +62,7 @@
             <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" />
+            <input [(ngModel)]="this.toolInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -71,7 +71,7 @@
             <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" />
+            <input [(ngModel)]="this.toolInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
       </div>
@@ -82,7 +82,7 @@
             <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" />
+            <input [(ngModel)]="this.toolInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
           </div>
         </div>
 
@@ -91,7 +91,29 @@
             <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" />
+            <input [(ngModel)]="this.toolInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.toolInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
+          </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" disabled>
+              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
+            </select>
           </div>
         </div>
       </div>
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
index 8ffeaadf..87071e6b 100644
--- 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
@@ -20,7 +20,7 @@
  *
  */
 
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} 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";
@@ -38,8 +38,8 @@ export class ModalToolsComponent implements OnInit {
   @Input() tool: Db;
   @Input() toolList_length;
   toolInput: Db;
-  d_dbTypeId: string = "";
-
+  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
+  dbTypeIdList: Array<string> = [];
   defaultDbType: string;
   toolInputTitle = "";
   data: string;
@@ -66,12 +66,14 @@ export class ModalToolsComponent implements OnInit {
       }
       this.toolInput = feed;
       this.toolInputTitle = this.data === "Kibana" ? "New Kibana" : "New Superset";
+      this.dbTypeIdList = this.data === "Kibana" ? ["KIBANA"] : ["SUPERSET"];
       console.log("create db");
 
     } else {
       this.toolInput = this.editTool;
-      this.toolInputTitle = "Edit " + this.editTool.name;
-      this.defaultDbType = this.toolInput.dbTypeId;
+      this.toolInputTitle = "Edit" + "-" + this.editTool.dbTypeId + "-" + this.editTool.name;
+      this.defaultDbType = this.editTool.dbTypeId;
+      this.dbTypeIdList = [this.editTool.dbTypeId];
       console.log("edit db");
     }
   }
@@ -82,11 +84,7 @@ export class ModalToolsComponent implements OnInit {
       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.dbTypeId = this.d_dbTypeId.nativeElement.value;
     this.editTool.encrypt = false;
     console.log(this.editTool, "editTool");
     this.passEntry.emit(this.editTool);
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 ebe33e49..be0d253f 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
@@ -112,10 +112,10 @@ export class ToolsComponent implements OnInit {
 
   dataAction($event) {
     if($event[0] == "trash"){
-      console.log($event, "tools 中触发执行删除操作");
+      console.log($event, "tools delete");
       this.deleteToolModel($event[1]);
     }else {
-      console.log($event, "tools 中触发执行修改操作");
+      console.log($event, "tools update");
       this.updateToolModel($event[1]);
     }
   }
@@ -137,7 +137,6 @@ export class ToolsComponent implements OnInit {
             this.initData();
           } else {
             this.notificationService.error("FAILED_DELETED");
-            this.initData();
           }
           modalRef.close();
         },
@@ -169,7 +168,6 @@ export class ToolsComponent implements OnInit {
               this.initData();
             } else {
               this.notificationService.error("FAILED_UPDATED");
-              this.initData();
             }
             modalRef.close();
           },
@@ -178,7 +176,6 @@ export class ToolsComponent implements OnInit {
             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 f0217a8f..13872a41 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
@@ -82,7 +82,7 @@
   "NEW_MONGODB": "New MongoDB",
   "NEW_HDFS": "New Hdfs",
   "SECURE_COMMUNICATION": "Secure Communication",
-  "DB_TYPE": "DbType",
   "NEW_TOOL": "New Tool",
-  "NEW_KIBANA": "New Kibana"
+  "NEW_KIBANA": "New Kibana",
+  "DATABASE": "Database"
 }