fix: visual fallback

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -23,6 +23,8 @@ import './QueriesActivityBar.scss';
 
 const b = cn('queries-activity-bar');
 
+const FALLBACK_VALUE = 0.000001;
+
 interface QueriesActivityBarProps {
     tenantName: string;
 }
@@ -44,7 +46,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
 
     // Fetch running queries
-    const {currentData: runningQueriesData, error: runningQueriesError} =
+    const {data: runningQueriesData, error: runningQueriesError} =
         topQueriesApi.useGetRunningQueriesQuery(
             {
                 database: tenantName,
@@ -54,16 +56,15 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
         );
 
     // Fetch queries per second data for header metrics
-    const {currentData: queriesPerSecData, error: queriesPerSecError} =
-        chartApi.useGetChartDataQuery(
-            {
-                database: tenantName,
-                metrics: [{target: 'queries.requests'}],
-                timeFrame: queriesTimeFrame,
-                maxDataPoints: 30,
-            },
-            {pollingInterval: autoRefreshInterval},
-        );
+    const {data: queriesPerSecData, error: queriesPerSecError} = chartApi.useGetChartDataQuery(
+        {
+            database: tenantName,
+            metrics: [{target: 'queries.requests'}],
+            timeFrame: queriesTimeFrame,
+            maxDataPoints: 30,
+        },
+        {pollingInterval: autoRefreshInterval},
+    );
 
     // Fetch latency data for header metrics
     const {currentData: latencyData, error: latencyError} = chartApi.useGetChartDataQuery(
@@ -92,47 +93,57 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     // Calculate queries per second from chart data
     const calculateQueriesPerSecond = () => {
         if (!queriesPerSecData?.metrics?.[0]?.data) {
-            return {value: '0', trend: undefined};
+            return {
+                value: FALLBACK_VALUE.toFixed(0),
+                trend: {value: FALLBACK_VALUE, direction: 'up' as const},
+            };
         }
 
         const data = queriesPerSecData.metrics[0].data;
-        const current = (data[data.length - 1] as number) || 0;
-        const previous = (data[data.length - 2] as number) || 0;
+        const current = (data[data.length - 1] as number) || FALLBACK_VALUE;
+        const previous = (data[data.length - 2] as number) || FALLBACK_VALUE;
 
-        let trend: {value: number; direction: 'up' | 'down'} | undefined;
+        let trend: {value: number; direction: 'up' | 'down'};
         if (previous > 0) {
             const change = current - previous;
             trend = {
-                value: Math.abs(change),
+                value: Math.abs(change) || FALLBACK_VALUE,
                 direction: change >= 0 ? 'up' : 'down',
             };
+        } else {
+            trend = {value: FALLBACK_VALUE, direction: 'up'};
         }
 
         // Convert to per second rate
-        const perSecond = Math.round((current / 60) * 100) / 100;
+        const perSecond = Math.round((current / 60) * 100) / 100 || FALLBACK_VALUE;
         return {value: perSecond.toFixed(0), trend};
     };
 
     // Calculate latency
     const calculateLatency = () => {
         if (!latencyData?.metrics?.[0]?.data) {
-            return {value: '0', trend: undefined};
+            return {
+                value: FALLBACK_VALUE.toFixed(1),
+                trend: {value: FALLBACK_VALUE, direction: 'up' as const},
+            };
         }
 
         const data = latencyData.metrics[0].data;
-        const current = (data[data.length - 1] as number) || 0;
-        const previous = (data[data.length - 2] as number) || 0;
+        const current = (data[data.length - 1] as number) || FALLBACK_VALUE;
+        const previous = (data[data.length - 2] as number) || FALLBACK_VALUE;
 
-        let trend: {value: number; direction: 'up' | 'down'} | undefined;
+        let trend: {value: number; direction: 'up' | 'down'};
         if (previous > 0) {
             const change = current - previous;
             trend = {
-                value: Math.abs(change) / 1000, // Convert to ms
+                value: Math.abs(change) / 1000 || FALLBACK_VALUE, // Convert to ms
                 direction: change >= 0 ? 'up' : 'down',
             };
+        } else {
+            trend = {value: FALLBACK_VALUE, direction: 'up'};
         }
 
-        const valueMs = current / 1000; // Convert to ms
+        const valueMs = current / 1000 || FALLBACK_VALUE; // Convert to ms
         return {value: valueMs.toFixed(1), trend};
     };
 
@@ -228,7 +239,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                                         theme="clear"
                                         size="s"
                                         icon={<Icon data={Rocket} size={14} />}
-                                        value={formatTrendValue(qps.trend?.value || 0)}
+                                        value={formatTrendValue(qps.trend.value)}
                                     >
                                         {i18n('per-sec', {count: qps.value})}
                                     </Label>
@@ -237,7 +248,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                                         theme="clear"
                                         size="s"
                                         icon={<Icon data={Clock} size={14} />}
-                                        value={formatTrendValue(latency.trend?.value || 0)}
+                                        value={formatTrendValue(latency.trend.value)}
                                     >
                                         {i18n('ms', {time: latency.value})}
                                     </Label>