fix: nanofix

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -40,6 +40,9 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     const queriesChartConfig = defaultDashboardConfig[0]; // Queries per second chart
     const latenciesChartConfig = defaultDashboardConfig[1]; // Transaction latencies chart
 
+    // Refetch data only if charts successfully loaded
+    const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
+
     // Fetch running queries
     const {currentData: runningQueriesData, error: runningQueriesError} =
         topQueriesApi.useGetRunningQueriesQuery(
@@ -162,9 +165,9 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
         const path = getTenantPath({
             ...queryParams,
             [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+            queryMode: 'running',
         });
-        const url = `${path}${path.includes('?') ? '&' : '?'}queryMode=running`;
-        history.push(url);
+        history.push(path);
     };
 
     const handleChartDataStatusChange = React.useCallback((status: ChartDataStatus) => {
@@ -298,14 +301,17 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                 TODO: Remove this workaround once the upstream issue is fixed
             */}
             {expanded && (
-                <div className={b('charts')}>
+                <div
+                    className={b('charts')}
+                    style={{display: areChartsHidden ? 'none' : undefined}}
+                >
                     <div className={b('chart-container')}>
                         <MetricChart
                             database={tenantName}
                             title={queriesChartConfig.title}
                             metrics={queriesChartConfig.metrics}
                             timeFrame={queriesTimeFrame}
-                            autorefresh={autoRefreshInterval}
+                            autorefresh={shouldRefresh}
                             height={260}
                             chartOptions={queriesChartConfig.options}
                             onChartDataStatusChange={handleChartDataStatusChange}
@@ -324,7 +330,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                             title={latenciesChartConfig.title}
                             metrics={latenciesChartConfig.metrics}
                             timeFrame={latenciesTimeFrame}
-                            autorefresh={autoRefreshInterval}
+                            autorefresh={shouldRefresh}
                             height={260}
                             chartOptions={latenciesChartConfig.options}
                             onChartDataStatusChange={handleChartDataStatusChange}

src/containers/Tenant/TenantPages.tsx

@@ -16,6 +16,7 @@ type AdditionalQueryParams = {
     activeOffset?: string;
     metricsTab?: string;
     showPreview?: boolean;
+    queryMode?: string;
 };
 
 export type TenantQuery = TenantQueryParams | AdditionalQueryParams;