web/satellite: display segment count in billing
Change-Id: I472d65967c656889b8ffeb799cb46bc18b2a9b15
This commit is contained in:
parent
d441c8da15
commit
fcde92d38d
@ -22,7 +22,7 @@
|
||||
<meta name="linksharing-url" content="{{ .LinksharingURL }}">
|
||||
<meta name="storage-tb-price" content="{{ .StorageTBPrice }}">
|
||||
<meta name="egress-tb-price" content="{{ .EgressTBPrice }}">
|
||||
<meta name="object-price" content="{{ .ObjectPrice }}">
|
||||
<meta name="segment-price" content="{{ .SegmentPrice }}">
|
||||
<meta name="recaptcha-enabled" content="{{ .RecaptchaEnabled }}">
|
||||
<meta name="recaptcha-site-key" content="{{ .RecaptchaSiteKey }}">
|
||||
<meta name="new-onboarding-flow" content="{{ .NewOnboarding }}">
|
||||
|
@ -31,7 +31,7 @@ export class BucketsApiGql extends BaseGql implements BucketsApi {
|
||||
bucketName,
|
||||
storage,
|
||||
egress,
|
||||
objectCount,
|
||||
segmentCount,
|
||||
since,
|
||||
before
|
||||
},
|
||||
@ -96,7 +96,7 @@ export class BucketsApiGql extends BaseGql implements BucketsApi {
|
||||
key.bucketName,
|
||||
key.storage,
|
||||
key.egress,
|
||||
key.objectCount,
|
||||
key.segmentCount,
|
||||
new Date(key.since),
|
||||
new Date(key.before)));
|
||||
|
||||
|
@ -9,7 +9,7 @@ import {
|
||||
PaymentsApi,
|
||||
PaymentsHistoryItem,
|
||||
ProjectUsageAndCharges,
|
||||
TokenDeposit,
|
||||
TokenDeposit
|
||||
} from '@/types/payments';
|
||||
import { HttpClient } from '@/utils/httpClient';
|
||||
import { Time } from '@/utils/time';
|
||||
@ -94,11 +94,11 @@ export class PaymentsHttpApi implements PaymentsApi {
|
||||
new Date(charge.before),
|
||||
charge.egress,
|
||||
charge.storage,
|
||||
charge.objectCount,
|
||||
charge.segmentCount,
|
||||
charge.projectId,
|
||||
charge.storagePrice,
|
||||
charge.egressPrice,
|
||||
charge.objectPrice,
|
||||
charge.segmentPrice,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
@ -24,7 +24,7 @@
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__resource-container">
|
||||
<p>Storage (${{ storagePrice }} per Gigabyte-Month)</p>
|
||||
<p>Egress (${{ egressPrice }} per GB)</p>
|
||||
<p>Objects (${{ objectPrice }} per Object-Month)</p>
|
||||
<p>Segments (${{ segmentPrice }} per Segment-Month)</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__period-container">
|
||||
<p>{{ period }}</p>
|
||||
@ -34,12 +34,12 @@
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__usage-container">
|
||||
<p>{{ storageFormatted }} Gigabyte-month</p>
|
||||
<p>{{ egressAmountAndDimension }}</p>
|
||||
<p>{{ objectCountFormatted }} Object-month</p>
|
||||
<p>{{ segmentCountFormatted }} Segment-month</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__cost-container">
|
||||
<p class="price">{{ item.storagePrice | centsToDollars }}</p>
|
||||
<p class="price">{{ item.egressPrice | centsToDollars }}</p>
|
||||
<p class="price">{{ item.objectPrice | centsToDollars }}</p>
|
||||
<p class="price">{{ item.segmentPrice | centsToDollars }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,10 +119,10 @@ export default class UsageAndChargesItem extends Vue {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns formatted object count in object x month dimension.
|
||||
* Returns formatted segment count in segment x month dimension.
|
||||
*/
|
||||
public get objectCountFormatted(): string {
|
||||
return (this.item.objectCount / this.HOURS_IN_MONTH).toFixed(2);
|
||||
public get segmentCountFormatted(): string {
|
||||
return (this.item.segmentCount / this.HOURS_IN_MONTH).toFixed(2);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -140,10 +140,10 @@ export default class UsageAndChargesItem extends Vue {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns object price.
|
||||
* Returns segment price.
|
||||
*/
|
||||
public get objectPrice(): string {
|
||||
return MetaUtils.getMetaContent('object-price');
|
||||
public get segmentPrice(): string {
|
||||
return MetaUtils.getMetaContent('segment-price');
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -6,7 +6,7 @@
|
||||
<p class="container__item name" :title="itemData.name">{{ itemData.name }}</p>
|
||||
<p class="container__item">{{ itemData.storage.toFixed(2) }}GB</p>
|
||||
<p class="container__item">{{ itemData.egress.toFixed(2) }}GB</p>
|
||||
<p class="container__item">{{ itemData.objectCount.toString() }}</p>
|
||||
<p class="container__item">{{ itemData.segmentCount.toString() }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -13,7 +13,7 @@
|
||||
<p class="sort-header-container__item__name">BANDWIDTH</p>
|
||||
</div>
|
||||
<div class="sort-header-container__item">
|
||||
<p class="sort-header-container__item__name">OBJECTS</p>
|
||||
<p class="sort-header-container__item__name">SEGMENTS</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -30,10 +30,10 @@ export class Bucket {
|
||||
public name: string = '',
|
||||
public storage: number = 0,
|
||||
public egress: number = 0,
|
||||
public objectCount: number = 0,
|
||||
public segmentCount: number = 0,
|
||||
public since: Date = new Date(),
|
||||
public before: Date = new Date(),
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -48,7 +48,7 @@ export class BucketPage {
|
||||
public pageCount: number = 0,
|
||||
public currentPage: number = 0,
|
||||
public totalCount: number = 0,
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -59,5 +59,5 @@ export class BucketCursor {
|
||||
public search: string = '',
|
||||
public limit: number = 0,
|
||||
public page: number = 0,
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ export class AccountBalance {
|
||||
constructor(
|
||||
public freeCredits: number = 0,
|
||||
public coins: number = 0,
|
||||
) {}
|
||||
) { }
|
||||
|
||||
public get sum(): number {
|
||||
return this.freeCredits + this.coins;
|
||||
@ -107,14 +107,14 @@ export class CreditCard {
|
||||
public brand: string = '',
|
||||
public last4: string = '0000',
|
||||
public isDefault: boolean = false,
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
export class PaymentAmountOption {
|
||||
public constructor(
|
||||
public value: number,
|
||||
public label: string = '',
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -132,7 +132,7 @@ export class PaymentsHistoryItem {
|
||||
public readonly end: Date = new Date(),
|
||||
public readonly type: PaymentsHistoryItemType = PaymentsHistoryItemType.Invoice,
|
||||
public readonly remaining: number = 0,
|
||||
) {}
|
||||
) { }
|
||||
|
||||
public get quantity(): Amount {
|
||||
if (this.type === PaymentsHistoryItemType.Transaction) {
|
||||
@ -173,7 +173,7 @@ export class PaymentsHistoryItem {
|
||||
}
|
||||
|
||||
public get label(): string {
|
||||
switch(this.type) {
|
||||
switch (this.type) {
|
||||
case PaymentsHistoryItemType.Transaction:
|
||||
return "Checkout"
|
||||
default:
|
||||
@ -233,7 +233,7 @@ export class TokenDeposit {
|
||||
public amount: number,
|
||||
public address: string,
|
||||
public link: string,
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -244,7 +244,7 @@ class Amount {
|
||||
public currency: string = '',
|
||||
public total: number = 0,
|
||||
public received: number = 0,
|
||||
) {}
|
||||
) { }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -256,20 +256,20 @@ export class ProjectUsageAndCharges {
|
||||
public before: Date = new Date(),
|
||||
public egress: number = 0,
|
||||
public storage: number = 0,
|
||||
public objectCount: number = 0,
|
||||
public segmentCount: number = 0,
|
||||
public projectId: string = '',
|
||||
// storage shows how much cents we should pay for storing GB*Hrs.
|
||||
public storagePrice: number = 0,
|
||||
// egress shows how many cents we should pay for Egress.
|
||||
public egressPrice: number = 0,
|
||||
// objectCount shows how many cents we should pay for objects count.
|
||||
public objectPrice: number = 0) {}
|
||||
// segmentCount shows how many cents we should pay for segments count.
|
||||
public segmentPrice: number = 0) { }
|
||||
|
||||
/**
|
||||
* summary returns total price for a project in cents.
|
||||
*/
|
||||
public summary(): number {
|
||||
return this.storagePrice + this.egressPrice + this.objectPrice;
|
||||
return this.storagePrice + this.egressPrice + this.segmentPrice;
|
||||
}
|
||||
}
|
||||
|
||||
@ -290,7 +290,7 @@ export class DateRange {
|
||||
* Coupon describes a discount to the payment account of a user.
|
||||
*/
|
||||
export class Coupon {
|
||||
public constructor (
|
||||
public constructor(
|
||||
public id: string = '',
|
||||
public promoCode: string = '',
|
||||
public name: string = '',
|
||||
@ -299,7 +299,7 @@ export class Coupon {
|
||||
public addedAt: Date = new Date(),
|
||||
public expiresAt: Date | null = new Date(),
|
||||
public duration: CouponDuration = CouponDuration.Once,
|
||||
) {}
|
||||
) { }
|
||||
|
||||
/**
|
||||
* getDescription returns the amount and duration of the coupon.
|
||||
@ -315,7 +315,7 @@ export class Coupon {
|
||||
(this.expiresAt.getUTCFullYear() - this.addedAt.getFullYear()) * 12;
|
||||
dur = `for ${months} month${months !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
|
||||
return `${amtOff} off ${dur}`;
|
||||
}
|
||||
}
|
||||
@ -327,15 +327,15 @@ export enum CouponDuration {
|
||||
/**
|
||||
* Indicates that a coupon can only be applied once.
|
||||
*/
|
||||
Once = "once",
|
||||
Once = "once",
|
||||
|
||||
/**
|
||||
/**
|
||||
* Indicates that a coupon is applied every billing period for a definite amount of time.
|
||||
*/
|
||||
Repeating = "repeating",
|
||||
Repeating = "repeating",
|
||||
|
||||
/**
|
||||
/**
|
||||
* Indicates that a coupon is applied every billing period forever.
|
||||
*/
|
||||
Forever = "forever"
|
||||
Forever = "forever"
|
||||
}
|
||||
|
@ -28,7 +28,7 @@ exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__resource-container">
|
||||
<p>Storage ($0.001 per Gigabyte-Month)</p>
|
||||
<p>Egress ($0.001 per GB)</p>
|
||||
<p>Objects ($1 per Object-Month)</p>
|
||||
<p>Segments ($1 per Segment-Month)</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__period-container">
|
||||
<p>Feb 1 - Feb 1</p>
|
||||
@ -38,7 +38,7 @@ exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__usage-container">
|
||||
<p>0.00 Gigabyte-month</p>
|
||||
<p>0.10 KB</p>
|
||||
<p>0.14 Object-month</p>
|
||||
<p>0.14 Segment-month</p>
|
||||
</div>
|
||||
<div class="usage-charges-item-container__detailed-info-container__content-area__cost-container">
|
||||
<p class="price">USD $1.00</p>
|
||||
|
@ -12,7 +12,7 @@ exports[`SortingHeader.vue renders correctly 1`] = `
|
||||
<p class="sort-header-container__item__name">BANDWIDTH</p>
|
||||
</div>
|
||||
<div class="sort-header-container__item">
|
||||
<p class="sort-header-container__item__name">OBJECTS</p>
|
||||
<p class="sort-header-container__item__name">SEGMENTS</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user