Code Review / dcaegen2 / services.git / blob
? search:
summary | shortlog | log | commit | commitdiff | review | tree
history | raw | HEAD
fix: topic table and mockup data
[dcaegen2/services.git] / components / datalake-handler / admin / src / src / app / views / topics / topic-list / topic-list.component.html
1 <!--
2 ============LICENSE_START=======================================================
3 ONAP : DataLake
4 ================================================================================
5 Copyright 2019 QCT
6 =================================================================================
7 Licensed under the Apache License, Version 2.0 (the "License");
8 you may not use this file except in compliance with the License.
9 You may obtain a copy of the License at
10
11      http://www.apache.org/licenses/LICENSE-2.0
12
13 Unless required by applicable law or agreed to in writing, software
14 distributed under the License is distributed on an "AS IS" BASIS,
15 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 See the License for the specific language governing permissions and
17 limitations under the License.
18 ============LICENSE_END=========================================================
19 -->
20
21 <div class="topic-list-panel">
22   <div class="row">
23     <div class="col-md-12">
24       <div class="d-flex justify-content-end p-2">
25         <!-- Search bar -->
26         <div class="p-1">
27           <div class="input-group">
28             <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
29               (keyup)="this.updateFilter($event.target.value)" />
30             <div class="input-group-append">
31               <button type="button" class="btn dl-btn-dark">
32                 <i class="fa fa-search"></i>
33               </button>
34             </div>
35           </div>
36         </div>
37         <!-- button -->
38         <div class="p-1">
39           <button style="margin-right: 0.5rem;" class="btn dl-btn-dark" (click)="openTopicModal('config')">
40             {{ "DEFAULT_CONFIGURATIONS" | translate }}
41           </button>
42           <button class="btn dl-btn-dark" (click)="openNewTopicModal()">
43             {{ "NEW_TOPIC" | translate }}
44           </button>
45         </div>
46       </div>
47     </div>
48   </div>
49   <!-- datatable -->
50   <div class="row">
51     <div class="col-md-12">
52       <ngx-datatable #mydatatable class="bootstrap" [rows]="topics" [columnMode]="'force'" [headerHeight]="40"
53                      [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
54                      [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10"
55                      (activate)="onActivate($event)">
56
57         <ngx-datatable-column [width]="20" name="{{ 'STATUS' | translate }}" prop="enabled"
58           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
59           <div>
60             <ng-template let-row="row" ngx-datatable-cell-template>
61               <span *ngIf="row.enabled">
62                 <i class="fas fa-circle dl-icon-enable" aria-hidden="true"></i>
63               </span>
64               <span *ngIf="!row.enabled">
65                 <i class="fas fa-circle dl-icon-disable" aria-hidden="true"></i>
66               </span>
67             </ng-template>
68           </div>
69         </ngx-datatable-column>
70
71         <ngx-datatable-column [width]="450" name="{{ 'NAME' | translate }}" prop="name">
72           <ng-template let-row="row" ngx-datatable-cell-template>
73             <span>{{ row.name }}</span>
74           </ng-template>
75         </ngx-datatable-column>
76
77         <ngx-datatable-column [width]="25" name="{{ 'SETTING' | translate }}" prop="type"
78           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
79           <div>
80             <ng-template let-row="row" ngx-datatable-cell-template>
81               <span *ngIf="row.type">
82                 <i class="fas fa-check dl-icon-enable" aria-hidden="true"></i>
83               </span>
84               <!-- <span *ngIf="!row.type">
85                 <i class="fas fa-check dl-icon-disable" aria-hidden="true"></i>
86               </span> -->
87             </ng-template>
88           </div>
89         </ngx-datatable-column>
90
91         <ngx-datatable-column [width]="10" name="Ka" prop="kafkas" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
92           <ng-template let-column="column" ngx-datatable-header-template>
93             <img src="assets/icons/kafka_able.svg" alt="Icon" style=" height: 20px; "/>
94           </ng-template>
95         </ngx-datatable-column>
96
97         <ngx-datatable-column [width]="10" name="CB" prop="CB" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
98             <ng-template let-column="column" ngx-datatable-header-template>
99                 <img src="assets/icons/couchbase_able.svg" alt="Icon" style=" height: 20px; "/>
100             </ng-template>
101         </ngx-datatable-column>
102
103         <ngx-datatable-column [width]="10" name="DR" prop="DRUID" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
104             <ng-template let-column="column" ngx-datatable-header-template>
105                 <img src="assets/icons/druid_able.svg" alt="Icon" style=" height: 16px; "/>
106             </ng-template>
107         </ngx-datatable-column>
108
109         <ngx-datatable-column [width]="10" name="ES" prop="ES" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
110             <ng-template let-column="column" ngx-datatable-header-template>
111                 <img src="assets/icons/elasticsearch_able.svg" alt="Icon" style=" height: 20px; "/>
112             </ng-template>
113         </ngx-datatable-column>
114
115         <ngx-datatable-column [width]="10" name="MG" prop="MONGO" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
116             <ng-template let-column="column" ngx-datatable-header-template>
117                 <img src="assets/icons/mongoDB_able.svg" alt="Icon" style=" height: 23px; "/>
118             </ng-template>
119         </ngx-datatable-column>
120
121         <ngx-datatable-column [width]="10" name="HD" prop="HDFS" headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
122             <ng-template let-column="column" ngx-datatable-header-template>
123                 <img src="assets/icons/hadoop_able.svg" alt="Icon" style=" height: 20px; "/>
124             </ng-template>
125         </ngx-datatable-column>
126
127         <ngx-datatable-column [width]="20" name="{{ 'TTL' | translate }}" prop="ttl"
128           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
129           <ng-template let-row="row" ngx-datatable-cell-template>
130             <span>{{ row.ttl }}</span>
131           </ng-template>
132         </ngx-datatable-column>
133
134         <ngx-datatable-column [width]="20" name="{{ 'SAVE_RAW_DATA' | translate }}" prop="saveRaw"
135           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
136           <div>
137             <ng-template let-row="row" ngx-datatable-cell-template>
138               <span *ngIf="row.saveRaw">
139                 <i class="fas fa-check dl-icon-enable" aria-hidden="true"></i>
140               </span>
141               <!-- <span *ngIf="!row.saveRaw"> -->
142                 <!-- <i class="fas fa-check dl-icon-disable" aria-hidden="true"></i> -->
143               <!-- </span> -->
144             </ng-template>
145           </div>
146         </ngx-datatable-column>
147
148         <ngx-datatable-column [width]="10" name="" sortable="false" cellClass="d-flex justify-content-center">
149           <ng-template let-row="row" ngx-datatable-cell-template>
150             <span>
151              <button class="btn action-icon-setting" (click)="this.deleteTopicModal(row.name);">
152                 <i class="fas fa-trash-alt fa-xs"></i>
153               </button>
154             </span>
155           </ng-template>
156         </ngx-datatable-column>
157
158         <ngx-datatable-footer>
159           <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
160                        let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset"
161                        let-isVisible="isVisible">
162             <div class="page-count">
163               total: {{ rowCount.toLocaleString() }}
164             </div>
165             <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
166                              [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'"
167                              [page]="curPage"
168                              [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)"
169                              (change)="topicTable.onFooterPage($event)">
170             </datatable-pager>
171           </ng-template>
172         </ngx-datatable-footer>
173       </ngx-datatable>
174     </div>
175   </div>
176 </div>