Dashboard-list interface front-end development

Change-Id: I905c23f3c84b75c75a87ec34ee0adf3423242ec2
Issue-ID: DCAEGEN2-1599
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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}}&nbsp;&nbsp;|&nbsp;&nbsp;{{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>