Template interface front-end development

Change-Id: I2d97fefd3c9472253fc46cf2eaeb80c9fa6aa592
Issue-ID: DCAEGEN2-1600
Signed-off-by: e <xuranyjy@chinamobile.com>

9 files changed, 1083 insertions, 12 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 d20f71ac..a0a35f9d 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
@@ -64,7 +64,7 @@ export class DashboardApiService {
   Dashboard
 */
   getDashboardList(): Observable<any> {
-    let url = prefix + "portals/true"; //onilne
+    let url = prefix + "portals"; //onilne
     return this.http.get(url).pipe(
       retry(1),
       map(this.extractData),
@@ -109,7 +109,7 @@ export class DashboardApiService {
   }
 
   getDashboardName(): Observable<any> {
-    let url = prefix + "portals/getNames/false"; //onilne
+    let url = prefix + "portals/getNames?enabled=false"; //onilne
     return this.http.get(url).pipe(
       retry(1),
       map(this.extractData),
@@ -177,7 +177,7 @@ export class DashboardApiService {
   deployTemplateKibana(id, body): Observable<any> {
     body.submitted = true;
     console.log(id,body,'this.deployTemplateKibana()');
-    return this.http.post(prefix+"portalDesigns/" + id, body).pipe(   //online
+    return this.http.post(prefix+"portalDesigns/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 7c75b6b7..eee76dc1 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
@@ -13,3 +13,94 @@
     See the License for the specific language governing permissions and
     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>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <hr>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-body border-0">
+      <div class="container-fluid">
+
+        <div class="form-group">
+          <div class="row">
+            <div class="col-md-4">
+              <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
+            </div>
+            <div class="col-md-4">
+              <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-4">
+                <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
+              </div>
+              <div class="col-md-8">
+                  <textarea #templatebody [(ngModel)]="this.templateInput.body"  class="form-control dl-input-text" placeholder="Put the template design here..." rows="3"></textarea>
+              </div>
+            </div>
+          </div>
+
+        <div class="form-group">
+          <div class="row">
+            <div class="col-md-4">
+              <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
+            </div>
+            <div class="col-md-6">
+              <select #templatetype class="custom-select dl-input-text" id="selDataFormat">
+                <option *ngFor="let item of templatetypedata" [selected]="item == this.templateInput.type">{{item}}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+            <div class="row">
+              <div class="col-md-4">
+                <label class="dl-emphasis1">{{ 'TOPICS' | translate }}</label>
+              </div>
+              <div class="col-md-6">
+                <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>
+
+      </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>
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 3c37c58b..eab30e25 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
@@ -22,7 +22,12 @@ import {
   ViewChild,
   ElementRef
 } 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";
 
 @Component({
   selector: 'app-edit-template-modal',
@@ -30,14 +35,69 @@ import {
   styleUrls: ['./edit-template-modal.component.css']
 })
 export class EditTemplateModalComponent implements OnInit {
+  @Input() edittemplate: Template;
+  @Input() selectedLangs;
+  templateInput: Template;
+  templatetypedata: Array<any> = [];
+  topicname: Array<any> = [];
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
 
+  @ViewChild("templatetype") templatetype: ElementRef;
+  @ViewChild("topic") topic: ElementRef;
 
-  constructor() {
-  }
+  constructor(
+    public activeModal: NgbActiveModal,
+    public dashboardApiService: DashboardApiService,
+    private modalService: NgbModal,
+  ) { }
 
+  inputtemplateName = null;
+  templateInputTitle = "";
 
   ngOnInit() {
+    this.getTopicName();
+    this.getTemplateTypeName();
+    // cache for display
+    this.templateInput = new Template();
+    const feed = {
+      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
+    };
+    this.templateInput = feed;
+    this.templateInputTitle = ""+this.edittemplate.name;
+  }
+  getTopicName(){
+    this.dashboardApiService.getTopicName().subscribe(data => {
+      this.topicname = data;
+    });
+  }
 
+  getTemplateTypeName(){
+    this.dashboardApiService.getTemplateTypeName().subscribe(data => {
+      this.templatetypedata = data;
+    });
+  }
 
+  passBack() {
+    if(this.templateInput.name == '' || this.templateInput.name == undefined){
+      let tips = "";
+      if (this.selectedLangs == "en-us") {
+        tips = "Name is required input."
+      } else if (this.selectedLangs == "zh-hans") {
+        tips = "名字是必填输入项。"
+      } else if (this.selectedLangs == "zh-hant") {
+        tips = "名字是必填輸入項。"
+      }
+      return false;
+    }
+    this.edittemplate = this.templateInput;
+    this.edittemplate.designType = this.templatetype.nativeElement.value;
+    this.edittemplate.topic = this.topic.nativeElement.value;
+    this.passEntry.emit(this.edittemplate);
   }
 }
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 7c75b6b7..6b36bc51 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
@@ -13,3 +13,95 @@
     See the License for the specific language governing permissions and
     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">{{ "NEW_TEMPLATE" | translate }}</label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-body border-0">
+    <div class="container-fluid">
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
+          </div>
+          <div class="col-md-4">
+            <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-4">
+              <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
+            </div>
+            <div class="col-md-8">
+                <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" placeholder="Put the template design here..." rows="3"></textarea>
+            </div>
+          </div>
+        </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
+          </div>
+          <div class="col-md-6">
+            <select #templatetype class="custom-select dl-input-text">
+              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]">{{item}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+          <div class="row">
+            <div class="col-md-4">
+              <label class="dl-emphasis1">{{ 'TOPICS' | translate }}</label>
+            </div>
+            <div class="col-md-6">
+              <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>
+  <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>
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 398560bd..9519ff45 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
@@ -22,7 +22,12 @@ import {
   ViewChild,
   ElementRef
 } 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";
 
 @Component({
   selector: 'app-new-template-modal',
@@ -30,15 +35,76 @@ import {
   styleUrls: ['./new-template-modal.component.css']
 })
 export class NewTemplateModalComponent implements OnInit {
-
+  @Input() template: newTemplate;
+  @Input() templatelist_length;
+  @Input() selectedLangs;
+  templateInput: newTemplate
+  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 modalService: NgbModal,
 
   ) { }
-
+  inputtemplateName = null;
+  templatebody = null;
 
   ngOnInit() {
+    this.getTopicName();
+    this.getTemplateTypeName();
+    // cache for display
+    this.templateInput = new Template();
+    const feed = {
+      name: this.template.name,
+      submitted: this.template.submitted,
+      body: this.template.body,
+      note: this.template.note,
+      topic: this.template.topic,
+      designType: this.template.designType
+    };
+    this.templateInput = feed;
+  }
+  getTopicName(){
+    this.dashboardApiService.getTopicName().subscribe(data => {
+      this.topicname = data;
+      console.log(this.topicname,"this.topicname")
+    });
+  }
+
+  getTemplateTypeName(){
+    this.dashboardApiService.getTemplateTypeName().subscribe(data => {
+      this.templatetypedata = data;
+      console.log(this.templatetypedata,"this.templatetypedata")
+    });
+  }
 
+  passBack() {
+    if(this.templateInput.name == '' || this.templateInput.name == undefined){
+      let tips = "";
+      if (this.selectedLangs == "en-us") {
+        tips = "Name input is required."
+      } else if (this.selectedLangs == "zh-hans") {
+        tips = "名字输入项是必填项。"
+      } else if (this.selectedLangs == "zh-hant") {
+        tips = "名字輸入項是必填項。"
+      }
+      return false;
+    }
+    this.template = this.templateInput;
+    console.log(this.templateInput);
+    this.template.designType = this.templatetype.nativeElement.value;
+    this.template.topic = this.topic.nativeElement.value;
+    // this.template.id = this.templatelist_length+1;
+    this.template.submitted = true;
+    this.template.note = "";
+    console.log(this.template);
+    this.passEntry.emit(this.template);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css
index 424c839b..47ab70e5 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css
@@ -13,3 +13,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+.topic-list-panel {
+    background: #FFFFFF;
+    box-shadow: 3px 3px 11px 0 #D2D3D5;
+    border-radius: 20px;
+  }
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 7c75b6b7..e58db0be 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
@@ -13,3 +13,439 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
+<div class="topic-list-panel">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="d-flex justify-content-end p-2">
+        <!-- Search bar -->
+        <div class="p-1">
+          <div class="input-group">
+            <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
+              (keyup)="this.updateFilter($event.target.value)" />
+            <div class="input-group-append">
+              <button type="button" class="btn dl-btn-dark">
+                <i class="fa fa-search"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- button -->
+        <div class="p-1">
+          <button class="btn dl-btn-dark" (click)="newTemplateModal();">
+            {{ "NEW_TEMPLATE" | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- datatable -->
+  <div class="row">
+    <div class="col-md-12">
+      <ngx-datatable #mydatatable class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
+        [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
+        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10">
+
+        <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>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [width]="200" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>{{ row.name }}</span>
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [width]="90" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+
+            <!-- Couchbase enable -->
+            <span *ngIf="row.designType.includes('Couchbase')" class="pr-1" placement="bottom" ngbTooltip="Couchbase"
+              container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-408 285.3 25 25"
+                style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
+                <path [ngStyle]="{
+                      fill: row.designType.includes('Couchbase')
+                        ? '#5DBEBB'
+                        : '#D2D3D5'
+                    }"
+                  d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
+                            M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
+                          c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
+                          c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
+              </svg>
+            </span>
+            <!-- Couchbase disable -->
+            <span *ngIf="!row.designType.includes('Couchbase')" class="pr-1" placement="bottom" ngbTooltip="Couchbase"
+              container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-408 285.3 25 25"
+                style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
+                <path [ngStyle]="{
+                      fill: row.designType.includes('Couchbase')
+                        ? '#5DBEBB'
+                        : '#D2D3D5'
+                    }"
+                  d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
+                            M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
+                          c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
+                          c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
+              </svg>
+            </span>
+
+            <!-- Druid enable -->
+            <span *ngIf="row.designType.includes('Druid')" class="pr-1" placement="bottom" ngbTooltip="Druid" container="body"
+              tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-403 285.3 34 25"
+                style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
+                <g>
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Druid')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
+                     c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
+                     c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
+                     c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Druid')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
+                     c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
+                     c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
+                     h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
+                      M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
+                     c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
+                     c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
+                     c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
+                </g>
+              </svg>
+            </span>
+            <!-- Druid disable -->
+            <span *ngIf="!row.designType.includes('Druid')" class="pr-1" placement="bottom" ngbTooltip="Druid"
+              container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-403 285.3 34 25"
+                style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
+                <g>
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Druid')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
+                     c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
+                     c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
+                     c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Druid')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
+                     c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
+                     c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
+                     h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
+                      M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
+                     c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
+                     c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
+                     c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
+                </g>
+              </svg>
+            </span>
+
+            <!-- Elasticsearch enable -->
+            <span *ngIf="row.designType.includes('Elasticsearch')" class="pr-1" placement="bottom" ngbTooltip="Elasticsearch"
+              container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="2066.4 284.8 25.1 25"
+                style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
+                <g>
+                  <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
+                   c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
+                   c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
+                   c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
+                   L2076.3,295.5L2076.3,295.5z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
+                   L2070.5,301.4L2070.5,301.4z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
+                   C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
+                   L2082.9,306.3z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
+                </g>
+              </svg>
+            </span>
+            <!-- Elasticsearch disable -->
+            <span *ngIf="!row.designType.includes('Elasticsearch')" class="pr-1" placement="bottom" ngbTooltip="Elasticsearch"
+              container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="2066.4 284.8 25.1 25"
+                style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
+                <g>
+                  <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
+                   c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
+                   c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
+                   c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
+                   L2076.3,295.5L2076.3,295.5z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
+                   L2070.5,301.4L2070.5,301.4z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
+                   C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
+                   L2082.9,306.3z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('Elasticsearch')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
+                </g>
+              </svg>
+            </span>
+
+            <!-- MongoDB enable -->
+            <span *ngIf="row.designType.includes('MongoDB')" class="pr-1" placement="bottom" ngbTooltip="MongoDB"
+              container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-397.2 285.8 11.2 25"
+                style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
+                <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#19A2A2'
+                          : '#C4C6C8'
+                      }"
+                    d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
+                   c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
+                   c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
+                   c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
+                   c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#CEEBEA'
+                          : '#C2BFBF'
+                      }" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
+                   c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
+                   v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
+                   C-294,259.3-294,259.1-294,258.9z" />
+                </g>
+              </svg>
+            </span>
+            <!-- MongoDB disable -->
+            <span *ngIf="!row.designType.includes('MongoDB')" class="pr-1" placement="bottom" ngbTooltip="MongoDB"
+              container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="-397.2 285.8 11.2 25"
+                style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
+                <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#19A2A2'
+                          : '#C4C6C8'
+                      }"
+                    d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
+                   c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
+                   c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#5DBEBB'
+                          : '#D2D3D5'
+                      }"
+                    d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
+                   c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
+                   c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
+                  <path [ngStyle]="{
+                        fill: row.designType.includes('MongoDB')
+                          ? '#CEEBEA'
+                          : '#C2BFBF'
+                      }" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
+                   c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
+                   v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
+                   C-294,259.3-294,259.1-294,258.9z" />
+                </g>
+              </svg>
+            </span>
+
+            <!-- Kibana enable-->
+            <span *ngIf="row.designType.includes('Kibana')" class="pr-1" placement="bottom" ngbTooltip="Kibana"
+              container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="1722.5 -151.5 708.9 904.3"
+                style="enable-background:new 1722.5 -151.5 708.9 904.3;" xml:space="preserve">
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#5DBEBB'
+                    : '#D2D3D5'
+                }"
+                  d="M1760.3,189.5c114.1,0,221.9,29.7,315.6,79.7l334.4-401.6h-662.5v796.9v-475H1760.3L1760.3,189.5z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#5DBEBB'
+                    : '#D2D3D5'
+                }"
+                d="M2075.9,269.2l-328.1,395.3V727h660.9C2371.2,530.1,2246.2,362.9,2075.9,269.2z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#37A595'
+                    : '#C2BFBF'
+                }"
+                 d="M2075.9,269.2l-328.1,395.3V727h117.2l318.7-384.4c0,0-21.9-17.2-51.6-39.1
+           C2110.2,287.9,2075.9,269.2,2075.9,269.2z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#19A2A2'
+                    : '#C4C6C8'
+                }"
+                  d="M1760.3,189.5h-12.5v475l328.1-395.3C1982.1,219.2,1874.3,189.5,1760.3,189.5L1760.3,189.5z" />
+              </svg>
+            </span>
+            <!-- Kibana disable -->
+            <span *ngIf="!row.designType.includes('Kibana')" class="pr-1" placement="bottom" ngbTooltip="Kibana"
+              container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
+              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                y="0px" width="20" height="20" viewBox="1722.5 -151.5 708.9 904.3"
+                style="enable-background:new 1722.5 -151.5 708.9 904.3;" xml:space="preserve">
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#5DBEBB'
+                    : '#D2D3D5'
+                }"
+                  d="M1760.3,189.5c114.1,0,221.9,29.7,315.6,79.7l334.4-401.6h-662.5v796.9v-475H1760.3L1760.3,189.5z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#5DBEBB'
+                    : '#D2D3D5'
+                }"
+                 d="M2075.9,269.2l-328.1,395.3V727h660.9C2371.2,530.1,2246.2,362.9,2075.9,269.2z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#37A595'
+                    : '#C2BFBF'
+                }"
+                 d="M2075.9,269.2l-328.1,395.3V727h117.2l318.7-384.4c0,0-21.9-17.2-51.6-39.1
+	C2110.2,287.9,2075.9,269.2,2075.9,269.2z" />
+                <path [ngStyle]="{
+                  fill: row.designType.includes('Kibana')
+                    ? '#19A2A2'
+                    : '#C4C6C8'
+                }"
+                  d="M1760.3,189.5h-12.5v475l328.1-395.3C1982.1,219.2,1874.3,189.5,1760.3,189.5L1760.3,189.5z" />
+              </svg>
+            </span>
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [width]="240" name="{{ 'TOPICS_NAME' | translate }}" prop="topic">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>{{ row.topic }}</span>
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column [width]="90" name="{{ 'DEPLOY_TO_DASHBOARD' | translate }}"
+          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">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
+            </ng-template>
+          </div>
+        </ngx-datatable-column>
+        <ngx-datatable-column [width]="15" name="" sortable="false" cellClass="d-flex justify-content-center">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            <span>
+              <button class="btn action-icon-setting" (click)="this.deleteTemplateModel(row.id);">
+                <i class="fas fa-trash-alt fa-xs"></i>
+              </button>
+            </span>
+            <span>
+              <button class="btn action-icon-setting" (click)="this.editTemplateModal(row.id);">
+                <i class="fas fa-cog fa-xs"></i>
+              </button>
+            </span>
+          </ng-template>
+        </ngx-datatable-column>
+
+        <!-- <ngx-datatable-footer>
+            <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
+              let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
+              <div class="page-count">
+                total: {{ rowCount.toLocaleString() }}
+              </div>
+              <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
+                [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage"
+                [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)"
+                (change)="topicTable.onFooterPage($event)">
+              </datatable-pager>
+            </ng-template>
+          </ngx-datatable-footer> -->
+      </ngx-datatable>
+    </div>
+  </div>
+</div>
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 acfe4d37..9d774c49 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
@@ -14,6 +14,18 @@
     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";
+// Loading 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";
+// notify
+import {ToastrNotificationService} from "src/app/core/services/toastr-notification.service";
 
 @Component({
   selector: 'app-template-list',
@@ -21,7 +33,316 @@ import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
   styleUrls: ['./template-list.component.css']
 })
 export class TemplateListComponent {
+  template_list: any = [];
+  templates: Template[] = [];
+  temps: Template[] = [];
+  Template_New: Template;
+  Template_Newbody: newTemplate;
+  dashboardDeteleModelShow = true;
+  loadingIndicator: boolean = true;
+  selectedLangs = sessionStorage.getItem("selectedLang");
+  mesgNoData = {
+    emptyMessage: `
+      <div class="d-flex justify-content-center">
+        <div class="p-2">
+          <label class="dl-nodata">No Data</label>
+        </div>
+      </div>
+    `
+  };
+  @ViewChild("searchText") searchText: ElementRef;
+
+  constructor(
+    private modalService: NgbModal,
+    private dashboardApiService: DashboardApiService,
+    private spinner: NgxSpinnerService,
+    private notificationService: ToastrNotificationService,
+  ) {
+    setTimeout(() => {
+      this.loadingIndicator = false;
+    }, 5000);
+
+    this.initData().then(data => {
+      this.initTemplateList(this.template_list).then(
+        data => {
+          // for cache of datatable
+          this.temps = [...data];
+          this.templates = data;
+          setTimeout(() => {
+            this.spinner.hide();
+          }, 500);
+        }
+      );
+    });
+  }
+
   ngOnInit() {
+    this.spinner.show();
+  }
+
+  async initData() {
+    this.template_list = [];
+    this.template_list = await this.getTemplateList();
+    this.Template_New = new Template();
+    this.Template_Newbody = new newTemplate();
+    return true;
   }
 
+
+  getTemplateList() {
+    return this.dashboardApiService.getTemplateAll().toPromise();
+  }
+
+  async initTemplateList(template_list: []) {
+    var t: Template[] = [];
+    for (var i = 0; i < template_list.length; i++) {
+      let data = template_list[i];
+      let feed = {
+        id: data["id"],
+        name: data["name"],
+        submitted: data["submitted"],
+        body: data["body"],
+        note: data["note"],
+        topic: data["topic"],
+        designType: data["designType"],
+      };
+      t.push(feed);
+    }
+    return t;
+  }
+
+  newTemplateModal() {
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    let tips = "";
+    const modalRef = this.modalService.open(NewTemplateModalComponent, {
+      windowClass: "dl-md-modal",
+      centered: true
+    });
+    this.Template_New = new Template();
+    this.Template_Newbody = new newTemplate();
+    modalRef.componentInstance.template = this.Template_Newbody;
+    modalRef.componentInstance.selectedLangs = this.selectedLangs;
+    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");
+              if (this.selectedLangs == "en-us") {
+                tips = "Success inserted."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "新增成功。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "新增成功。"
+              }
+              this.notificationService.success('"' + name + '"' + tips);
+            } else {
+              if (this.selectedLangs == "en-us") {
+                tips = "Fail inserted."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "新增失败。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "新增失敗。"
+              }
+              this.notificationService.error('"' + name + '"' + tips);
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    });
+  }
+
+  editTemplateModal(id: number) {
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    let tips = "";
+    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",
+      centered: true
+    });
+    modalRef.componentInstance.selectedLangs = this.selectedLangs;
+    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");
+              if (this.selectedLangs == "en-us") {
+                tips = "Success updated."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "更新成功。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "更新成功。"
+              }
+              this.notificationService.success('"' + name + '"' + tips);
+
+            } else {
+              if (this.selectedLangs == "en-us") {
+                tips = "Fail updated."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "更新失败。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "更新失敗。"
+              }
+              this.notificationService.error('"' + name + '"' + tips);
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    })
+  }
+
+  deleteTemplateModel(id: number) {
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    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 index = this.template_list.findIndex(t => t.id === id);
+    const modalRef = this.modalService.open(AlertComponent, {
+      size: "sm",
+      centered: true
+    });
+    const name = this.template_list[index].name;
+    // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow;
+    modalRef.componentInstance.message =
+      tips + '"' + name + '"' + ' ?';
+    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");
+            this.template_list.splice(index, 1);
+            this.template_list = [...this.template_list];
+            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('"' + name + '"' + tips);
+          } else {
+            console.log("Fail deleted template");
+            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('"' + name + '"' + tips);
+          }
+
+          modalRef.close();
+        },
+        err => {
+          this.notificationService.error(err);
+          modalRef.close();
+        }
+      );
+    });
+
+  }
+
+  deployTemplate(id: number) {
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    let tips = "";
+    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.deployTemplate(id).subscribe(
+    //   res => {
+    //     console.log(res,"reshost");
+    //     const host = res.source.host,
+    //           port = res.source.port;
+    //     if (res.status == "success") {
+    //       console.log(res)
+
+    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 (this.selectedLangs == "en-us") {
+            tips = "Success deploy."
+          } else if (this.selectedLangs == "zh-hans") {
+            tips = "部署成功。"
+          } else if (this.selectedLangs == "zh-hant") {
+            tips = "部署成功。"
+          }
+          this.notificationService.success('"' + name + '"' + tips);
+        } else {
+          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('"' + name + '"' + tips);
+        }
+      },
+      err => {
+        this.spinner.hide();
+        this.notificationService.error(err);
+      }
+    );
+    //     } else {
+    //       this.spinner.hide();
+    //       this.notificationService.error( name + " Fail deploy.");
+    //     }
+    //   },
+    //   err => {
+    //     this.spinner.hide();
+    //     this.notificationService.error(err);
+    //   }
+    // );
+
+  }
+
+  updateFilter(searchValue) {
+    const val = searchValue.toLowerCase();
+    // filter our data
+    const temps = this.temps.filter(function (d) {
+      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+    // update the rows
+    this.template_list = temps;
+  }
+
+
 }
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 c8c72b03..675e9f61 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,13 +62,13 @@ 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" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+            <a class="nav-link" style="padding-left: 23px;" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
                routerLink="/dashboard-setting/dashboard-list">
               {{"SIDEBAR.DASHBOARDLIST" | translate}}
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+            <a class="nav-link" style="padding-left: 23px;" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
                routerLink="dashboard-setting/template">
               {{"SIDEBAR.TEMPLATE" | translate}}
             </a>