From b194393daeb6dfa67e9dfa6b227ecb5c2a37c2fe Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 12 Aug 2024 15:30:20 +0300
Subject: [PATCH] feat: export events as json (#7841)

![image](https://github.com/user-attachments/assets/7e24339d-fa59-4b80-a322-05323e01eabe)
---
 .../events/EventLog/EventActions.tsx          | 108 ++++++++++++++++++
 .../component/events/EventLog/EventLog.tsx    |   2 +
 2 files changed, 110 insertions(+)
 create mode 100644 frontend/src/component/events/EventLog/EventActions.tsx

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<IEventActions> = ({ events }) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        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 (
+        <StyledActions
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+        >
+            <Tooltip title={'Export'} arrow describeChild>
+                <div>
+                    <IconButton
+                        aria-label={'Export'}
+                        aria-haspopup='true'
+                        aria-expanded={open}
+                        onClick={handleClick}
+                        type='button'
+                    >
+                        <FileDownload />
+                    </IconButton>
+                </div>
+            </Tooltip>
+            <StyledPopover
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                disableScrollLock={true}
+            >
+                <MenuList>
+                    <MenuItem onClick={exportCsv}>
+                        <ListItemText>
+                            <Typography variant='body2'>
+                                Export as CSV
+                            </Typography>
+                        </ListItemText>
+                    </MenuItem>
+                    <MenuItem onClick={exportJson}>
+                        <ListItemText>
+                            <Typography variant='body2'>
+                                Export as JSON
+                            </Typography>
+                        </ListItemText>
+                    </MenuItem>
+                </MenuList>
+            </StyledPopover>
+        </StyledActions>
+    );
+};
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}
+                            <EventActions events={events} />
                             {!isSmallScreen && searchInputField}
                         </>
                     }