Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-18 13:48:58 +02:00
Code Issues Projects Releases Wiki Activity

add 'hour' range

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-06-18 23:52:10 +02:00
parent 79dc5b6521
commit 7ac1d0386a
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
4 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
View File

@ -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
condition={!selectedSeries && !isLoading}
show={
<Typography
variant='body2'
color='text.secondary'
>
Select a metric series to view the chart
</Typography>
}
/>
{!selectedSeries && !isLoading ? (
<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

9
frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx
View File

@ -15,8 +15,8 @@ import {
export interface ImpactMetricsControlsProps {
selectedSeries: string;
onSeriesChange: (series: string) => 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<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>

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

@ -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);

2
frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts
View File

@ -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) => {