add 'hour' range

frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx

@@ -13,7 +13,6 @@ import {
 } from 'component/insights/InsightsCharts.styles';
 import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
 import { useImpactMetricsData } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { usePlaceholderData } from '../hooks/usePlaceholderData.js';
 import { ImpactMetricsControls } from './ImpactMetricsControls.tsx';
 import { getDateRange, getDisplayFormat, getTimeUnit } from './time-utils.ts';
@@ -24,7 +23,7 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
     const theme = useTheme();
     const [selectedSeries, setSelectedSeries] = useState<string>('');
     const [selectedRange, setSelectedRange] = useState<
-        'day' | 'week' | 'month'
+        'hour' | 'day' | 'week' | 'month'
     >('day');
     const [beginAtZero, setBeginAtZero] = useState(false);
 
@@ -111,17 +110,6 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
                             width: '100%',
                         }}
                     >
-                        <ConditionallyRender
-                            condition={Boolean(hasError)}
-                            show={
-                                <Alert severity='error'>
-                                    Failed to load impact metrics. Please check
-                                    if Prometheus is configured and the feature
-                                    flag is enabled.
-                                </Alert>
-                            }
-                        />
-
                         <ImpactMetricsControls
                             selectedSeries={selectedSeries}
                             onSeriesChange={setSelectedSeries}
@@ -133,21 +121,22 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
                             loading={metadataLoading}
                         />
 
-                        <ConditionallyRender
+                        {!selectedSeries && !isLoading ? (
-                            condition={!selectedSeries && !isLoading}
+                            <Typography variant='body2' color='text.secondary'>
-                            show={
-                                <Typography
-                                    variant='body2'
-                                    color='text.secondary'
-                                >
                                 Select a metric series to view the chart
                             </Typography>
-                            }
+                        ) : null}
-                        />
                     </Box>
                 </StyledWidgetStats>
 
                 <StyledChartContainer>
+                    {hasError ? (
+                        <Alert severity='error'>
+                            Failed to load impact metrics. Please check if
+                            Prometheus is configured and the feature flag is
+                            enabled.
+                        </Alert>
+                    ) : null}
                     <LineChart
                         data={
                             notEnoughData || isLoading ? placeholderData : data

frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx

@@ -15,8 +15,8 @@ import {
 export interface ImpactMetricsControlsProps {
     selectedSeries: string;
     onSeriesChange: (series: string) => void;
-    selectedRange: 'day' | 'week' | 'month';
+    selectedRange: 'hour' | 'day' | 'week' | 'month';
-    onRangeChange: (range: 'day' | 'week' | 'month') => void;
+    onRangeChange: (range: 'hour' | 'day' | 'week' | 'month') => void;
     beginAtZero: boolean;
     onBeginAtZeroChange: (beginAtZero: boolean) => void;
     metricSeries: string[];
@@ -71,10 +71,13 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
                 labelId='range-select-label'
                 value={selectedRange}
                 onChange={(e) =>
-                    onRangeChange(e.target.value as 'day' | 'week' | 'month')
+                    onRangeChange(
+                        e.target.value as 'hour' | 'day' | 'week' | 'month',
+                    )
                 }
                 label='Time Range'
             >
+                <MenuItem value='hour'>Last hour</MenuItem>
                 <MenuItem value='day'>Last 24 hours</MenuItem>
                 <MenuItem value='week'>Last 7 days</MenuItem>
                 <MenuItem value='month'>Last 30 days</MenuItem>

frontend/src/component/insights/impact-metrics/time-utils.ts

@@ -1,5 +1,7 @@
 export const getTimeUnit = (selectedRange: string) => {
     switch (selectedRange) {
+        case 'hour':
+            return 'minute';
         case 'day':
             return 'hour';
         case 'week':
@@ -14,8 +16,10 @@ export const getTimeUnit = (selectedRange: string) => {
 export const getDisplayFormat = (selectedRange: string) => {
     // TODO: localized format
     switch (selectedRange) {
+        case 'hour':
+            return 'HH:mm:ss';
         case 'day':
-            return 'MMM dd HH:mm';
+            return 'HH:mm';
         case 'week':
             return 'MMM dd';
         case 'month':
@@ -25,11 +29,18 @@ export const getDisplayFormat = (selectedRange: string) => {
     }
 };
 
-export const getDateRange = (selectedRange: 'day' | 'week' | 'month') => {
+export const getDateRange = (
+    selectedRange: 'hour' | 'day' | 'week' | 'month',
+) => {
     const now = new Date();
     const endTime = now;
 
     switch (selectedRange) {
+        case 'hour': {
+            const startTime = new Date(now);
+            startTime.setMinutes(now.getMinutes() - 60, 0, 0);
+            return { min: startTime, max: endTime };
+        }
         case 'day': {
             const startTime = new Date(now);
             startTime.setHours(now.getHours() - 24, 0, 0, 0);

frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts

@@ -5,7 +5,7 @@ export type TimeSeriesData = [number, number][];
 
 export type ImpactMetricsQuery = {
     series: string;
-    range: 'day' | 'week' | 'month';
+    range: 'hour' | 'day' | 'week' | 'month';
 };
 
 export const useImpactMetricsData = (query?: ImpactMetricsQuery) => {