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

refactor: simplify event log filters component and adds more data (#7736)

Browse Source 
This change primarily adds all flags to the flag filter and restructures
the filters component. Instead of splitting into three smaller
components, we now handle more data in the main component.

We might wanna turn them back to smaller components later, but I think
this'll be easier to work with.
This commit is contained in:
Thomas Heartman 2024-08-05 12:07:23 +02:00 committed by GitHub
parent fee318ab09
commit 6dde9082f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/component/events/EventLog/EventLogFilters.tsx
View File

@ -3,12 +3,9 @@ import { Filters, type IFilterItem } from 'component/filter/Filters/Filters';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
import { EventSchemaType } from 'openapi';
import type { IProjectCard } from 'interfaces/project';
type FilterProps = {
className?: string;
};
const flagLogFilters: IFilterItem[] = [
const sharedFilters: IFilterItem[] = [
{
label: 'Date From',
icon: 'today',
@ -46,75 +43,36 @@ const flagLogFilters: IFilterItem[] = [
},
];
export const FlagLogFilters: FC<FilterProps> = ({ className }) => {
return (
<Filters
className={className}
availableFilters={flagLogFilters}
state={{}}
onChange={(v) => console.log(v)}
/>
);
type EventLogFiltersProps = {
logType: 'flag' | 'project' | 'global';
className?: string;
};
export const EventLogFilters: FC<EventLogFiltersProps> = (
{ logType, className },
// {state, onChange,} // these are to fill in later to make the filters work
) => {
const { projects } = useProjects();
const { features } = useFeatureSearch({});
const useProjectLogFilters = () => {
const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
const { features } = useFeatureSearch({ project: 'default' });
useEffect(() => {
const projectOptions = (projects || []).map(
(project: IProjectCard) => ({
label: project.name,
value: project.id,
}),
);
const hasMultipleProjects = projectOptions.length > 1;
const flagOptions = (features || []).map((flag) => ({
label: flag.name,
value: flag.name,
}));
const availableFilters: IFilterItem[] = [
...flagLogFilters,
{
label: 'Feature Flag',
icon: 'flag',
options: flagOptions,
filterKey: 'flag',
singularOperators: ['IS'],
pluralOperators: ['IS_ANY_OF'],
},
];
setAvailableFilters(availableFilters);
}, [JSON.stringify(features)]);
return availableFilters;
};
export const ProjectLogFilters: FC<FilterProps> = ({ className }) => {
const availableFilters = useProjectLogFilters();
return (
<Filters
className={className}
availableFilters={availableFilters}
state={{}}
onChange={(v) => console.log(v)}
/>
);
};
export const GlobalLogFilters: FC<FilterProps> = ({ className }) => {
const projectFilters = useProjectLogFilters();
const { projects } = useProjects();
const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
useEffect(() => {
const projectOptions = (projects || []).map((project) => ({
label: project.name,
value: project.id,
}));
const hasMultipleProjects = projectOptions.length > 1;
const availableFilters: IFilterItem[] = [
...projectFilters,
...(hasMultipleProjects
...sharedFilters,
...(hasMultipleProjects && logType === 'global'
? ([
{
label: 'Project',
@ -126,10 +84,22 @@ export const GlobalLogFilters: FC<FilterProps> = ({ className }) => {
},
] as IFilterItem[])
: []),
...(logType !== 'flag'
? ([
{
label: 'Feature Flag',
icon: 'flag',
options: flagOptions,
filterKey: 'flag',
singularOperators: ['IS'],
pluralOperators: ['IS_ANY_OF'],
},
] as IFilterItem[])
: []),
];
setAvailableFilters(availableFilters);
}, [JSON.stringify(projectFilters), JSON.stringify(projects)]);
}, [JSON.stringify(features), JSON.stringify(projects)]);
return (
<Filters
@ -140,20 +110,3 @@ export const GlobalLogFilters: FC<FilterProps> = ({ className }) => {
/>
);
};
type EventLogFiltersProps = {
logType: 'flag' | 'project' | 'global';
} & FilterProps;
export const EventLogFilters: FC<EventLogFiltersProps> = (
{ logType, ...props },
// {state, onChange,} // these are to fill in later to make the filters work
) => {
switch (logType) {
case 'flag':
return <FlagLogFilters {...props} />;
case 'project':
return <ProjectLogFilters {...props} />;
case 'global':
return <GlobalLogFilters {...props} />;
}
};