diff --git a/frontend/src/component/events/EventLog/EventActions.tsx b/frontend/src/component/events/EventLog/EventActions.tsx new file mode 100644 index 000000000000..cf232c3d7cae --- /dev/null +++ b/frontend/src/component/events/EventLog/EventActions.tsx @@ -0,0 +1,108 @@ +import { type FC, useState } from 'react'; +import { + IconButton, + ListItemText, + MenuItem, + MenuList, + Popover, + styled, + Tooltip, + Typography, +} from '@mui/material'; +import FileDownload from '@mui/icons-material/FileDownload'; +import type { EventSchema } from '../../../openapi'; + +const StyledActions = styled('div')(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', +})); + +const StyledPopover = styled(Popover)(({ theme }) => ({ + borderRadius: theme.shape.borderRadiusLarge, + padding: theme.spacing(1, 1.5), +})); + +interface IEventActions { + events: EventSchema[]; +} + +export const EventActions: FC = ({ events }) => { + const [anchorEl, setAnchorEl] = useState(null); + + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + const exportJson = () => { + const jsonString = JSON.stringify(events); + const blob = new Blob([jsonString], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + + const currentDate = new Date().toISOString().split('T')[0]; + const fileName = `events_${currentDate}.json`; + + const a = document.createElement('a'); + a.href = url; + a.download = fileName; + a.click(); + + URL.revokeObjectURL(url); + setAnchorEl(null); + }; + + const exportCsv = () => { + setAnchorEl(null); + }; + + return ( + { + e.preventDefault(); + e.stopPropagation(); + }} + > + +
+ + + +
+
+ + + + + + Export as CSV + + + + + + + Export as JSON + + + + + +
+ ); +}; diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx index 7cdffb402d32..a7bd73084f5b 100644 --- a/frontend/src/component/events/EventLog/EventLog.tsx +++ b/frontend/src/component/events/EventLog/EventLog.tsx @@ -17,6 +17,7 @@ import { EventLogFilters } from './EventLogFilters'; import type { EventSchema } from 'openapi'; import { useEventLogSearch } from './useEventLogSearch'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; +import { EventActions } from './EventActions'; interface IEventLogProps { title: string; @@ -121,6 +122,7 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => { actions={ <> {showDataSwitch} + {!isSmallScreen && searchInputField} }