GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 14:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added isFetching condition and changed series color

Browse Source
This commit is contained in:
Sagar Rajput 2024-03-13 17:50:17 +05:30
parent 44dc55c5ac
commit 6adeef7e70
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/container/BillingContainer/BillingContainer.tsx
View File

@ -186,7 +186,7 @@ export default function BillingContainer(): JSX.Element {
[licensesData?.payload?.onTrial], [licensesData?.payload?.onTrial],
); );
const { isLoading } = useQuery( const { isLoading, isFetching: isFetchingBillingData } = useQuery(
[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId], [REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
{ {
queryFn: () => getUsage(activeLicense?.key || ''), queryFn: () => getUsage(activeLicense?.key || ''),
@ -332,14 +332,14 @@ export default function BillingContainer(): JSX.Element {
const BillingUsageGraphCallback = useCallback( const BillingUsageGraphCallback = useCallback(
() => () =>
!isLoading ? ( !isLoading && !isFetchingBillingData ? (
<BillingUsageGraph data={apiResponse} billAmount={billAmount} /> <BillingUsageGraph data={apiResponse} billAmount={billAmount} />
) : ( ) : (
<Card className="empty-graph-card" bordered={false}> <Card className="empty-graph-card" bordered={false}>
<Spinner size="large" tip="Loading..." height="35vh" /> <Spinner size="large" tip="Loading..." height="35vh" />
</Card> </Card>
), ),
[apiResponse, billAmount, isLoading], [apiResponse, billAmount, isLoading, isFetchingBillingData],
); );
return ( return (
@ -364,9 +364,11 @@ export default function BillingContainer(): JSX.Element {
{isCloudUserVal ? 'Enterprise Cloud' : 'Enterprise'}{' '} {isCloudUserVal ? 'Enterprise Cloud' : 'Enterprise'}{' '}
{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''} {isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
</Typography.Title> </Typography.Title>
<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}> {!isLoading && !isFetchingBillingData ? (
{daysRemaining} {daysRemainingStr} <Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
</Typography.Text> {daysRemaining} {daysRemainingStr}
</Typography.Text>
) : null}
</Flex> </Flex>
<Button <Button
type="primary" type="primary"
@ -392,7 +394,7 @@ export default function BillingContainer(): JSX.Element {
</Typography.Text> </Typography.Text>
)} )}
{!isLoading ? ( {!isLoading && !isFetchingBillingData ? (
<Alert <Alert
message={headerText} message={headerText}
type="info" type="info"
@ -407,7 +409,7 @@ export default function BillingContainer(): JSX.Element {
<BillingUsageGraphCallback /> <BillingUsageGraphCallback />
<div className="billing-details"> <div className="billing-details">
{!isLoading && ( {!isLoading && !isFetchingBillingData && (
<Table <Table
columns={columns} columns={columns}
dataSource={data} dataSource={data}
@ -416,7 +418,7 @@ export default function BillingContainer(): JSX.Element {
/> />
)} )}
{isLoading && renderTableSkeleton()} {(isLoading || isFetchingBillingData) && renderTableSkeleton()}
</div> </div>
{isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription && ( {isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription && (

2
frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
View File

@ -81,7 +81,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
() => [ () => [
{ label: 'Timestamp', stroke: 'purple' }, { label: 'Timestamp', stroke: 'purple' },
getGraphSeries( getGraphSeries(
'#DECCBC', '#7CEDBE',
graphCompatibleData.data.result[0]?.legend as string, graphCompatibleData.data.result[0]?.legend as string,
), ),
getGraphSeries( getGraphSeries(