Dashboard-list interface front-end development
Change-Id: I905c23f3c84b75c75a87ec34ee0adf3423242ec2
Issue-ID: DCAEGEN2-1599
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
diff --git a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts
index a0a35f9..42b0ffd 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts
@@ -72,20 +72,9 @@
);
}
- addDashboard(d: Dashboard): Observable<any> {
- console.log(d,"add dashboard body");
- let url = prefix + "portals"; //onilne
- return this.http
- .put<any>(url, d)
- .pipe(
- retry(1),
- tap(_ => console.log(`add db name=${d.name}`)),
- catchError(this.handleError)
- );
- }
-
- upadteDashboard(d: Dashboard): Observable<any> {
- console.log(d,"add dashboard body");
+ createUpadteDashboard(d: Dashboard): Observable<any> {
+ console.log(d,"add or update dashboard body");
+ // let url = prefix +"/dashboard-list/successCreteOrEditDemo.json"; //local
let url = prefix + "portals";//onilne
return this.http
.put(url, d)
@@ -108,14 +97,15 @@
);
}
- getDashboardName(): Observable<any> {
- let url = prefix + "portals/getNames?enabled=false"; //onilne
- return this.http.get(url).pipe(
- retry(1),
- map(this.extractData),
- catchError(this.handleError)
- );
- }
+ // getDashboardName(): Observable<any> {
+ // // let url = prefix +"/dashboard-list/getDashboardName.json"; //local
+ // let url = prefix + "portals/getNames?enabled=false"; //onilne
+ // return this.http.get(url).pipe(
+ // retry(1),
+ // map(this.extractData),
+ // catchError(this.handleError)
+ // );
+ // }
/*
Template
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html
index eb355d1..8ce2868 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html
@@ -20,7 +20,7 @@
<div class="row">
<div class="col-md-12">
<label class="dl-h3" *ngIf="this.tempDb.name==undefined">{{ "NewDashboard" | translate}}</label>
- <label class="dl-h3" style="letter-spacing: 0" *ngIf="this.tempDb.name!=undefined">{{this.tempDb.name}} | {{tempDbNameTitle}}</label>
+ <label class="dl-h3" style="letter-spacing: 0" *ngIf="this.tempDb.name!=undefined">{{this.tempDb.name}}</label>
</div>
</div>
@@ -37,14 +37,10 @@
<div class="form-group">
<div class="row">
- <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">{{ "DestinationType" | translate}}</label></div>
+ <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">{{ "NAME" | translate}}</label></div>
<div class="col-md-4">
- <select #t_dataDashboardName class="custom-select dl-input-text" id="inputBucket" *ngIf="this.tempDb.name ==undefined" >
- <option *ngFor="let item of nameArr" [selected]="item==this.tempDb.name">
- {{ item }}</option>
- </select>
- <select #t_dataDashboardName class="custom-select dl-input-text select-disabled" *ngIf="this.tempDb.name !=undefined" disabled >
- <option [selected]="this.tempDb.name==this.tempDb.name">
+ <select #t_dataDashboardName class="custom-select dl-input-text select-disabled" *ngIf="this.tempDb.name !=undefined" disabled="disabled" id="inputBucket" style="background: rgba(233, 236, 239, 0.5)">
+ <option [selected]="this.tempDb.name==this.tempDb.name" >
{{ this.tempDb.name }}</option>
</select>
</div>
@@ -56,7 +52,7 @@
<div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
<div class="col-md-4">
<input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
- placeholder="{{ 'InputValue' | translate}}">
+ placeholder="{{ 'InputValue' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
</div>
</div>
</div>
@@ -66,7 +62,7 @@
<div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
<div class="col-md-3">
<input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
- placeholder="{{ 'InputValue' | translate}}" (input)="this.adminService.onKeyPressNumber($event)">
+ placeholder="{{ 'InputValue' | translate}}" (input)="this.adminService.onKeyPressNumber($event)" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
</div>
</div>
</div>
@@ -77,14 +73,34 @@
for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
<div class="col-sm-4">
<input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
- placeholder="{{ 'Username' | translate}}">
+ placeholder="{{ 'Username' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
</div>
<div class="col-sm-4">
<input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
- placeholder=" {{ 'Password' | translate}}">
+ placeholder=" {{ 'Password' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
</div>
</div>
</div>
+
+ <div class="form-group">
+ <div class="row">
+ <div class="col-md-3"><label class="dl-emphasis1" for="inputEnabled">{{ "Enabled" | translate}}</label></div>
+ <div class="col-md-3">
+ <div class="input-group">
+ <div class="input-group-prepend">
+ <label class="input-group-text dl-input-chk-label">
+ <input id="chkSsl" [(ngModel)]="this.tempDb.enabled" type="checkbox" />
+ <span class="dl-input-checkmark"></span>
+ </label>
+ </div>
+ <label class="form-control dl-input-chk" for="chkSsl">
+ Enable
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
</div>
</div>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css
index 5dab0c0..69d9710 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css
@@ -62,3 +62,9 @@
.falsecheck{
color:#BDBEC0
}
+.maskShow{
+ position: absolute;
+}
+.deleteDisplay{
+background: rgba(222, 222, 222, 0.48);
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
index 8205158..d35d2e1 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
@@ -23,20 +23,24 @@
<!-- Database list -->
<div *ngFor="let db of this.dbs;let thisIndex=index" class="col-sm-2 db-block">
- <div class="db-panel" style="height: 100%">
- <div class="d-flex flex-column align-content-center">
+ <div class="db-panel"
+ style="height: 100%;cursor: pointer"
+ (click)="this.openDashboardModal(thisIndex)"
+ [ngClass]="{'deleteDisplay':db.enabled== false}"
+ >
+ <div class="d-flex flex-column align-content-center" style="margin-top: 1.5rem;">
<div class="ml-auto dropdown db-dropdown mr-2" data-boundary="window">
- <a class="badge badge-light db-dropdown" data-toggle="dropdown" style="cursor: pointer">
- <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
- </a>
- <div class="dropdown-menu action-btn">
- <button class="dropdown-item" type="button" (click)="this.openDashboardModal(thisIndex)">
- {{ 'EDIT' | translate }}
- </button>
- <button class="dropdown-item" type="button" (click)="this.deleteDashboard(thisIndex)">
- {{ 'DELETE' | translate }}
- </button>
- </div>
+ <!--<a class="badge badge-light db-dropdown" data-toggle="dropdown" style="cursor: pointer">-->
+ <!--<i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>-->
+ <!--</a>-->
+ <!--<div class="dropdown-menu action-btn">-->
+ <!--<button class="dropdown-item" type="button" (click)="this.openDashboardModal(thisIndex)">-->
+ <!--{{ 'EDIT' | translate }}-->
+ <!--</button>-->
+ <!--<button class="dropdown-item" type="button" (click)="this.deleteDashboard(thisIndex)">-->
+ <!--{{ 'DELETE' | translate }}-->
+ <!--</button>-->
+ <!--</div>-->
</div>
<div>
@@ -197,46 +201,12 @@
<div class="mt-auto">
<i class="fa fa-check-circle" aria-hidden="true"
[ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
- {{ db.host }}
+ {{ db.name }}
</div>
</div>
</div>
</div>
</div>
-
- <!-- Add -->
- <div class="col-sm-2 db-block">
- <div class="db-panel">
- <div class="d-flex flex-column align-content-center">
- <div class="ml-auto dropdown db-dropdown mr-2" style="visibility: hidden;" data-boundary="window">
- <a class="badge badge-light db-dropdown" data-toggle="dropdown">
- <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
- </a>
- <div class="dropdown-menu">
- <button class="dropdown-item" type="button">
- <i class="fas fa-times db-config-icon"></i> Delete
- </button>
- </div>
- </div>
-
- <div>
- <button type="button" class="btn" (click)="this.openCreateModal()">
- <div class="align-self-center" style="height: 130px;">
- <div style="width:100px; height:100px;">
- <i class="fas fa-plus fa-3x pt-4 dl-icon-enable"></i>
- </div>
- </div>
-
- <div class="mt-auto" style="visibility: hidden;">
- add
- </div>
- </button>
- </div>
-
- </div>
- </div>
- </div>
-
</div>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts
index a2966a4..206ae73 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts
@@ -45,7 +45,8 @@
tempDbDetail: Dashboard;
selectedLangs = sessionStorage.getItem("selectedLang");
dashboardDeteleModelShow = true;
- nameArr = [];
+
+ // nameArr = [];
constructor(
private adminService: AdminService,
@@ -56,7 +57,7 @@
) {
// Set page title
this.adminService.setTitle("SIDEBAR.DASHBOARDLIST");
- this.getName();
+ // this.getName();
this.initData().then(data => {
this.initDbsList(this.dbList).then(data => {
this.dbs = data;
@@ -81,7 +82,6 @@
getDbList() {
var data: any;
data = this.dashboardApiService.getDashboardList().toPromise();
-
return data;
}
@@ -105,52 +105,29 @@
return d;
}
-
- openCreateModal() {
- let thisIndex = -1;
- this.openDashboardModal(thisIndex);
- }
-
openDashboardModal(thisIndex: number) {
var modalRef, index;
this.selectedLangs = sessionStorage.getItem("selectedLang");
let tips = "";
-
-
index = thisIndex;
console.log(index, "index,add or edit");
- this.tempDbDetail = new Dashboard();
- if (index != -1) {
- modalRef = this.modalService.open(CreateDashboardComponent, {
- size: "lg",
- centered: true
- });
- modalRef.componentInstance.dashboard = this.dbs[index];
- } else {
- if(this.nameArr.length == 0 && this.dbs.length>0){
- console.log("All types have been created, you cannot create existing types again.");
- return false;
- }else {
- modalRef = this.modalService.open(CreateDashboardComponent, {
- size: "lg",
- centered: true
- });
- modalRef.componentInstance.dashboard = this.tempDbDetail;
- }
-
- }
- modalRef.componentInstance.nameArr = this.nameArr;
+ modalRef = this.modalService.open(CreateDashboardComponent, {
+ size: "lg",
+ centered: true
+ });
+ modalRef.componentInstance.dashboard = this.dbs[index];
modalRef.componentInstance.passEntry.subscribe(receiveEntry => {
- this.tempDbDetail = receiveEntry;
- let host = this.tempDbDetail.host;
+ this.dbs[index] = receiveEntry;
+ let host = this.dbs[index].host;
+ let enabled = this.dbs[index].enabled;
console.log(receiveEntry);
- if (index != -1) {
+ if (enabled == true) {
// Db name found, to update db
- this.dashboardApiService.upadteDashboard(this.tempDbDetail).subscribe(
+ this.dashboardApiService.createUpadteDashboard(this.dbs[index]).subscribe(
res => {
console.log(res);
if (res.statusCode == 200) {
- this.dbs[index] = this.tempDbDetail;
+ this.initData();
if (this.selectedLangs == "en-us") {
tips = "Success updated."
} else if (this.selectedLangs == "zh-hans") {
@@ -177,30 +154,27 @@
}
);
} else {
- // Db name not found, to insert db
- this.dashboardApiService.addDashboard(this.tempDbDetail).subscribe(
+ this.dashboardApiService.deleteDashboard(this.dbs[thisIndex]).subscribe(
res => {
console.log(res);
- let tips = "";
if (res.statusCode == 200) {
- this.dbs.push(this.tempDbDetail);
- this.dbs = [...this.dbs];
- this.getName();
+ this.initData();
if (this.selectedLangs == "en-us") {
- tips = "Success inserted."
+ tips = "Success deleted."
} else if (this.selectedLangs == "zh-hans") {
- tips = "新增成功。"
+ tips = "删除成功。"
} else if (this.selectedLangs == "zh-hant") {
- tips = "新增成功。"
+ tips = "刪除成功。"
}
this.notificationService.success('"' + host + '"' + tips);
- }else {
+ } else {
+ this.dbs[thisIndex].enabled = true;
if (this.selectedLangs == "en-us") {
- tips = "Fail inserted."
+ tips = "Fail deleted."
} else if (this.selectedLangs == "zh-hans") {
- tips = "新增失败。"
+ tips = "删除失败。"
} else if (this.selectedLangs == "zh-hant") {
- tips = "新增失敗。"
+ tips = "刪除失敗。"
}
this.notificationService.error('"' + host + '"' + tips);
}
@@ -211,73 +185,9 @@
modalRef.close();
}
);
+
}
+
});
}
-
- deleteDashboard(thisIndex: number) {
- this.selectedLangs = sessionStorage.getItem("selectedLang");
- const index = thisIndex, host = this.dbs[thisIndex]["host"];
- let tips = "";
- if (this.selectedLangs == "en-us") {
- tips = "Are you sure you want to delete ";
- } else if (this.selectedLangs == "zh-hans") {
- tips = "您确定您要删除";
- } else if (this.selectedLangs == "zh-hant") {
- tips = "您確定您要刪除";
- }
- const modalRef = this.modalService.open(AlertComponent, {
- // size: "sm",
- centered: true
- });
- modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow;
- modalRef.componentInstance.message =
- tips + '"'+host + '"' + ' ?';
- modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
- // Delete database
- this.dbs[thisIndex].enabled = false;
- this.dashboardApiService.deleteDashboard(this.dbs[thisIndex]).subscribe(
- res => {
- console.log(res);
- if (res.statusCode == 200) {
- // this.dbs[index].enabled = false;
- this.dbs.splice(index, 1);
- this.getName();
- if (this.selectedLangs == "en-us") {
- tips = "Success deleted."
- } else if (this.selectedLangs == "zh-hans") {
- tips = "删除成功。"
- } else if (this.selectedLangs == "zh-hant") {
- tips = "刪除成功。"
- }
- this.notificationService.success('"' + host + '"' + tips);
- } else {
- this.dbs[thisIndex].enabled = true;
- if (this.selectedLangs == "en-us") {
- tips = "Fail deleted."
- } else if (this.selectedLangs == "zh-hans") {
- tips = "删除失败。"
- } else if (this.selectedLangs == "zh-hant") {
- tips = "刪除失敗。"
- }
- this.notificationService.error('"' + host + '"' + tips);
- }
- modalRef.close();
- },
- err => {
- this.notificationService.error(err);
- modalRef.close();
- }
- );
- });
- }
-
- getName(){
- this.dashboardApiService.getDashboardName().subscribe(data => {
- this.nameArr = data;
- console.log(this.nameArr,"this.nameArr111");
- });
- console.log(this.nameArr,"this.nameArr222");
- }
-
}
diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
index 675e9f6..658d005 100644
--- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
+++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
@@ -62,14 +62,18 @@
</a>
<ul class="navbar-nav flex-column navbar-nav-nohover" [ngbCollapse]="this.dashboard">
<li class="nav-item">
- <a class="nav-link" style="padding-left: 23px;" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
- routerLink="/dashboard-setting/dashboard-list">
+ <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+ routerLink="/dashboard-setting/dashboard-list"
+ style="padding-left: 23px;"
+ >
{{"SIDEBAR.DASHBOARDLIST" | translate}}
</a>
</li>
<li class="nav-item">
- <a class="nav-link" style="padding-left: 23px;" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
- routerLink="dashboard-setting/template">
+ <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+ routerLink="dashboard-setting/template"
+ style="padding-left: 23px;"
+ >
{{"SIDEBAR.TEMPLATE" | translate}}
</a>
</li>