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

4
server/Dockerfile
View File

@@ -25,7 +25,7 @@ RUN mkdir -p /tmp/chromium-data-dir && \
# Install dependencies
RUN apt-get update && apt-get install -y \
libgbm-dev \
libgbm1 \
libnss3 \
libatk1.0-0 \
libatk-bridge2.0-0 \
@@ -48,4 +48,4 @@ RUN apt-get update && apt-get install -y \
EXPOSE ${BACKEND_PORT:-8080}
# Start the backend using the start script
CMD ["npm", "run", "server"]
CMD ["npm", "run", "server"]

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 TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import { useEffect } from "react";
import { memo, useCallback, useEffect, useMemo } from "react";
import { WorkflowFile } from "maxun-core";
import SearchIcon from '@mui/icons-material/Search';
import {
@@ -76,6 +76,64 @@ interface RecordingsTableProps {
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 = ({
handleEditRecording,
handleRunRecording,
@@ -90,31 +148,16 @@ export const RecordingsTable = ({
const [rows, setRows] = React.useState<Data[]>([]);
const [isModalOpen, setModalOpen] = React.useState(false);
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: 'name', label: t('recordingtable.name'), minWidth: 80 },
{
id: 'schedule',
label: t('recordingtable.schedule'),
minWidth: 80,
},
{
id: 'integrate',
label: t('recordingtable.integrate'),
minWidth: 80,
},
{
id: 'settings',
label: t('recordingtable.settings'),
minWidth: 80,
},
{
id: 'options',
label: t('recordingtable.options'),
minWidth: 80,
},
];
{ id: 'schedule', label: t('recordingtable.schedule'), minWidth: 80 },
{ id: 'integrate', label: t('recordingtable.integrate'), minWidth: 80 },
{ id: 'settings', label: t('recordingtable.settings'), minWidth: 80 },
{ id: 'options', label: t('recordingtable.options'), minWidth: 80 },
], [t]);
const {
notify,
@@ -132,54 +175,63 @@ export const RecordingsTable = ({
setRecordingId } = useGlobalInfoStore();
const navigate = useNavigate();
const handleChangePage = (event: unknown, newPage: number) => {
const handleChangePage = useCallback((event: unknown, newPage: number) => {
setPage(newPage);
};
}, []);
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
setPage(0);
};
}, []);
const fetchRecordings = async () => {
const recordings = await getStoredRecordings();
if (recordings) {
const parsedRows: Data[] = [];
recordings.map((recording: any, index: number) => {
if (recording && recording.recording_meta) {
parsedRows.push({
id: index,
...recording.recording_meta,
content: recording.recording
});
}
});
setRecordings(parsedRows.map((recording) => recording.name));
setRows(parsedRows);
} else {
console.log('No recordings found.');
const fetchRecordings = useCallback(async () => {
setIsLoading(true);
try {
const recordings = await getStoredRecordings();
if (recordings) {
const parsedRows = recordings
.map((recording: any, index: number) => {
if (recording?.recording_meta) {
return {
id: index,
...recording.recording_meta,
content: recording.recording
};
}
return null;
})
.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) {
setBrowserId(null);
await stopRecording(browserId);
}
setModalOpen(true);
};
}, [browserId]);
const handleStartRecording = () => {
const handleStartRecording = useCallback(() => {
setBrowserId('new-recording');
setRecordingName('');
setRecordingId('');
navigate('/recording');
}
}, [navigate]);
const startRecording = () => {
setModalOpen(false);
@@ -195,14 +247,61 @@ export const RecordingsTable = ({
if (rows.length === 0) {
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
const filteredRows = rows.filter((row) =>
row.name.toLowerCase().includes(searchTerm.toLowerCase())
);
const filteredRows = useMemo(() => {
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 (
<React.Fragment>
@@ -244,7 +343,7 @@ export const RecordingsTable = ({
</IconButton>
</Box>
</Box>
{rows.length === 0 ? (
{isLoading ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50%">
<CircularProgress />
</Box>
@@ -254,99 +353,32 @@ export const RecordingsTable = ({
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
<MemoizedTableCell
key={column.id}
align={column.align}
// align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
</MemoizedTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{filteredRows.length !== 0 ? filteredRows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
{columns.map((column) => {
// @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}
{visibleRows.map((row) => (
<TableRowMemoized
key={row.id}
row={row}
columns={columns}
handlers={handlers}
/>
))}
</TableBody>
</Table>
</TableContainer>
)}
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
rowsPerPageOptions={[10, 25, 50, 100]}
component="div"
count={filteredRows.length}
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 = {
top: '50%',
left: '50%',

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

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