diff --git a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx index bf819e5162..bd4c4082a3 100644 --- a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx +++ b/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 = () => { const theme = useTheme(); const [selectedSeries, setSelectedSeries] = useState(''); 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 = () => { width: '100%', }} > - - Failed to load impact metrics. Please check - if Prometheus is configured and the feature - flag is enabled. - - } - /> - = () => { loading={metadataLoading} /> - - Select a metric series to view the chart - - } - /> + {!selectedSeries && !isLoading ? ( + + Select a metric series to view the chart + + ) : null} + {hasError ? ( + + Failed to load impact metrics. Please check if + Prometheus is configured and the feature flag is + enabled. + + ) : null} void; - selectedRange: 'day' | 'week' | 'month'; - onRangeChange: (range: 'day' | 'week' | 'month') => void; + selectedRange: 'hour' | 'day' | 'week' | 'month'; + onRangeChange: (range: 'hour' | 'day' | 'week' | 'month') => void; beginAtZero: boolean; onBeginAtZeroChange: (beginAtZero: boolean) => void; metricSeries: string[]; @@ -71,10 +71,13 @@ export const ImpactMetricsControls: FC = ({ 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' > + Last hour Last 24 hours Last 7 days Last 30 days diff --git a/frontend/src/component/insights/impact-metrics/time-utils.ts b/frontend/src/component/insights/impact-metrics/time-utils.ts index 1cceb0f5d5..2f56ede49d 100644 --- a/frontend/src/component/insights/impact-metrics/time-utils.ts +++ b/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); diff --git a/frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts b/frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts index 888d48c7d2..aac5a838fc 100644 --- a/frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts +++ b/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) => {