Code Review / dcaegen2 / services.git / blob
? search:


aa1297a05fc646de56f61960e43fff1497833705
[dcaegen2/services.git] /
1 <!--
2     Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
3
4     Licensed under the Apache License, Version 2.0 (the "License");
5     you may not use this file except in compliance with the License.
6     You may obtain a copy of the License at
7
8             http://www.apache.org/licenses/LICENSE-2.0
9
10     Unless required by applicable law or agreed to in writing, software
11     distributed under the License is distributed on an "AS IS" BASIS,
12     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13     See the License for the specific language governing permissions and
14     limitations under the License.
15 -->
16 <div class="topic-list-panel">
17   <div class="row">
18     <div class="col-md-12">
19       <div class="d-flex justify-content-end p-2">
20         <!-- Search bar -->
21         <div class="p-1">
22           <div class="input-group">
23             <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
24               (keyup)="this.updateFilter($event.target.value)" />
25             <div class="input-group-append">
26               <button type="button" class="btn dl-btn-dark">
27                 <i class="fa fa-search"></i>
28               </button>
29             </div>
30           </div>
31         </div>
32
33         <!-- button -->
34         <div class="p-1">
35           <button class="btn dl-btn-dark" (click)="newTemplateModal();">
36             {{ "NEW_TEMPLATE" | translate }}
37           </button>
38         </div>
39       </div>
40     </div>
41   </div>
42   <!-- datatable -->
43   <div class="row">
44     <div class="col-md-12">
45       <ngx-datatable #mytemlate class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
46         [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
47         [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10"  (activate)="onActivate($event)">
48
49         <!--<ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"-->
50           <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">-->
51           <!--<div>-->
52             <!--<ng-template let-row="row">-->
53               <!--<span>{{ row.id }}</span>-->
54             <!--</ng-template>-->
55           <!--</div>-->
56         <!--</ngx-datatable-column>-->
57
58         <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
59           <ng-template let-row="row" ngx-datatable-cell-template>
60             <span>{{ row.name }}</span>
61           </ng-template>
62         </ngx-datatable-column>
63
64         <ngx-datatable-column [width]="90" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type">
65           <ng-template let-row="row" ngx-datatable-cell-template>
66
67             <!-- Couchbase enable -->
68             <span *ngIf="row.designType.includes('Couchbase')" class="pr-1" placement="bottom" ngbTooltip="Couchbase"
69               container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
70               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
71                 y="0px" width="20" height="20" viewBox="-408 285.3 25 25"
72                 style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
73                 <path [ngStyle]="{
74                       fill: row.designType.includes('Couchbase')
75                         ? '#5DBEBB'
76                         : '#D2D3D5'
77                     }"
78                   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
79                             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
80                           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
81                           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" />
82               </svg>
83             </span>
84             <!-- Couchbase disable -->
85             <span *ngIf="!row.designType.includes('Couchbase')" class="pr-1" placement="bottom" ngbTooltip="Couchbase"
86               container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
87               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
88                 y="0px" width="20" height="20" viewBox="-408 285.3 25 25"
89                 style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
90                 <path [ngStyle]="{
91                       fill: row.designType.includes('Couchbase')
92                         ? '#5DBEBB'
93                         : '#D2D3D5'
94                     }"
95                   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
96                             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
97                           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
98                           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" />
99               </svg>
100             </span>
101
102             <!-- Druid enable -->
103             <span *ngIf="row.designType.includes('Druid')" class="pr-1" placement="bottom" ngbTooltip="Druid" container="body"
104               tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
105               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
106                 y="0px" width="20" height="20" viewBox="-403 285.3 34 25"
107                 style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
108                 <g>
109                   <path [ngStyle]="{
110                         fill: row.designType.includes('Druid')
111                           ? '#5DBEBB'
112                           : '#D2D3D5'
113                       }"
114                     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
115                      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
116                      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
117                      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" />
118                   <path [ngStyle]="{
119                         fill: row.designType.includes('Druid')
120                           ? '#5DBEBB'
121                           : '#D2D3D5'
122                       }" 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
123                      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
124                      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
125                      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
126                       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
127                      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
128                      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
129                      c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
130                 </g>
131               </svg>
132             </span>
133             <!-- Druid disable -->
134             <span *ngIf="!row.designType.includes('Druid')" class="pr-1" placement="bottom" ngbTooltip="Druid"
135               container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
136               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
137                 y="0px" width="20" height="20" viewBox="-403 285.3 34 25"
138                 style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
139                 <g>
140                   <path [ngStyle]="{
141                         fill: row.designType.includes('Druid')
142                           ? '#5DBEBB'
143                           : '#D2D3D5'
144                       }"
145                     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
146                      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
147                      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
148                      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" />
149                   <path [ngStyle]="{
150                         fill: row.designType.includes('Druid')
151                           ? '#5DBEBB'
152                           : '#D2D3D5'
153                       }" 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
154                      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
155                      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
156                      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
157                       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
158                      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
159                      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
160                      c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
161                 </g>
162               </svg>
163             </span>
164
165             <!-- Elasticsearch enable -->
166             <span *ngIf="row.designType.includes('Elasticsearch')" class="pr-1" placement="bottom" ngbTooltip="Elasticsearch"
167               container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
168               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
169                 y="0px" width="20" height="20" viewBox="2066.4 284.8 25.1 25"
170                 style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
171                 <g>
172                   <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
173                    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
174                    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
175                    c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
176                   <path [ngStyle]="{
177                         fill: row.designType.includes('Elasticsearch')
178                           ? '#5DBEBB'
179                           : '#D2D3D5'
180                       }" 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
181                    L2076.3,295.5L2076.3,295.5z" />
182                   <path [ngStyle]="{
183                         fill: row.designType.includes('Elasticsearch')
184                           ? '#5DBEBB'
185                           : '#D2D3D5'
186                       }" 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
187                    L2070.5,301.4L2070.5,301.4z" />
188                   <path [ngStyle]="{
189                         fill: row.designType.includes('Elasticsearch')
190                           ? '#5DBEBB'
191                           : '#D2D3D5'
192                       }" 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
193                    C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
194                   <path [ngStyle]="{
195                         fill: row.designType.includes('Elasticsearch')
196                           ? '#5DBEBB'
197                           : '#D2D3D5'
198                       }"
199                     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" />
200                   <path [ngStyle]="{
201                         fill: row.designType.includes('Elasticsearch')
202                           ? '#5DBEBB'
203                           : '#D2D3D5'
204                       }" 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
205                    L2082.9,306.3z" />
206                   <path [ngStyle]="{
207                         fill: row.designType.includes('Elasticsearch')
208                           ? '#5DBEBB'
209                           : '#D2D3D5'
210                       }"
211                     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" />
212                 </g>
213               </svg>
214             </span>
215             <!-- Elasticsearch disable -->
216             <span *ngIf="!row.designType.includes('Elasticsearch')" class="pr-1" placement="bottom" ngbTooltip="Elasticsearch"
217               container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
218               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
219                 y="0px" width="20" height="20" viewBox="2066.4 284.8 25.1 25"
220                 style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
221                 <g>
222                   <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
223                    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
224                    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
225                    c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
226                   <path [ngStyle]="{
227                         fill: row.designType.includes('Elasticsearch')
228                           ? '#5DBEBB'
229                           : '#D2D3D5'
230                       }" 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
231                    L2076.3,295.5L2076.3,295.5z" />
232                   <path [ngStyle]="{
233                         fill: row.designType.includes('Elasticsearch')
234                           ? '#5DBEBB'
235                           : '#D2D3D5'
236                       }" 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
237                    L2070.5,301.4L2070.5,301.4z" />
238                   <path [ngStyle]="{
239                         fill: row.designType.includes('Elasticsearch')
240                           ? '#5DBEBB'
241                           : '#D2D3D5'
242                       }" 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
243                    C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
244                   <path [ngStyle]="{
245                         fill: row.designType.includes('Elasticsearch')
246                           ? '#5DBEBB'
247                           : '#D2D3D5'
248                       }"
249                     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" />
250                   <path [ngStyle]="{
251                         fill: row.designType.includes('Elasticsearch')
252                           ? '#5DBEBB'
253                           : '#D2D3D5'
254                       }" 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
255                    L2082.9,306.3z" />
256                   <path [ngStyle]="{
257                         fill: row.designType.includes('Elasticsearch')
258                           ? '#5DBEBB'
259                           : '#D2D3D5'
260                       }"
261                     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" />
262                 </g>
263               </svg>
264             </span>
265
266             <!-- MongoDB enable -->
267             <span *ngIf="row.designType.includes('MongoDB')" class="pr-1" placement="bottom" ngbTooltip="MongoDB"
268               container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
269               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
270                 y="0px" width="20" height="20" viewBox="-397.2 285.8 11.2 25"
271                 style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
272                 <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
273                   <path [ngStyle]="{
274                         fill: row.designType.includes('MongoDB')
275                           ? '#19A2A2'
276                           : '#C4C6C8'
277                       }"
278                     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
279                    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
280                    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" />
281                   <path [ngStyle]="{
282                         fill: row.designType.includes('MongoDB')
283                           ? '#5DBEBB'
284                           : '#D2D3D5'
285                       }"
286                     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
287                    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
288                    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" />
289                   <path [ngStyle]="{
290                         fill: row.designType.includes('MongoDB')
291                           ? '#CEEBEA'
292                           : '#C2BFBF'
293                       }" 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
294                    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
295                    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
296                    C-294,259.3-294,259.1-294,258.9z" />
297                 </g>
298               </svg>
299             </span>
300             <!-- MongoDB disable -->
301             <span *ngIf="!row.designType.includes('MongoDB')" class="pr-1" placement="bottom" ngbTooltip="MongoDB"
302               container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
303               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
304                 y="0px" width="20" height="20" viewBox="-397.2 285.8 11.2 25"
305                 style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
306                 <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
307                   <path [ngStyle]="{
308                         fill: row.designType.includes('MongoDB')
309                           ? '#19A2A2'
310                           : '#C4C6C8'
311                       }"
312                     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
313                    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
314                    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" />
315                   <path [ngStyle]="{
316                         fill: row.designType.includes('MongoDB')
317                           ? '#5DBEBB'
318                           : '#D2D3D5'
319                       }"
320                     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
321                    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
322                    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" />
323                   <path [ngStyle]="{
324                         fill: row.designType.includes('MongoDB')
325                           ? '#CEEBEA'
326                           : '#C2BFBF'
327                       }" 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
328                    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
329                    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
330                    C-294,259.3-294,259.1-294,258.9z" />
331                 </g>
332               </svg>
333             </span>
334
335             <!-- Kibana enable-->
336             <span *ngIf="row.designType.includes('Kibana')" class="pr-1" placement="bottom" ngbTooltip="Kibana"
337               container="body" tooltipClass="dl-db-icon-hover-enable" [openDelay]="300" [closeDelay]="300">
338               <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
339                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
340                 y="0px" width="20" height="20" viewBox="1722.5 -151.5 708.9 904.3"
341                 style="enable-background:new 1722.5 -151.5 708.9 904.3;" xml:space="preserve">
342                 <path [ngStyle]="{
343                   fill: row.designType.includes('Kibana')
344                     ? '#5DBEBB'
345                     : '#D2D3D5'
346                 }"
347                   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" />
348                 <path [ngStyle]="{
349                   fill: row.designType.includes('Kibana')
350                     ? '#5DBEBB'
351                     : '#D2D3D5'
352                 }"
353                 d="M2075.9,269.2l-328.1,395.3V727h660.9C2371.2,530.1,2246.2,362.9,2075.9,269.2z" />
354                 <path [ngStyle]="{
355                   fill: row.designType.includes('Kibana')
356                     ? '#37A595'
357                     : '#C2BFBF'
358                 }"
359                  d="M2075.9,269.2l-328.1,395.3V727h117.2l318.7-384.4c0,0-21.9-17.2-51.6-39.1
360            C2110.2,287.9,2075.9,269.2,2075.9,269.2z" />
361                 <path [ngStyle]="{
362                   fill: row.designType.includes('Kibana')
363                     ? '#19A2A2'
364                     : '#C4C6C8'
365                 }"
366                   d="M1760.3,189.5h-12.5v475l328.1-395.3C1982.1,219.2,1874.3,189.5,1760.3,189.5L1760.3,189.5z" />
367               </svg>
368             </span>
369             <!-- Kibana disable -->
370             <span *ngIf="!row.designType.includes('Kibana')" class="pr-1" placement="bottom" ngbTooltip="Kibana"
371               container="body" tooltipClass="dl-db-icon-hover-disable" [openDelay]="300" [closeDelay]="300">
372               <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
373                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
374                 y="0px" width="20" height="20" viewBox="1722.5 -151.5 708.9 904.3"
375                 style="enable-background:new 1722.5 -151.5 708.9 904.3;" xml:space="preserve">
376                 <path [ngStyle]="{
377                   fill: row.designType.includes('Kibana')
378                     ? '#5DBEBB'
379                     : '#D2D3D5'
380                 }"
381                   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" />
382                 <path [ngStyle]="{
383                   fill: row.designType.includes('Kibana')
384                     ? '#5DBEBB'
385                     : '#D2D3D5'
386                 }"
387                  d="M2075.9,269.2l-328.1,395.3V727h660.9C2371.2,530.1,2246.2,362.9,2075.9,269.2z" />
388                 <path [ngStyle]="{
389                   fill: row.designType.includes('Kibana')
390                     ? '#37A595'
391                     : '#C2BFBF'
392                 }"
393                  d="M2075.9,269.2l-328.1,395.3V727h117.2l318.7-384.4c0,0-21.9-17.2-51.6-39.1
394         C2110.2,287.9,2075.9,269.2,2075.9,269.2z" />
395                 <path [ngStyle]="{
396                   fill: row.designType.includes('Kibana')
397                     ? '#19A2A2'
398                     : '#C4C6C8'
399                 }"
400                   d="M1760.3,189.5h-12.5v475l328.1-395.3C1982.1,219.2,1874.3,189.5,1760.3,189.5L1760.3,189.5z" />
401               </svg>
402             </span>
403           </ng-template>
404         </ngx-datatable-column>
405
406         <ngx-datatable-column [width]="240" name="{{ 'TOPICS_NAME' | translate }}" prop="topic">
407           <ng-template let-row="row" ngx-datatable-cell-template>
408             <span>{{ row.topic }}</span>
409           </ng-template>
410         </ngx-datatable-column>
411
412         <ngx-datatable-column [width]="90" name="{{ 'DEPLOY_TO_DASHBOARD' | translate }}"
413           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
414           <div>
415             <ng-template let-row="row" ngx-datatable-cell-template>
416               <span  (click)="this.deployTemplate(row.id);"  class="dl-btn-dark" style="cursor: pointer">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
417             </ng-template>
418           </div>
419         </ngx-datatable-column>
420         <ngx-datatable-column [width]="15" name="" sortable="false" cellClass="d-flex justify-content-center">
421           <ng-template let-row="row" ngx-datatable-cell-template>
422             <span>
423               <button class="btn action-icon-setting" (click)="this.deleteTemplateModel(row.id);">
424                 <i class="fas fa-trash-alt fa-xs"></i>
425               </button>
426             </span>
427           </ng-template>
428         </ngx-datatable-column>
429
430         <!-- <ngx-datatable-footer>
431             <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
432               let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
433               <div class="page-count">
434                 total: {{ rowCount.toLocaleString() }}
435               </div>
436               <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
437                 [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage"
438                 [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)"
439                 (change)="topicTable.onFooterPage($event)">
440               </datatable-pager>
441             </ng-template>
442           </ngx-datatable-footer> -->
443       </ngx-datatable>
444     </div>
445   </div>
446 </div>