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

Merge branch 'develop' of https://github.com/getmaxun/maxun into develop

Browse Source
This commit is contained in:
amhsirak
2025-01-26 22:08:31 +05:30
parent a77a2d526d dd9af7db66
commit dde130106c
3 changed files with 322 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/Dockerfile
View File

@@ -25,7 +25,7 @@ RUN mkdir -p /tmp/chromium-data-dir && \
# Install dependencies # Install dependencies
RUN apt-get update && apt-get install -y \ RUN apt-get update && apt-get install -y \
libgbm-dev \ libgbm1 \
libnss3 \ libnss3 \
libatk1.0-0 \ libatk1.0-0 \
libatk-bridge2.0-0 \ libatk-bridge2.0-0 \

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

@@ -8,7 +8,7 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead'; import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination'; import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import { useEffect } from "react"; import { memo, useCallback, useEffect, useMemo } from "react";
import { WorkflowFile } from "maxun-core"; import { WorkflowFile } from "maxun-core";
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import { import {
@@ -76,6 +76,64 @@ interface RecordingsTableProps {
handleDuplicateRobot: (id: string, name: string, params: string[]) => void; handleDuplicateRobot: (id: string, name: string, params: string[]) => void;
} }
// Virtualized row component for efficient rendering
const TableRowMemoized = memo(({ row, columns, handlers }: any) => {
return (
<TableRow hover role="checkbox" tabIndex={-1}>
{columns.map((column: Column) => {
const value: any = row[column.id];
if (value !== undefined) {
return (
<MemoizedTableCell key={column.id} align={column.align}>
{value}
</MemoizedTableCell>
);
} else {
switch (column.id) {
case 'interpret':
return (
<MemoizedTableCell key={column.id} align={column.align}>
<MemoizedInterpretButton handleInterpret={() => handlers.handleRunRecording(row.id, row.name, row.params || [])} />
</MemoizedTableCell>
);
case 'schedule':
return (
<MemoizedTableCell key={column.id} align={column.align}>
<MemoizedScheduleButton handleSchedule={() => handlers.handleScheduleRecording(row.id, row.name, row.params || [])} />
</MemoizedTableCell>
);
case 'integrate':
return (
<MemoizedTableCell key={column.id} align={column.align}>
<MemoizedIntegrateButton handleIntegrate={() => handlers.handleIntegrateRecording(row.id, row.name, row.params || [])} />
</MemoizedTableCell>
);
case 'options':
return (
<MemoizedTableCell key={column.id} align={column.align}>
<MemoizedOptionsButton
handleEdit={() => handlers.handleEditRobot(row.id, row.name, row.params || [])}
handleDuplicate={() => handlers.handleDuplicateRobot(row.id, row.name, row.params || [])}
handleDelete={() => handlers.handleDelete(row.id)}
/>
</MemoizedTableCell>
);
case 'settings':
return (
<MemoizedTableCell key={column.id} align={column.align}>
<MemoizedSettingsButton handleSettings={() => handlers.handleSettingsRecording(row.id, row.name, row.params || [])} />
</MemoizedTableCell>
);
default:
return null;
}
}
})}
</TableRow>
);
});
export const RecordingsTable = ({ export const RecordingsTable = ({
handleEditRecording, handleEditRecording,
handleRunRecording, handleRunRecording,
@@ -90,31 +148,16 @@ export const RecordingsTable = ({
const [rows, setRows] = React.useState<Data[]>([]); const [rows, setRows] = React.useState<Data[]>([]);
const [isModalOpen, setModalOpen] = React.useState(false); const [isModalOpen, setModalOpen] = React.useState(false);
const [searchTerm, setSearchTerm] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState('');
const [isLoading, setIsLoading] = React.useState(true);
const columns: readonly Column[] = [ const columns = useMemo(() => [
{ id: 'interpret', label: t('recordingtable.run'), minWidth: 80 }, { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
{ id: 'name', label: t('recordingtable.name'), minWidth: 80 }, { id: 'name', label: t('recordingtable.name'), minWidth: 80 },
{ { id: 'schedule', label: t('recordingtable.schedule'), minWidth: 80 },
id: 'schedule', { id: 'integrate', label: t('recordingtable.integrate'), minWidth: 80 },
label: t('recordingtable.schedule'), { id: 'settings', label: t('recordingtable.settings'), minWidth: 80 },
minWidth: 80, { id: 'options', label: t('recordingtable.options'), minWidth: 80 },
}, ], [t]);
{
id: 'integrate',
label: t('recordingtable.integrate'),
minWidth: 80,
},
{
id: 'settings',
label: t('recordingtable.settings'),
minWidth: 80,
},
{
id: 'options',
label: t('recordingtable.options'),
minWidth: 80,
},
];
const { const {
notify, notify,
@@ -132,54 +175,63 @@ export const RecordingsTable = ({
setRecordingId } = useGlobalInfoStore(); setRecordingId } = useGlobalInfoStore();
const navigate = useNavigate(); const navigate = useNavigate();
const handleChangePage = (event: unknown, newPage: number) => { const handleChangePage = useCallback((event: unknown, newPage: number) => {
setPage(newPage); setPage(newPage);
}; }, []);
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(+event.target.value); setRowsPerPage(+event.target.value);
setPage(0); setPage(0);
}; };
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value); setSearchTerm(event.target.value);
setPage(0); setPage(0);
}; }, []);
const fetchRecordings = async () => { const fetchRecordings = useCallback(async () => {
const recordings = await getStoredRecordings(); setIsLoading(true);
if (recordings) { try {
const parsedRows: Data[] = []; const recordings = await getStoredRecordings();
recordings.map((recording: any, index: number) => { if (recordings) {
if (recording && recording.recording_meta) { const parsedRows = recordings
parsedRows.push({ .map((recording: any, index: number) => {
id: index, if (recording?.recording_meta) {
...recording.recording_meta, return {
content: recording.recording id: index,
}); ...recording.recording_meta,
} content: recording.recording
}); };
setRecordings(parsedRows.map((recording) => recording.name)); }
setRows(parsedRows); return null;
} else { })
console.log('No recordings found.'); .filter(Boolean);
setRecordings(parsedRows.map((recording) => recording.name));
setRows(parsedRows);
}
} catch (error) {
console.error('Error fetching recordings:', error);
notify('error', t('recordingtable.notifications.fetch_error'));
} finally {
setIsLoading(false);
} }
} }, [setRecordings, notify, t]);
const handleNewRecording = async () => { const handleNewRecording = useCallback(async () => {
if (browserId) { if (browserId) {
setBrowserId(null); setBrowserId(null);
await stopRecording(browserId); await stopRecording(browserId);
} }
setModalOpen(true); setModalOpen(true);
}; }, [browserId]);
const handleStartRecording = () => { const handleStartRecording = useCallback(() => {
setBrowserId('new-recording'); setBrowserId('new-recording');
setRecordingName(''); setRecordingName('');
setRecordingId(''); setRecordingId('');
navigate('/recording'); navigate('/recording');
} }, [navigate]);
const startRecording = () => { const startRecording = () => {
setModalOpen(false); setModalOpen(false);
@@ -195,14 +247,61 @@ export const RecordingsTable = ({
if (rows.length === 0) { if (rows.length === 0) {
fetchRecordings(); fetchRecordings();
} }
}, []); }, [fetchRecordings]);
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
const debouncedSearchTerm = useDebounce(searchTerm, 300);
// Filter rows based on search term // Filter rows based on search term
const filteredRows = rows.filter((row) => const filteredRows = useMemo(() => {
row.name.toLowerCase().includes(searchTerm.toLowerCase()) const searchLower = debouncedSearchTerm.toLowerCase();
); return debouncedSearchTerm
? rows.filter(row => row.name.toLowerCase().includes(searchLower))
: rows;
}, [rows, debouncedSearchTerm]);
const visibleRows = useMemo(() => {
const start = page * rowsPerPage;
return filteredRows.slice(start, start + rowsPerPage);
}, [filteredRows, page, rowsPerPage]);
const handlers = useMemo(() => ({
handleRunRecording,
handleScheduleRecording,
handleIntegrateRecording,
handleSettingsRecording,
handleEditRobot,
handleDuplicateRobot,
handleDelete: async (id: string) => {
const hasRuns = await checkRunsForRecording(id);
if (hasRuns) {
notify('warning', t('recordingtable.notifications.delete_warning'));
return;
}
const success = await deleteRecordingFromStorage(id);
if (success) {
setRows([]);
notify('success', t('recordingtable.notifications.delete_success'));
fetchRecordings();
}
}
}), [handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot, notify, t]);
return ( return (
<React.Fragment> <React.Fragment>
@@ -244,7 +343,7 @@ export const RecordingsTable = ({
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
{rows.length === 0 ? ( {isLoading ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50%"> <Box display="flex" justifyContent="center" alignItems="center" height="50%">
<CircularProgress /> <CircularProgress />
</Box> </Box>
@@ -254,99 +353,32 @@ export const RecordingsTable = ({
<TableHead> <TableHead>
<TableRow> <TableRow>
{columns.map((column) => ( {columns.map((column) => (
<TableCell <MemoizedTableCell
key={column.id} key={column.id}
align={column.align} // align={column.align}
style={{ minWidth: column.minWidth }} style={{ minWidth: column.minWidth }}
> >
{column.label} {column.label}
</TableCell> </MemoizedTableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{filteredRows.length !== 0 ? filteredRows {visibleRows.map((row) => (
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) <TableRowMemoized
.map((row) => { key={row.id}
return ( row={row}
<TableRow hover role="checkbox" tabIndex={-1} key={row.id}> columns={columns}
{columns.map((column) => { handlers={handlers}
// @ts-ignore />
const value: any = row[column.id]; ))}
if (value !== undefined) {
return (
<TableCell key={column.id} align={column.align}>
{value}
</TableCell>
);
} else {
switch (column.id) {
case 'interpret':
return (
<TableCell key={column.id} align={column.align}>
<InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
</TableCell>
);
case 'schedule':
return (
<TableCell key={column.id} align={column.align}>
<ScheduleButton handleSchedule={() => handleScheduleRecording(row.id, row.name, row.params || [])} />
</TableCell>
);
case 'integrate':
return (
<TableCell key={column.id} align={column.align}>
<IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
</TableCell>
);
case 'options':
return (
<TableCell key={column.id} align={column.align}>
<OptionsButton
handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
handleDuplicate={() => {
handleDuplicateRobot(row.id, row.name, row.params || []);
}}
handleDelete={() => {
checkRunsForRecording(row.id).then((result: boolean) => {
if (result) {
notify('warning', t('recordingtable.notifications.delete_warning'));
}
})
deleteRecordingFromStorage(row.id).then((result: boolean) => {
if (result) {
setRows([]);
notify('success', t('recordingtable.notifications.delete_success'));
fetchRecordings();
}
})
}}
/>
</TableCell>
);
case 'settings':
return (
<TableCell key={column.id} align={column.align}>
<SettingsButton handleSettings={() => handleSettingsRecording(row.id, row.name, row.params || [])} />
</TableCell>
);
default:
return null;
}
}
})}
</TableRow>
);
})
: null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
)} )}
<TablePagination <TablePagination
rowsPerPageOptions={[10, 25, 50]} rowsPerPageOptions={[10, 25, 50, 100]}
component="div" component="div"
count={filteredRows.length} count={filteredRows.length}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
@@ -511,6 +543,15 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
); );
}; };
const MemoizedTableCell = memo(TableCell);
// Memoized action buttons
const MemoizedInterpretButton = memo(InterpretButton);
const MemoizedScheduleButton = memo(ScheduleButton);
const MemoizedIntegrateButton = memo(IntegrateButton);
const MemoizedSettingsButton = memo(SettingsButton);
const MemoizedOptionsButton = memo(OptionsButton);
const modalStyle = { const modalStyle = {
top: '50%', top: '50%',
left: '50%', left: '50%',

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

@@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { useEffect, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Paper from '@mui/material/Paper'; import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table'; import Table from '@mui/material/Table';
@@ -69,90 +69,149 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const translatedColumns = columns.map(column => ({ const translatedColumns = useMemo(() =>
...column, columns.map(column => ({
label: t(`runstable.${column.id}`, column.label) ...column,
})); label: t(`runstable.${column.id}`, column.label)
})),
[t]
);
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10); const [rowsPerPage, setRowsPerPage] = useState(10);
const [rows, setRows] = useState<Data[]>([]); const [rows, setRows] = useState<Data[]>([]);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [isLoading, setIsLoading] = useState(true);
const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore(); const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
const handleAccordionChange = (robotMetaId: string, isExpanded: boolean) => { const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
if (isExpanded) { navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
navigate(`/runs/${robotMetaId}`); }, [navigate]);
} else {
navigate(`/runs`);
}
};
const handleChangePage = (event: unknown, newPage: number) => { const handleChangePage = useCallback((event: unknown, newPage: number) => {
setPage(newPage); setPage(newPage);
}; }, []);
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(+event.target.value); setRowsPerPage(+event.target.value);
setPage(0); setPage(0);
}; }, []);
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => { const debouncedSearch = useCallback((fn: Function, delay: number) => {
setSearchTerm(event.target.value); let timeoutId: NodeJS.Timeout;
setPage(0); return (...args: any[]) => {
}; clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}, []);
const fetchRuns = async () => { const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const runs = await getStoredRuns(); const debouncedSetSearch = debouncedSearch((value: string) => {
if (runs) { setSearchTerm(value);
const parsedRows: Data[] = runs.map((run: any, index: number) => ({ setPage(0);
id: index, }, 300);
...run, debouncedSetSearch(event.target.value);
})); }, [debouncedSearch]);
setRows(parsedRows);
} else { const fetchRuns = useCallback(async () => {
notify('error', t('runstable.notifications.no_runs')); try {
setIsLoading(true);
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 {
setIsLoading(false);
} }
}; }, [notify, t]);
useEffect(() => { useEffect(() => {
if (rows.length === 0 || rerenderRuns) { let mounted = true;
fetchRuns();
setRerenderRuns(false);
}
}, [rerenderRuns, rows.length, setRerenderRuns]);
const handleDelete = () => { if (rows.length === 0 || rerenderRuns) {
fetchRuns().then(() => {
if (mounted) {
setRerenderRuns(false);
}
});
}
return () => {
mounted = false;
};
}, [rerenderRuns, rows.length, setRerenderRuns, fetchRuns]);
const handleDelete = useCallback(() => {
setRows([]); setRows([]);
notify('success', t('runstable.notifications.delete_success')); notify('success', t('runstable.notifications.delete_success'));
fetchRuns(); fetchRuns();
}; }, [notify, t, fetchRuns]);
// Filter rows based on search term // Filter rows based on search term
const filteredRows = rows.filter((row) => const filteredRows = useMemo(() =>
row.name.toLowerCase().includes(searchTerm.toLowerCase()) rows.filter((row) =>
row.name.toLowerCase().includes(searchTerm.toLowerCase())
),
[rows, searchTerm]
); );
// Group filtered rows by robot meta id // Group filtered rows by robot meta id
const groupedRows = filteredRows.reduce((acc, row) => { const groupedRows = useMemo(() =>
if (!acc[row.robotMetaId]) { filteredRows.reduce((acc, row) => {
acc[row.robotMetaId] = []; if (!acc[row.robotMetaId]) {
} acc[row.robotMetaId] = [];
acc[row.robotMetaId].push(row); }
return acc; acc[row.robotMetaId].push(row);
}, {} as Record<string, Data[]>); return acc;
}, {} as Record<string, Data[]>),
[filteredRows]
);
const renderTableRows = useCallback((data: Data[]) => {
const start = page * rowsPerPage;
const end = start + rowsPerPage;
return data
.slice(start, end)
.map((row) => (
<CollapsibleRow
key={`row-${row.id}`}
row={row}
handleDelete={handleDelete}
isOpen={runId === row.runId && runningRecordingName === row.name}
currentLog={currentInterpretationLog}
abortRunHandler={abortRunHandler}
runningRecordingName={runningRecordingName}
/>
));
}, [page, rowsPerPage, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete]);
if (isLoading) {
return (
<Box display="flex" justifyContent="center" alignItems="center" height="50vh">
<CircularProgress />
</Box>
);
}
return ( return (
<React.Fragment> <React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}> <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" component="h2">
{t('runstable.runs', 'Runs')} {t('runstable.runs', 'Runs')}
</Typography> </Typography>
<TextField <TextField
size="small" size="small"
placeholder={t('runstable.search', 'Search runs...')} placeholder={t('runstable.search', 'Search runs...')}
value={searchTerm}
onChange={handleSearchChange} onChange={handleSearchChange}
InputProps={{ InputProps={{
startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} /> startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
@@ -160,62 +219,50 @@ export const RunsTable: React.FC<RunsTableProps> = ({
sx={{ width: '250px' }} sx={{ width: '250px' }}
/> />
</Box> </Box>
{rows.length === 0 ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50%"> <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
<CircularProgress /> {Object.entries(groupedRows).map(([id, data]) => (
</Box> <Accordion
) : ( key={id}
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}> onChange={(event, isExpanded) => handleAccordionChange(id, isExpanded)}
{Object.entries(groupedRows).map(([id, data]) => ( TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
<Accordion key={id} onChange={(event, isExpanded) => handleAccordionChange(id, isExpanded)}> >
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="h6">{data[data.length - 1].name}</Typography> <Typography variant="h6">{data[data.length - 1].name}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Table stickyHeader aria-label="sticky table"> <Table stickyHeader aria-label="sticky table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell /> <TableCell />
{translatedColumns.map((column) => ( {translatedColumns.map((column) => (
<TableCell <TableCell
key={column.id} key={column.id}
align={column.align} align={column.align}
style={{ minWidth: column.minWidth }} style={{ minWidth: column.minWidth }}
> >
{column.label} {column.label}
</TableCell> </TableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{data {renderTableRows(data)}
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) </TableBody>
.map((row) => ( </Table>
<CollapsibleRow </AccordionDetails>
row={row} </Accordion>
handleDelete={handleDelete} ))}
key={`row-${row.id}`} </TableContainer>
isOpen={runId === row.runId && runningRecordingName === row.name}
currentLog={currentInterpretationLog}
abortRunHandler={abortRunHandler}
runningRecordingName={runningRecordingName}
/>
))}
</TableBody>
</Table>
</AccordionDetails>
</Accordion>
))}
</TableContainer>
)}
<TablePagination <TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div" component="div"
count={filteredRows.length} count={filteredRows.length}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onPageChange={handleChangePage} onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
rowsPerPageOptions={[10, 25, 50, 100]}
/> />
</React.Fragment> </React.Fragment>
); );