Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
## 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/build_frontend_prs.yml vendored
View File

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

58
frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx
View File

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