feat(ui): add scan progress and error reporting to UI (#4094)
* feat(scanner): add LastScanError tracking to scanner status - Introduced LastScanErrorKey constant for error tracking. - Updated StatusInfo struct to include LastError field. - Modified scanner logic to store and retrieve last scan error. - Enhanced ScanStatus response to include error information. - Updated UI components to display last scan error when applicable. - Added tests to verify last scan error functionality. Signed-off-by: Deluan <deluan@navidrome.org> * feat(scanner): enhance scan status with type and elapsed time tracking - Added LastScanTypeKey and LastScanStartTimeKey constants for tracking scan type and start time. - Updated StatusInfo struct to include ScanType and ElapsedTime fields. - Implemented getScanInfo method to retrieve scan type, elapsed time, and last error. - Modified scanner logic to store scan type and start time during scans. - Enhanced ScanStatus response and UI components to display scan type and elapsed time. - Added formatShortDuration utility for better elapsed time representation. - Updated activity reducer to handle new scan status fields. Signed-off-by: Deluan <deluan@navidrome.org> * refactor(tests): consolidate controller status tests into a single file - Removed the old controller_status_test.go file. - Merged relevant tests into the new controller_test.go file for better organization and maintainability. - Ensured all existing test cases for controller status are preserved and functional. Signed-off-by: Deluan <deluan@navidrome.org> * Fix formatting issues * refactor(scanner): update getScanInfo method documentation --------- Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Deluan Quintão
@@ -12,15 +12,16 @@ import {
|
||||
CardActions,
|
||||
Divider,
|
||||
Box,
|
||||
Typography,
|
||||
} from '@material-ui/core'
|
||||
import { FiActivity } from 'react-icons/fi'
|
||||
import { BiError } from 'react-icons/bi'
|
||||
import { BiError, BiCheckCircle } from 'react-icons/bi'
|
||||
import { VscSync } from 'react-icons/vsc'
|
||||
import { GiMagnifyingGlass } from 'react-icons/gi'
|
||||
import subsonic from '../subsonic'
|
||||
import { scanStatusUpdate } from '../actions'
|
||||
import { useInterval } from '../common'
|
||||
import { formatDuration } from '../utils'
|
||||
import { formatDuration, formatShortDuration } from '../utils'
|
||||
import config from '../config'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
@@ -40,7 +41,16 @@ const useStyles = makeStyles((theme) => ({
|
||||
zIndex: 2,
|
||||
},
|
||||
counterStatus: {
|
||||
minWidth: '15em',
|
||||
minWidth: '20em',
|
||||
},
|
||||
error: {
|
||||
color: theme.palette.error.main,
|
||||
},
|
||||
card: {
|
||||
maxWidth: 'none',
|
||||
},
|
||||
cardContent: {
|
||||
padding: theme.spacing(2, 3),
|
||||
},
|
||||
}))
|
||||
|
||||
@@ -59,13 +69,13 @@ const Uptime = () => {
|
||||
const ActivityPanel = () => {
|
||||
const serverStart = useSelector((state) => state.activity.serverStart)
|
||||
const up = serverStart.startTime
|
||||
const classes = useStyles({ up })
|
||||
const scanStatus = useSelector((state) => state.activity.scanStatus)
|
||||
const classes = useStyles({ up: up && !scanStatus.error })
|
||||
const translate = useTranslate()
|
||||
const notify = useNotify()
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
const open = Boolean(anchorEl)
|
||||
const dispatch = useDispatch()
|
||||
const scanStatus = useSelector((state) => state.activity.scanStatus)
|
||||
|
||||
const handleMenuOpen = (event) => setAnchorEl(event.currentTarget)
|
||||
const handleMenuClose = () => setAnchorEl(null)
|
||||
@@ -89,11 +99,30 @@ const ActivityPanel = () => {
|
||||
}
|
||||
}, [serverStart, notify])
|
||||
|
||||
const tooltipTitle = scanStatus.error
|
||||
? `${translate('activity.status')}: ${scanStatus.error}`
|
||||
: translate('activity.title')
|
||||
|
||||
const lastScanType = (() => {
|
||||
switch (scanStatus.scanType) {
|
||||
case 'full':
|
||||
return translate('activity.fullScan')
|
||||
case 'quick':
|
||||
return translate('activity.quickScan')
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className={classes.wrapper}>
|
||||
<Tooltip title={translate('activity.title')}>
|
||||
<Tooltip title={tooltipTitle}>
|
||||
<IconButton className={classes.button} onClick={handleMenuOpen}>
|
||||
{up ? <FiActivity size={'20'} /> : <BiError size={'20'} />}
|
||||
{!up || scanStatus.error ? (
|
||||
<BiError size={'20'} />
|
||||
) : (
|
||||
<FiActivity size={'20'} />
|
||||
)}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{scanStatus.scanning && (
|
||||
@@ -113,8 +142,8 @@ const ActivityPanel = () => {
|
||||
open={open}
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Card className={classes.card}>
|
||||
<CardContent className={classes.cardContent}>
|
||||
<Box display="flex" className={classes.counterStatus}>
|
||||
<Box component="span" flex={2}>
|
||||
{translate('activity.serverUptime')}:
|
||||
@@ -125,7 +154,7 @@ const ActivityPanel = () => {
|
||||
</Box>
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardContent>
|
||||
<CardContent className={classes.cardContent}>
|
||||
<Box display="flex" className={classes.counterStatus}>
|
||||
<Box component="span" flex={2}>
|
||||
{translate('activity.totalScanned')}:
|
||||
@@ -134,6 +163,38 @@ const ActivityPanel = () => {
|
||||
{scanStatus.folderCount || '-'}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" className={classes.counterStatus} mt={2}>
|
||||
<Box component="span" flex={2}>
|
||||
{translate('activity.scanType')}:
|
||||
</Box>
|
||||
<Box component="span" flex={1}>
|
||||
{lastScanType}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" className={classes.counterStatus} mt={2}>
|
||||
<Box component="span" flex={2}>
|
||||
{translate('activity.elapsedTime')}:
|
||||
</Box>
|
||||
<Box component="span" flex={1}>
|
||||
{formatShortDuration(scanStatus.elapsedTime)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{scanStatus.error && (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
mt={2}
|
||||
className={classes.error}
|
||||
>
|
||||
<Typography variant="subtitle2">
|
||||
{translate('activity.status')}:
|
||||
</Typography>
|
||||
<Typography variant="body2">{scanStatus.error}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardActions>
|
||||
|
||||
Reference in New Issue
Block a user