web/satellite: display segment count in billing

Change-Id: I472d65967c656889b8ffeb799cb46bc18b2a9b15
This commit is contained in:
Yingrong Zhao 2021-10-20 21:04:49 -04:00 committed by Yingrong Zhao
parent d441c8da15
commit fcde92d38d
10 changed files with 43 additions and 43 deletions

View File

@ -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 }}">

View File

@ -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)));

View File

@ -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,
),
);
}

View File

@ -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');
}
/**

View File

@ -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>

View File

@ -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>

View File

@ -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,
) {}
) { }
}

View File

@ -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"
}

View File

@ -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>

View File

@ -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>
`;