Fix more UI issues related to System statistics dashboard

This commit is contained in:
Aditya Toshniwal 2023-10-18 13:31:43 +05:30
parent 6e3ee1c607
commit 3416184236
4 changed files with 16 additions and 11 deletions

View File

@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import {getGCD, getEpoch} from 'sources/utils';
import {ChartContainer} from '../Dashboard';
import { Grid } from '@material-ui/core';
import { Box, Grid } from '@material-ui/core';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -39,9 +39,9 @@ const useStyles = makeStyles((theme) => ({
marginBottom: '4px',
},
fixedContainer: {
height: '577px',
flexGrow: 1,
padding: '0px !important',
marginBottom: '30px',
marginBottom: '4px',
},
tableContainer: {
padding: '6px',
@ -227,7 +227,7 @@ export default function CPU({preferences, sid, did, pageVisible, enablePoll=true
}, enablePoll ? pollDelay : -1);
return (
<>
<Box display="flex" flexDirection="column" height="100%">
<div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
{chartDrawnOnce &&
<CPUWrapper
@ -243,7 +243,7 @@ export default function CPU({preferences, sid, did, pageVisible, enablePoll=true
isTest={false}
/>
}
</>
</Box>
);
}

View File

@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import {getGCD, getEpoch} from 'sources/utils';
import {ChartContainer} from '../Dashboard';
import { Grid } from '@material-ui/core';
import { Box, Grid } from '@material-ui/core';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -38,9 +38,9 @@ const useStyles = makeStyles((theme) => ({
marginBottom: '4px',
},
fixedContainer: {
height: '577px',
flexGrow: 1,
padding: '0px !important',
marginBottom: '30px',
marginBottom: '4px',
},
tableContainer: {
padding: '6px',
@ -229,7 +229,7 @@ export default function Memory({preferences, sid, did, pageVisible, enablePoll=t
});
}, enablePoll ? pollDelay : -1);
return (
<>
<Box display="flex" flexDirection="column" height="100%">
<div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
{chartDrawnOnce &&
<MemoryWrapper
@ -245,7 +245,7 @@ export default function Memory({preferences, sid, did, pageVisible, enablePoll=t
isTest={false}
/>
}
</>
</Box>
);
}

View File

@ -22,6 +22,7 @@ export default function uplotOverride(theme) {
color: theme.palette.background.default,
backgroundColor: theme.palette.text.primary,
zIndex: 9999,
display: 'block',
'& .uplot-tooltip-label': {
display: 'flex',

View File

@ -13,7 +13,6 @@ function tooltipPlugin(refreshRate) {
if(!window.uplotTooltip) {
window.uplotTooltip = document.createElement('div');
window.uplotTooltip.className = 'uplot-tooltip';
window.uplotTooltip.style.display = 'block';
document.body.appendChild(window.uplotTooltip);
}
}
@ -28,6 +27,11 @@ function tooltipPlugin(refreshRate) {
hideTooltip();
return;
}
if(u.legend?.values?.slice(1).every((v)=>v['_']=='')) {
return;
}
showTooltip();
let tooltipHtml=`<div>${(u.data[1].length-1-parseInt(u.legend.values[0]['_'])) * refreshRate + gettext(' seconds ago')}</div>`;