Skip to content

Commit 05fbb83

Browse files
astandrikastandrik
committed
fix: review issues
1 parent a3d55aa commit 05fbb83

File tree

3 files changed

+107
-83
lines changed

3 files changed

+107
-83
lines changed

‎src/components/QueriesActivityBar/QueriesActivityBar.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,6 @@
9090
}
9191
}
9292

93-
&__charts {
94-
padding: 0 var(--g-spacing-4);
95-
}
96-
9793
&__chart-container {
9894
display: flex;
9995
flex: 1;

‎src/components/QueriesActivityBar/QueriesActivityBar.tsx‎

Lines changed: 19 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,12 @@ import {chartApi} from '../MetricChart/reducer';
1818
import type {ChartDataStatus} from '../MetricChart/types';
1919

2020
import i18n from './i18n';
21+
import {calculateLatency, calculateQueriesPerSecond} from './utils';
2122

2223
import './QueriesActivityBar.scss';
2324

2425
const b = cn('queries-activity-bar');
2526

26-
const FALLBACK_VALUE = 0.000001;
27-
2827
interface QueriesActivityBarProps {
2928
tenantName: string;
3029
}
@@ -46,17 +45,16 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
4645
const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
4746

4847
// Fetch running queries
49-
const {data: runningQueriesData, error: runningQueriesError} =
50-
topQueriesApi.useGetRunningQueriesQuery(
51-
{
52-
database: tenantName,
53-
filters: {},
54-
},
55-
{pollingInterval: autoRefreshInterval},
56-
);
48+
const {data: runningQueriesData} = topQueriesApi.useGetRunningQueriesQuery(
49+
{
50+
database: tenantName,
51+
filters: {},
52+
},
53+
{pollingInterval: autoRefreshInterval},
54+
);
5755

5856
// Fetch queries per second data for header metrics
59-
const {data: queriesPerSecData, error: queriesPerSecError} = chartApi.useGetChartDataQuery(
57+
const {data: queriesPerSecData} = chartApi.useGetChartDataQuery(
6058
{
6159
database: tenantName,
6260
metrics: [{target: 'queries.requests'}],
@@ -67,85 +65,27 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
6765
);
6866

6967
// Fetch latency data for header metrics
70-
const {currentData: latencyData, error: latencyError} = chartApi.useGetChartDataQuery(
68+
const {currentData: latencyData} = chartApi.useGetChartDataQuery(
7169
{
7270
database: tenantName,
7371
metrics: [{target: 'queries.latencies.p99'}],
74-
timeFrame: queriesTimeFrame,
72+
timeFrame: latenciesTimeFrame,
7573
maxDataPoints: 30,
7674
},
7775
{pollingInterval: autoRefreshInterval},
7876
);
7977

80-
// Debug logging
81-
if (runningQueriesError) {
82-
console.error('Running queries error:', runningQueriesError);
83-
}
84-
if (queriesPerSecError) {
85-
console.error('Queries per second error:', queriesPerSecError);
86-
}
87-
if (latencyError) {
88-
console.error('Latency error:', latencyError);
89-
}
90-
9178
const runningQueriesCount = runningQueriesData?.resultSets?.[0]?.result?.length || 0;
9279

93-
// Calculate queries per second from chart data
94-
const calculateQueriesPerSecond = () => {
95-
if (!queriesPerSecData?.metrics?.[0]?.data) {
96-
return {
97-
value: FALLBACK_VALUE.toFixed(0),
98-
trend: {value: FALLBACK_VALUE, direction: 'up' as const},
99-
};
100-
}
101-
102-
const data = queriesPerSecData.metrics[0].data;
103-
const current = (data[data.length - 1] as number) || FALLBACK_VALUE;
104-
const previous = (data[data.length - 2] as number) || FALLBACK_VALUE;
105-
106-
let trend: {value: number; direction: 'up' | 'down'};
107-
if (previous > 0) {
108-
const change = current - previous;
109-
trend = {
110-
value: Math.abs(change) || FALLBACK_VALUE,
111-
direction: change >= 0 ? 'up' : 'down',
112-
};
113-
} else {
114-
trend = {value: FALLBACK_VALUE, direction: 'up'};
115-
}
116-
117-
return {value: current.toFixed(0), trend};
118-
};
119-
120-
// Calculate latency
121-
const calculateLatency = () => {
122-
if (!latencyData?.metrics?.[0]?.data) {
123-
return {
124-
value: FALLBACK_VALUE.toFixed(1),
125-
trend: {value: FALLBACK_VALUE, direction: 'up' as const},
126-
};
127-
}
128-
129-
const data = latencyData.metrics[0].data;
130-
const current = (data[data.length - 1] as number) || FALLBACK_VALUE;
131-
const previous = (data[data.length - 2] as number) || FALLBACK_VALUE;
132-
133-
let trend: {value: number; direction: 'up' | 'down'};
134-
if (previous > 0) {
135-
const change = current - previous;
136-
trend = {
137-
value: Math.abs(change) || FALLBACK_VALUE,
138-
direction: change >= 0 ? 'up' : 'down',
139-
};
140-
} else {
141-
trend = {value: FALLBACK_VALUE, direction: 'up'};
142-
}
143-
144-
return {value: current.toFixed(1), trend};
145-
};
80+
const qps = React.useMemo(
81+
() => calculateQueriesPerSecond(queriesPerSecData?.metrics?.[0]?.data),
82+
[queriesPerSecData?.metrics?.[0]?.data],
83+
);
14684

147-
const qps = calculateQueriesPerSecond();
148-
const latency = calculateLatency();
85+
const latency = React.useMemo(
86+
() => calculateLatency(latencyData?.metrics?.[0]?.data),
87+
[latencyData?.metrics?.[0]?.data],
88+
);
14989

15090
// Calculate unique applications and users
15191
const uniqueApplications = React.useMemo(() => {

‎src/components/QueriesActivityBar/utils.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const FALLBACK_VALUE = 0.000001;
2+
3+
export enum TrendDirection {
4+
Up = 'up',
5+
Down = 'down',
6+
}
7+
8+
export interface MetricTrend {
9+
value: number;
10+
direction: TrendDirection;
11+
}
12+
13+
export interface MetricCalculationResult {
14+
value: string;
15+
trend: MetricTrend;
16+
}
17+
18+
/**
19+
* Calculate queries per second metrics from chart data
20+
*/
21+
export const calculateQueriesPerSecond = (data?: (number | null)[]): MetricCalculationResult => {
22+
if (!data) {
23+
return {
24+
value: FALLBACK_VALUE.toFixed(0),
25+
trend: {value: FALLBACK_VALUE, direction: TrendDirection.Up},
26+
};
27+
}
28+
29+
// Safe array access with length validation
30+
if (data.length === 0) {
31+
return {
32+
value: FALLBACK_VALUE.toFixed(0),
33+
trend: {value: FALLBACK_VALUE, direction: TrendDirection.Up},
34+
};
35+
}
36+
37+
const current = data[data.length - 1] ?? FALLBACK_VALUE;
38+
const previous = data.length >= 2 ? (data[data.length - 2] ?? FALLBACK_VALUE) : FALLBACK_VALUE;
39+
40+
let trend: MetricTrend;
41+
if (previous > 0) {
42+
const change = current - previous;
43+
trend = {
44+
value: Math.abs(change) || FALLBACK_VALUE,
45+
direction: change >= 0 ? TrendDirection.Up : TrendDirection.Down,
46+
};
47+
} else {
48+
trend = {value: FALLBACK_VALUE, direction: TrendDirection.Up};
49+
}
50+
51+
return {value: current.toFixed(0), trend};
52+
};
53+
54+
/**
55+
* Calculate latency metrics from chart data
56+
*/
57+
export const calculateLatency = (data?: (number | null)[]): MetricCalculationResult => {
58+
if (!data) {
59+
return {
60+
value: FALLBACK_VALUE.toFixed(1),
61+
trend: {value: FALLBACK_VALUE, direction: TrendDirection.Up},
62+
};
63+
}
64+
65+
// Safe array access with length validation
66+
if (data.length === 0) {
67+
return {
68+
value: FALLBACK_VALUE.toFixed(1),
69+
trend: {value: FALLBACK_VALUE, direction: TrendDirection.Up},
70+
};
71+
}
72+
73+
const current = data[data.length - 1] ?? FALLBACK_VALUE;
74+
const previous = data.length >= 2 ? (data[data.length - 2] ?? FALLBACK_VALUE) : FALLBACK_VALUE;
75+
76+
let trend: MetricTrend;
77+
if (previous > 0) {
78+
const change = current - previous;
79+
trend = {
80+
value: Math.abs(change) || FALLBACK_VALUE,
81+
direction: change >= 0 ? TrendDirection.Up : TrendDirection.Down,
82+
};
83+
} else {
84+
trend = {value: FALLBACK_VALUE, direction: TrendDirection.Up};
85+
}
86+
87+
return {value: current.toFixed(1), trend};
88+
};

0 commit comments

Comments
 (0)