1
0
mirror of https://github.com/Unleash/unleash.git synced 2026-01-05 20:06:22 +01:00

fix: translate alert observation window to metric range (#11121)

This commit is contained in:
Mateusz Kwasniewski 2025-12-11 09:54:56 +01:00 committed by GitHub
parent 0756250ddf
commit 891e022cdd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 10 deletions

View File

@ -1,4 +1,11 @@
import { Button, FormControl, TextField, Box, styled } from '@mui/material';
import {
Button,
FormControl,
TextField,
Box,
styled,
MenuItem,
} from '@mui/material';
import ShieldIcon from '@mui/icons-material/ShieldOutlined';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import type { FormEvent, ReactNode } from 'react';
@ -492,7 +499,7 @@ const SafeguardFormBase: FC<SafeguardFormBaseProps> = ({
</StyledTopRow>
<StyledTopRow sx={{ ml: 0.75 }}>
<StyledTopRow>
<StyledLabel sx={{ ml: 2 }}>is</StyledLabel>
<StyledLabel sx={{ ml: 2.5 }}>is</StyledLabel>
<FormControl variant='outlined' size='small'>
<StyledSelect
value={operator}
@ -535,11 +542,17 @@ const SafeguardFormBase: FC<SafeguardFormBaseProps> = ({
<StyledTopRow>
<StyledLabel>over</StyledLabel>
{/* Every range has an alert observation window equal to its step. Backend implies the step from the range */}
<RangeSelector
value={timeRange}
onChange={handleTimeRangeChange}
label=''
/>
>
<MenuItem value='hour'>Last minute</MenuItem>
<MenuItem value='day'>Last 15 minutes</MenuItem>
<MenuItem value='week'>Last 3 hours</MenuItem>
<MenuItem value='month'>Last day</MenuItem>
</RangeSelector>
</StyledTopRow>
</StyledTopRow>
</SafeguardConfigurationSection>

View File

@ -1,5 +1,11 @@
import type { FC } from 'react';
import { Box, Typography, FormControlLabel, Checkbox } from '@mui/material';
import {
Box,
Typography,
FormControlLabel,
Checkbox,
MenuItem,
} from '@mui/material';
import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
import { MetricSelector } from './SeriesSelector/MetricSelector.tsx';
import { RangeSelector } from './RangeSelector/RangeSelector.tsx';
@ -54,7 +60,12 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
<RangeSelector
value={formData.timeRange}
onChange={actions.setTimeRange}
/>
>
<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>
</RangeSelector>
<ModeSelector
value={formData.aggregationMode}
onChange={actions.setAggregationMode}

View File

@ -1,5 +1,5 @@
import type { FC } from 'react';
import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import { FormControl, InputLabel, Select } from '@mui/material';
export type TimeRange = 'hour' | 'day' | 'week' | 'month';
@ -7,12 +7,14 @@ export type RangeSelectorProps = {
value: TimeRange;
onChange: (range: TimeRange) => void;
label?: string;
children: React.ReactNode;
};
export const RangeSelector: FC<RangeSelectorProps> = ({
value,
onChange,
label = 'Time',
children,
}) => (
<FormControl variant='outlined' size='small'>
{label ? (
@ -24,10 +26,7 @@ export const RangeSelector: FC<RangeSelectorProps> = ({
onChange={(e) => onChange(e.target.value as TimeRange)}
label={label}
>
<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>
{children}
</Select>
</FormControl>
);