Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui): improve table and task details pages #212

Merged
merged 4 commits into from
Oct 17, 2023
Merged

chore(ui): improve table and task details pages #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
295fb70
chore(ui): change table style
shini4i Oct 16, 2023
365ac18
chore(ui): change task details page
shini4i Oct 16, 2023
4c75773
prettier make everything prettier?
shini4i Oct 17, 2023
85eb613
Merge branch 'main' into chore/table-style-change
shini4i Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
45 changes: 27 additions & 18 deletions web/src/Components/HistoryTasks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,9 @@ function HistoryTasks() {
searchParams.get('app') ?? null,
);
const [dateRange, setDateRange] = useState([
// start date
Number(searchParams.get('start'))
? new Date(Number(searchParams.get('start')) * 1000)
: startOfDay(new Date()),
// end date
Number(searchParams.get('end'))
? new Date(Number(searchParams.get('end')) * 1000)
: startOfDay(new Date()),
Expand All @@ -45,18 +43,16 @@ function HistoryTasks() {
page,
});
};

const refreshWithFilters = (start, end, application, page) => {
if (start && end) {
// re-fetch tasks
refreshTasksInRange(
Math.floor(startOfDay(start).getTime() / 1000),
Math.floor(endOfDay(end).getTime() / 1000),
application,
);
// save to filters
updateSearchParameters(start, end, application, page);
} else {
// reset list of tasks
clearTasks();
}
};
Expand Down Expand Up @@ -88,7 +84,13 @@ function HistoryTasks() {
variant="h5"
gutterBottom
component="div"
sx={{ flexGrow: 1, display: 'flex', gap: '10px', m: 0 }}
sx={{
flexGrow: 1,
display: 'flex',
gap: '10px',
m: 0,
alignItems: 'center',
}}
>
<Box>History tasks</Box>
<Box sx={{ fontSize: '10px' }}>UTC</Box>
Expand Down Expand Up @@ -126,7 +128,7 @@ function HistoryTasks() {
<IconButton
edge="start"
color={'primary'}
title={'reload table'}
title={'Reload table'}
onClick={() => {
setCurrentPage(1);
refreshWithFilters(startDate, endDate, currentApplication, 1);
Expand All @@ -137,17 +139,24 @@ function HistoryTasks() {
</Box>
</Stack>
</Stack>
<TasksTable
tasks={tasks}
sortField={sortField}
setSortField={setSortField}
relativeDate={false}
page={currentPage}
onPageChange={page => {
setCurrentPage(page);
updateSearchParameters(startDate, endDate, currentApplication, page);
}}
/>
<Box sx={{ boxShadow: 2, borderRadius: 2, p: 2 }}>
<TasksTable
tasks={tasks}
sortField={sortField}
setSortField={setSortField}
relativeDate={false}
page={currentPage}
onPageChange={page => {
setCurrentPage(page);
updateSearchParameters(
startDate,
endDate,
currentApplication,
page,
);
}}
/>
</Box>
</Container>
);
}
Expand Down
234 changes: 115 additions & 119 deletions web/src/Components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,139 +4,135 @@ import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import GitHubIcon from '@mui/icons-material/GitHub';
import Link from '@mui/material/Link';
import {Link as RouterLink} from 'react-router-dom';
import { Link as RouterLink } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import {fetchVersion} from '../Services/Data';
import {useEffect, useState} from 'react';
import { fetchVersion } from '../Services/Data';
import { useEffect, useState } from 'react';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import RestoreIcon from '@mui/icons-material/Restore';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import QuizRoundedIcon from '@mui/icons-material/QuizRounded';
import Tooltip from '@mui/material/Tooltip';
import {useErrorContext} from '../ErrorContext';

function NavigationButton({to, children, external = false}) {
if (external) {
return (
<Link
sx={{color: 'white', display: 'flex'}}
href={to}
underline="none"
target="_blank"
rel="noopener noreferrer"
>
{children}
</Link>
);
}
import { useErrorContext } from '../ErrorContext';

function NavigationButton({ to, children, external = false }) {
if (external) {
return (
<Link
sx={{color: 'white', display: 'flex'}}
component={RouterLink}
to={to}
underline="none"
>
{children}
</Link>
<Link
sx={{ color: 'white', display: 'flex' }}
href={to}
underline="none"
target="_blank"
rel="noopener noreferrer"
>
{children}
</Link>
);
}

return (
<Link
sx={{ color: 'white', display: 'flex' }}
component={RouterLink}
to={to}
underline="none"
>
{children}
</Link>
);
}

function Navbar() {
const [version, setVersion] = useState('0.0.0');
const {setSuccess, setError} = useErrorContext();
const readTheDocsUrl = 'https://argo-watcher.readthedocs.io';
const githubProjectUrl = 'https://github.com/shini4i/argo-watcher';
useEffect(() => {
fetchVersion()
.then(version => {
setSuccess('fetchVersion', 'Fetched current app version');
setVersion(version);
})
.catch(error => {
setError('fetchVersion', error.message);
});
}, []);
const [version, setVersion] = useState('0.0.0');
const { setSuccess, setError } = useErrorContext();
const readTheDocsUrl = 'https://argo-watcher.readthedocs.io';
const githubProjectUrl = 'https://github.com/shini4i/argo-watcher';
useEffect(() => {
fetchVersion()
.then(version => {
setSuccess('fetchVersion', 'Fetched current app version');
setVersion(version);
})
.catch(error => {
setError('fetchVersion', error.message);
});
}, []);

return (
<Box>
<AppBar position="static">
<Toolbar>
<Box
display="flex"
alignItems="center"
>
<img
src={process.env.PUBLIC_URL + '/logo.png'}
alt="Argo Watcher Logo"
style={{width: 35, height: 'auto'}}
/>
<Box ml={1}> {/* ml = margin-left: To add some space between logo and text */}
<Typography fontSize={'15px'}>
Argo Watcher
</Typography>
</Box>
</Box>
<Stack
spacing={2}
sx={{flexGrow: 1, px: 2}}
direction={'row'}
justifyContent={{xs: 'center', md: 'flex-start'}}
>
<NavigationButton to={'/'}>
<Tooltip title="Recent">
<RestoreIcon/>
</Tooltip>
</NavigationButton>
<NavigationButton to={'/history'}>
<Tooltip title="History">
<CalendarMonthIcon/>
</Tooltip>
</NavigationButton>
</Stack>
<Stack
spacing={1.5}
direction={'row'}
alignItems={'center'}
justifyContent={'flex-end'}
sx={{
minWidth: '120px',
color: 'white',
textTransform: 'unset',
textDecoration: 'unset',
'&:hover': {
color: 'rgba(255,255,255,.85)',
},
}}
>
{/* Docs Button */}
<NavigationButton to={`${readTheDocsUrl}/en/v${version}`} external>
<Tooltip title="Docs">
<QuizRoundedIcon/>
</Tooltip>
</NavigationButton>
return (
<Box>
<AppBar position="static">
<Toolbar>
<Box display="flex" alignItems="center">
<img
src={process.env.PUBLIC_URL + '/logo.png'}
alt="Argo Watcher Logo"
style={{ width: 35, height: 'auto' }}
/>
<Box ml={1}>
{' '}
{/* ml = margin-left: To add some space between logo and text */}
<Typography fontSize={'15px'}>Argo Watcher</Typography>
</Box>
</Box>
<Stack
spacing={2}
sx={{ flexGrow: 1, px: 2 }}
direction={'row'}
justifyContent={{ xs: 'center', md: 'flex-start' }}
>
<NavigationButton to={'/'}>
<Tooltip title="Recent">
<RestoreIcon />
</Tooltip>
</NavigationButton>
<NavigationButton to={'/history'}>
<Tooltip title="History">
<CalendarMonthIcon />
</Tooltip>
</NavigationButton>
</Stack>
<Stack
spacing={1.5}
direction={'row'}
alignItems={'center'}
justifyContent={'flex-end'}
sx={{
minWidth: '120px',
color: 'white',
textTransform: 'unset',
textDecoration: 'unset',
'&:hover': {
color: 'rgba(255,255,255,.85)',
},
}}
>
{/* Docs Button */}
<NavigationButton to={`${readTheDocsUrl}/en/v${version}`} external>
<Tooltip title="Docs">
<QuizRoundedIcon />
</Tooltip>
</NavigationButton>

{/* GitHub Section */}
<NavigationButton to={`${githubProjectUrl}/tree/v${version}`} external>
<Stack
spacing={1}
direction={'row'}
alignItems={'center'}
>
<GitHubIcon sx={{fontSize: '1.7em'}}/>
<Stack>
<Typography fontSize={'14px'}>GitHub</Typography>
<Typography fontSize={'11px'}>
<LocalOfferIcon fontSize={'6px'}/> {version}
</Typography>
</Stack>
</Stack>
</NavigationButton>
</Stack>
</Toolbar>
</AppBar>
</Box>
);
{/* GitHub Section */}
<NavigationButton
to={`${githubProjectUrl}/tree/v${version}`}
external
>
<Stack spacing={1} direction={'row'} alignItems={'center'}>
<GitHubIcon sx={{ fontSize: '1.7em' }} />
<Stack>
<Typography fontSize={'14px'}>GitHub</Typography>
<Typography fontSize={'11px'}>
<LocalOfferIcon fontSize={'6px'} /> {version}
</Typography>
</Stack>
</Stack>
</NavigationButton>
</Stack>
</Toolbar>
</AppBar>
</Box>
);
}

export default Navbar;
Loading
Loading