Skip to content

Commit

Permalink
Added session downloader for chrome extension (#1522)
Browse files Browse the repository at this point in the history
* Added session downloader for chrome extension

- The session list now has a button to download sessions as .json files for use with rrweb-player
- Improved styling for the delete and download buttons
  • Loading branch information
kirankunigiri authored Aug 2, 2024
1 parent 335639a commit b1f9daa
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 19 deletions.
5 changes: 5 additions & 0 deletions .changeset/wicked-dolphins-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rrweb/web-extension": minor
---

Added session downloader for chrome extension
52 changes: 33 additions & 19 deletions packages/web-extension/src/pages/SessionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { VscTriangleDown, VscTriangleUp } from 'react-icons/vsc';
import { useNavigate } from 'react-router-dom';
import { type Session, EventName } from '~/types';
import Channel from '~/utils/channel';
import { deleteSessions, getAllSessions } from '~/utils/storage';
import { deleteSessions, getAllSessions, downloadSessions } from '~/utils/storage';
import {
FiChevronLeft,
FiChevronRight,
Expand Down Expand Up @@ -292,24 +292,38 @@ export function SessionList() {
))}
</Select>
{Object.keys(rowSelection).length > 0 && (
<Button
mr={4}
size="md"
colorScheme="red"
onClick={() => {
if (table.getSelectedRowModel().flatRows.length === 0) return;
const ids = table
.getSelectedRowModel()
.flatRows.map((row) => row.original.id);
void deleteSessions(ids).then(() => {
setRowSelection({});
void updateSessions();
channel.emit(EventName.SessionUpdated, {});
});
}}
>
Delete
</Button>
<Flex gap={1}>
<Button
mr={4}
size="md"
colorScheme="red"
onClick={() => {
if (table.getSelectedRowModel().flatRows.length === 0) return;
const ids = table
.getSelectedRowModel()
.flatRows.map((row) => row.original.id);
void deleteSessions(ids).then(() => {
setRowSelection({});
void updateSessions();
channel.emit(EventName.SessionUpdated, {});
});
}}
>
Delete
</Button>
<Button
mr={4}
size="md"
colorScheme="green"
onClick={() => {
const selectedRows = table.getSelectedRowModel().flatRows;
if (selectedRows.length === 0) return;
void downloadSessions(selectedRows.map((row) => row.original.id));
}}
>
Download
</Button>
</Flex>
)}
</Flex>
</Flex>
Expand Down
19 changes: 19 additions & 0 deletions packages/web-extension/src/utils/storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,22 @@ export async function deleteSessions(ids: string[]) {
return Promise.all([eventTransition.done, sessionTransition.done]);
});
}

export async function downloadSessions(ids: string[]) {
for (const sessionId of ids) {
const events = await getEvents(sessionId);
const session = await getSession(sessionId);
const blob = new Blob([JSON.stringify({ session, events }, null, 2)], {
type: 'application/json',
});

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${session.name}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
}

0 comments on commit b1f9daa

Please sign in to comment.