You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/12/03 13:14:32 UTC
[incubator-dlab] 01/01: [DLAB-1215]: added tags to billing report
data grid
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 <An...@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-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org