vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cache robot and run fetch data

Browse Source
This commit is contained in:
Rohit Rajan
2025-09-19 11:24:23 +05:30
parent f885269688
commit 883922606c
2 changed files with 51 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/robot/RecordingsTable.tsx
View File

@@ -36,8 +36,8 @@ import {
MoreHoriz, MoreHoriz,
Refresh Refresh
} from "@mui/icons-material"; } from "@mui/icons-material";
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore, useCachedRecordings } from "../../context/globalInfo";
import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage"; import { checkRunsForRecording, deleteRecordingFromStorage } from "../../api/storage";
import { Add } from "@mui/icons-material"; import { Add } from "@mui/icons-material";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { canCreateBrowserInState, getActiveBrowserId, stopRecording } from "../../api/recording"; import { canCreateBrowserInState, getActiveBrowserId, stopRecording } from "../../api/recording";
@@ -150,12 +150,11 @@ export const RecordingsTable = ({
const { t } = useTranslation(); const { t } = useTranslation();
const [page, setPage] = React.useState(0); const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10); const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [rows, setRows] = React.useState<Data[]>([]); const { data: recordingsData = [], isLoading: isFetching, error, refetch } = useCachedRecordings();
const [isModalOpen, setModalOpen] = React.useState(false); const [isModalOpen, setModalOpen] = React.useState(false);
const [searchTerm, setSearchTerm] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState('');
const [isWarningModalOpen, setWarningModalOpen] = React.useState(false); const [isWarningModalOpen, setWarningModalOpen] = React.useState(false);
const [activeBrowserId, setActiveBrowserId] = React.useState(''); const [activeBrowserId, setActiveBrowserId] = React.useState('');
const [isFetching, setIsFetching] = React.useState(true);
const columns = useMemo(() => [ const columns = useMemo(() => [
{ id: 'interpret', label: t('recordingtable.run'), minWidth: 80 }, { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -238,44 +237,42 @@ export const RecordingsTable = ({
if (dateStr.includes('PM') || dateStr.includes('AM')) { if (dateStr.includes('PM') || dateStr.includes('AM')) {
return new Date(dateStr); return new Date(dateStr);
} }
return new Date(dateStr.replace(/(\d+)\/(\d+)\//, '$2/$1/')) return new Date(dateStr.replace(/(\d+)\/(\d+)\//, '$2/$1/'))
} catch { } catch {
return new Date(0); return new Date(0);
} }
}; };
const fetchRecordings = useCallback(async () => { const rows = useMemo(() => {
try { if (!recordingsData) return [];
const recordings = await getStoredRecordings();
if (recordings) { const parsedRows = recordingsData
const parsedRows = recordings .map((recording: any, index: number) => {
.map((recording: any, index: number) => { if (recording?.recording_meta) {
if (recording?.recording_meta) { const parsedDate = parseDateString(recording.recording_meta.updatedAt);
const parsedDate = parseDateString(recording.recording_meta.updatedAt);
return {
return { id: index,
id: index, ...recording.recording_meta,
...recording.recording_meta, content: recording.recording,
content: recording.recording, parsedDate
parsedDate };
}; }
} return null;
return null; })
}) .filter(Boolean)
.filter(Boolean) .sort((a, b) => b.parsedDate.getTime() - a.parsedDate.getTime());
.sort((a, b) => b.parsedDate.getTime() - a.parsedDate.getTime());
return parsedRows;
setRecordings(parsedRows.map((recording) => recording.name)); }, [recordingsData]);
setRows(parsedRows);
} useEffect(() => {
} catch (error) { if (rows.length > 0) {
console.error('Error fetching recordings:', error); setRecordings(rows.map((recording) => recording.name));
notify('error', t('recordingtable.notifications.fetch_error'));
} finally {
setIsFetching(false);
} }
}, [setRecordings, notify, t]); }, [rows, setRecordings]);
const handleNewRecording = useCallback(async () => { const handleNewRecording = useCallback(async () => {
const canCreateRecording = await canCreateBrowserInState("recording"); const canCreateRecording = await canCreateBrowserInState("recording");
@@ -331,7 +328,7 @@ export const RecordingsTable = ({
if (lastPair?.what) { if (lastPair?.what) {
if (Array.isArray(lastPair.what)) { if (Array.isArray(lastPair.what)) {
const gotoAction = lastPair.what.find(action => const gotoAction = lastPair.what.find((action: any) =>
action && typeof action === 'object' && 'action' in action && action.action === "goto" action && typeof action === 'object' && 'action' in action && action.action === "goto"
) as any; ) as any;
@@ -408,17 +405,12 @@ export const RecordingsTable = ({
window.sessionStorage.setItem('initialUrl', event.target.value); window.sessionStorage.setItem('initialUrl', event.target.value);
} }
useEffect(() => {
fetchRecordings();
}, [fetchRecordings]);
useEffect(() => { useEffect(() => {
if (rerenderRobots) { if (rerenderRobots) {
fetchRecordings().then(() => { refetch();
setRerenderRobots(false); setRerenderRobots(false);
});
} }
}, [rerenderRobots, fetchRecordings, setRerenderRobots]); }, [rerenderRobots, setRerenderRobots, refetch]);
function useDebounce<T>(value: T, delay: number): T { function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = React.useState<T>(value); const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
@@ -468,12 +460,11 @@ export const RecordingsTable = ({
const success = await deleteRecordingFromStorage(id); const success = await deleteRecordingFromStorage(id);
if (success) { if (success) {
setRows([]);
notify('success', t('recordingtable.notifications.delete_success')); notify('success', t('recordingtable.notifications.delete_success'));
fetchRecordings(); refetch();
} }
} }
}), [handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot, handleRetrainRobot, notify, t]); }), [handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot, handleRetrainRobot, notify, t, refetch]);
return ( return (
<React.Fragment> <React.Fragment>

58
src/components/run/RunsTable.tsx
View File

@@ -13,8 +13,7 @@ import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextFie
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore, useCachedRuns } from "../../context/globalInfo";
import { getStoredRuns } from "../../api/storage";
import { RunSettings } from "./RunSettings"; import { RunSettings } from "./RunSettings";
import { CollapsibleRow } from "./ColapsibleRow"; import { CollapsibleRow } from "./ColapsibleRow";
import { ArrowDownward, ArrowUpward, UnfoldMore } from '@mui/icons-material'; import { ArrowDownward, ArrowUpward, UnfoldMore } from '@mui/icons-material';
@@ -132,16 +131,14 @@ export const RunsTable: React.FC<RunsTableProps> = ({
[t] [t]
); );
const [rows, setRows] = useState<Data[]>([]); const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
const [searchTerm, setSearchTerm] = useState(''); const { data: rows = [], isLoading: isFetching, error, refetch } = useCachedRuns();
const [isFetching, setIsFetching] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
const [paginationStates, setPaginationStates] = useState<PaginationState>({}); const [paginationStates, setPaginationStates] = useState<PaginationState>({});
const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set()); const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
const [expandedAccordions, setExpandedAccordions] = useState<Set<string>>(new Set()); const [expandedAccordions, setExpandedAccordions] = useState<Set<string>>(new Set());
const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => { const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
setExpandedAccordions(prev => { setExpandedAccordions(prev => {
const newSet = new Set(prev); const newSet = new Set(prev);
@@ -278,47 +275,18 @@ export const RunsTable: React.FC<RunsTableProps> = ({
debouncedSetSearch(event.target.value); debouncedSetSearch(event.target.value);
}, [debouncedSearch]); }, [debouncedSearch]);
const fetchRuns = useCallback(async () => {
try {
const runs = await getStoredRuns();
if (runs) {
const parsedRows: Data[] = runs.map((run: any, index: number) => ({
id: index,
...run,
}));
setRows(parsedRows);
} else {
notify('error', t('runstable.notifications.no_runs'));
}
} catch (error) {
notify('error', t('runstable.notifications.fetch_error'));
} finally {
setIsFetching(false);
}
}, [notify, t]);
useEffect(() => { useEffect(() => {
let mounted = true; if (rerenderRuns) {
refetch();
if (rows.length === 0 || rerenderRuns) { setRerenderRuns(false);
setIsFetching(true);
fetchRuns().then(() => {
if (mounted) {
setRerenderRuns(false);
}
});
} }
}, [rerenderRuns, setRerenderRuns, refetch]);
return () => {
mounted = false;
};
}, [rerenderRuns, rows.length, setRerenderRuns, fetchRuns]);
const handleDelete = useCallback(() => { const handleDelete = useCallback(() => {
setRows([]);
notify('success', t('runstable.notifications.delete_success')); notify('success', t('runstable.notifications.delete_success'));
fetchRuns(); refetch();
}, [notify, t, fetchRuns]); }, [notify, t, refetch]);
// Filter rows based on search term // Filter rows based on search term
const filteredRows = useMemo(() => { const filteredRows = useMemo(() => {
@@ -350,15 +318,15 @@ export const RunsTable: React.FC<RunsTableProps> = ({
}, {} as Record<string, Data[]>); }, {} as Record<string, Data[]>);
Object.keys(groupedData).forEach(robotId => { Object.keys(groupedData).forEach(robotId => {
groupedData[robotId].sort((a, b) => groupedData[robotId].sort((a: any, b: any) =>
parseDateString(b.startedAt).getTime() - parseDateString(a.startedAt).getTime() parseDateString(b.startedAt).getTime() - parseDateString(a.startedAt).getTime()
); );
}); });
const robotEntries = Object.entries(groupedData).map(([robotId, runs]) => ({ const robotEntries = Object.entries(groupedData).map(([robotId, runs]) => ({
robotId, robotId,
runs, runs: runs as Data[],
latestRunDate: parseDateString(runs[0].startedAt).getTime() latestRunDate: parseDateString((runs as Data[])[0].startedAt).getTime()
})); }));
robotEntries.sort((a, b) => b.latestRunDate - a.latestRunDate); robotEntries.sort((a, b) => b.latestRunDate - a.latestRunDate);