You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/04/06 13:01:31 UTC
[incubator-dlab] branch DLAB-1571 updated: [DLAB-1696,
DLAB-1696]: Fixed fixed headers in billing,
resourses and menegment page. Fixed billing in resourses
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1571
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/DLAB-1571 by this push:
new 27baebd [DLAB-1696, DLAB-1696]: Fixed fixed headers in billing,resourses and menegment page. Fixed billing in resourses
new 78f0738 Merge remote-tracking branch 'origin/DLAB-1571' into DLAB-1571
27baebd is described below
commit 27baebd48f3b7834fb1705e0fd27f502501b975e
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Apr 6 16:00:56 2020 +0300
[DLAB-1696, DLAB-1696]: Fixed fixed headers in billing,resourses and menegment page. Fixed billing in resourses
---
.../management-grid/management-grid.component.html | 30 +++++++++----------
.../reporting-grid/reporting-grid.component.html | 34 +++++++++++-----------
.../reporting-grid/reporting-grid.component.scss | 5 ++--
.../resources-grid/resources-grid.component.html | 26 ++++++++---------
.../resources-grid/resources-grid.model.ts | 5 ++--
.../resources/webapp/src/assets/styles/_theme.scss | 5 ++++
6 files changed, 55 insertions(+), 50 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
index 631e7ae..9947516 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
@@ -20,7 +20,7 @@
<div class="ani">
<table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
<ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="user">
+ <th mat-header-cell *matHeaderCellDef class="user label-header">
<span class="label">User</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -32,7 +32,7 @@
</ng-container>
<ng-container matColumnDef="project">
- <th mat-header-cell *matHeaderCellDef class="project">
+ <th mat-header-cell *matHeaderCellDef class="project label-header">
<span class="label">Project</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -44,7 +44,7 @@
</ng-container>
<ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="type">
+ <th mat-header-cell *matHeaderCellDef class="type label-header">
<span class="label">Type</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -56,7 +56,7 @@
</ng-container>
<ng-container matColumnDef="shape">
- <th mat-header-cell *matHeaderCellDef class="shape">
+ <th mat-header-cell *matHeaderCellDef class="shape label-header">
<span class="label">Shape / Resource id</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -68,7 +68,7 @@
</ng-container>
<ng-container matColumnDef="status">
- <th mat-header-cell *matHeaderCellDef class="status">
+ <th mat-header-cell *matHeaderCellDef class="status label-header">
<span class="label">Status</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
@@ -77,13 +77,13 @@
<span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
</button> </th>
- <td mat-cell *matCellDef="let element" class="ani status" >
+ <td mat-cell *matCellDef="let element" class="ani status label-header" >
<span ngClass="{{element.status || ''}}">{{ element.status }}</span>
</td>
</ng-container>
<ng-container matColumnDef="resources">
- <th mat-header-cell *matHeaderCellDef class="resources">
+ <th mat-header-cell *matHeaderCellDef class="resources label-header">
<span class="label">Computational resources</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -122,7 +122,7 @@
</ng-container>
<ng-container matColumnDef="actions">
- <th mat-header-cell *matHeaderCellDef class="actions">
+ <th mat-header-cell *matHeaderCellDef class="actions label-header">
<span class="label"> Actions </span>
</th>
<td mat-cell *matCellDef="let element" class="settings actions-col">
@@ -166,43 +166,43 @@
<!-- FILTERING -->
<ng-container matColumnDef="user-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
[model]="filterForm.users"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="type-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<input placeholder="Filter by environment type" type="text" class="form-control filter-field"
[value]="filterForm.type" (input)="filterForm.type = $event.target.value" />
</th>
</ng-container>
<ng-container matColumnDef="project-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
[items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="shape-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
[items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="status-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
[items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="resource-filter" sticky>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
[items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="actions-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="actions-col">
+ <th mat-header-cell *matHeaderCellDef class="actions-col filter-row-item">
<div class="actions">
<button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
<i class="material-icons">close</i>
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 b1392f3..e775072 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
@@ -21,7 +21,7 @@
<table mat-table [dataSource]="reportData" class="data-grid reporting mat-elevation-z6">
<ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef class="env_name">
+ <th mat-header-cell *matHeaderCellDef class="env_name label-header">
<div class="label"><span class="text"> Environment name</span></div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -30,12 +30,12 @@
</i>
</button>
</th>
- <td mat-cell *matCellDef="let element"> {{element.dlabId}} </td>
+ <td mat-cell *matCellDef="let element"><span class="table-item">{{element.dlabId}}</span></td>
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="th_user">
+ <th mat-header-cell *matHeaderCellDef class="th_user label-header">
<div class="sort">
<div class="sort-arrow up" (click)="sortBy('user', 'down')" [ngClass]="{'active': !!this.active['userdown']}"></div>
<div class="sort-arrow down" (click)="sortBy('user', 'up')" [ngClass]="{'active': !!this.active['userup']}"></div>
@@ -55,7 +55,7 @@
</ng-container>
<ng-container matColumnDef="project">
- <th mat-header-cell *matHeaderCellDef class="th_project">
+ <th mat-header-cell *matHeaderCellDef class="th_project label-header">
<div class="sort">
<div class="sort-arrow up" (click)="sortBy('project', 'down')" [ngClass]="{'active': !!this.active['projectdown']}"></div>
<div class="sort-arrow down" (click)="sortBy('project', 'up')" [ngClass]="{'active': !!this.active['projectup']}"></div>
@@ -73,7 +73,7 @@
</ng-container>
<ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="th_type">
+ <th mat-header-cell *matHeaderCellDef class="th_type label-header">
<div class="label"><span class="text"> Resource Type</span> </div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -87,7 +87,7 @@
</ng-container>
<ng-container matColumnDef="status">
- <th mat-header-cell *matHeaderCellDef class="th_status">
+ <th mat-header-cell *matHeaderCellDef class="th_status label-header">
<div class="label"><span class="text"> Status</span> </div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -105,7 +105,7 @@
</ng-container>
<ng-container matColumnDef="shape">
- <th mat-header-cell *matHeaderCellDef class="th_shape">
+ <th mat-header-cell *matHeaderCellDef class="th_shape label-header">
<div class="label"><span class="text"> Instance size</span></div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -122,7 +122,7 @@
</ng-container>
<ng-container matColumnDef="service">
- <th mat-header-cell *matHeaderCellDef class="service">
+ <th mat-header-cell *matHeaderCellDef class="service label-header">
<div class="label"><span class="text"> Product</span> </div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -140,7 +140,7 @@
</ng-container>
<ng-container matColumnDef="charge" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="th_charges">
+ <th mat-header-cell *matHeaderCellDef class="th_charges label-header">
<div class="label">
<div class="sort">
<div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div>
@@ -161,45 +161,45 @@
<!-- ----------------FILTER -->
<ng-container matColumnDef="name-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<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']" />
</th>
</ng-container>
<ng-container matColumnDef="user-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'"
[items]="filterConfiguration.users" [model]="filteredReportData.users"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="project-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'project'"
[items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="type-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="['resource_type']"
[items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type">
</multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'status'"
[items]="filterConfiguration.statuses" [model]="filteredReportData.statuses"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="shape-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
[type]="'shapes'" [items]="filterConfiguration['shapes']"
[model]="filteredReportData['shapes']"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="service-filter">
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
[type]="['products']"
[items]="filterConfiguration['products']"
@@ -207,7 +207,7 @@
</th>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
<div class="actions th_charges">
<button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered">
<i class="material-icons">close</i>
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 cb0833c..9c4f819 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
@@ -120,8 +120,7 @@
.th_charges {
width: 10%;
- min-width: 140px;
- padding-right: 15px;
+ min-width: 155px;
text-align: right;
.label {
@@ -254,7 +253,7 @@
.env_name,
.service,
.th_type,
- .th_rstatus {
+ .th_status {
width: 10%;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 6d08036..70702c0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -39,7 +39,7 @@
</ng-container> -->
<ng-container matColumnDef="name" sticky>
- <th mat-header-cell *matHeaderCellDef class="name-col">
+ <th mat-header-cell *matHeaderCellDef class="name-col label-header">
<span class="label">Environment name</span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -50,7 +50,7 @@
</th>
</ng-container>
<ng-container matColumnDef="statuses">
- <th mat-header-cell *matHeaderCellDef class="status-col">
+ <th mat-header-cell *matHeaderCellDef class="status-col label-header">
<span class="label"> Status </span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -61,7 +61,7 @@
</th>
</ng-container>
<ng-container matColumnDef="shapes">
- <th mat-header-cell *matHeaderCellDef class="shape-col">
+ <th mat-header-cell *matHeaderCellDef class="shape-col label-header">
<span class="label"> Size </span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -72,12 +72,12 @@
</th>
</ng-container>
<ng-container matColumnDef="tag">
- <th mat-header-cell *matHeaderCellDef class="tag-col">
+ <th mat-header-cell *matHeaderCellDef class="tag-col label-header">
<span class="label"> Tags </span>
</th>
</ng-container>
<ng-container matColumnDef="resources">
- <th mat-header-cell *matHeaderCellDef class="resources-col">
+ <th mat-header-cell *matHeaderCellDef class="resources-col label-header">
<span class="label"> Computational resources </span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
@@ -88,12 +88,12 @@
</th>
</ng-container>
<ng-container matColumnDef="cost">
- <th mat-header-cell *matHeaderCellDef class="cost-col">
+ <th mat-header-cell *matHeaderCellDef class="cost-col label-header">
<span class="label"> Cost </span>
</th>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="actions-col">
+ <th mat-header-cell *matHeaderCellDef class="actions-col label-header">
<span class="label"> Actions </span>
</th>
</ng-container>
@@ -224,37 +224,37 @@
<!-- FILTER START -->
<ng-container matColumnDef="name-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="name-col">
+ <th mat-header-cell *matHeaderCellDef class="name-col filter-row-item">
<input placeholder="Filter by environment name" type="text" class="form-control filter-field"
[value]="filterForm.name" (input)="filterForm.name = $event.target.value" />
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
- <th mat-header-cell *matHeaderCellDef class="status-col">
+ <th mat-header-cell *matHeaderCellDef class="status-col filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
[items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="shape-filter">
- <th mat-header-cell *matHeaderCellDef class="shape-col">
+ <th mat-header-cell *matHeaderCellDef class="shape-col filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)"
[type]="'sizes'" [items]="filterConfiguration.shapes"
[model]="filterForm.shapes"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="tag-filter">
- <th mat-header-cell *matHeaderCellDef class="tag-col">
+ <th mat-header-cell *matHeaderCellDef class="tag-col filter-row-item">
</th>
</ng-container>
<ng-container matColumnDef="resource-filter">
- <th mat-header-cell *matHeaderCellDef class="resources-col">
+ <th mat-header-cell *matHeaderCellDef class="resources-col filter-row-item">
<multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
[items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="cost-filter">
- <th mat-header-cell *matHeaderCellDef class="cost-col">
+ <th mat-header-cell *matHeaderCellDef class="cost-col filter-row-item">
</th>
</ng-container>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
index 57f98c9..ba50286 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
@@ -60,6 +60,7 @@ export class ExploratoryModel {
project: value.project,
exploratory: value.exploratory.map(el => {
const provider = el.cloud_provider.toLowerCase();
+ const billing = value.exploratoryBilling.filter(res => res.tag === el.exploratory_id)[0];
return new ExploratoryModel(
provider,
el.exploratory_name,
@@ -77,8 +78,8 @@ export class ExploratoryModel {
value.shared[el.endpoint][DICTIONARY[provider].bucket_name],
value.shared[el.endpoint][DICTIONARY[provider].shared_bucket_name],
el.error_message,
- el[DICTIONARY[provider].billing.cost],
- el[DICTIONARY[provider].billing.currencyCode],
+ billing.cost,
+ billing.currency,
el.billing,
el.libs,
value.shared[el.endpoint][DICTIONARY[provider].user_storage_account_name],
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 7b48bba..43e9c50 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -662,3 +662,8 @@ mat-progress-bar {
}
}
+.filter-row-item, .label-header{
+ box-shadow: inset 0 -1px 0 lightgrey;
+ border-bottom: none !important;
+}
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org