From f6644f3216681a3d7a44bd74901c6887b9b74ce1 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Thu, 6 Jun 2019 16:24:52 +0800 Subject: Dashboard-list interface front-end development Change-Id: I905c23f3c84b75c75a87ec34ee0adf3423242ec2 Issue-ID: DCAEGEN2-1599 Signed-off-by: cyuamber --- .../src/app/core/services/dashboard-api.service.ts | 34 ++--- .../create-dashboard.component.html | 40 ++++-- .../dashboard-list/dashboard-list.component.css | 6 + .../dashboard-list/dashboard-list.component.html | 66 +++------- .../dashboard-list/dashboard-list.component.ts | 140 ++++----------------- .../src/src/app/sidebar/sidebar.component.html | 12 +- 6 files changed, 97 insertions(+), 201 deletions(-) (limited to 'components') 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 a0a35f9d..42b0ffdd 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 @@ export class DashboardApiService { ); } - addDashboard(d: Dashboard): Observable { - console.log(d,"add dashboard body"); - let url = prefix + "portals"; //onilne - return this.http - .put(url, d) - .pipe( - retry(1), - tap(_ => console.log(`add db name=${d.name}`)), - catchError(this.handleError) - ); - } - - upadteDashboard(d: Dashboard): Observable { - console.log(d,"add dashboard body"); + createUpadteDashboard(d: Dashboard): Observable { + 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 @@ export class DashboardApiService { ); } - getDashboardName(): Observable { - let url = prefix + "portals/getNames?enabled=false"; //onilne - return this.http.get(url).pipe( - retry(1), - map(this.extractData), - catchError(this.handleError) - ); - } + // getDashboardName(): Observable { + // // 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 eb355d19..8ce28688 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 @@
- +
@@ -37,14 +37,10 @@
-
+
- - +
@@ -56,7 +52,7 @@
+ placeholder="{{ 'InputValue' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
@@ -66,7 +62,7 @@
+ placeholder="{{ 'InputValue' | translate}}" (input)="this.adminService.onKeyPressNumber($event)" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
@@ -77,14 +73,34 @@ for="inputUserName">{{ "AUTHENTICATION" | translate}}
+ placeholder="{{ 'Username' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
+ placeholder=" {{ 'Password' | translate}}" [disabled]="!this.tempDb.enabled" [attr.disabled]='!this.tempDb.enabled?true:undefined'>
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+ 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 5dab0c0c..69d9710a 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 8205158e..d35d2e15 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 @@
-
-
+
+
- - - -
- - -
+ + + + + + + + + + +
@@ -197,46 +201,12 @@ M33x3Llz5s+fLxFeCIL4T4ABAKZ9PUaesuDFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1
- {{ db.host }} + {{ db.name }}
- - -
-
-
- - -
- -
- -
-
-
-
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 a2966a4e..206ae739 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 @@ export class DashboardListComponent implements OnInit { tempDbDetail: Dashboard; selectedLangs = sessionStorage.getItem("selectedLang"); dashboardDeteleModelShow = true; - nameArr = []; + + // nameArr = []; constructor( private adminService: AdminService, @@ -56,7 +57,7 @@ export class DashboardListComponent implements OnInit { ) { // 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 @@ export class DashboardListComponent implements OnInit { getDbList() { var data: any; data = this.dashboardApiService.getDashboardList().toPromise(); - return data; } @@ -105,52 +105,29 @@ export class DashboardListComponent implements OnInit { 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 @@ export class DashboardListComponent implements OnInit { } ); } 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 @@ export class DashboardListComponent implements OnInit { 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 675e9f61..658d005d 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 @@ limitations under the License.