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/06/06 15:22:42 UTC

[incubator-dlab] branch feature/projects updated (4ded100 -> 8aa0bac)

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

ankovalyshyn pushed a change to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.


    from 4ded100  [DLAB-747]: moved and extended resources grid model
     new ac68ebf  [DLAB-649]: toolbar markup fixes
     new 56b116d  [DLAB-649]: billing data sctructure fixed
     new 4850074  [DLAB-649]: extend billing data grid; sticky elementing
     new 8aa0bac  [DLAB-649]: extend billing data grid

The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../resources/webapp/src/app/core/util/patterns.ts |   2 +-
 .../reporting-grid/reporting-grid.component.html   | 165 +++++++++++++++++++--
 .../reporting-grid/reporting-grid.component.scss   |  14 +-
 .../reporting-grid/reporting-grid.component.ts     |  12 +-
 .../src/app/reporting/reporting.component.ts       |  28 ++--
 .../app/reporting/toolbar/toolbar.component.css    |   1 -
 .../app/reporting/toolbar/toolbar.component.html   |   3 +-
 .../resources/webapp/src/assets/styles/_theme.scss |   9 +-
 8 files changed, 197 insertions(+), 37 deletions(-)


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


[incubator-dlab] 04/04: [DLAB-649]: extend billing data grid

Posted by an...@apache.org.
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 8aa0bac2d098c8829defa87670466d3e097fa2cc
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 6 18:21:53 2019 +0300

    [DLAB-649]: extend billing data grid
---
 .../reporting-grid/reporting-grid.component.html   | 28 ++++++++++------------
 .../reporting-grid/reporting-grid.component.ts     |  8 ++++++-
 2 files changed, 19 insertions(+), 17 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 7b7336f..968d148 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
@@ -92,8 +92,8 @@
 </table> -->
 <!--  *ngIf="full_report" -->
 
-<section class="table-wrapper">
-  <table mat-table [dataSource]="reportData?.lines" class="data-grid reporting mat-elevation-z6">
+<section class="table-wrapper" *ngIf="reportData?.lines">
+  <table mat-table [dataSource]="reportData.lines" class="data-grid reporting mat-elevation-z6">
 
     <ng-container matColumnDef="name" sticky>
       <th mat-header-cell *matHeaderCellDef class="env_name"> Environment name </th>
@@ -146,8 +146,9 @@
       <td mat-cell *matCellDef="let element">
         {{ element[DICTIONARY.billing.cost] }} {{ element[DICTIONARY.billing.currencyCode] }}
       </td>
-      <td mat-footer-cell *matFooterCellDef>{{ reportData[DICTIONARY.billing.costTotal] }}
-        {{ reportData[DICTIONARY.billing.currencyCode] }}</td>
+      <td mat-footer-cell *matFooterCellDef>
+        <span *ngIf="reportData">{{ reportData[DICTIONARY.billing.costTotal] }} {{ reportData[DICTIONARY.billing.currencyCode] }}</span>
+      </td>
     </ng-container>
 
     <!-- ----------------FILTER -->
@@ -159,8 +160,8 @@
     </ng-container>
     <ng-container matColumnDef="user-filter">
       <th mat-header-cell *matHeaderCellDef>
-        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'" [items]="filterConfiguration.user"
-          [model]="filteredReportData.user"></multi-select-dropdown>
+        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'"
+          [items]="filterConfiguration.user" [model]="filteredReportData.user"></multi-select-dropdown>
       </th>
     </ng-container>
     <ng-container matColumnDef="type-filter">
@@ -178,14 +179,15 @@
     </ng-container>
     <ng-container matColumnDef="shape-filter">
       <th mat-header-cell *matHeaderCellDef>
-        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.instance_size]"
-          [items]="filterConfiguration[DICTIONARY.billing.instance_size]"
+        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
+          [type]="[DICTIONARY.billing.instance_size]" [items]="filterConfiguration[DICTIONARY.billing.instance_size]"
           [model]="filteredReportData[DICTIONARY.billing.instance_size]"></multi-select-dropdown>
       </th>
     </ng-container>
     <ng-container matColumnDef="service-filter">
       <th mat-header-cell *matHeaderCellDef>
-        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.service_filter_key]"
+        <multi-select-dropdown *ngIf="filterConfiguration" (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>
       </th>
@@ -212,14 +214,8 @@
     <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
   </table>
 </section>
-<!-- 
-
-
-<footer *ngIf="data">
-Total {{ reportData[DICTIONARY.billing.costTotal] }} {{ reportData[DICTIONARY.billing.currencyCode] }}
-</footer>
-
 
+<!-- 
 <div *ngIf="!reportData" class="message_block message info">
   <span>To start working, please, create new environment</span>
 </div>
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 0aed840..b919c27 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
@@ -35,7 +35,6 @@ export class ReportingGridComponent implements OnInit {
   collapseFilterRow: boolean = false;
   reportData: any;
   isFiltered: boolean = false;
-  full_report: boolean = false;
 
   @Output() filterReport: EventEmitter<{}> = new EventEmitter();
   @Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
@@ -58,6 +57,13 @@ export class ReportingGridComponent implements OnInit {
     this.filteredReportData[$event.type] = $event.model;
   }
 
+  setFullReport(data): void {
+    if (!data) {
+      this.displayedColumns = this.displayedColumns.filter(el => el !== 'user');
+      this.displayedFilterColumns = this.displayedFilterColumns.filter(el => el !== 'user-filter');
+    }
+  }
+
   toggleFilterRow(): void {
     this.collapseFilterRow = !this.collapseFilterRow;
   }


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


[incubator-dlab] 02/04: [DLAB-649]: billing data sctructure fixed

Posted by an...@apache.org.
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 56b116d20896367e35888ee7ef882d7dc20f3573
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 6 17:02:35 2019 +0300

    [DLAB-649]: billing data sctructure fixed
---
 .../src/app/reporting/reporting.component.ts       | 28 +++++++++++-----------
 .../resources/webapp/src/assets/styles/_theme.scss |  9 ++++++-
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
index aec9914..bbf7010 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
@@ -31,14 +31,14 @@ import { DICTIONARY, ReportingConfigModel } from '../../dictionary/global.dictio
 @Component({
   selector: 'dlab-reporting',
   template: `
-  <dlab-toolbar (rebuildReport)="rebuildBillingReport()"
-                (exportReport)="exportBillingReport()"
-                (setRangeOption)="setRangeOption($event)">
-  </dlab-toolbar>
-  <dlab-reporting-grid (filterReport)="filterReport($event)" (resetRangePicker)="resetRangePicker()"></dlab-reporting-grid>
-  <footer *ngIf="data">
-    Total {{ data[DICTIONARY.billing.costTotal] }} {{ data[DICTIONARY.billing.currencyCode] }}
-  </footer>
+  <div class="base-retreat">
+    <dlab-toolbar (rebuildReport)="rebuildBillingReport()"
+                  (exportReport)="exportBillingReport()"
+                  (setRangeOption)="setRangeOption($event)">
+    </dlab-toolbar>
+    <mat-divider></mat-divider>
+    <dlab-reporting-grid (filterReport)="filterReport($event)" (resetRangePicker)="resetRangePicker()"></dlab-reporting-grid>
+  </div>
 
   `,
   styles: [`
@@ -88,7 +88,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
     this.billingReportService.getGeneralBillingData(this.reportData)
       .subscribe(data => {
         this.data = data;
-        this.reportingGrid.reportData = this.data.lines;
+        this.reportingGrid.reportData = this.data;
         this.reportingGrid.full_report = this.data.full_report;
 
         this.reportingToolbar.reportData = this.data;
@@ -176,17 +176,17 @@ export class ReportingComponent implements OnInit, OnDestroy {
     this.reportingToolbar.clearRangePicker();
   }
 
-  clearStorage(): void {
-    localStorage.removeItem('report_config');
-    localStorage.removeItem('report_period');
-  }
-
   setRangeOption(dateRangeOption: any): void {
     this.reportData.date_start = dateRangeOption.start_date;
     this.reportData.date_end = dateRangeOption.end_date;
     this.getGeneralBillingData();
   }
 
+  private clearStorage(): void {
+    localStorage.removeItem('report_config');
+    localStorage.removeItem('report_period');
+  }
+
   private getEnvironmentHealthStatus() {
     this.healthStatusService.getEnvironmentHealthStatus()
       .subscribe((result: any) => {
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 61d3ab5..7ddacce 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
@@ -502,6 +502,13 @@ mat-horizontal-stepper {
     vertical-align: top;
     padding: 10px 5px;
   }
+  tr.mat-footer-row {
+    font-weight: bold;
+  }
+  
+  // .mat-table-sticky {
+  //   border-top: 1px solid #e0e0e0;
+  // }
 }
 
 mat-tab-group.mat-tab-group {
@@ -521,4 +528,4 @@ mat-progress-bar {
   .mat-progress-bar-buffer {
     background-color: #baf0f7;
   }
-}
\ No newline at end of file
+}


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


[incubator-dlab] 03/04: [DLAB-649]: extend billing data grid; sticky elementing

Posted by an...@apache.org.
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 48500741e91f1258be680e6670ae81b66da03820
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 6 17:03:30 2019 +0300

    [DLAB-649]: extend billing data grid; sticky elementing
---
 .../resources/webapp/src/app/core/util/patterns.ts |   2 +-
 .../reporting-grid/reporting-grid.component.html   | 169 +++++++++++++++++++--
 .../reporting-grid/reporting-grid.component.scss   |  14 +-
 .../reporting-grid/reporting-grid.component.ts     |   4 +-
 4 files changed, 170 insertions(+), 19 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
index c82bb55..65996ea 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
@@ -20,5 +20,5 @@
 export const PATTERNS = {
   namePattern: '[-_a-zA-Z0-9]*[_-]*[a-zA-Z0-9]+',
   delimitersRegex: '/[-_]?/g',
-  url: '[-_a-zA-Z0-9/:.#]*[_-]*[a-zA-Z0-9]+'
+  url: '[-_a-zA-Z0-9/:.#!*();:@&=+$,/?#[]]*[_-]*[a-zA-Z0-9]+'
 }
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 b468f1e..7b7336f 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,15 +17,16 @@
   ~ under the License.
   -->
 
-<table class="dashboard_table reporting">
+<!-- <table class="dashboard_table reporting">
   <tr>
-    <th *ngFor="let column of filteringColumns"
-        ngClass="{{column.className || ''}}"
-        [hidden]="column.role && !full_report">{{ column.title }}
+    <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>
+          <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>
@@ -33,22 +34,30 @@
 
   <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>
+      <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" />
+      <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>
+      <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>
+      <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>
+      <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>
+      <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">
@@ -69,7 +78,8 @@
       <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 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>
@@ -79,11 +89,140 @@
       <td>{{ line[DICTIONARY.billing.cost] }} {{ line[DICTIONARY.billing.currencyCode] }}</td>
     </tr>
   </ng-template>
-</table>
+</table> -->
+<!--  *ngIf="full_report" -->
+
+<section class="table-wrapper">
+  <table mat-table [dataSource]="reportData?.lines" class="data-grid reporting mat-elevation-z6">
+
+    <ng-container matColumnDef="name" sticky>
+      <th mat-header-cell *matHeaderCellDef class="env_name"> Environment name </th>
+      <td mat-cell *matCellDef="let element"> {{element[DICTIONARY.billing.dlabId]}} </td>
+      <td mat-footer-cell *matFooterCellDef> Total </td>
+    </ng-container>
+
+    <ng-container matColumnDef="user">
+      <th mat-header-cell *matHeaderCellDef class="th_user"> User </th>
+      <td mat-cell *matCellDef="let element"> {{element.user}} </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef class="th_type"> Resource Type </th>
+      <td mat-cell *matCellDef="let element"> {{element[DICTIONARY.billing.resourceType]}} </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef class="th_status"> Status </th>
+      <td mat-cell *matCellDef="let element">
+        <span class="status" ngClass="{{ element.status.toLowerCase() || '' }}"
+          *ngIf="element.status">{{ element.status.toLowerCase() }}</span>
+        <span *ngIf="!element.status">N/A</span>
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="shape">
+      <th mat-header-cell *matHeaderCellDef class="th_shape"> {{ DICTIONARY.instance_size}} </th>
+      <td mat-cell *matCellDef="let element">
+        <span [outerHTML]="element[DICTIONARY.billing.instance_size] | lineBreak"></span>
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="service">
+      <th mat-header-cell *matHeaderCellDef class="service">{{ DICTIONARY.service}}</th>
+      <td mat-cell *matCellDef="let element">
+        {{ element[DICTIONARY.billing.service] }}
+        <span *ngIf="element.resource_type">({{ element.resource_type }})</span>
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
+    <ng-container matColumnDef="charge" stickyEnd>
+      <th mat-header-cell *matHeaderCellDef class="th_charges"> Service Charges </th>
+
+      <td mat-cell *matCellDef="let element">
+        {{ element[DICTIONARY.billing.cost] }} {{ element[DICTIONARY.billing.currencyCode] }}
+      </td>
+      <td mat-footer-cell *matFooterCellDef>{{ reportData[DICTIONARY.billing.costTotal] }}
+        {{ reportData[DICTIONARY.billing.currencyCode] }}</td>
+    </ng-container>
+
+    <!-- ----------------FILTER -->
+    <ng-container matColumnDef="name-filter" sticky>
+      <th mat-header-cell *matHeaderCellDef>
+        <input type="text" placeholder="Filter by environment name" class="form-control filter-field"
+          [value]="filteredReportData.dlab_id" (input)="filteredReportData.dlab_id = $event.target.value" />
+      </th>
+    </ng-container>
+    <ng-container matColumnDef="user-filter">
+      <th mat-header-cell *matHeaderCellDef>
+        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'user'" [items]="filterConfiguration.user"
+          [model]="filteredReportData.user"></multi-select-dropdown>
+      </th>
+    </ng-container>
+    <ng-container matColumnDef="type-filter">
+      <th mat-header-cell *matHeaderCellDef>
+        <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>
+        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'status'"
+          [items]="filterConfiguration.status" [model]="filteredReportData.status"></multi-select-dropdown>
+      </th>
+    </ng-container>
+    <ng-container matColumnDef="shape-filter">
+      <th mat-header-cell *matHeaderCellDef>
+        <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="[DICTIONARY.billing.instance_size]"
+          [items]="filterConfiguration[DICTIONARY.billing.instance_size]"
+          [model]="filteredReportData[DICTIONARY.billing.instance_size]"></multi-select-dropdown>
+      </th>
+    </ng-container>
+    <ng-container matColumnDef="service-filter">
+      <th mat-header-cell *matHeaderCellDef>
+        <multi-select-dropdown *ngIf="filterConfiguration" (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>
+      </th>
+    </ng-container>
+    <ng-container matColumnDef="actions" stickyEnd>
+      <th mat-header-cell *matHeaderCellDef>
+        <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>
+      </th>
+    </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>
+
+    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
+  </table>
+</section>
+<!-- 
+
+
+<footer *ngIf="data">
+Total {{ reportData[DICTIONARY.billing.costTotal] }} {{ reportData[DICTIONARY.billing.currencyCode] }}
+</footer>
+
 
 <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>
+</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 ed7a79f..1c2ced0 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,7 +17,14 @@
  * under the License.
  */
 
-.dashboard_table.reporting {
+ .table-wrapper {
+   width: 100%;
+ }
+
+.reporting {
+  width: 100%;
+  min-width: 1100px;
+  overflow: auto;
   tr {
     th {
       font-size: 11px;
@@ -26,6 +33,9 @@
       font-size: 13px; 
     }
     &.filter-row {
+      th {
+        padding: 5px;
+      }
       .filter-field {
         font-size: 13px;
       }
@@ -45,7 +55,7 @@
   .th_type {
     width: 8%;
   }
-  .th_rstatus {
+  .th_status {
     width: 8%;
   }
   .th_charges {
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 f4294a6..0aed840 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
@@ -33,12 +33,14 @@ export class ReportingGridComponent implements OnInit {
   filterConfiguration: ReportingConfigModel;
   filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '');
   collapseFilterRow: boolean = false;
-  reportData: ReportingConfigModel[];
+  reportData: any;
   isFiltered: boolean = false;
   full_report: boolean = false;
 
   @Output() filterReport: EventEmitter<{}> = new EventEmitter();
   @Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
+  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'},


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


[incubator-dlab] 01/04: [DLAB-649]: toolbar markup fixes

Posted by an...@apache.org.
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 ac68ebf17de253929f3bc2b973b3baf7f26e0620
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 6 16:59:52 2019 +0300

    [DLAB-649]: toolbar markup fixes
---
 .../resources/webapp/src/app/reporting/toolbar/toolbar.component.css   | 1 -
 .../resources/webapp/src/app/reporting/toolbar/toolbar.component.html  | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css
index d520b8a..5e82739 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.css
@@ -20,7 +20,6 @@
 section {
     display: flex;
     justify-content: space-between;
-    padding: 10px 15px;
     font-weight: 300;
 }
 section > div {
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
index c7f16d5..e425338 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/toolbar/toolbar.component.html
@@ -22,7 +22,8 @@
       <div><span>Service base name: </span><strong>{{ reportData.service_base_name }}</strong></div>
       <div *ngIf="reportData.tag_resource_id"><span>Resource tag ID: </span><strong>{{ reportData.tag_resource_id }}</strong></div>
       <div class="report-period info_color" *ngIf="availablePeriodFrom && availablePeriodTo">
-        Available reporting period from: <strong>{{ availablePeriodFrom | date }} </strong>
+        <span>Available reporting period from:</span>
+        <strong>{{ availablePeriodFrom | date }} </strong>
         to: <strong>{{ availablePeriodTo | date }}</strong>
       </div>
     </div>


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