GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-25 00:04:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: [SIG-573]: Fixed billing page issues (#4744)

Browse Source 
* feat: [SIG-573]: Fixed billing page issues

* feat: [SIG-573]: Fixed jest test case
This commit is contained in:
SagarRajput-7 2024-03-27 11:55:28 +05:30 committed by GitHub
parent ad1b01f225
commit dbd4363ff8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@ import useAnalytics from 'hooks/analytics/useAnalytics';
import useAxiosError from 'hooks/useAxiosError';
import useLicense from 'hooks/useLicense';
import { useNotifications } from 'hooks/useNotifications';
import { pick } from 'lodash-es';
import { isEmpty, pick } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation, useQuery } from 'react-query';
@ -149,6 +149,9 @@ export default function BillingContainer(): JSX.Element {
const processUsageData = useCallback(
(data: any): void => {
if (isEmpty(data?.payload)) {
return;
}
const {
details: { breakdown = [], billTotal },
billingPeriodStart,
@ -420,12 +423,14 @@ export default function BillingContainer(): JSX.Element {
)}
{!isLoading && !isFetchingBillingData ? (
<Alert
message={headerText}
type="info"
showIcon
style={{ marginTop: 12 }}
/>
headerText && (
<Alert
message={headerText}
type="info"
showIcon
style={{ marginTop: 12 }}
/>
)
) : (
<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
)}

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

@ -3,9 +3,7 @@ import '../../../lib/uPlotLib/uPlotLib.styles.scss';
import { Color } from '@signozhq/design-tokens';
import { Card, Flex, Typography } from 'antd';
import { getComponentForPanelType } from 'constants/panelTypes';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { PropsTypePropsMap } from 'container/GridPanelSwitch/types';
import Uplot from 'components/Uplot';
import { useIsDarkMode } from 'hooks/useDarkMode';
import { useResizeObserver } from 'hooks/useDimensions';
import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
@ -14,7 +12,7 @@ import getRenderer from 'lib/uPlotLib/utils/getRenderer';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
import { FC, useMemo, useRef } from 'react';
import { useMemo, useRef } from 'react';
import uPlot from 'uplot';
import {
@ -43,6 +41,21 @@ const paths = (
return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
};
const calculateStartEndTime = (
data: any,
): { startTime: number; endTime: number } => {
const timestamps: number[] = [];
data?.details?.breakdown?.forEach((breakdown: any) => {
breakdown?.dayWiseBreakdown?.breakdown.forEach((entry: any) => {
timestamps.push(entry?.timestamp);
});
});
const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
const startTime: number = Math.min(...timestamps, ...billingTime);
const endTime: number = Math.max(...timestamps, ...billingTime);
return { startTime, endTime };
};
export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
const { data, billAmount } = props;
const graphCompatibleData = useMemo(
@ -54,11 +67,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
const isDarkMode = useIsDarkMode();
const containerDimensions = useResizeObserver(graphRef);
const { billingPeriodStart: startTime, billingPeriodEnd: endTime } = data;
const Component = getComponentForPanelType(PANEL_TYPES.BAR) as FC<
PropsTypePropsMap[PANEL_TYPES]
>;
const { startTime, endTime } = useMemo(() => calculateStartEndTime(data), [
data,
]);
const getGraphSeries = (color: string, label: string): any => ({
drawStyle: 'bars',
@ -183,7 +194,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
</Flex>
</Flex>
<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
<Component data={chartData} options={optionsForChart} />
<Uplot data={chartData} options={optionsForChart} />
</div>
</Card>
);

14
frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
View File

@ -3,6 +3,7 @@ import { themeColors } from 'constants/theme';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import getLabelName from 'lib/getLabelName';
import { get } from 'lodash-es';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { placement } from '../placement';
@ -68,7 +69,18 @@ const generateTooltipContent = (
const dataIngested = quantity[idx];
const label = getLabelName(metric, queryName || '', legend || '');
const color = generateColor(label, themeColors.chartcolors);
let color = generateColor(label, themeColors.chartcolors);
// in case of billing graph pick colors from the series options
if (isBillingUsageGraphs) {
let clr;
series.forEach((item) => {
if (item.label === label) {
clr = get(item, '_fill');
}
});
color = clr ?? color;
}
let tooltipItemLabel = label;