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"
}