From c3f53bc019ad85f2cbd08c32eced6ece5235cb8a Mon Sep 17 00:00:00 2001 From: James Kiger Date: Thu, 6 Jun 2024 13:14:26 -0400 Subject: [PATCH 1/4] Display monthly or yearly project usage depending on plan interval --- jsapp/js/account/usage/usage.api.ts | 7 +- .../account/usage/usageProjectBreakdown.tsx | 71 +++++++++++-------- 2 files changed, 46 insertions(+), 32 deletions(-) diff --git a/jsapp/js/account/usage/usage.api.ts b/jsapp/js/account/usage/usage.api.ts index 48e880a160..850a439039 100644 --- a/jsapp/js/account/usage/usage.api.ts +++ b/jsapp/js/account/usage/usage.api.ts @@ -10,7 +10,7 @@ export interface AssetUsage { results: AssetWithUsage[]; } -interface AssetWithUsage { +export interface AssetWithUsage { asset: string; uid: string; asset__name: string; @@ -18,12 +18,17 @@ interface AssetWithUsage { total_nlp_asr_seconds: number; total_nlp_mt_characters: number; }; + nlp_usage_current_year: { + total_nlp_asr_seconds: number; + total_nlp_mt_characters: number; + }; nlp_usage_all_time: { total_nlp_asr_seconds: number; total_nlp_mt_characters: number; }; storage_bytes: number; submission_count_current_month: number; + submission_count_current_year: number; submission_count_all_time: number; deployment_status: string; } diff --git a/jsapp/js/account/usage/usageProjectBreakdown.tsx b/jsapp/js/account/usage/usageProjectBreakdown.tsx index 189158bdfc..4e1901337d 100644 --- a/jsapp/js/account/usage/usageProjectBreakdown.tsx +++ b/jsapp/js/account/usage/usageProjectBreakdown.tsx @@ -5,12 +5,13 @@ import {ROUTES} from 'jsapp/js/router/routerConstants'; import AssetStatusBadge from 'jsapp/js/components/common/assetStatusBadge'; import LoadingSpinner from 'jsapp/js/components/common/loadingSpinner'; import prettyBytes from 'pretty-bytes'; -import type {AssetUsage} from 'js/account/usage/usage.api'; +import type {AssetUsage, AssetWithUsage} from 'js/account/usage/usage.api'; import {getAssetUsageForOrganization} from 'js/account/usage/usage.api'; import {USAGE_ASSETS_PER_PAGE} from 'jsapp/js/constants'; import SortableProjectColumnHeader from 'jsapp/js/projects/projectsTable/sortableProjectColumnHeader'; import type {ProjectFieldDefinition} from 'jsapp/js/projects/projectViews/constants'; import type {ProjectsTableOrder} from 'jsapp/js/projects/projectsTable/projectsTable'; +import {truncateNumber} from 'jsapp/js/utils'; import {UsageContext, useUsage} from './useUsage.hook'; import {OrganizationContext} from 'js/account/organizations/useOrganization.hook'; @@ -118,6 +119,43 @@ const ProjectBreakdown = () => { setOrder(newOrder); }; + const renderProjectRow = (project: AssetWithUsage) => { + const periodSubmissions = + usage.trackingPeriod === 'year' + ? project.submission_count_current_year + : project.submission_count_current_month; + const periodASRSeconds = + usage.trackingPeriod === 'year' + ? project.nlp_usage_current_year.total_nlp_asr_seconds + : project.nlp_usage_current_month.total_nlp_asr_seconds; + const periodMTCharacters = + usage.trackingPeriod === 'year' + ? project.nlp_usage_current_year.total_nlp_mt_characters + : project.nlp_usage_current_month.total_nlp_mt_characters; + return ( + + + + {project.asset__name} + + + {project.submission_count_all_time.toLocaleString()} + + {periodSubmissions.toLocaleString()} + + {prettyBytes(project.storage_bytes)} + {truncateNumber(periodASRSeconds / 60, 1).toLocaleString()} + {periodMTCharacters.toLocaleString()} + + + + + ); + }; + return (
@@ -164,36 +202,7 @@ const ProjectBreakdown = () => { ) : ( - {projectData.results.map((project) => ( - - - - - - - - - - ))} + {projectData.results.map((project) => renderProjectRow(project))} )}
- - {project.asset__name} - - {project.submission_count_all_time.toLocaleString()} - {project.submission_count_current_month.toLocaleString()} - {prettyBytes(project.storage_bytes)} - {(project.nlp_usage_current_month.total_nlp_asr_seconds / 60) - .toFixed(1) - .toLocaleString()} - - {project.nlp_usage_current_month.total_nlp_mt_characters.toLocaleString()} - - -
From ba6d3bdca3761b524545a88db9d1c3504a7a470b Mon Sep 17 00:00:00 2001 From: James Kiger Date: Fri, 7 Jun 2024 13:20:27 -0400 Subject: [PATCH 2/4] Add banner to indicate billing interval for project table --- .../usage/usageProjectBreakdown.module.scss | 21 ++++++++++++ .../account/usage/usageProjectBreakdown.tsx | 32 ++++++++++++++++--- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/jsapp/js/account/usage/usageProjectBreakdown.module.scss b/jsapp/js/account/usage/usageProjectBreakdown.module.scss index d361eb7283..1c1dfe1528 100644 --- a/jsapp/js/account/usage/usageProjectBreakdown.module.scss +++ b/jsapp/js/account/usage/usageProjectBreakdown.module.scss @@ -10,6 +10,27 @@ overflow-x: auto; } +.intervalBanner { + background-color: colors.$kobo-light-blue; + display: flex; + padding: 0 2%; + align-items: center; + justify-content: space-between; + min-height: 75px; + border-radius: 0.5em; + margin: 2% 0% 2% 0%; +} + +.intervalBannerContent { + display: flex; + align-items: center; + flex-basis: 100%; +} + +.intervalBannerText { + padding: 2%; +} + .root table { width: 100%; border-collapse: collapse; diff --git a/jsapp/js/account/usage/usageProjectBreakdown.tsx b/jsapp/js/account/usage/usageProjectBreakdown.tsx index 4e1901337d..1061f4a8b2 100644 --- a/jsapp/js/account/usage/usageProjectBreakdown.tsx +++ b/jsapp/js/account/usage/usageProjectBreakdown.tsx @@ -13,6 +13,8 @@ import type {ProjectFieldDefinition} from 'jsapp/js/projects/projectViews/consta import type {ProjectsTableOrder} from 'jsapp/js/projects/projectsTable/projectsTable'; import {truncateNumber} from 'jsapp/js/utils'; import {UsageContext, useUsage} from './useUsage.hook'; +import Button from 'js/components/common/button'; +import Icon from 'js/components/common/icon'; import {OrganizationContext} from 'js/account/organizations/useOrganization.hook'; type ButtonType = 'back' | 'forward'; @@ -26,6 +28,7 @@ const ProjectBreakdown = () => { results: [], }); const [order, setOrder] = useState({}); + const [showIntervalBanner, setShowIntervalBanner] = useState(true); const [loading, setLoading] = useState(true); const [usage] = useContext(UsageContext); const [organization] = useContext(OrganizationContext); @@ -60,6 +63,10 @@ const ProjectBreakdown = () => { return ; } + function dismissIntervalBanner() { + setShowIntervalBanner(false); + } + const calculateRange = (): string => { const totalProjects = parseInt(projectData.count); let startRange = (currentPage - 1) * USAGE_ASSETS_PER_PAGE + 1; @@ -158,6 +165,25 @@ const ProjectBreakdown = () => { return (
+ {showIntervalBanner && ( +
+
+ +
+ {t( + 'Submissions, transcription minutes, and translation characters reflect usage for the current ##INTERVAL## based on your plan settings.' + ).replace('##INTERVAL##', usage.trackingPeriod)} +
+
+
+ )} @@ -171,11 +197,7 @@ const ProjectBreakdown = () => { /> - + From 3f49ea720327029c6e2735dee51698a7b712bcad Mon Sep 17 00:00:00 2001 From: James Kiger Date: Fri, 7 Jun 2024 13:37:40 -0400 Subject: [PATCH 3/4] Switch out ternary for key access --- .../account/usage/usageProjectBreakdown.tsx | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/jsapp/js/account/usage/usageProjectBreakdown.tsx b/jsapp/js/account/usage/usageProjectBreakdown.tsx index 1061f4a8b2..46ce208d6a 100644 --- a/jsapp/js/account/usage/usageProjectBreakdown.tsx +++ b/jsapp/js/account/usage/usageProjectBreakdown.tsx @@ -128,17 +128,21 @@ const ProjectBreakdown = () => { const renderProjectRow = (project: AssetWithUsage) => { const periodSubmissions = - usage.trackingPeriod === 'year' - ? project.submission_count_current_year - : project.submission_count_current_month; - const periodASRSeconds = - usage.trackingPeriod === 'year' - ? project.nlp_usage_current_year.total_nlp_asr_seconds - : project.nlp_usage_current_month.total_nlp_asr_seconds; + project[ + `submission_count_current_${usage.trackingPeriod}` + ].toLocaleString(); + + const periodASRSeconds = truncateNumber( + project[`nlp_usage_current_${usage.trackingPeriod}`] + .total_nlp_asr_seconds / 60, + 1 + ).toLocaleString(); + const periodMTCharacters = - usage.trackingPeriod === 'year' - ? project.nlp_usage_current_year.total_nlp_mt_characters - : project.nlp_usage_current_month.total_nlp_mt_characters; + project[ + `nlp_usage_current_${usage.trackingPeriod}` + ].total_nlp_mt_characters.toLocaleString(); + return ( - - + + From b8284eca70fcd88adc93e0834bd1ffd5193b378c Mon Sep 17 00:00:00 2001 From: James Kiger Date: Mon, 10 Jun 2024 09:30:39 -0400 Subject: [PATCH 4/4] Fix banner color --- jsapp/js/account/usage/usageProjectBreakdown.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jsapp/js/account/usage/usageProjectBreakdown.module.scss b/jsapp/js/account/usage/usageProjectBreakdown.module.scss index 1c1dfe1528..0f7d92206b 100644 --- a/jsapp/js/account/usage/usageProjectBreakdown.module.scss +++ b/jsapp/js/account/usage/usageProjectBreakdown.module.scss @@ -11,7 +11,7 @@ } .intervalBanner { - background-color: colors.$kobo-light-blue; + background-color: colors.$kobo-bg-blue; display: flex; padding: 0 2%; align-items: center;
{t('Submissions (Total)')} - {usage.trackingPeriod === 'year' - ? t('Submissions (This year)') - : t('Submissions (This month)')} - {t('Submissions')} {t('Data storage')} {t('Transcript minutes')} {t('Translation characters')}
@@ -151,11 +155,11 @@ const ProjectBreakdown = () => { {project.submission_count_all_time.toLocaleString()} - {periodSubmissions.toLocaleString()} + {periodSubmissions} {prettyBytes(project.storage_bytes)}{truncateNumber(periodASRSeconds / 60, 1).toLocaleString()}{periodMTCharacters.toLocaleString()}{periodASRSeconds}{periodMTCharacters}