GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 10:25: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],
);
const { isLoading } = useQuery(
const { isLoading, isFetching: isFetchingBillingData } = useQuery(
[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
{
queryFn: () => getUsage(activeLicense?.key || ''),
@ -332,14 +332,14 @@ export default function BillingContainer(): JSX.Element {
const BillingUsageGraphCallback = useCallback(
() =>
!isLoading ? (
!isLoading && !isFetchingBillingData ? (
<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
) : (
<Card className="empty-graph-card" bordered={false}>
<Spinner size="large" tip="Loading..." height="35vh" />
</Card>
),
[apiResponse, billAmount, isLoading],
[apiResponse, billAmount, isLoading, isFetchingBillingData],
);
return (
@ -364,9 +364,11 @@ export default function BillingContainer(): JSX.Element {
{isCloudUserVal ? 'Enterprise Cloud' : 'Enterprise'}{' '}
{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
</Typography.Title>
<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
{daysRemaining} {daysRemainingStr}
</Typography.Text>
{!isLoading && !isFetchingBillingData ? (
<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
{daysRemaining} {daysRemainingStr}
</Typography.Text>
) : null}
</Flex>
<Button
type="primary"
@ -392,7 +394,7 @@ export default function BillingContainer(): JSX.Element {
</Typography.Text>
)}
{!isLoading ? (
{!isLoading && !isFetchingBillingData ? (
<Alert
message={headerText}
type="info"
@ -407,7 +409,7 @@ export default function BillingContainer(): JSX.Element {
<BillingUsageGraphCallback />
<div className="billing-details">
{!isLoading && (
{!isLoading && !isFetchingBillingData && (
<Table
columns={columns}
dataSource={data}
@ -416,7 +418,7 @@ export default function BillingContainer(): JSX.Element {
/>
)}
{isLoading && renderTableSkeleton()}
{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
</div>
{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' },
getGraphSeries(
'#DECCBC',
'#7CEDBE',
graphCompatibleData.data.result[0]?.legend as string,
),
getGraphSeries(