feat: new changes for design module

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

8 files changed, 249 insertions, 251 deletions

diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
index 0586cd85..af9ef3d9 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
@@ -13,41 +13,24 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-// export class TemplateList {
-//   id:number;
-//   name:string;
-//   submitted:true;
-//   body: string;
-//   note:string;
-//   portalDesignConfig:{
-//     id:number;
-//     name:string;
-//     submitted:true;
-//     body: string;
-//     note:string;
-//     topic: string;
-//     designType: string;
-//   }
-//
-// }
 
 export class Template {
-    id:number;
-    name:string;
-    submitted:boolean;
-    body: string;
-    note:string;
-    topic: string;
-    designType: string;
-    display:string;
-  }
+  id: number;
+  name: string;
+  submitted: boolean;
+  body: string;
+  note: string;
+  topicName: string;
+  designType: string;
+  designTypeName: string;
+}
 
 export class newTemplate {
-  name:string;
-  submitted:boolean;
+  name: string;
+  submitted: boolean;
   body: string;
-  note:string;
-  topic: string;
+  note: string;
+  topicName: string;
   designType: string;
-  display:string;
+  designTypeName: string;
 }
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 42b0ffdd..67bfb75e 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
@@ -13,13 +13,13 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Injectable} from "@angular/core";
-import {HttpClient, HttpHeaders} from "@angular/common/http";
-import {Observable, of} from "rxjs";
-import {map, catchError, tap, retry} from "rxjs/operators";
-import {throwError} from "rxjs";
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Observable, of } from "rxjs";
+import { map, catchError, tap, retry } from "rxjs/operators";
+import { throwError } from "rxjs";
 
-import {Template,newTemplate} from "src/app/core/models/template.model";
+import { Template, newTemplate } from "src/app/core/models/template.model";
 import { Dashboard } from "src/app/core/models/dashboard.model";
 
 const prefix = "/datalake/v1/";
@@ -54,7 +54,7 @@ export class DashboardApiService {
   }
 
   private extractData2(res: Response) {
-    console.log(res,"detele/deploy template");
+    // console.log(res, "detele/deploy template");
     let body = res;
     return body || {};
   }
@@ -73,7 +73,6 @@ export class DashboardApiService {
   }
 
   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
@@ -86,10 +85,9 @@ export class DashboardApiService {
   }
 
   deleteDashboard(d: Dashboard): Observable<any> {
-    console.log(d,"add dashboard body");
     let url = prefix + "portals"; //onilne
     return this.http
-      .put(url,d)
+      .put(url, d)
       .pipe(
         retry(1),
         tap(_ => console.log(`deleted db name=${d.name}`)),
@@ -111,7 +109,7 @@ export class DashboardApiService {
     Template
   */
   getTemplateAll(): Observable<any> {
-      return this.http.get(prefix + "portalDesigns/").pipe( //onlin
+    return this.http.get(prefix + "designs/").pipe( //onlin
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -119,9 +117,8 @@ export class DashboardApiService {
   }
 
   createNewTemplate(t: newTemplate): Observable<any> {
-    console.log(t,"createNewTemplate");
     return this.http
-    .post(prefix + "portalDesigns", t)
+      .post(prefix + "designs", t)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -131,9 +128,8 @@ export class DashboardApiService {
 
   updateNewTemplate(t: Template): Observable<any> {
     let id = t.id;
-    console.log(id,t,"updateNewTemplate");
     return this.http
-    .put(prefix + "portalDesigns/"+id, t)
+      .put(prefix + "designs/" + id, t)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -142,7 +138,7 @@ export class DashboardApiService {
   }
 
   getTopicName(): Observable<any> {
-      return this.http.get(prefix + "topics").pipe( //onlin
+    return this.http.get(prefix + "topics").pipe( //onlin
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -150,7 +146,7 @@ export class DashboardApiService {
   }
 
   getTemplateTypeName(): Observable<any> {
-      return this.http.get(prefix + "designTypes").pipe( //onlin
+    return this.http.get(prefix + "designTypes").pipe( //onlin
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -158,7 +154,7 @@ export class DashboardApiService {
   }
 
   DeleteTemplate(id): Observable<any> {
-      return this.http.delete(prefix + "portalDesigns/" + id ).pipe( //online
+    return this.http.delete(prefix + "designs/" + id).pipe( //online
       retry(1),
       map(this.extractData2),
       catchError(this.handleError)
@@ -166,8 +162,7 @@ export class DashboardApiService {
   }
   deployTemplateKibana(id, body): Observable<any> {
     body.submitted = true;
-    console.log(id,body,'this.deployTemplateKibana()');
-    return this.http.post(prefix+"portalDesigns/deploy/" + id, body).pipe(   //online
+    return this.http.post(prefix + "designs/deploy/" + id, body).pipe(   //online
       retry(1),
       map(this.extractData2),
       catchError(this.handleError)
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
index a7657cf4..48cbc127 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
@@ -14,114 +14,117 @@
     limitations under the License.
 -->
 <div class="p-1">
-    <div class="modal-header pb-0 border-0">
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-md-12">
-            <label class="dl-h3">{{ templateInputTitle }}</label>
-            <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
-          </div>
+  <div class="modal-header pb-0 border-0">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ templateInputTitle }}</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
-        <div class="row">
-          <div class="col-md-12">
-            <hr>
-          </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
         </div>
       </div>
     </div>
-    <div class="modal-body border-0">
-      <div class="container-fluid">
+  </div>
+  <div class="modal-body border-0">
+    <div class="container-fluid">
 
-        <div class="form-group">
-          <div class="row">
-            <div class="col-md-2">
-              <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
-            </div>
-            <div class="col-md-6">
-              <input  #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" placeholder="Username" />
-            </div>
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
+          </div>
+          <div class="col-md-6">
+            <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text"
+              type="text" placeholder="Username" />
           </div>
         </div>
+      </div>
 
-        <div class="form-group">
-            <div class="row">
-              <div class="col-md-2">
-                <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
-              </div>
-              <div class="col-md-10">
-                  <textarea #templatebody [(ngModel)]="this.templateInput.body"  class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
-              </div>
-            </div>
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
           </div>
-
-        <div class="form-group">
-          <div class="row">
-            <div class="col-md-2">
-              <label class="dl-emphasis1" style="line-height: 2.25rem">{{ 'FIELUPLOAD' | translate }}</label>
-            </div>
-            <div class="col-md-2 p-1" style="position: relative;
-    margin-left: 0.5rem;">
-              <input type="file" id="f-file" (change)="this.jsReadFiles()" />
-              <label for="f-file" style="height: 100%;width: 100%;">
-                <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
-                  {{ 'FIELUPLOAD' | translate }}
-                </button>
-              </label>
-            </div>
-            <div class="col-md-2">
-              <span style="line-height: 2.25rem">{{this.fileName}}</span>
-            </div>
+          <div class="col-md-10">
+            <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text"
+              placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
           </div>
         </div>
+      </div>
 
-        <div class="form-group">
-          <div class="row">
-            <div class="col-md-2">
-              <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
-            </div>
-            <div class="col-md-8">
-              <select #templatetype class="custom-select dl-input-text" id="selDataFormat">
-                <option *ngFor="let item of templatetypedata" [selected]="item.display == this.templateInput.display">{{item.display}}</option>
-              </select>
-            </div>
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1" style="line-height: 2.25rem">{{ 'FIELUPLOAD' | translate }}</label>
+          </div>
+          <div class="col-md-2 p-1" style="position: relative;
+    margin-left: 0.5rem;">
+            <input type="file" id="f-file" (change)="this.jsReadFiles()" />
+            <label for="f-file" style="height: 100%;width: 100%;">
+              <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
+                {{ 'FIELUPLOAD' | translate }}
+              </button>
+            </label>
+          </div>
+          <div class="col-md-2">
+            <span style="line-height: 2.25rem">{{this.fileName}}</span>
           </div>
         </div>
+      </div>
 
-        <div class="form-group">
-            <div class="row">
-              <div class="col-md-2">
-                <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
-              </div>
-              <div class="col-md-8">
-                <select #topic class="custom-select dl-input-text" id="selDataFormat">
-                  <option *ngFor="let item of topicname" [selected]="item == this.templateInput.topic">{{item}}</option>
-                </select>
-              </div>
-            </div>
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
           </div>
-
+          <div class="col-md-8">
+            <select #templatetype class="custom-select dl-input-text" id="selDataFormat">
+              <option *ngFor="let item of templatetypedata" [selected]="item.name === defaultDesigntype">
+                {{item.name}}</option>
+            </select>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="modal-footer border-0 pt-0 pb-2">
-      <div class="container-fluid">
+
+      <div class="form-group">
         <div class="row">
-          <div class="col-md-6 p-0">
+          <div class="col-md-2">
+            <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
           </div>
-          <div class="col-md-3 p-1">
-            <span>
-              <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-                Save
-              </button>
-            </span>
-          </div>
-          <div class="col-md-3 p-1">
-            <span>
-              <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-                Cancel
-              </button>
-            </span>
+          <div class="col-md-8">
+            <select #topic class="custom-select dl-input-text" id="selDataFormat">
+              <option *ngFor="let item of topicname" [selected]="item === defaultTopicname">{{item}}</option>
+            </select>
           </div>
         </div>
       </div>
+
+    </div>
+  </div>
+  <div class="modal-footer border-0 pt-0 pb-2">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-6 p-0">
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
     </div>
   </div>
+</div>
\ No newline at end of file
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
index 5834d2b4..c77bd56e 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
@@ -24,10 +24,11 @@ import {
 } from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { DashboardApiService } from "src/app/core/services/dashboard-api.service";
-import { AdminService } from "src/app/core/services/admin.service";
 import { Template } from "src/app/core/models/template.model";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {AlertComponent} from "../../../../core/alert/alert.component";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
 
 @Component({
   selector: 'app-edit-template-modal',
@@ -37,6 +38,8 @@ import {AlertComponent} from "../../../../core/alert/alert.component";
 export class EditTemplateModalComponent implements OnInit {
   @Input() edittemplate: Template;
   templateInput: Template;
+  defaultDesigntype: String;
+  defaultTopicname: String;
   templatetypedata: Array<any> = [];
   topicname: Array<any> = [];
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
@@ -47,6 +50,7 @@ export class EditTemplateModalComponent implements OnInit {
   constructor(
     public activeModal: NgbActiveModal,
     public dashboardApiService: DashboardApiService,
+    private spinner: NgxSpinnerService,
     private modalService: NgbModal,
   ) { }
 
@@ -55,59 +59,76 @@ export class EditTemplateModalComponent implements OnInit {
   fileName = null;
 
   ngOnInit() {
-    this.getTopicName();
-    this.getTemplateTypeName();
     // cache for display
     this.templateInput = new Template();
     const feed = {
-      id:this.edittemplate.id,
+      id: this.edittemplate.id,
       name: this.edittemplate.name,
       submitted: this.edittemplate.submitted,
       body: this.edittemplate.body,
       note: this.edittemplate.note,
-      topic: this.edittemplate.topic,
-      designType:  this.edittemplate.designType,
-      display: this.edittemplate.display
+      topicName: this.edittemplate.topicName,
+      designType: this.edittemplate.designType,
+      designTypeName: this.edittemplate.designTypeName,
     };
     this.templateInput = feed;
-    this.templateInputTitle = ""+this.edittemplate.name;
-    console.log(this.templateInput,"this.templateInput")
+    this.templateInputTitle = "" + this.edittemplate.name;
+    this.getTopicName();
+    this.getTemplateTypeName();
   }
-  getTopicName(){
+  getTopicName() {
     this.dashboardApiService.getTopicName().subscribe(data => {
       this.topicname = data;
     });
   }
 
-  getTemplateTypeName(){
+  getTemplateTypeName() {
     this.dashboardApiService.getTemplateTypeName().subscribe(data => {
       this.templatetypedata = data;
+      this.getDefaultOptions();
+    });
+  }
+
+  getDefaultOptions() {
+    this.templatetypedata.map(item => {
+      if (item.id === this.templateInput.designType) {
+        return this.defaultDesigntype = item.name;
+      }
     });
+    this.defaultTopicname = this.templateInput.topicName;
   }
 
-  jsReadFiles(){
-    var thiss =this;
+  jsReadFiles() {
+    var thiss = this;
     var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
     this.fileName = file.name;
     var reader = new FileReader();
-    reader.onload = function() {
-      console.log(this.result);
+    reader.onload = function () {
       thiss.templateInput.body = String(this.result);
     }
     reader.readAsText(file);
   }
 
   passBack() {
-    if(this.templateInput.name == '' || this.templateInput.name == undefined){
+    this.spinner.show();
+    if (this.templateInput.name == '' || this.templateInput.name == undefined) {
       return false;
     }
-    console.log(this.templateInput);
     this.edittemplate = this.templateInput;
-    this.edittemplate.display = this.templatetype.nativeElement.value;
-    this.edittemplate.designType = this.templatetypedata.find((item) => {
-      return item.display == this.edittemplate.display
-    }).designType;
-    this.edittemplate.topic = this.topic.nativeElement.value;
+    // this.templatetypedata.map(item => {
+    //   if (item.name === this.templatetype.nativeElement.value) {
+    //     return this.edittemplate.designType = item.id;
+    //   }
+    // });
+    this.edittemplate.designType = this.templatetypedata.filter(item => {
+      return item.name === this.templatetype.nativeElement.value;
+    })[0].id || "";
+    
+    this.edittemplate.designTypeName = this.templatetype.nativeElement.value;
+    this.edittemplate.topicName = this.topic.nativeElement.value;
     this.passEntry.emit(this.edittemplate);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
index 4024c569..7ea68964 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
@@ -38,21 +38,23 @@
             <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
           </div>
           <div class="col-md-6">
-            <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" name="inputtemplateName" placeholder="Username" required="required"/>
+            <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text"
+              type="text" name="inputtemplateName" placeholder="Username" required="required" />
           </div>
         </div>
       </div>
 
       <div class="form-group">
-          <div class="row">
-            <div class="col-md-2">
-              <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
-            </div>
-            <div class="col-md-10">
-                <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
-            </div>
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
+          </div>
+          <div class="col-md-10">
+            <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text"
+              placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
           </div>
         </div>
+      </div>
 
       <div class="form-group">
         <div class="row">
@@ -69,7 +71,7 @@
             </label>
           </div>
           <div class="col-md-2">
-           <span style="line-height: 2.25rem">{{this.fileName}}</span>
+            <span style="line-height: 2.25rem">{{this.fileName}}</span>
           </div>
         </div>
       </div>
@@ -81,24 +83,25 @@
           </div>
           <div class="col-md-8">
             <select #templatetype class="custom-select dl-input-text">
-              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]" [attr.designType]="[item.designType]">{{item.display}}</option>
+              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]"
+                [attr.designType]="[item.designType]">{{item.name}}</option>
             </select>
           </div>
         </div>
       </div>
 
       <div class="form-group">
-          <div class="row">
-            <div class="col-md-2">
-              <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
-            </div>
-            <div class="col-md-8">
-              <select #topic class="custom-select dl-input-text">
-                <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option>
-              </select>
-            </div>
+        <div class="row">
+          <div class="col-md-2">
+            <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
+          </div>
+          <div class="col-md-8">
+            <select #topic class="custom-select dl-input-text">
+              <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option>
+            </select>
           </div>
         </div>
+      </div>
 
     </div>
   </div>
@@ -125,4 +128,4 @@
     </div>
   </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
index 3af75bbf..d842a111 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
@@ -24,10 +24,11 @@ import {
 } from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { DashboardApiService } from "src/app/core/services/dashboard-api.service";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import { Template,newTemplate} from "src/app/core/models/template.model";
-import {AlertComponent} from "../../../../core/alert/alert.component";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+
+import { Template, newTemplate } from "src/app/core/models/template.model";
 
 @Component({
   selector: 'app-new-template-modal',
@@ -41,14 +42,13 @@ export class NewTemplateModalComponent implements OnInit {
   templatetypedata: Array<any> = [];
   topicname: Array<any> = [];
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  // @ViewChild("inputtemplateName") inputtemplateName: ElementRef;
-  // @ViewChild("templatebody") templatebody: ElementRef;
   @ViewChild("templatetype") templatetype: ElementRef;
   @ViewChild("topic") topic: ElementRef;
 
   constructor(
     public activeModal: NgbActiveModal,
     public dashboardApiService: DashboardApiService,
+    private spinner: NgxSpinnerService,
     private modalService: NgbModal,
 
   ) { }
@@ -66,51 +66,59 @@ export class NewTemplateModalComponent implements OnInit {
       submitted: this.template.submitted,
       body: this.template.body,
       note: this.template.note,
-      topic: this.template.topic,
-      designType:  this.template.designType,
-      display: this.template.display
+      topicName: this.template.topicName,
+      designType: this.template.designType,
+      designTypeName: this.template.designTypeName,
     };
     this.templateInput = feed;
   }
-  getTopicName(){
+  getTopicName() {
     this.dashboardApiService.getTopicName().subscribe(data => {
       this.topicname = data;
-      console.log(this.topicname,"this.topicname")
     });
   }
 
-  getTemplateTypeName(){
+  getTemplateTypeName() {
     this.dashboardApiService.getTemplateTypeName().subscribe(data => {
       this.templatetypedata = data;
-      console.log(this.templatetypedata,"this.templatetypedata")
     });
   }
 
-  jsReadFiles(){
-    var thiss =this;
-    var file =(<HTMLInputElement>document.querySelector("#f-file")).files[0];
+  jsReadFiles() {
+    var thiss = this;
+    var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
     this.fileName = file.name;
     var reader = new FileReader();
-    reader.onload = function() {
-      console.log(this.result,"this.result");
+    reader.onload = function () {
+      // console.log(this.result, "this.result");
       thiss.templateInput.body = String(this.result);
     }
     reader.readAsText(file);
   }
   passBack() {
-    if(this.templateInput.name == '' || this.templateInput.name == undefined){
+    this.spinner.show();
+    if (this.templateInput.name == '' || this.templateInput.name == undefined) {
       return false;
     }
     this.template = this.templateInput;
-    console.log(this.templateInput);
-    this.template.display = this.templatetype.nativeElement.value;
-    this.template.designType = this.templatetypedata.find((item) => {
-        return item.display == this.template.display
-    }).designType;
-    this.template.topic = this.topic.nativeElement.value;
+
+    // this.templatetypedata.map(item => {
+    //   if (item.name === this.templatetype.nativeElement.value) {
+    //     return this.template.designType = item.id;
+    //   }
+    // })
+
+    this.template.designType = this.templatetypedata.filter(item => {
+      return item.name === this.templatetype.nativeElement.value;
+    })[0].id || "";
+
+    this.template.designTypeName = this.templatetype.nativeElement.value;
+    this.template.topicName = this.topic.nativeElement.value;
     this.template.submitted = false;
     this.template.note = "";
-    console.log(this.template);
     this.passEntry.emit(this.template);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
index 01543f74..4a93ec65 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
@@ -44,18 +44,19 @@
     <div class="col-md-12">
       <ngx-datatable #mytemlate class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
         [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
-        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10"  (activate)="onActivate($event)">
+        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)">
 
         <!--<ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"-->
-          <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">-->
-          <!--<div>-->
-            <!--<ng-template let-row="row">-->
-              <!--<span>{{ row.id }}</span>-->
-            <!--</ng-template>-->
-          <!--</div>-->
+        <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">-->
+        <!--<div>-->
+        <!--<ng-template let-row="row">-->
+        <!--<span>{{ row.id }}</span>-->
+        <!--</ng-template>-->
+        <!--</div>-->
         <!--</ngx-datatable-column>-->
 
-        <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
+        <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name"
+          headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <ng-template let-row="row" ngx-datatable-cell-template>
             <span>{{ row.name }}</span>
           </ng-template>
@@ -63,13 +64,13 @@
 
         <ngx-datatable-column [width]="180" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type">
           <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.display }}</span>
+            <span>{{ row.designTypeName }}</span>
           </ng-template>
         </ngx-datatable-column>
 
         <ngx-datatable-column [width]="220" name="{{ 'TOPICS_NAME' | translate }}" prop="topic">
           <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.topic }}</span>
+            <span>{{ row.topicName }}</span>
           </ng-template>
         </ngx-datatable-column>
 
@@ -77,7 +78,8 @@
           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <div>
             <ng-template let-row="row" ngx-datatable-cell-template>
-              <span  (click)="this.deployTemplate(row.id);"  class="dl-btn-dark" style="cursor: pointer">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
+              <span (click)="this.deployTemplate(row.id);" class="dl-btn-dark"
+                style="cursor: pointer">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
             </ng-template>
           </div>
         </ngx-datatable-column>
@@ -107,4 +109,4 @@
       </ngx-datatable>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
index 70c2bd7b..440f2210 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
@@ -13,19 +13,19 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
-import {DashboardApiService} from "src/app/core/services/dashboard-api.service";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {Template,newTemplate} from "src/app/core/models/template.model";
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { DashboardApiService } from "src/app/core/services/dashboard-api.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { Template, newTemplate } from "src/app/core/models/template.model";
 // Loading spinner
-import {NgxSpinnerService} from "ngx-spinner";
+import { NgxSpinnerService } from "ngx-spinner";
 
 // modal
-import {NewTemplateModalComponent} from "./new-template-modal/new-template-modal.component";
-import {EditTemplateModalComponent} from "./edit-template-modal/edit-template-modal.component";
-import {AlertComponent} from "src/app/core/alert/alert.component";
+import { NewTemplateModalComponent } from "./new-template-modal/new-template-modal.component";
+import { EditTemplateModalComponent } from "./edit-template-modal/edit-template-modal.component";
+import { AlertComponent } from "src/app/core/alert/alert.component";
 // notify
-import {ToastrNotificationService} from "src/app/core/services/toastr-notification.service";
+import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service";
 
 @Component({
   selector: 'app-template-list',
@@ -101,9 +101,9 @@ export class TemplateListComponent {
         submitted: data["submitted"],
         body: data["body"],
         note: data["note"],
-        topic: data["topic"],
+        topicName: data["topicName"],
         designType: data["designType"],
-        display: data["display"],
+        designTypeName: data["designTypeName"],
       };
       t.push(feed);
     }
@@ -111,7 +111,6 @@ export class TemplateListComponent {
   }
 
   newTemplateModal() {
-    let tips = "";
     const modalRef = this.modalService.open(NewTemplateModalComponent, {
       windowClass: "dl-md-modal templatess",
       centered: true
@@ -122,17 +121,14 @@ export class TemplateListComponent {
     modalRef.componentInstance.templatelist_length = this.template_list.length;
     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
       this.Template_Newbody = receivedEntry;
-      let name = this.Template_Newbody.name;
       this.dashboardApiService
         .createNewTemplate(this.Template_Newbody)
         .subscribe(
           res => {
             if (res.statusCode == 200) {
               this.Template_New = res.returnBody;
-              console.log(this.Template_New,"this.Template_New add Success");
               this.template_list.push(this.Template_New);
               this.template_list = [...this.template_list];
-              console.log(this.template_list, "this.template_list,inserted");
               this.notificationService.success("SUCCESSFULLY_CREARED");
             } else {
               this.notificationService.error("FAILED_CREARED");
@@ -149,8 +145,7 @@ export class TemplateListComponent {
 
   onActivate(event) {
     const emitType = event.type;
-    if(emitType == "dblclick"){
-      console.log('Activate Event', event);
+    if (emitType == "dblclick") {
       let id = event.row.id;
       this.editTemplateModal(id);
     }
@@ -159,24 +154,20 @@ export class TemplateListComponent {
 
   editTemplateModal(id) {
     const index = this.template_list.findIndex(t => t.id === id);
-    // const name = this.template_list[index].name;
     const modalRef = this.modalService.open(EditTemplateModalComponent, {
       windowClass: "dl-md-modal templatess",
       centered: true
     });
     modalRef.componentInstance.edittemplate = this.template_list[index];
     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      const name = receivedEntry.name;
       this.Template_New = receivedEntry;
       this.dashboardApiService
         .updateNewTemplate(this.Template_New)
         .subscribe(
           res => {
-
             if (res.statusCode == 200) {
               this.template_list[index] = this.Template_New;
               this.template_list = [...this.template_list];
-              console.log(this.template_list, "this.template_list,update");
               this.notificationService.success("SUCCESSFULLY_UPDATED");
             } else {
               this.notificationService.error("FAILED_UPDATED");
@@ -197,22 +188,17 @@ export class TemplateListComponent {
       size: "sm",
       centered: true
     });
-    const name = this.template_list[index].name;
     // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow;
     modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
     modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
       // Delete database
       this.dashboardApiService.DeleteTemplate(id).subscribe(
         res => {
-          console.log(res,"template detele res");
-          console.log(JSON.stringify(res).length,"JSON.stringify(res).length");
-          if (JSON.stringify(res).length<=2) {
-            console.log("Success deleted template");
+          if (JSON.stringify(res).length <= 2) {
             this.template_list.splice(index, 1);
             this.template_list = [...this.template_list];
             this.notificationService.success("SUCCESSFULLY_DELETED");
           } else {
-            console.log("Fail deleted template");
             this.notificationService.error("FAILED_DELETED");
           }
 
@@ -229,15 +215,12 @@ export class TemplateListComponent {
 
   deployTemplate(id: number) {
     const index = this.template_list.findIndex(t => t.id === id);
-    const name = this.template_list[index].name;
     const body = this.template_list[index];
     this.spinner.show();
     this.dashboardApiService.deployTemplateKibana(id, body).subscribe(
       res => {
         this.spinner.hide();
-        console.log(res,"template deploy res");
-        console.log(JSON.stringify(res).length,"JSON.stringify(res).length");
-        if (JSON.stringify(res).length<=2) {
+        if (JSON.stringify(res).length <= 2) {
           this.notificationService.success("Deploy_SUCCESSFULLY");
         } else {
           this.notificationService.error("Deploy_FAILED");