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

Merge pull request #358 from getmaxun/improve-ui

Browse Source 
feat(ui): runs & robots loader
This commit is contained in:
Karishma Shukla
2025-01-18 19:02:24 +05:30
committed by GitHub
parent 1060d6449b 395a352331
commit ac544d11ef
2 changed files with 148 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ 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 { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText, CircularProgress } from "@mui/material";
import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, MoreHoriz } from "@mui/icons-material";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
@@ -200,101 +200,107 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
</IconButton>
</Box>
</Box>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</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={() => {
{rows.length === 0 ? (
<Box display="flex" justifyContent="center" alignItems="center" height="50%">
<CircularProgress />
</Box>
) : (
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</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'));
}
})
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;
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>
</Table>
</TableContainer>
})}
</TableRow>
);
})
: null}
</TableBody>
</Table>
</TableContainer>
)}
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"

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

@@ -9,7 +9,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 { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField, CircularProgress } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SearchIcon from '@mui/icons-material/Search';
import { useNavigate } from 'react-router-dom';
@@ -18,7 +18,6 @@ import { getStoredRuns } from "../../api/storage";
import { RunSettings } from "./RunSettings";
import { CollapsibleRow } from "./ColapsibleRow";
// Export columns before the component
export const columns: readonly Column[] = [
{ id: 'runStatus', label: 'Status', minWidth: 80 },
{ id: 'name', label: 'Name', minWidth: 80 },
@@ -70,7 +69,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const { t } = useTranslation();
const navigate = useNavigate();
// Update column labels using translation if needed
const translatedColumns = columns.map(column => ({
...column,
label: t(`runstable.${column.id}`, column.label)
@@ -162,48 +160,54 @@ export const RunsTable: React.FC<RunsTableProps> = ({
sx={{ width: '250px' }}
/>
</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>
{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>
)}
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"