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/07/01 10:29:29 UTC
[incubator-dlab] 01/04: [DLAB-823]: added placeholder to billing
grid
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 511ce8845ded84504649db4ba786f7aaf3da7f68
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 27 12:44:08 2019 +0300
[DLAB-823]: added placeholder to billing grid
---
.../reporting-grid/reporting-grid.component.html | 101 +++------------------
.../reporting-grid/reporting-grid.component.scss | 37 ++++++--
.../reporting-grid/reporting-grid.component.ts | 20 ++--
3 files changed, 51 insertions(+), 107 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 968d148..9472370 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
@@ -17,81 +17,6 @@
~ under the License.
-->
-<!-- <table class="dashboard_table reporting">
- <tr>
- <th *ngFor="let column of filteringColumns" ngClass="{{column.className || ''}}"
- [hidden]="column.role && !full_report">{{ column.title }}
- <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span
- *ngIf="isFiltered && filteredReportData[column.name].length > 0 && !collapseFilterRow">filter_list</span>
- <span
- [hidden]="isFiltered && filteredReportData[column.name].length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </tr>
-
- <tr *ngIf="collapseFilterRow" class="filter-row">
- <td *ngIf="full_report">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'user'" [items]="filterConfiguration.user"
- [model]="filteredReportData.user"></multi-select-dropdown>
- </td>
- <td>
- <input type="text" placeholder="Filter by environment name" class="form-control filter-field"
- [value]="filteredReportData.dlab_id" (input)="filteredReportData.dlab_id = $event.target.value" />
- </td>
- <td>
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resource_type'"
- [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type"></multi-select-dropdown>
- </td>
- <td>
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'status'" [items]="filterConfiguration.status"
- [model]="filteredReportData.status"></multi-select-dropdown>
- </td>
- <td>
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.instance_size]"
- [items]="filterConfiguration[DICTIONARY.billing.instance_size]"
- [model]="filteredReportData[DICTIONARY.billing.instance_size]"></multi-select-dropdown>
- </td>
- <td>
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.service_filter_key]"
- [items]="filterConfiguration[DICTIONARY.billing.service_filter_key]"
- [model]="filteredReportData[DICTIONARY.billing.service_filter_key]"></multi-select-dropdown>
- </td>
- <td>
- <div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered">
- <i class="material-icons">close</i>
- </button>
-
- <button mat-icon-button class="btn apply" (click)="filter_btnClick()">
- <i class="material-icons">done</i>
- </button>
- </div>
- </td>
- </tr>
-
- <ng-template [ngIf]="reportData">
- <tr *ngFor="let line of reportData" class="dashboard_table_body">
- <td class="user-field" *ngIf="full_report">{{ line.user }}</td>
- <td class="env_name">{{ line[DICTIONARY.billing.dlabId] }}</td>
- <td>{{ line[DICTIONARY.billing.resourceType] }}</td>
- <td>
- <span class="status" ngClass="{{ line.status.toLowerCase() || '' }}"
- *ngIf="line.status">{{ line.status.toLowerCase() }}</span>
- <span *ngIf="!line.status">N/A</span>
- </td>
- <td><span [outerHTML]="line[DICTIONARY.billing.instance_size] | lineBreak"></span></td>
- <td>{{ line[DICTIONARY.billing.service] }}
- <span *ngIf="line.resource_type">({{ line.resource_type }})</span>
- </td>
- <td>{{ line[DICTIONARY.billing.cost] }} {{ line[DICTIONARY.billing.currencyCode] }}</td>
- </tr>
- </ng-template>
-</table> -->
-<!-- *ngIf="full_report" -->
-
<section class="table-wrapper" *ngIf="reportData?.lines">
<table mat-table [dataSource]="reportData.lines" class="data-grid reporting mat-elevation-z6">
@@ -147,7 +72,8 @@
{{ element[DICTIONARY.billing.cost] }} {{ element[DICTIONARY.billing.currencyCode] }}
</td>
<td mat-footer-cell *matFooterCellDef>
- <span *ngIf="reportData">{{ reportData[DICTIONARY.billing.costTotal] }} {{ reportData[DICTIONARY.billing.currencyCode] }}</span>
+ <span *ngIf="reportData">{{ reportData[DICTIONARY.billing.costTotal] }}
+ {{ reportData[DICTIONARY.billing.currencyCode] }}</span>
</td>
</ng-container>
@@ -205,20 +131,21 @@
</div>
</th>
</ng-container>
+ <ng-container matColumnDef="placeholder">
+ <td mat-footer-cell *matFooterCellDef colspan="7" class="info">
+ To start working, please, create new environment
+ </td>
+ </ng-container>
+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
- <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ <ng-container *ngIf="reportData?.lines.length">
+ <tr mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr>
- <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
+ </ng-container>
+ <tr [hidden]="reportData?.lines.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
</table>
</section>
-
-<!--
-<div *ngIf="!reportData" class="message_block message info">
- <span>To start working, please, create new environment</span>
-</div>
-<div *ngIf="reportData && reportData.length == 0" class="message_block message info">
- <span>No matches found</span>
-</div> -->
\ No newline at end of file
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 1c2ced0..5c565bb 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
@@ -17,34 +17,40 @@
* under the License.
*/
- .table-wrapper {
- width: 100%;
- }
+.table-wrapper {
+ width: 100%;
+}
.reporting {
width: 100%;
min-width: 1100px;
overflow: auto;
+
tr {
th {
font-size: 11px;
}
+
td {
- font-size: 13px;
+ font-size: 13px;
}
+
&.filter-row {
th {
padding: 5px;
}
+
.filter-field {
font-size: 13px;
}
}
}
+
.th_shape {
width: 10%;
}
+
.th_user,
.env_name,
.service {
@@ -52,43 +58,54 @@
overflow: hidden;
word-wrap: break-word;
}
+
.th_type {
width: 8%;
}
+
.th_status {
width: 8%;
}
+
.th_charges {
width: 8%;
}
}
+
.dashboard_table_body {
td:first-child {
cursor: default;
}
- .dropdown-multiselect {
- button {
- font-size: 14px;
- height: 34px;
- padding: 7px 20px;
+
+ .dropdown-multiselect {
+ button {
+ font-size: 14px;
+ height: 34px;
+ padding: 7px 20px;
+ }
}
- }
}
+.no-data {}
+
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
+
.env_name,
.service,
.th_type,
.th_rstatus {
width: 10%;
}
+
.th_user {
width: 12%;
}
+
.th_charges {
width: 6%;
}
+
.user-field {
word-wrap: break-word;
}
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 b919c27..9310c17 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
@@ -25,7 +25,7 @@ import { DICTIONARY, ReportingConfigModel } from '../../../dictionary/global.dic
selector: 'dlab-reporting-grid',
templateUrl: './reporting-grid.component.html',
styleUrls: ['./reporting-grid.component.scss',
- '../../resources/resources-grid/resources-grid.component.css']
+ '../../resources/resources-grid/resources-grid.component.css']
})
export class ReportingGridComponent implements OnInit {
readonly DICTIONARY = DICTIONARY;
@@ -41,15 +41,15 @@ export class ReportingGridComponent implements OnInit {
displayedColumns: string[] = ['name', 'user', 'type', 'status', 'shape', 'service', 'charge'];
displayedFilterColumns: string[] = ['name-filter', 'user-filter', 'type-filter', 'status-filter', 'shape-filter', 'service-filter', 'actions'];
- public filteringColumns: Array<any> = [
- { title: 'User', name: 'user', className: 'th_user', filtering: true, role: 'admin'},
- { title: 'Environment name', name: 'dlab_id', className: 'env_name', filtering: true },
- { title: 'Resource Type', name: 'resource_type', className: 'th_type', filtering: true },
- { title: 'Status', name: 'status', className: 'th_rstatus', filtering: true },
- { title: DICTIONARY.instance_size, name: DICTIONARY.billing.instance_size, className: 'th_shape', filtering: true },
- { title: DICTIONARY.service, name: DICTIONARY.billing.service_filter_key, className: 'service', filtering: true },
- { title: 'Service Charges', name: 'charges', className: 'th_charges', filtering: false }
- ];
+ // public filteringColumns: Array<any> = [
+ // { title: 'User', name: 'user', className: 'th_user', filtering: true, role: 'admin'},
+ // { title: 'Environment name', name: 'dlab_id', className: 'env_name', filtering: true },
+ // { title: 'Resource Type', name: 'resource_type', className: 'th_type', filtering: true },
+ // { title: 'Status', name: 'status', className: 'th_rstatus', filtering: true },
+ // { title: DICTIONARY.instance_size, name: DICTIONARY.billing.instance_size, className: 'th_shape', filtering: true },
+ // { title: DICTIONARY.service, name: DICTIONARY.billing.service_filter_key, className: 'service', filtering: true },
+ // { title: 'Service Charges', name: 'charges', className: 'th_charges', filtering: false }
+ // ];
ngOnInit() { }
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org