diff options
author | Yan Yang <yangyanyj@chinamobile.com> | 2019-06-11 04:50:47 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2019-06-11 04:50:47 +0000 |
commit | 9beee367caa9591882136498237825488978c5f6 (patch) | |
tree | a1f1a76460446f8b79aab69c16041747b4fba176 /components | |
parent | 5ebb70601f3a93e5df5f5dfecee225a1105c921e (diff) | |
parent | f6644f3216681a3d7a44bd74901c6887b9b74ce1 (diff) |
Merge "Dashboard-list interface front-end development"
Diffstat (limited to 'components')
6 files changed, 97 insertions, 201 deletions
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<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 @@ export class DashboardApiService { ); } - 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 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 @@ <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 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 @@ <!-- 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 @@ M33x3Llz5s+fLxFeCIL4T4ABAKZ9PUaesuDFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 <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 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. </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> |