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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
