mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Fix system stat dashboard UI issues.
This commit is contained in:
parent
6997d0149e
commit
cd84200135
@ -127,6 +127,7 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
'& > div': {
|
'& > div': {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
fontWeight: 'normal',
|
fontWeight: 'normal',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
|
||||||
'& .legend-value': {
|
'& .legend-value': {
|
||||||
marginLeft: '4px',
|
marginLeft: '4px',
|
||||||
|
@ -48,9 +48,11 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
containerHeader: {
|
containerHeader: {
|
||||||
fontSize: '16px',
|
fontSize: '15px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
marginBottom: '5px',
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100%',
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -91,7 +93,7 @@ export default function CPU({preferences, sid, did, pageVisible, enablePoll=true
|
|||||||
disableGlobalFilter: false,
|
disableGlobalFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Header: gettext('CPU Usage'),
|
Header: gettext('CPU usage'),
|
||||||
accessor: 'cpu_usage',
|
accessor: 'cpu_usage',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
@ -278,6 +280,9 @@ export function CPUWrapper(props) {
|
|||||||
<div className={classes.tableContainer}>
|
<div className={classes.tableContainer}>
|
||||||
<PgTable
|
<PgTable
|
||||||
className={classes.autoResizer}
|
className={classes.autoResizer}
|
||||||
|
CustomHeader={() => {
|
||||||
|
return <div className={classes.containerHeader}>{gettext('Process CPU usage')}</div>;
|
||||||
|
}}
|
||||||
columns={props.tableHeader}
|
columns={props.tableHeader}
|
||||||
data={props.processCpuUsageStats}
|
data={props.processCpuUsageStats}
|
||||||
msg={props.errorMsg}
|
msg={props.errorMsg}
|
||||||
|
@ -47,9 +47,11 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
containerHeader: {
|
containerHeader: {
|
||||||
fontSize: '16px',
|
fontSize: '15px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
marginBottom: '5px',
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100%',
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -89,14 +91,14 @@ export default function Memory({preferences, sid, did, pageVisible, enablePoll=t
|
|||||||
disableGlobalFilter: false,
|
disableGlobalFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Header: gettext('Memory Usage'),
|
Header: gettext('Memory usage'),
|
||||||
accessor: 'memory_usage',
|
accessor: 'memory_usage',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
disableGlobalFilter: false,
|
disableGlobalFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Header: gettext('Memory Bytes'),
|
Header: gettext('Memory bytes'),
|
||||||
accessor: 'memory_bytes',
|
accessor: 'memory_bytes',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
@ -281,6 +283,9 @@ export function MemoryWrapper(props) {
|
|||||||
<div className={classes.tableContainer}>
|
<div className={classes.tableContainer}>
|
||||||
<PgTable
|
<PgTable
|
||||||
className={classes.autoResizer}
|
className={classes.autoResizer}
|
||||||
|
CustomHeader={() => {
|
||||||
|
return <div className={classes.containerHeader}>{gettext('Process memory usage')}</div>;
|
||||||
|
}}
|
||||||
columns={props.tableHeader}
|
columns={props.tableHeader}
|
||||||
data={props.processMemoryUsageStats}
|
data={props.processMemoryUsageStats}
|
||||||
msg={props.errorMsg}
|
msg={props.errorMsg}
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
/////////////////////////////////////////////////////////////
|
|
||||||
//
|
|
||||||
// pgAdmin 4 - PostgreSQL Tools
|
|
||||||
//
|
|
||||||
// Copyright (C) 2013 - 2023, The pgAdmin Development Team
|
|
||||||
// This software is released under the PostgreSQL Licence
|
|
||||||
//
|
|
||||||
//////////////////////////////////////////////////////////////
|
|
||||||
import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
|
import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
|
||||||
import gettext from 'sources/gettext';
|
import gettext from 'sources/gettext';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
@ -28,17 +20,25 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
container: {
|
container: {
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
padding: '8px',
|
padding: '8px',
|
||||||
marginBottom: '4px',
|
marginBottom: '6px',
|
||||||
|
},
|
||||||
|
driveContainer: {
|
||||||
|
width: '100%',
|
||||||
},
|
},
|
||||||
diskInfoContainer: {
|
diskInfoContainer: {
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
padding: '8px',
|
padding: '8px 8px 0px 8px',
|
||||||
marginBottom: '4px',
|
marginBottom: '0px',
|
||||||
},
|
},
|
||||||
diskInfoSummary: {
|
diskInfoSummary: {
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
padding: '0px',
|
padding: '0px 0px 4px 0px',
|
||||||
marginBottom: '4px',
|
marginBottom: '0px',
|
||||||
|
},
|
||||||
|
diskInfoCharts: {
|
||||||
|
height: 'auto',
|
||||||
|
padding: '0px 0px 2px 0px',
|
||||||
|
marginBottom: '0px',
|
||||||
},
|
},
|
||||||
containerHeaderText: {
|
containerHeaderText: {
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
border: '1px solid '+theme.otherVars.borderColor,
|
border: '1px solid '+theme.otherVars.borderColor,
|
||||||
borderCollapse: 'collapse',
|
borderCollapse: 'collapse',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
overflow: 'hidden',
|
overflow: 'auto',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
margin: '4px 4px 4px 4px',
|
margin: '4px 4px 4px 4px',
|
||||||
},
|
},
|
||||||
@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
height: 'auto',
|
height: 'auto',
|
||||||
padding: '5px 0px 0px 0px',
|
padding: '5px 0px 0px 0px',
|
||||||
background: theme.otherVars.tableBg,
|
background: theme.otherVars.tableBg,
|
||||||
marginBottom: '4px',
|
marginBottom: '5px',
|
||||||
borderRadius: '4px 4px 0px 0px',
|
borderRadius: '4px 4px 0px 0px',
|
||||||
},
|
},
|
||||||
driveContainerBody: {
|
driveContainerBody: {
|
||||||
@ -418,19 +418,19 @@ export function StorageWrapper(props) {
|
|||||||
<DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
|
<DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
|
||||||
</div>
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid container spacing={1} className={classes.diskInfoSummary}>
|
<Grid container spacing={1} className={classes.diskInfoCharts}>
|
||||||
<Grid item md={6} sm={12}>
|
<Grid item md={6} sm={12}>
|
||||||
<ChartContainer
|
<ChartContainer
|
||||||
id='t-space-graph'
|
id='t-space-graph'
|
||||||
title={gettext('')}
|
title={gettext('')}
|
||||||
datasets={props.diskStats.map((item, index) => ({
|
datasets={props.diskStats.map((item, index) => ({
|
||||||
borderColor: colors[(index + 2) % colors.length],
|
borderColor: colors[(index + 2) % colors.length],
|
||||||
label: item.mount_point !== 'null' ? item.mount_point : item.drive_letter !== 'null' ? item.drive_letter : 'disk' + index,
|
label: item.mount_point !== '' ? item.mount_point : item.drive_letter !== '' ? item.drive_letter : 'disk' + index,
|
||||||
}))}
|
}))}
|
||||||
errorMsg={props.errorMsg}
|
errorMsg={props.errorMsg}
|
||||||
isTest={props.isTest}>
|
isTest={props.isTest}>
|
||||||
<PieChart data={{
|
<PieChart data={{
|
||||||
labels: props.diskStats.map((item, index) => item.mount_point!='null'?item.mount_point:item.drive_letter!='null'?item.drive_letter:'disk'+index),
|
labels: props.diskStats.map((item, index) => item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
data: props.diskStats.map((item) => item.total_space_actual?item.total_space_actual:0),
|
data: props.diskStats.map((item) => item.total_space_actual?item.total_space_actual:0),
|
||||||
@ -464,7 +464,7 @@ export function StorageWrapper(props) {
|
|||||||
<Grid item md={6} sm={12}>
|
<Grid item md={6} sm={12}>
|
||||||
<ChartContainer id='ua-space-graph' title={gettext('')} datasets={[{borderColor: '#FF6384', label: 'Used space'}, {borderColor: '#36a2eb', label: 'Available space'}]} errorMsg={props.errorMsg} isTest={props.isTest}>
|
<ChartContainer id='ua-space-graph' title={gettext('')} datasets={[{borderColor: '#FF6384', label: 'Used space'}, {borderColor: '#36a2eb', label: 'Available space'}]} errorMsg={props.errorMsg} isTest={props.isTest}>
|
||||||
<BarChart data={{
|
<BarChart data={{
|
||||||
labels: props.diskStats.map((item, index) => item.mount_point!='null'?item.mount_point:item.drive_letter!='null'?item.drive_letter:'disk'+index),
|
labels: props.diskStats.map((item, index) => item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index),
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Used space',
|
label: 'Used space',
|
||||||
|
@ -17,7 +17,6 @@ export function getStatsUrl(sid=-1, did=-1, chart_names=[]) {
|
|||||||
base_url += '/' + sid;
|
base_url += '/' + sid;
|
||||||
base_url += (did > 0) ? ('/' + did) : '';
|
base_url += (did > 0) ? ('/' + did) : '';
|
||||||
base_url += '?chart_names=' + chart_names.join(',');
|
base_url += '?chart_names=' + chart_names.join(',');
|
||||||
|
|
||||||
return base_url;
|
return base_url;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,7 +35,6 @@ export function transformData(labels, refreshRate) {
|
|||||||
pointHitRadius: DATA_POINT_SIZE,
|
pointHitRadius: DATA_POINT_SIZE,
|
||||||
};
|
};
|
||||||
}) || [];
|
}) || [];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
datasets: datasets,
|
datasets: datasets,
|
||||||
refreshRate: refreshRate,
|
refreshRate: refreshRate,
|
||||||
|
Loading…
Reference in New Issue
Block a user