GithubStar/maxun
1
0
Fork 0
mirror of https://github.com/getmaxun/maxun.git synced 2026-10-17 04:30:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into add-capturelist-ui

Browse Source
This commit is contained in:
Karishma Shukla
2024-11-22 18:33:24 +05:30
committed by GitHub
parent 2400aa332e b611010b33
commit 101b9b2b6d
6 changed files with 135 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/src/workflow-management/classes/Generator.ts
+1 -2
View File
@@ -564,8 +564,7 @@ export class WorkflowGenerator {
if (this.getList === true) {
if (this.listSelector !== '') {
const childSelectors = await getChildSelectors(page, this.listSelector || '');
const childData = await extractChildData(page, this.listSelector || '');
this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo, childSelectors, childData })
this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo, childSelectors })
} else {
this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
}
server/src/workflow-management/selector.ts
+20 -6
View File
@@ -935,6 +935,7 @@ export const extractChildData = async (
export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => {
try {
const childSelectors = await page.evaluate((parentSelector: string) => {
// Function to get a non-unique selector based on tag and class (if present)
function getNonUniqueSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase();
@@ -952,6 +953,7 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
return selector;
}
// Function to generate selector path from an element to its parent
function getSelectorPath(element: HTMLElement | null): string {
if (!element || !element.parentElement) return '';
@@ -961,22 +963,33 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
return `${parentSelector} > ${elementSelector}`;
}
function getAllDescendantSelectors(element: HTMLElement, stopAtParent: HTMLElement | null): string[] {
// Function to recursively get all descendant selectors
function getAllDescendantSelectors(element: HTMLElement): string[] {
let selectors: string[] = [];
const children = Array.from(element.children) as HTMLElement[];
for (const child of children) {
selectors.push(getSelectorPath(child));
selectors = selectors.concat(getAllDescendantSelectors(child, stopAtParent));
const childPath = getSelectorPath(child);
if (childPath) {
selectors.push(childPath); // Add direct child path
selectors = selectors.concat(getAllDescendantSelectors(child)); // Recursively process descendants
}
}
return selectors;
}
const parentElement = document.querySelector(parentSelector) as HTMLElement;
if (!parentElement) return [];
// Find all occurrences of the parent selector in the DOM
const parentElements = Array.from(document.querySelectorAll(parentSelector)) as HTMLElement[];
const allChildSelectors = new Set<string>(); // Use a set to ensure uniqueness
return getAllDescendantSelectors(parentElement, parentElement);
// Process each parent element and its descendants
parentElements.forEach((parentElement) => {
const descendantSelectors = getAllDescendantSelectors(parentElement);
descendantSelectors.forEach((selector) => allChildSelectors.add(selector)); // Add selectors to the set
});
return Array.from(allChildSelectors); // Convert the set back to an array
}, parentSelector);
return childSelectors || [];
@@ -986,6 +999,7 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
}
};
/**
* Returns the first pair from the given workflow that contains the given selector
* inside the where condition, and it is the only selector there.
src/components/molecules/RecordingsTable.tsx
+54 -53
View File
@@ -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<Data[]>([]);
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<HTMLInputElement>) => {
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 (
<React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6" gutterBottom>
My Robots
</Typography>
<IconButton
aria-label="new"
size={"small"}
onClick={handleNewRecording}
sx={{
width: '140px',
borderRadius: '5px',
padding: '8px',
background: '#ff00c3',
color: 'white',
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 display="flex" alignItems="center" gap={2}>
<TextField
size="small"
placeholder="Search robots..."
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
}}
sx={{ width: '250px' }}
/>
<IconButton
aria-label="new"
size={"small"}
onClick={handleNewRecording}
sx={{
width: '140px',
borderRadius: '5px',
padding: '8px',
background: '#ff00c3',
color: 'white',
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>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
<Table stickyHeader aria-label="sticky table">
@@ -208,7 +220,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
</TableRow>
</TableHead>
<TableBody>
{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
<InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
</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':
return (
<TableCell key={column.id} align={column.align}>
@@ -300,7 +302,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={rows ? rows.length : 0}
count={filteredRows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
@@ -346,7 +348,6 @@ const InterpretButton = ({ handleInterpret }: InterpretButtonProps) => {
)
}
interface ScheduleButtonProps {
handleSchedule: () => void;
}
src/components/molecules/RobotSettings.tsx
+11
View File
@@ -120,6 +120,17 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
}}
style={{ marginBottom: '20px' }}
/>
{robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
<TextField
label="Robot Limit"
type="number"
value={robot.recording.workflow[0].what[0].args[0].limit || ''}
InputProps={{
readOnly: true,
}}
style={{ marginBottom: '20px' }}
/>
)}
<TextField
label="Created By User"
key="Created By User"
src/components/molecules/RunContent.tsx
+11 -5
View File
@@ -36,14 +36,19 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
const firstKey = Object.keys(row.serializableOutput)[0];
const data = row.serializableOutput[firstKey];
if (Array.isArray(data)) {
setTableData(data);
if (data.length > 0) {
setColumns(Object.keys(data[0]));
// Filter out completely empty rows
const filteredData = data.filter(row =>
Object.values(row).some(value => value !== undefined && value !== "")
);
setTableData(filteredData);
if (filteredData.length > 0) {
setColumns(Object.keys(filteredData[0]));
}
}
}
}, [row.serializableOutput]);
// Function to convert table data to CSV format
const convertToCSV = (data: any[], columns: string[]): string => {
const header = columns.join(',');
@@ -53,7 +58,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
return [header, ...rows].join('\n');
};
// Function to download CSV file when called
const downloadCSV = () => {
const csvContent = convertToCSV(tableData, columns);
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
@@ -140,7 +144,9 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
{tableData.map((row, index) => (
<TableRow key={index}>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
<TableCell key={column}>
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
</TableCell>
))}
</TableRow>
))}
src/components/molecules/RunsTable.tsx
+38 -10
View File
@@ -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<Data[]>([]);
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<HTMLInputElement>) => {
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 (
<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(([id, data]) => (
<Accordion key={id}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="h6">{data[data.length - 1].name}</Typography>
<Typography variant="h6">{data[data.length - 1].name}</Typography>
</AccordionSummary>
<AccordionDetails>
<Table stickyHeader aria-label="sticky table">
@@ -164,7 +192,7 @@ export const RunsTable = (
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={rows.length}
count={filteredRows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}