search robots and runs

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;
   interpreterSettings: RunSettings;
@@ -62,6 +61,7 @@ export const RunsTable = (
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
 
   console.log(`rows runs: ${JSON.stringify(rows)}`);
 
@@ -76,6 +76,11 @@ export const RunsTable = (
     setPage(0);
   };
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+    setPage(0);
+  };
+
   const fetchRuns = async () => {
     const runs = await getStoredRuns();
     if (runs) {
@@ -105,8 +110,13 @@ export const RunsTable = (
     fetchRuns();
   };
 
-  // Group runs by recording name
-  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 runs by recording name
+  const groupedRows = filteredRows.reduce((acc, row) => {
     if (!acc[row.name]) {
       acc[row.name] = [];
     }
@@ -116,9 +126,21 @@ export const RunsTable = (
 
   return (
     <React.Fragment>
-      <Typography variant="h6" gutterBottom>
-        All Runs
-      </Typography>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+        <Typography variant="h6" gutterBottom>
+          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' }}>
         {Object.entries(groupedRows).map(([name, group]) => (
           <Accordion key={name}>
@@ -162,7 +184,7 @@ export const RunsTable = (
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"
-        count={rows.length}
+        count={filteredRows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
@@ -170,4 +192,4 @@ export const RunsTable = (
       />
     </React.Fragment>
   );
-};
+};