Optimized page display and fixed bugs of tools created.
Solved the problem of create db or tool failure.
Change-Id: If8eb0596876835baa36c1f9f82ac1a166e4494e3
Issue-ID: DCAEGEN2-1877
Signed-off-by: ZhangZihao <zhangzihao@chinamobile.com>
 
         <!-- 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>
 
             <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>
 
             <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>
             <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>
 
             <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>
             <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>
 
 
   @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;
 
     } 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");
     }
 
             <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>
 
             <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>
             <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>
 
             <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>
             <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>
 
 
   @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;
 
     } 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");
     }
 
             <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>
 
             <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>
             <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>
 
             <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>
             <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>
 
 
   @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;
 
     } 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");
     }
 
             <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>
 
             <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>
             <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>
 
 
   @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;
 
     } 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");
     }
 
             <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>
 
             <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>
             <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>
 
             <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>
             <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>
 
 
   @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;
 
     } 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");
     }
 
             <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>
 
             <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>
             <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>
 
             <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>
 
  *
  */
 
-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";
   @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;
       }
       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");
     }
   }
       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);
 
 
   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]);
     }
   }
             this.initData();
           } else {
             this.notificationService.error("FAILED_DELETED");
-            this.initData();
           }
           modalRef.close();
         },
               this.initData();
             } else {
               this.notificationService.error("FAILED_UPDATED");
-              this.initData();
             }
             modalRef.close();
           },
             modalRef.close();
           }
         );
-    })
-
+    });
   }
 }
 
   "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"
 }