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

feat: add impact metrics wildcard label (#10373)

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-07-21 10:50:14 +02:00 committed by GitHub
parent 253c2d71b3
commit c1df04548d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 85 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/component/impact-metrics/ImpactMetricsControls/components/LabelsFilter.tsx
View File

@ -1,5 +1,13 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { Box, Autocomplete, TextField, Typography, Chip } from '@mui/material'; import {
Box,
Autocomplete,
TextField,
Typography,
Chip,
Checkbox,
FormControlLabel,
} from '@mui/material';
import type { ImpactMetricsLabels } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData'; import type { ImpactMetricsLabels } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
export type LabelsFilterProps = { export type LabelsFilterProps = {
@ -23,6 +31,16 @@ export const LabelsFilter: FC<LabelsFilterProps> = ({
onChange(newLabels); onChange(newLabels);
}; };
const handleAllToggle = (labelKey: string, checked: boolean) => {
const newLabels = { ...selectedLabels };
if (checked) {
newLabels[labelKey] = ['*'];
} else {
delete newLabels[labelKey];
}
onChange(newLabels);
};
const clearAllLabels = () => { const clearAllLabels = () => {
onChange({}); onChange({});
}; };
@ -45,15 +63,27 @@ export const LabelsFilter: FC<LabelsFilterProps> = ({
)} )}
</Box> </Box>
{Object.entries(availableLabels).map(([labelKey, values]) => ( {Object.entries(availableLabels).map(([labelKey, values]) => {
<Autocomplete const currentSelection = selectedLabels[labelKey] || [];
const isAllSelected = currentSelection.includes('*');
return (
<Box
key={labelKey} key={labelKey}
sx={(theme) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(3),
})}
>
<Autocomplete
multiple multiple
options={values} options={values}
value={selectedLabels[labelKey] || []} value={isAllSelected ? [] : currentSelection}
onChange={(_, newValues) => onChange={(_, newValues) => {
handleLabelChange(labelKey, newValues) handleLabelChange(labelKey, newValues);
} }}
disabled={isAllSelected}
renderTags={(value, getTagProps) => renderTags={(value, getTagProps) =>
value.map((option, index) => { value.map((option, index) => {
const { key, ...chipProps } = getTagProps({ const { key, ...chipProps } = getTagProps({
@ -73,14 +103,34 @@ export const LabelsFilter: FC<LabelsFilterProps> = ({
<TextField <TextField
{...params} {...params}
label={labelKey} label={labelKey}
placeholder='Select values...' placeholder={
isAllSelected
? 'All values selected'
: 'Select values…'
}
variant='outlined' variant='outlined'
size='small' size='small'
/> />
)} )}
sx={{ minWidth: 300 }} sx={{ minWidth: 300, flexGrow: 1 }}
/> />
))} <FormControlLabel
control={
<Checkbox
checked={isAllSelected}
onChange={(e) =>
handleAllToggle(
labelKey,
e.target.checked,
)
}
/>
}
label='All'
/>
</Box>
);
})}
</Box> </Box>
); );
}; };

1
frontend/src/component/impact-metrics/hooks/useChartData.ts
View File

@ -8,6 +8,7 @@ const getColorStartingIndex = (modulo: number, series?: string): number => {
return 0; return 0;
} }
// https://stackoverflow.com/a/7616484/1729641
let hash = 0; let hash = 0;
for (let i = 0; i < series.length; i++) { for (let i = 0; i < series.length; i++) {
const char = series.charCodeAt(i); const char = series.charCodeAt(i);