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

search robots and runs

Browse Source
This commit is contained in:
AmitChauhan63390
2024-11-20 14:16:26 +05:30
parent c9dc44884b
commit 41c7be5f1d
2 changed files with 79 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/molecules/RecordingsTable.tsx
View File

@@ -11,6 +11,7 @@ import { useEffect } from "react";
import { WorkflowFile } from "maxun-core"; import { WorkflowFile } from "maxun-core";
import { IconButton, Button, Box, Typography, TextField } from "@mui/material"; import { IconButton, Button, Box, Typography, TextField } from "@mui/material";
import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power } from "@mui/icons-material"; import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power } from "@mui/icons-material";
import SearchIcon from '@mui/icons-material/Search';
import LinkIcon from '@mui/icons-material/Link'; import LinkIcon from '@mui/icons-material/Link';
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore } from "../../context/globalInfo";
import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage"; import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
@@ -19,7 +20,6 @@ import { useNavigate } from 'react-router-dom';
import { stopRecording } from "../../api/recording"; import { stopRecording } from "../../api/recording";
import { GenericModal } from '../atoms/GenericModal'; import { GenericModal } from '../atoms/GenericModal';
/** TODO: /** TODO:
* 1. allow editing existing robot after persisting browser steps * 1. allow editing existing robot after persisting browser steps
* 2. show robot settings: id, url, etc. * 2. show robot settings: id, url, etc.
@@ -36,17 +36,6 @@ interface Column {
const columns: readonly Column[] = [ const columns: readonly Column[] = [
{ id: 'interpret', label: 'Run', minWidth: 80 }, { id: 'interpret', label: 'Run', minWidth: 80 },
{ id: 'name', label: 'Name', minWidth: 80 }, { id: 'name', label: 'Name', minWidth: 80 },
// {
// id: 'createdAt',
// label: 'Created at',
// minWidth: 80,
// //format: (value: string) => value.toLocaleString('en-US'),
// },
// {
// id: 'edit',
// label: 'Edit',
// minWidth: 80,
// },
{ {
id: 'schedule', id: 'schedule',
label: 'Schedule', label: 'Schedule',
@@ -57,12 +46,6 @@ const columns: readonly Column[] = [
label: 'Integrate', label: 'Integrate',
minWidth: 80, minWidth: 80,
}, },
// {
// id: 'updatedAt',
// label: 'Updated at',
// minWidth: 80,
// //format: (value: string) => value.toLocaleString('en-US'),
// },
{ {
id: 'settings', id: 'settings',
label: 'Settings', label: 'Settings',
@@ -97,6 +80,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
const [rowsPerPage, setRowsPerPage] = React.useState(10); const [rowsPerPage, setRowsPerPage] = React.useState(10);
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('');
console.log('rows', rows); console.log('rows', rows);
@@ -112,6 +96,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
setPage(0); setPage(0);
}; };
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
setPage(0);
};
const fetchRecordings = async () => { const fetchRecordings = async () => {
const recordings = await getStoredRecordings(); const recordings = await getStoredRecordings();
if (recordings) { if (recordings) {
@@ -150,7 +139,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
const startRecording = () => { const startRecording = () => {
setModalOpen(false); setModalOpen(false);
handleStartRecording(); handleStartRecording();
// notify('info', 'New Recording started for ' + recordingUrl);
}; };
useEffect(() => { useEffect(() => {
@@ -159,34 +147,50 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
} }
}, []); }, []);
// Filter rows based on search term
const filteredRows = rows.filter((row) =>
row.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return ( return (
<React.Fragment> <React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center"> <Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
My Robots My Robots
</Typography> </Typography>
<IconButton <Box display="flex" alignItems="center" gap={2}>
aria-label="new" <TextField
size={"small"} size="small"
onClick={handleNewRecording} placeholder="Search robots..."
sx={{ value={searchTerm}
width: '140px', onChange={handleSearchChange}
borderRadius: '5px', InputProps={{
padding: '8px', startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
background: '#ff00c3', }}
color: 'white', sx={{ width: '250px' }}
marginRight: '10px', />
fontFamily: '"Roboto","Helvetica","Arial",sans-serif', <IconButton
fontWeight: '500', aria-label="new"
fontSize: '0.875rem', size={"small"}
lineHeight: '1.75', onClick={handleNewRecording}
letterSpacing: '0.02857em', sx={{
'&:hover': { color: 'white', backgroundColor: '#ff00c3' } width: '140px',
} borderRadius: '5px',
} padding: '8px',
> background: '#ff00c3',
<Add sx={{ marginRight: '5px' }} /> Create Robot color: 'white',
</IconButton> marginRight: '10px',
fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
fontWeight: '500',
fontSize: '0.875rem',
lineHeight: '1.75',
letterSpacing: '0.02857em',
'&:hover': { color: 'white', backgroundColor: '#ff00c3' }
}}
>
<Add sx={{ marginRight: '5px' }} /> Create Robot
</IconButton>
</Box>
</Box> </Box>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}> <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
<Table stickyHeader aria-label="sticky table"> <Table stickyHeader aria-label="sticky table">
@@ -204,7 +208,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.length !== 0 ? rows {filteredRows.length !== 0 ? filteredRows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => { .map((row) => {
return ( return (
@@ -226,16 +230,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
<InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} /> <InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
</TableCell> </TableCell>
); );
// case 'edit':
// return (
// <TableCell key={column.id} align={column.align}>
// <IconButton aria-label="add" size="small" onClick={() => {
// handleEditRecording(row.id, row.name);
// }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
// <Edit />
// </IconButton>
// </TableCell>
// );
case 'schedule': case 'schedule':
return ( return (
<TableCell key={column.id} align={column.align}> <TableCell key={column.id} align={column.align}>
@@ -285,7 +279,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
<TablePagination <TablePagination
rowsPerPageOptions={[10, 25, 50]} rowsPerPageOptions={[10, 25, 50]}
component="div" component="div"
count={rows ? rows.length : 0} count={filteredRows.length}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onPageChange={handleChangePage} onPageChange={handleChangePage}
@@ -331,7 +325,6 @@ const InterpretButton = ({ handleInterpret }: InterpretButtonProps) => {
) )
} }
interface ScheduleButtonProps { interface ScheduleButtonProps {
handleSchedule: () => void; handleSchedule: () => void;
} }

42
src/components/molecules/RunsTable.tsx
View File

@@ -12,8 +12,9 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
import { getStoredRuns } from "../../api/storage"; import { getStoredRuns } from "../../api/storage";
import { RunSettings } from "./RunSettings"; import { RunSettings } from "./RunSettings";
import { CollapsibleRow } from "./ColapsibleRow"; import { CollapsibleRow } from "./ColapsibleRow";
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material'; import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SearchIcon from '@mui/icons-material/Search';
interface Column { interface Column {
id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings'; id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
@@ -28,7 +29,6 @@ export const columns: readonly Column[] = [
{ id: 'name', label: 'Robot Name', minWidth: 80 }, { id: 'name', label: 'Robot Name', minWidth: 80 },
{ id: 'startedAt', label: 'Started at', minWidth: 80 }, { id: 'startedAt', label: 'Started at', minWidth: 80 },
{ id: 'finishedAt', label: 'Finished at', minWidth: 80 }, { id: 'finishedAt', label: 'Finished at', minWidth: 80 },
// { id: 'task', label: 'Task', minWidth: 80 },
{ id: 'settings', label: 'Settings', minWidth: 80 }, { id: 'settings', label: 'Settings', minWidth: 80 },
{ id: 'delete', label: 'Delete', minWidth: 80 }, { id: 'delete', label: 'Delete', minWidth: 80 },
]; ];
@@ -42,7 +42,6 @@ export interface Data {
runByUserId?: string; runByUserId?: string;
runByScheduleId?: string; runByScheduleId?: string;
runByAPI?: boolean; runByAPI?: boolean;
// task: string;
log: string; log: string;
runId: string; runId: string;
interpreterSettings: RunSettings; interpreterSettings: RunSettings;
@@ -62,6 +61,7 @@ export const RunsTable = (
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('');
console.log(`rows runs: ${JSON.stringify(rows)}`); console.log(`rows runs: ${JSON.stringify(rows)}`);
@@ -76,6 +76,11 @@ export const RunsTable = (
setPage(0); setPage(0);
}; };
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
setPage(0);
};
const fetchRuns = async () => { const fetchRuns = async () => {
const runs = await getStoredRuns(); const runs = await getStoredRuns();
if (runs) { if (runs) {
@@ -105,8 +110,13 @@ export const RunsTable = (
fetchRuns(); fetchRuns();
}; };
// Group runs by recording name // Filter rows based on search term
const groupedRows = rows.reduce((acc, row) => { const filteredRows = rows.filter((row) =>
row.name.toLowerCase().includes(searchTerm.toLowerCase())
);
// Group filtered runs by recording name
const groupedRows = filteredRows.reduce((acc, row) => {
if (!acc[row.name]) { if (!acc[row.name]) {
acc[row.name] = []; acc[row.name] = [];
} }
@@ -116,9 +126,21 @@ export const RunsTable = (
return ( return (
<React.Fragment> <React.Fragment>
<Typography variant="h6" gutterBottom> <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
All Runs <Typography variant="h6" gutterBottom>
</Typography> All Runs
</Typography>
<TextField
size="small"
placeholder="Search runs..."
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
}}
sx={{ width: '250px' }}
/>
</Box>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}> <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
{Object.entries(groupedRows).map(([name, group]) => ( {Object.entries(groupedRows).map(([name, group]) => (
<Accordion key={name}> <Accordion key={name}>
@@ -162,7 +184,7 @@ export const RunsTable = (
<TablePagination <TablePagination
rowsPerPageOptions={[10, 25, 50]} rowsPerPageOptions={[10, 25, 50]}
component="div" component="div"
count={rows.length} count={filteredRows.length}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onPageChange={handleChangePage} onPageChange={handleChangePage}
@@ -170,4 +192,4 @@ export const RunsTable = (
/> />
</React.Fragment> </React.Fragment>
); );
}; };