prometheus: add resolution input for metrics

adwait-godbole · adwait-godbole · commit 449aecb9617c · 2025-05-08T22:42:13.000+05:30
Signed-off-by: Adwait Godbole &lt;adwaitngodbole@gmail.com&gt;
diff --git a/prometheus/src/components/Chart/CPUChart/CPUChart.tsx b/prometheus/src/components/Chart/CPUChart/CPUChart.tsx
@@ -17,6 +17,7 @@ interface CPUChartProps {
   query: string;
   prometheusPrefix: string;
   interval: string;
+  resolution: string;
   autoRefresh: boolean;
   subPath: string;
 }
diff --git a/prometheus/src/components/Chart/Chart/Chart.tsx b/prometheus/src/components/Chart/Chart/Chart.tsx
@@ -1,6 +1,6 @@
 import { EmptyContent, Loader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Box, useTheme } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   Area,
   AreaChart,
@@ -11,7 +11,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { getTimeRange } from '../../../util';
+import { getTimeRangeAndStepSize } from '../../../util';
 
 /**
  * Props for the Chart component.
@@ -40,6 +40,7 @@ export interface ChartProps {
   }>;
   fetchMetrics: (query: object) => Promise<any>;
   interval: string;
+  resolution: string;
   prometheusPrefix: string;
   autoRefresh: boolean;
   xAxisProps: {
@@ -64,14 +65,19 @@ export default function Chart(props: ChartProps) {
   const [state, setState] = useState<ChartState | null>(null);
   const [error, setError] = useState<string | null>(null);
   const theme = useTheme();
-  const timeRange = getTimeRange(props.interval);
+  const {
+    from: fromTimestamp,
+    to: toTimestamp,
+    step: stepSize,
+  } = useMemo(
+    () => getTimeRangeAndStepSize(props.interval, props.resolution),
+    [props.interval, props.resolution]
+  );
 
   const fetchMetricsData = async (
     plots: Array<{ query: string; name: string; dataProcessor: (data: any) => any }>,
     firstLoad: boolean = false
   ) => {
-    const { from, to, step } = getTimeRange(props.interval);
-
     const fetchedMetrics: {
       [key: string]: {
         data: { timestamp: number; y: number }[];
@@ -88,9 +94,9 @@ export default function Chart(props: ChartProps) {
         response = await fetchMetrics({
           prefix: props.prometheusPrefix,
           query: plot.query,
-          from: from,
-          to: to,
-          step: step,
+          from: fromTimestamp,
+          to: toTimestamp,
+          step: stepSize,
           subPath: props.subPath,
         });
       } catch (e) {
@@ -140,7 +146,7 @@ export default function Chart(props: ChartProps) {
   // Fetch data on initial load
   useEffect(() => {
     fetchMetricsData(props.plots, true);
-  }, []);
+  }, [props.interval, props.resolution]);
 
   // if reload is true, set up a timer to refresh data every 10 seconds
   // Set up a timer to refresh data every 10 seconds
@@ -154,7 +160,7 @@ export default function Chart(props: ChartProps) {
         clearInterval(refreshInterval);
       };
     }
-  }, [props.autoRefresh, props.plots, props.interval]);
+  }, [props.autoRefresh, props.plots, props.interval, props.resolution]);
 
   let chartContent;
 
@@ -166,7 +172,7 @@ export default function Chart(props: ChartProps) {
           fontSize={12}
           {...xAxisProps}
           type="number"
-          domain={[timeRange.from, timeRange.to]}
+          domain={[fromTimestamp, toTimestamp]}
           allowDataOverflow
         />
         <YAxis fontSize={14} stroke={theme.palette.chartStyles.labelColor} {...yAxisProps} />
@@ -179,6 +185,7 @@ export default function Chart(props: ChartProps) {
         <CartesianGrid strokeDasharray="2 4" stroke={theme.palette.divider} vertical={false} />
         {props.plots.map(plot => (
           <Area
+            key={plot.name}
             stackId="1"
             type="step"
             dataKey={plot.name}
diff --git a/prometheus/src/components/Chart/Chart/chart.stories.tsx b/prometheus/src/components/Chart/Chart/chart.stories.tsx
@@ -336,6 +336,7 @@ const Template: StoryFn<ChartProps> = () => {
         },
       ]}
       interval="10m"
+      resolution="medium"
       autoRefresh={false}
       xAxisProps={XTickProps}
       yAxisProps={YTickProps}
diff --git a/prometheus/src/components/Chart/DiskChart/DiskChart.tsx b/prometheus/src/components/Chart/DiskChart/DiskChart.tsx
@@ -18,6 +18,7 @@ interface DiskChartProps {
   usageQuery: string;
   capacityQuery: string;
   interval: string;
+  resolution: string;
   prometheusPrefix: string;
   autoRefresh: boolean;
   subPath: string;
diff --git a/prometheus/src/components/Chart/DiskMetricsChart/DiskMetricsChart.tsx b/prometheus/src/components/Chart/DiskMetricsChart/DiskMetricsChart.tsx
@@ -1,13 +1,16 @@
 import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Loader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { useCluster } from '@kinvolk/headlamp-plugin/lib/lib/k8s';
-import { Box, Icon, IconButton } from '@mui/material';
 import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Icon from '@mui/material/Icon';
+import IconButton from '@mui/material/IconButton';
 import { useEffect, useState } from 'react';
 import {
   getConfigStore,
   getPrometheusInterval,
   getPrometheusPrefix,
+  getPrometheusResolution,
   getPrometheusSubPath,
 } from '../../../util';
 import { PrometheusNotFoundBanner } from '../common';
@@ -76,6 +79,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
   }
 
   const interval = getPrometheusInterval(cluster);
+  const resolution = getPrometheusResolution(cluster);
   const subPath = getPrometheusSubPath(cluster);
   return (
     <SectionBox>
@@ -116,6 +120,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
             usageQuery={props.usageQuery}
             capacityQuery={props.capacityQuery}
             interval={interval}
+            resolution={resolution}
             autoRefresh={refresh}
             prometheusPrefix={prometheusPrefix}
             subPath={subPath}
diff --git a/prometheus/src/components/Chart/FilesystemChart/FilesystemChart.tsx b/prometheus/src/components/Chart/FilesystemChart/FilesystemChart.tsx
@@ -19,6 +19,7 @@ interface FilesystemChartProps {
   readQuery: string;
   writeQuery: string;
   interval: string;
+  resolution: string;
   prometheusPrefix: string;
   autoRefresh: boolean;
   subPath: string;
diff --git a/prometheus/src/components/Chart/GenericMetricsChart/GenericMetricsChart.tsx b/prometheus/src/components/Chart/GenericMetricsChart/GenericMetricsChart.tsx
@@ -2,21 +2,21 @@ import { Icon } from '@iconify/react';
 import { Loader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { useCluster } from '@kinvolk/headlamp-plugin/lib/k8s';
-import {
-  Box,
-  Button,
-  MenuItem,
-  Paper,
-  Select,
-  ToggleButton,
-  ToggleButtonGroup,
-} from '@mui/material';
 import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import Paper from '@mui/material/Paper';
+import Select from '@mui/material/Select';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { useEffect, useState } from 'react';
 import {
   getConfigStore,
   getPrometheusInterval,
   getPrometheusPrefix,
+  getPrometheusResolution,
   getPrometheusSubPath,
 } from '../../../util';
 import { PrometheusNotFoundBanner } from '../common';
@@ -96,9 +96,11 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
   };
 
   const interval = getPrometheusInterval(cluster);
+  const graphResolution = getPrometheusResolution(cluster);
   const subPath = getPrometheusSubPath(cluster);
 
   const [timespan, setTimespan] = useState(interval ?? '1h');
+  const [resolution, setResolution] = useState(graphResolution ?? 'medium');
 
   if (!isVisible) {
     return null;
@@ -160,6 +162,28 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 <MenuItem value={'14d'}>14 days</MenuItem>
               </Select>
             </Box>
+            <Box>
+              <Select
+                variant="outlined"
+                size="small"
+                name="Time"
+                value={resolution}
+                onChange={e => setResolution(e.target.value)}
+              >
+                <ListSubheader>Automatic resolution</ListSubheader>
+                <MenuItem value="low">Low res.</MenuItem>
+                <MenuItem value="medium">Medium res.</MenuItem>
+                <MenuItem value="high">High res.</MenuItem>
+
+                <ListSubheader>Fixed resolution</ListSubheader>
+                <MenuItem value="10s">10s</MenuItem>
+                <MenuItem value="30s">30s</MenuItem>
+                <MenuItem value="1m">1m</MenuItem>
+                <MenuItem value="5m">5m</MenuItem>
+                <MenuItem value="15m">15m</MenuItem>
+                <MenuItem value="1h">1h</MenuItem>
+              </Select>
+            </Box>
           </Box>
         )}
         {state === prometheusState.INSTALLED ? (
@@ -174,6 +198,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 autoRefresh={refresh}
                 prometheusPrefix={prometheusPrefix}
                 interval={timespan}
+                resolution={resolution}
                 subPath={subPath}
               />
             )}
@@ -183,6 +208,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 autoRefresh={refresh}
                 prometheusPrefix={prometheusPrefix}
                 interval={timespan}
+                resolution={resolution}
                 subPath={subPath}
               />
             )}
@@ -192,6 +218,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 txQuery={props.networkTxQuery}
                 autoRefresh={refresh}
                 interval={timespan}
+                resolution={resolution}
                 prometheusPrefix={prometheusPrefix}
                 subPath={subPath}
               />
@@ -202,6 +229,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 writeQuery={props.filesystemWriteQuery}
                 autoRefresh={refresh}
                 interval={timespan}
+                resolution={resolution}
                 prometheusPrefix={prometheusPrefix}
                 subPath={subPath}
               />
diff --git a/prometheus/src/components/Chart/MemoryChart/MemoryChart.tsx b/prometheus/src/components/Chart/MemoryChart/MemoryChart.tsx
@@ -18,6 +18,7 @@ interface MemoryChartProps {
   query: string;
   prometheusPrefix: string;
   interval: string;
+  resolution: string;
   autoRefresh: boolean;
   subPath: string;
 }
diff --git a/prometheus/src/components/Chart/NetworkChart/NetworkChart.tsx b/prometheus/src/components/Chart/NetworkChart/NetworkChart.tsx
@@ -19,6 +19,7 @@ interface NetworkChartProps {
   rxQuery: string;
   txQuery: string;
   interval: string;
+  resolution: string;
   prometheusPrefix: string;
   autoRefresh: boolean;
   subPath: string;
diff --git a/prometheus/src/components/Settings/Settings.tsx b/prometheus/src/components/Settings/Settings.tsx
@@ -1,6 +1,7 @@
 import { NameValueTable } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { useClustersConf } from '@kinvolk/headlamp-plugin/lib/k8s';
 import Box from '@mui/material/Box';
+import ListSubheader from '@mui/material/ListSubheader';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Switch from '@mui/material/Switch';
@@ -23,7 +24,7 @@ function isValidAddress(address: string): boolean {
 /**
  * Props for the Settings component.
  * @interface SettingsProps
- * @property {Object.<string, {isMetricsEnabled?: boolean, autoDetect?: boolean, address?: string, defaultTimespan?: string}>} data - Configuration data for each cluster
+ * @property {Object.<string, {isMetricsEnabled?: boolean, autoDetect?: boolean, address?: string, defaultTimespan?: string, defaultResolution?: string}>} data - Configuration data for each cluster
  * @property {Function} onDataChange - Callback function when data changes
  */
 interface SettingsProps {
@@ -35,6 +36,7 @@ interface SettingsProps {
       address?: string;
       subPath?: string;
       defaultTimespan?: string;
+      defaultResolution?: string;
     }
   >;
   onDataChange: (newData: SettingsProps['data']) => void;
@@ -64,6 +66,7 @@ export function Settings(props: SettingsProps) {
           isMetricsEnabled: true,
           autoDetect: true,
           defaultTimespan: '24h',
+          defaultResolution: 'medium',
         },
       });
     }
@@ -164,7 +167,7 @@ export function Settings(props: SettingsProps) {
       ),
     },
     {
-      name: 'Default timespan',
+      name: 'Default Timespan',
       value: (
         <Select
           disabled={!isMetricsEnabled}
@@ -196,6 +199,37 @@ export function Settings(props: SettingsProps) {
         </Select>
       ),
     },
+    {
+      name: 'Default Resolution',
+      value: (
+        <Select
+          disabled={!isMetricsEnabled}
+          value={data?.[selectedCluster]?.defaultResolution || 'medium'}
+          onChange={e =>
+            onDataChange({
+              ...(data || {}),
+              [selectedCluster]: {
+                ...((data || {})[selectedCluster] || {}),
+                defaultResolution: e.target.value,
+              },
+            })
+          }
+        >
+          <ListSubheader>Automatic resolution</ListSubheader>
+          <MenuItem value="low">Low res.</MenuItem>
+          <MenuItem value="medium">Medium res.</MenuItem>
+          <MenuItem value="high">High res.</MenuItem>
+
+          <ListSubheader>Fixed resolution</ListSubheader>
+          <MenuItem value="10s">10s</MenuItem>
+          <MenuItem value="30s">30s</MenuItem>
+          <MenuItem value="1m">1m</MenuItem>
+          <MenuItem value="5m">5m</MenuItem>
+          <MenuItem value="15m">15m</MenuItem>
+          <MenuItem value="1h">1h</MenuItem>
+        </Select>
+      ),
+    },
   ];
 
   return (
diff --git a/prometheus/src/util.test.ts b/prometheus/src/util.test.ts
diff --git a/prometheus/src/util.ts b/prometheus/src/util.ts

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ interface CPUChartProps {`
`17`	`17`	`query: string;`
`18`	`18`	`prometheusPrefix: string;`
`19`	`19`	`interval: string;`
	`20`	`+ resolution: string;`
`20`	`21`	`autoRefresh: boolean;`
`21`	`22`	`subPath: string;`
`22`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ interface MemoryChartProps {`
`18`	`18`	`query: string;`
`19`	`19`	`prometheusPrefix: string;`
`20`	`20`	`interval: string;`
	`21`	`+ resolution: string;`
`21`	`22`	`autoRefresh: boolean;`
`22`	`23`	`subPath: string;`
`23`	`24`	`}`