1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-27 00:19:39 +01:00

fix: attempt a react friendly fix of summing (#7151)

## About the changes

Summing on Billing page got a little wonky after changing how the
summing worked when the estimation flag is off. This attempts to return
it to previous way of showing numbers when flag is off

If you go directly to the billing page it will not add user calculations
to the total. If you however interact with the UI, like change tabs back
and forth, it will suddenly show the correct sum:


![image](https://github.com/Unleash/unleash/assets/707867/af6eeddf-be3f-42ae-a588-f57c30d739ca)


![image](https://github.com/Unleash/unleash/assets/707867/b4a0b832-a550-4e87-aa69-7b27f96d3beb)

---------

Co-authored-by: Nuno Góis <github@nunogois.com>
Co-authored-by: Gastón Fournier <gaston@getunleash.io>
This commit is contained in:
David Leek 2024-05-28 09:08:23 +02:00 committed by GitHub
parent 73f0cb6180
commit bc6b23c740
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 28 deletions

View File

@ -8,6 +8,7 @@ on:
jobs: jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: build
defaults: defaults:
run: run:
working-directory: frontend working-directory: frontend

View File

@ -1,5 +1,5 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { useState, useEffect } from 'react'; import { useMemo } from 'react';
import { Alert, Divider, Grid, styled, Typography } from '@mui/material'; import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import CheckIcon from '@mui/icons-material/Check'; import CheckIcon from '@mui/icons-material/Check';
@ -16,9 +16,9 @@ import { GridRow } from 'component/common/GridRow/GridRow';
import { GridCol } from 'component/common/GridCol/GridCol'; import { GridCol } from 'component/common/GridCol/GridCol';
import { Badge } from 'component/common/Badge/Badge'; import { Badge } from 'component/common/Badge/Badge';
import { GridColLink } from './GridColLink/GridColLink'; import { GridColLink } from './GridColLink/GridColLink';
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
import { useTrafficDataEstimation } from 'hooks/useTrafficData'; import { useTrafficDataEstimation } from 'hooks/useTrafficData';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
const StyledPlanBox = styled('aside')(({ theme }) => ({ const StyledPlanBox = styled('aside')(({ theme }) => ({
padding: theme.spacing(2.5), padding: theme.spacing(2.5),
@ -78,9 +78,9 @@ interface IBillingPlanProps {
const proPlanIncludedRequests = 53_000_000; const proPlanIncludedRequests = 53_000_000;
export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => { export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
const { users } = useUsers(); const { users, loading } = useUsers();
const expired = trialHasExpired(instanceStatus); const expired = trialHasExpired(instanceStatus);
const { uiConfig, isPro } = useUiConfig(); const { isPro } = useUiConfig();
const { const {
currentPeriod, currentPeriod,
@ -104,37 +104,39 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
const planPrice = price[instanceStatus.plan]; const planPrice = price[instanceStatus.plan];
const seats = instanceStatus.seats ?? 5; const seats = instanceStatus.seats ?? 5;
const freeAssigned = Math.min(eligibleUsers.length, seats); const freeAssigned = Math.min(eligibleUsers.length, seats);
const paidAssigned = eligibleUsers.length - freeAssigned; const paidAssigned = eligibleUsers.length - freeAssigned;
const paidAssignedPrice = price.user * paidAssigned; const paidAssignedPrice = price.user * paidAssigned;
const finalPrice = planPrice + paidAssignedPrice;
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
const [totalCost, setTotalCost] = useState(0);
const flagEnabled = useUiFlag('displayTrafficDataUsage');
const [overageCost, setOverageCost] = useState(0);
const displayTrafficDataUsageEnabled = useUiFlag('displayTrafficDataUsage');
const includedTraffic = isPro() ? proPlanIncludedRequests : 0; const includedTraffic = isPro() ? proPlanIncludedRequests : 0;
const traffic = useInstanceTrafficMetrics(currentPeriod.key); const traffic = useInstanceTrafficMetrics(currentPeriod.key);
useEffect(() => { const overageCost = useMemo(() => {
if (flagEnabled && includedTraffic > 0) { if (!displayTrafficDataUsageEnabled || !includedTraffic) {
return 0;
}
const trafficData = toChartData( const trafficData = toChartData(
getDayLabels(currentPeriod.dayCount), getDayLabels(currentPeriod.dayCount),
traffic, traffic,
endpointsInfo, endpointsInfo,
); );
const totalTraffic = toTrafficUsageSum(trafficData); const totalTraffic = toTrafficUsageSum(trafficData);
const overageCostCalc = calculateOverageCost( return calculateOverageCost(totalTraffic, includedTraffic);
totalTraffic, }, [
displayTrafficDataUsageEnabled,
includedTraffic, includedTraffic,
); traffic,
setOverageCost(overageCostCalc); currentPeriod,
setTotalCost(finalPrice + overageCostCalc); endpointsInfo,
} else { ]);
setTotalCost(finalPrice);
} const totalCost = planPrice + paidAssignedPrice + overageCost;
}, [traffic]);
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
if (loading) return null;
return ( return (
<Grid item xs={12} md={7}> <Grid item xs={12} md={7}>
@ -256,7 +258,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
</GridCol> </GridCol>
</GridRow> </GridRow>
<ConditionallyRender <ConditionallyRender
condition={flagEnabled && overageCost > 0} condition={overageCost > 0}
show={ show={
<GridRow> <GridRow>
<GridCol vertical> <GridCol vertical>