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

feat: add translation for run content

Browse Source
This commit is contained in:
RohitR311
2024-12-21 17:41:53 +05:30
parent e1ff7f273d
commit 2df45325e0
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/molecules/RunContent.tsx
View File

@@ -13,6 +13,7 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead'; import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import 'highlight.js/styles/github.css'; import 'highlight.js/styles/github.css';
import { useTranslation } from "react-i18next";
interface RunContentProps { interface RunContentProps {
row: Data, row: Data,
@@ -23,6 +24,7 @@ interface RunContentProps {
} }
export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRef, abortRunHandler }: RunContentProps) => { export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRef, abortRunHandler }: RunContentProps) => {
const { t } = useTranslation();
const [tab, setTab] = React.useState<string>('log'); const [tab, setTab] = React.useState<string>('log');
const [tableData, setTableData] = useState<any[]>([]); const [tableData, setTableData] = useState<any[]>([]);
const [columns, setColumns] = useState<string[]>([]); const [columns, setColumns] = useState<string[]>([]);
@@ -76,8 +78,8 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<TabContext value={tab}> <TabContext value={tab}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs"> <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs">
<Tab label="Output Data" value='output' /> <Tab label={t('run_content.tabs.output_data')} value='output' />
<Tab label="Log" value='log' /> <Tab label={t('run_content.tabs.log')} value='log' />
</Tabs> </Tabs>
</Box> </Box>
<TabPanel value='log'> <TabPanel value='log'>
@@ -102,32 +104,32 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
color="error" color="error"
onClick={abortRunHandler} onClick={abortRunHandler}
> >
Stop {t('run_content.buttons.stop')}
</Button> : null} </Button> : null}
</TabPanel> </TabPanel>
<TabPanel value='output' sx={{ width: '700px' }}> <TabPanel value='output' sx={{ width: '700px' }}>
{!row || !row.serializableOutput || !row.binaryOutput {!row || !row.serializableOutput || !row.binaryOutput
|| (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0) || (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
? <Typography>The output is empty.</Typography> : null} ? <Typography>{t('run_content.empty_output')}</Typography> : null}
{row.serializableOutput && {row.serializableOutput &&
Object.keys(row.serializableOutput).length !== 0 && Object.keys(row.serializableOutput).length !== 0 &&
<div> <div>
<Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ArticleIcon sx={{ marginRight: '15px' }} /> <ArticleIcon sx={{ marginRight: '15px' }} />
Captured Data {t('run_content.captured_data.title')}
</Typography> </Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
<Typography> <Typography>
<a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput, null, 2)}`} <a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput, null, 2)}`}
download="data.json"> download="data.json">
Download as JSON {t('run_content.captured_data.download_json')}
</a> </a>
</Typography> </Typography>
<Typography <Typography
onClick={downloadCSV} onClick={downloadCSV}
> >
<a style={{ textDecoration: 'none', cursor: 'pointer' }}>Download as CSV</a> <a style={{ textDecoration: 'none', cursor: 'pointer' }}>{t('run_content.captured_data.download_csv')}</a>
</Typography> </Typography>
</Box> </Box>
{tableData.length > 0 ? ( {tableData.length > 0 ? (
@@ -171,7 +173,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<div> <div>
<Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}> <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ImageIcon sx={{ marginRight: '15px' }} /> <ImageIcon sx={{ marginRight: '15px' }} />
Captured Screenshot {t('run_content.captured_screenshot.title')}
</Typography> </Typography>
{Object.keys(row.binaryOutput).map((key) => { {Object.keys(row.binaryOutput).map((key) => {
try { try {
@@ -181,7 +183,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
width: 'max-content', width: 'max-content',
}}> }}>
<Typography sx={{ margin: '20px 0px' }}> <Typography sx={{ margin: '20px 0px' }}>
<a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>Download Screenshot</a> <a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>{t('run_content.captured_screenshot.download')}</a>
</Typography> </Typography>
<img src={imageUrl} alt={key} height='auto' width='700px' /> <img src={imageUrl} alt={key} height='auto' width='700px' />
</Box> </Box>
@@ -189,7 +191,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
} catch (e) { } catch (e) {
console.log(e) console.log(e)
return <Typography key={`number-of-binary-output-${key}`}> return <Typography key={`number-of-binary-output-${key}`}>
{key}: The image failed to render {key}: {t('run_content.captured_screenshot.render_failed')}
</Typography> </Typography>
} }
})} })}