Updated details billing on resources page
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
index 95ae591..1331f5f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
@@ -35,24 +35,24 @@
<mat-list>
<mat-list-item class="list-header">
<div class="resource-name ellipsis" [ngClass]="{ 'wide-name-field' : provider === 'azure' }">Name</div>
- <div class="service">{{ DICTIONARY[provider].service }}</div>
- <div class="resource-type" *ngIf="provider === 'aws'">Type</div>
- <div class="cost-currency">Cost</div>
+ <div class="service">Product</div>
+<!-- <div class="resource-type" *ngIf="provider === 'aws'">Type</div>-->
<div class="usage-date-start">Start</div>
<div class="usage-date-end">End</div>
+ <div class="cost-currency">Cost</div>
</mat-list-item>
<div class="scrolling-content" id="scrolling">
- <mat-list-item *ngFor="let item of notebook.billing">
+ <mat-list-item *ngFor="let item of notebook.billing.report_lines">
<div class="resource-name" [ngClass]="{ 'wide-name-field' : provider === 'azure' }"
- matTooltip="{{ item[DICTIONARY[provider].billing.resourceName] }}"
+ matTooltip="{{ item.resource_name }}"
matTooltipPosition="above">
- {{ item[DICTIONARY[provider].billing.resourceName] }}
+ {{ item.resource_name }}
</div>
- <div class="service">{{ item[DICTIONARY[provider].billing.service] }}</div>
- <div class="resource-type" *ngIf="provider === 'aws'">{{ item[DICTIONARY[provider].billing.type] }}</div>
- <div class="cost-currency">{{ item[DICTIONARY[provider].billing.cost] }} {{ item[DICTIONARY[provider].billing.currencyCode] }}</div>
- <div class="usage-date-start">{{ item[DICTIONARY[provider].billing.dateFrom] | date }}</div>
- <div class="usage-date-end">{{ item[DICTIONARY[provider].billing.dateTo] | date }}</div>
+ <div class="service">{{ item.product }}</div>
+<!-- <div class="resource-type" >{{ item.resourse_type }}</div>-->
+ <div class="usage-date-start">{{ item.from | date }}</div>
+ <div class="usage-date-end">{{ item.to | date }}</div>
+ <div class="cost-currency">{{ item.cost }} {{ item.currency }}</div>
</mat-list-item>
</div>
</mat-list>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
index 64ef43c..18998ea 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
@@ -43,7 +43,7 @@
.resource-name,
.usage-date-start,
.usage-date-end {
- width: 15%;
+ width: 20%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
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 70702c0..69edcc3 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
@@ -139,7 +139,7 @@
<td *ngIf="healthStatus?.billingEnabled" class="cost-col">
<span class="total_cost">{{ element.cost || 'N/A' }} {{ element.currency_code || '' }}</span>
<span (click)="element.billing && printCostDetails(element)" class="currency_details"
- [ngClass]="{ 'not-allowed' : !element.billing }">
+ [ngClass]="{ 'not-allowed' : !element.billing.report_lines.length }">
<i class="material-icons">help_outline</i>
</span>
</td>
@@ -226,7 +226,7 @@
<ng-container matColumnDef="name-filter" sticky>
<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" />
+ [value]="filterForm.name" (input)="filterForm.name = $event.target['value']" />
</th>
</ng-container>
<ng-container matColumnDef="status-filter">
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 8f3ea2c..e769dbe 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,8 +60,7 @@
project: value.project,
exploratory: value.exploratory.map(el => {
const provider = el.cloud_provider.toLowerCase();
- const billing = value.exploratoryBilling.filter(res => res.resource_name === el.exploratory_name)[0];
-
+ const billing = value.exploratoryBilling.filter(res => res.name === el.exploratory_name)[0];
return new ExploratoryModel(
provider,
el.exploratory_name,
@@ -79,9 +78,9 @@
value.shared[el.endpoint][DICTIONARY[provider].bucket_name],
value.shared[el.endpoint][DICTIONARY[provider].shared_bucket_name],
el.error_message,
- billing ? billing.cost : '',
+ billing ? billing.total_cost : '',
billing ? billing.currency : '',
- el.billing,
+ billing,
el.libs,
value.shared[el.endpoint][DICTIONARY[provider].user_storage_account_name],
value.shared[el.endpoint][DICTIONARY[provider].shared_storage_account_name],
