diff --git a/src/components/molecules/RecordingsTable.tsx b/src/components/molecules/RecordingsTable.tsx index a3a6ee08..09ee2239 100644 --- a/src/components/molecules/RecordingsTable.tsx +++ b/src/components/molecules/RecordingsTable.tsx @@ -9,8 +9,12 @@ import TablePagination from '@mui/material/TablePagination'; import TableRow from '@mui/material/TableRow'; import { useEffect } from "react"; import { WorkflowFile } from "maxun-core"; + + +import SearchIcon from '@mui/icons-material/Search'; import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText } from "@mui/material"; import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, } from "@mui/icons-material"; + import LinkIcon from '@mui/icons-material/Link'; import { useGlobalInfoStore } from "../../context/globalInfo"; import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage"; @@ -18,10 +22,12 @@ import { Add } from "@mui/icons-material"; import { useNavigate } from 'react-router-dom'; import { stopRecording } from "../../api/recording"; import { GenericModal } from '../atoms/GenericModal'; + import axios from 'axios'; import { apiUrl } from '../../apiConfig'; import { Menu as MenuIcon } from '@mui/icons-material'; + /** TODO: * 1. allow editing existing robot after persisting browser steps * 2. show robot settings: id, url, etc. @@ -38,17 +44,6 @@ interface Column { const columns: readonly Column[] = [ { id: 'interpret', label: 'Run', 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', label: 'Schedule', @@ -59,12 +54,6 @@ const columns: readonly Column[] = [ label: 'Integrate', minWidth: 80, }, - // { - // id: 'updatedAt', - // label: 'Updated at', - // minWidth: 80, - // //format: (value: string) => value.toLocaleString('en-US'), - // }, { id: 'settings', label: 'Settings', @@ -101,6 +90,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl const [rowsPerPage, setRowsPerPage] = React.useState(10); const [rows, setRows] = React.useState([]); const [isModalOpen, setModalOpen] = React.useState(false); + const [searchTerm, setSearchTerm] = React.useState(''); const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore(); const navigate = useNavigate(); @@ -114,6 +104,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl setPage(0); }; + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + setPage(0); + }; + const fetchRecordings = async () => { const recordings = await getStoredRecordings(); if (recordings) { @@ -152,7 +147,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl const startRecording = () => { setModalOpen(false); handleStartRecording(); - // notify('info', 'New Recording started for ' + recordingUrl); }; useEffect(() => { @@ -161,36 +155,54 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl } }, []); + + // Filter rows based on search term + const filteredRows = rows.filter((row) => + row.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( My Robots - - Create Robot - + + + }} + sx={{ width: '250px' }} + /> + + Create Robot + + @@ -208,7 +220,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl - {rows.length !== 0 ? rows + {filteredRows.length !== 0 ? filteredRows .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row) => { return ( @@ -230,16 +242,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl handleRunRecording(row.id, row.name, row.params || [])} /> ); - // case 'edit': - // return ( - // - // { - // handleEditRecording(row.id, row.name); - // }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}> - // - // - // - // ); case 'schedule': return ( @@ -300,7 +302,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl { ) } - interface ScheduleButtonProps { handleSchedule: () => void; } diff --git a/src/components/molecules/RunsTable.tsx b/src/components/molecules/RunsTable.tsx index dcb0cdd1..669cecd6 100644 --- a/src/components/molecules/RunsTable.tsx +++ b/src/components/molecules/RunsTable.tsx @@ -12,8 +12,9 @@ import { useGlobalInfoStore } from "../../context/globalInfo"; import { getStoredRuns } from "../../api/storage"; import { RunSettings } from "./RunSettings"; 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 SearchIcon from '@mui/icons-material/Search'; interface Column { id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings'; @@ -28,7 +29,6 @@ export const columns: readonly Column[] = [ { id: 'name', label: 'Robot Name', minWidth: 80 }, { id: 'startedAt', label: 'Started at', minWidth: 80 }, { id: 'finishedAt', label: 'Finished at', minWidth: 80 }, - // { id: 'task', label: 'Task', minWidth: 80 }, { id: 'settings', label: 'Settings', minWidth: 80 }, { id: 'delete', label: 'Delete', minWidth: 80 }, ]; @@ -42,7 +42,6 @@ export interface Data { runByUserId?: string; runByScheduleId?: string; runByAPI?: boolean; - // task: string; log: string; runId: string; robotId: string; @@ -65,6 +64,9 @@ export const RunsTable = ( const [rowsPerPage, setRowsPerPage] = useState(10); const [rows, setRows] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + + const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore(); const handleChangePage = (event: unknown, newPage: number) => { @@ -76,6 +78,11 @@ export const RunsTable = ( setPage(0); }; + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + setPage(0); + }; + const fetchRuns = async () => { const runs = await getStoredRuns(); if (runs) { @@ -105,8 +112,15 @@ export const RunsTable = ( fetchRuns(); }; - // Group runs by robot meta id - const groupedRows = rows.reduce((acc, row) => { + + // Filter rows based on search term + const filteredRows = rows.filter((row) => + row.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + // Group filtered rows by robot meta id + const groupedRows = filteredRows.reduce((acc, row) => { + if (!acc[row.robotMetaId]) { acc[row.robotMetaId] = []; } @@ -116,14 +130,28 @@ export const RunsTable = ( return ( - - All Runs - + + + All Runs + + + }} + sx={{ width: '250px' }} + /> + {Object.entries(groupedRows).map(([id, data]) => ( }> - {data[data.length - 1].name} + + {data[data.length - 1].name} +
@@ -164,7 +192,7 @@ export const RunsTable = (