diff --git a/dashboard/src/components/TabRegion.tsx b/dashboard/src/components/TabRegion.tsx index 6df49ecb3bc..98a5f508d38 100644 --- a/dashboard/src/components/TabRegion.tsx +++ b/dashboard/src/components/TabRegion.tsx @@ -1,13 +1,13 @@ import React, { Component } from "react"; import styled from "styled-components"; -import TabSelector from "./TabSelector"; import Loading from "./Loading"; +import TabSelector from "./TabSelector"; -export interface TabOption { +export type TabOption = { label: string; value: string; -} +}; type PropsType = { options: TabOption[]; @@ -31,7 +31,7 @@ export default class TabRegion extends Component { : ""; componentDidUpdate(prevProps: PropsType) { - let { options, currentTab } = this.props; + const { options, currentTab } = this.props; if (prevProps.options !== options) { if (options.filter((x) => x.value === currentTab).length === 0) { this.props.setCurrentTab(this.defaultTab()); @@ -50,7 +50,9 @@ export default class TabRegion extends Component { options={this.props.options} color={this.props.color} currentTab={this.props.currentTab} - setCurrentTab={(x: string) => this.props.setCurrentTab(x)} + setCurrentTab={(x: string) => { + this.props.setCurrentTab(x); + }} addendum={this.props.addendum} /> diff --git a/dashboard/src/main/home/project-settings/BillingPage.tsx b/dashboard/src/main/home/project-settings/BillingPage.tsx index a02763f6cc1..bea8c14b5af 100644 --- a/dashboard/src/main/home/project-settings/BillingPage.tsx +++ b/dashboard/src/main/home/project-settings/BillingPage.tsx @@ -18,7 +18,6 @@ import Text from "components/porter/Text"; import { checkIfProjectHasPayment, useCustomerPlan, - useCustomerUsage, usePaymentMethods, usePorterCredits, useReferralDetails, @@ -31,7 +30,6 @@ import gift from "assets/gift.svg"; import trashIcon from "assets/trash.png"; import BillingModal from "../modals/BillingModal"; -import Bars from "./Bars"; dayjs.extend(relativeTime); @@ -55,45 +53,10 @@ function BillingPage(): JSX.Element { const { refetchPaymentEnabled } = checkIfProjectHasPayment(); - const { usage } = useCustomerUsage("day", true); - - const processedData = useMemo(() => { - const before = usage; - const resultMap = new Map(); - - before?.forEach( - (metric: { - metric_name: string; - usage_metrics: Array<{ starting_on: string; value: number }>; - }) => { - const metricName = metric.metric_name.toLowerCase().replace(" ", "_"); - metric.usage_metrics.forEach(({ starting_on, value }) => { - if (resultMap.has(starting_on)) { - resultMap.get(starting_on)[metricName] = value; - } else { - resultMap.set(starting_on, { - starting_on: new Date(starting_on).toLocaleDateString("en-US", { - month: "short", - day: "numeric", - }), - [metricName]: value, - }); - } - }); - } - ); - - // Convert the map to an array of values - const x = Array.from(resultMap.values()); - return x; - }, [usage]); - const formatCredits = (credits: number): string => { return (credits / 100).toFixed(2); }; - const readableDate = (s: string): string => new Date(s).toLocaleDateString(); - const onCreate = async (): Promise => { await refetchPaymentMethods({ throwOnError: false, cancelRefetch: false }); setShouldCreate(false); @@ -248,50 +211,6 @@ function BillingPage(): JSX.Element { - {currentProject?.metronome_enabled && plan && plan.plan_name !== "" ? ( - <> - Current usage - - - View the current usage of this billing period. - - - {usage?.length && - usage.length > 0 && - usage[0].usage_metrics.length > 0 ? ( - - - - - - - - - - ) : ( -
- - No usage data available for this billing period. - -
- )} - - - ) : ( - This project does not have an active billing plan. - )} {showReferralModal && ( { @@ -330,7 +249,8 @@ function BillingPage(): JSX.Element { You have referred{" "} - {referralDetails ? referralDetails.referral_count : "?"}/{referralDetails?.max_allowed_referrals} users. + {referralDetails ? referralDetails.referral_count : "?"}/ + {referralDetails?.max_allowed_referrals} users. )} @@ -359,17 +279,6 @@ const ReferralCode = styled.div` width: fit-content; `; -const Flex = styled.div` - display: flex; - flex-wrap: wrap; -`; - -const BarWrapper = styled.div` - flex: 1; - height: 300px; - min-width: 450px; -`; - const I = styled.i` font-size: 16px; margin-right: 8px; diff --git a/dashboard/src/main/home/project-settings/ProjectSettings.tsx b/dashboard/src/main/home/project-settings/ProjectSettings.tsx index 2f8dd9b9c76..74ab0f981af 100644 --- a/dashboard/src/main/home/project-settings/ProjectSettings.tsx +++ b/dashboard/src/main/home/project-settings/ProjectSettings.tsx @@ -29,6 +29,7 @@ import BillingPage from "./BillingPage"; import InvitePage from "./InviteList"; import Metadata from "./Metadata"; import ProjectDeleteConsent from "./ProjectDeleteConsent"; +import UsagePage from "./UsagePage"; type PropsType = RouteComponentProps & WithAuthProps & {}; type ValidationError = { @@ -95,6 +96,16 @@ function ProjectSettings(props: any) { }); } + if ( + currentProject?.billing_enabled && + currentProject?.metronome_enabled + ) { + tabOpts.push({ + value: "usage", + label: "Usage", + }); + } + tabOpts.push({ value: "additional-settings", label: "Additional settings", @@ -171,7 +182,9 @@ function ProjectSettings(props: any) { } else if (currentTab === "api-tokens") { return ; } else if (currentTab === "billing") { - return ; + return ; + } else if (currentTab === "usage") { + return ; } else { return ( <> diff --git a/dashboard/src/main/home/project-settings/UsagePage.tsx b/dashboard/src/main/home/project-settings/UsagePage.tsx new file mode 100644 index 00000000000..b877b988653 --- /dev/null +++ b/dashboard/src/main/home/project-settings/UsagePage.tsx @@ -0,0 +1,138 @@ +import React, { useContext, useMemo, useState } from "react"; +import styled from "styled-components"; + +import Fieldset from "components/porter/Fieldset"; +import Select from "components/porter/Select"; +import Spacer from "components/porter/Spacer"; +import Text from "components/porter/Text"; +import { useCustomerUsage } from "lib/hooks/useStripe"; + +import Bars from "./Bars"; + +function UsagePage(): JSX.Element { + const [currentPeriod, setCurrentPeriod] = useState("4-17-24"); + + const { usage } = useCustomerUsage("day", true); + + const processedData = useMemo(() => { + const before = usage; + const resultMap = new Map(); + + before?.forEach( + (metric: { + metric_name: string; + usage_metrics: Array<{ starting_on: string; value: number }>; + }) => { + const metricName = metric.metric_name.toLowerCase().replace(" ", "_"); + metric.usage_metrics.forEach(({ starting_on, value }) => { + if (resultMap.has(starting_on)) { + resultMap.get(starting_on)[metricName] = value; + } else { + resultMap.set(starting_on, { + starting_on: new Date(starting_on).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }), + [metricName]: value, + }); + } + }); + } + ); + + // Convert the map to an array of values + const x = Array.from(resultMap.values()); + return x; + }, [usage]); + + return ( + <> +