This is an automated email from the ASF dual-hosted git repository.

ankovalyshyn pushed a commit to branch DLAB-1215
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 7f27f1a1ad6d46589c474343cd268a04196268bc
Author: Andriana Kovalyshyn <andriana_kovalys...@epam.com>
AuthorDate: Tue Dec 3 15:14:18 2019 +0200

    [DLAB-1215]: added tags to billing report data grid
---
 .../reporting-grid/reporting-grid.component.html   | 31 ++++++++++++++-
 .../reporting-grid/reporting-grid.component.scss   | 45 +++++++++++++++++++++-
 .../reporting-grid/reporting-grid.component.ts     |  4 +-
 3 files changed, 74 insertions(+), 6 deletions(-)

diff --git 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
index c6f6020..141ca6b 100644
--- 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
+++ 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.html
@@ -20,7 +20,7 @@
 <section class="table-wrapper">
   <table mat-table [dataSource]="reportData" class="data-grid reporting 
mat-elevation-z6">
 
-    <ng-container matColumnDef="name" sticky>
+    <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef class="env_name">
         <span class="label"> Environment name </span>
         <button mat-icon-button aria-label="More" class="ar" 
(click)="toggleFilterRow()">
@@ -129,6 +129,30 @@
       <td mat-footer-cell *matFooterCellDef></td>
     </ng-container>
 
+    <ng-container matColumnDef="tags">
+      <th mat-header-cell *matHeaderCellDef class="tags">
+        <span class="label"> Tags </span>
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <mat-chip-list aria-label="Tags" *ngIf="element.tags" class="tags-col 
selection">
+          <mat-chip matTooltip="Endpoint tag: {{ element.tags.endpoint_tag }}" 
matTooltipPosition="above">
+            {{ element.tags.endpoint_tag }}
+          </mat-chip>
+          <mat-chip *ngIf="element.tags.custom_tag" matTooltip="Custom tag: {{ 
element.tags.custom_tag }}"
+            matTooltipPosition="above">
+            {{ element.tags.custom_tag }}
+          </mat-chip>
+          <mat-chip matTooltip="User tag: {{ element.tags.user_tag }}" 
matTooltipPosition="above">
+            {{ element.tags.user_tag }}
+          </mat-chip>
+          <mat-chip matTooltip="Project tag: {{ element.tags.project_tag }}" 
matTooltipPosition="above">
+            {{ element.tags.project_tag }}
+          </mat-chip>
+        </mat-chip-list>
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
     <ng-container matColumnDef="charge" stickyEnd>
       <th mat-header-cell *matHeaderCellDef class="th_charges">
         <span class="label"> Service Charges </span>
@@ -144,7 +168,7 @@
     </ng-container>
 
     <!-- ----------------FILTER -->
-    <ng-container matColumnDef="name-filter" sticky>
+    <ng-container matColumnDef="name-filter">
       <th mat-header-cell *matHeaderCellDef>
         <input #nameFilter type="text" placeholder="Filter by environment 
name" class="form-control filter-field"
           [value]="filtered?.dlab_id" (input)="filteredReportData.dlab_id = 
$event.target.value" />
@@ -190,6 +214,9 @@
           
[model]="filteredReportData[DICTIONARY.billing.service_filter_key]"></multi-select-dropdown>
       </th>
     </ng-container>
+    <ng-container matColumnDef="tags-filter">
+      <th mat-header-cell *matHeaderCellDef></th>
+    </ng-container>
     <ng-container matColumnDef="actions" stickyEnd>
       <th mat-header-cell *matHeaderCellDef>
         <div class="actions">
diff --git 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
index e4caf44..4f870cd 100644
--- 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
+++ 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.scss
@@ -69,32 +69,73 @@
 
   .th_shape {
     width: 10%;
+    min-width: 150px;
   }
 
   .th_user,
   .env_name,
-  .service {
+  .service,
+  .tags {
     width: 15%;
+    min-width: 150px;
     overflow: hidden;
     word-wrap: break-word;
   }
 
+  .tags {
+    .label {
+      padding-top: 0;
+    }
+  }
+
+  .service {
+    min-width: 175px;
+  }
+
   .env_name {
     width: 16%;
+    min-width: 200px;
   }
 
   .th_type {
     width: 12%;
+    min-width: 200px;
   }
 
   .th_status {
     width: 8%;
+    min-width: 150px;
   }
 
   .th_charges {
     width: 8%;
+    min-width: 110px;
     padding-right: 15px;
     text-align: right;
+
+    .label {
+      padding-top: 0;
+    }
+  }
+
+  .th_project {
+    min-width: 150px;
+  }
+
+  .tags-col {
+    padding: 5px;
+
+    mat-chip {
+      min-height: 20px;
+      padding: 5px 10px;
+      font-size: 13px;
+      max-width: 110px !important;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      line-height: 10px;
+      margin: 2px;
+    }
   }
 
   .mat-column-charge {
@@ -104,7 +145,7 @@
   .header-row {
     .label {
       display: inline-block;
-      padding-top: 10px;
+      padding-top: 15px;
       vertical-align: super !important;
       padding-left: 5px;
     }
diff --git 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
index d303723..3a904fd 100644
--- 
a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
+++ 
b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting-grid/reporting-grid.component.ts
@@ -42,8 +42,8 @@ export class ReportingGridComponent implements OnInit {
 
   @Output() filterReport: EventEmitter<{}> = new EventEmitter();
   @Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
-  displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status', 
'shape', 'service', 'charge'];
-  displayedFilterColumns: string[] = ['name-filter', 'user-filter', 
'project-filter', 'type-filter', 'status-filter', 'shape-filter', 
'service-filter', 'actions'];
+  displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status', 
'shape', 'service', 'tags', 'charge'];
+  displayedFilterColumns: string[] = ['name-filter', 'user-filter', 
'project-filter', 'type-filter', 'status-filter', 'shape-filter', 
'service-filter', 'tags-filter', 'actions'];
 
   ngOnInit() { }
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org
For additional commands, e-mail: commits-h...@dlab.apache.org

Reply via email to