61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import SettingsIcon from '@mui/icons-material/Settings'
|
|
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, MenuItem, Stack, TextField, Tooltip } from '@mui/material'
|
|
import { useState } from 'react'
|
|
import { DEFAULT_SETTINGS, REFRESH_CHOICES, refreshLabel, saveBrowserSettings, useBrowserSettings } from './settings.ts'
|
|
|
|
/**
|
|
* An icon button that opens the settings of this browser: how often the Overview and the Metrics tab read the router on
|
|
* their own, or manual, when they read only when opened and on Refresh. A change applies at once and is kept in the
|
|
* browser; Defaults sets every setting back.
|
|
*/
|
|
export default function SettingsButton() {
|
|
const [open, setOpen] = useState(false)
|
|
const settings = useBrowserSettings()
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title="Settings of this browser">
|
|
<IconButton aria-label="settings" onClick={() => setOpen(true)}>
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
|
|
<DialogTitle>Settings</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText variant="body2" sx={{ mb: 2 }}>
|
|
Kept in this browser; other browsers keep their own.
|
|
</DialogContentText>
|
|
<Stack sx={{ gap: 2 }}>
|
|
<TextField
|
|
select
|
|
label="Overview tab refresh"
|
|
value={settings.routerRefresh}
|
|
helperText="Manual: read when the tab opens and on Refresh."
|
|
onChange={(event) => saveBrowserSettings({ ...settings, routerRefresh: Number(event.target.value) })}
|
|
>
|
|
{REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
|
|
</TextField>
|
|
<TextField
|
|
select
|
|
label="Metrics tab refresh"
|
|
value={settings.metricsRefresh}
|
|
helperText="The router takes a sample every minute."
|
|
onChange={(event) => saveBrowserSettings({ ...settings, metricsRefresh: Number(event.target.value) })}
|
|
>
|
|
{REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
|
|
</TextField>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
onClick={() => saveBrowserSettings({ ...settings, routerRefresh: DEFAULT_SETTINGS.routerRefresh, metricsRefresh: DEFAULT_SETTINGS.metricsRefresh })}
|
|
>
|
|
Defaults
|
|
</Button>
|
|
<Button variant="contained" onClick={() => setOpen(false)}>Close</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|