IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-03 12:10:55 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI issues for System Statistics panel.

Browse Source
This commit is contained in:
Khushboo Vashi 2023-09-28 15:23:15 +05:30
parent 4309aa3ba7
commit 68b7ddb592
7 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/pgadmin/dashboard/static/js/Dashboard.jsx
View File

@ -29,10 +29,10 @@ import _ from 'lodash';
import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
import EmptyPanelMessage from '../../../static/js/components/EmptyPanelMessage';
import TabPanel from '../../../static/js/components/TabPanel';
import Summary from 'SystemStats/Summary';
import CPU from 'SystemStats/CPU';
import Memory from 'SystemStats/Memory';
import Storage from 'SystemStats/Storage';
import Summary from './SystemStats/Summary';
import CPU from './SystemStats/CPU';
import Memory from './SystemStats/Memory';
import Storage from './SystemStats/Storage';
function parseData(data) {
let res = [];

4
web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
View File

@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
container: {
height: 'auto',
padding: '0px !important',
marginBottom: '30px',
marginBottom: '4px',
},
fixedContainer: {
height: '577px',
@ -305,4 +305,4 @@ CPUWrapper.propTypes = {
lineBorderWidth: PropTypes.number.isRequired,
isDatabase: PropTypes.bool.isRequired,
isTest: PropTypes.bool,
};
};

12
web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
View File

@ -1,3 +1,11 @@
/////////////////////////////////////////////////////////////
//
// 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 PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
@ -27,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
container: {
height: 'auto',
padding: '0px !important',
marginBottom: '30px',
marginBottom: '4px',
},
fixedContainer: {
height: '577px',
@ -300,4 +308,4 @@ MemoryWrapper.propTypes = {
lineBorderWidth: PropTypes.number.isRequired,
isDatabase: PropTypes.bool.isRequired,
isTest: PropTypes.bool,
};
};

34
web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
View File

@ -1,3 +1,11 @@
/////////////////////////////////////////////////////////////
//
// 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 gettext from 'sources/gettext';
import PropTypes from 'prop-types';
@ -20,17 +28,17 @@ const useStyles = makeStyles((theme) => ({
container: {
height: 'auto',
padding: '8px',
marginBottom: '15px',
marginBottom: '4px',
},
diskInfoContainer: {
height: 'auto',
padding: '8px',
marginBottom: '15px',
marginBottom: '4px',
},
diskInfoSummary: {
height: 'auto',
padding: '0px',
marginBottom: '5px',
marginBottom: '4px',
},
containerHeaderText: {
fontWeight: 'bold',
@ -44,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
borderRadius: '4px',
overflow: 'hidden',
width: '100%',
margin: '4px 4px 15px 4px',
margin: '4px 4px 4px 4px',
},
tableWhiteSpace: {
'& td, & th': {
@ -55,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
height: 'auto',
padding: '5px 0px 0px 0px',
background: theme.otherVars.tableBg,
marginBottom: '5px',
marginBottom: '4px',
borderRadius: '4px 4px 0px 0px',
},
driveContainerBody: {
@ -253,8 +261,8 @@ export default function Storage({preferences, sid, did, pageVisible, enablePoll=
let di_info_list = [];
const di_info_obj = data['di_stats'];
for (const key in di_info_obj) {
di_info_list.push({
icon: '',
di_info_list.push({
icon: '',
file_system: di_info_obj[key]['file_system']?gettext(di_info_obj[key]['file_system']):'',
file_system_type: di_info_obj[key]['file_system_type']?gettext(di_info_obj[key]['file_system_type']):'',
mount_point: di_info_obj[key]['mount_point']?gettext(di_info_obj[key]['mount_point']):'',
@ -412,14 +420,14 @@ export function StorageWrapper(props) {
</Grid>
<Grid container spacing={1} className={classes.diskInfoSummary}>
<Grid item md={6} sm={12}>
<ChartContainer
id='t-space-graph'
title={gettext('')}
<ChartContainer
id='t-space-graph'
title={gettext('')}
datasets={props.diskStats.map((item, index) => ({
borderColor: colors[(index + 2) % colors.length],
label: item.mount_point !== 'null' ? item.mount_point : item.drive_letter !== 'null' ? item.drive_letter : 'disk' + index,
}))}
errorMsg={props.errorMsg}
errorMsg={props.errorMsg}
isTest={props.isTest}>
<PieChart data={{
labels: props.diskStats.map((item, index) => item.mount_point!='null'?item.mount_point:item.drive_letter!='null'?item.drive_letter:'disk'+index),
@ -475,7 +483,7 @@ export function StorageWrapper(props) {
],
}}
options={
{
{
scales: {
x: {
display: true,
@ -548,4 +556,4 @@ StorageWrapper.propTypes = {
lineBorderWidth: PropTypes.number.isRequired,
isDatabase: PropTypes.bool.isRequired,
isTest: PropTypes.bool,
};
};

10
web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
View File

@ -1,3 +1,11 @@
/////////////////////////////////////////////////////////////
//
// 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 gettext from 'sources/gettext';
import PropTypes from 'prop-types';
@ -19,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
container: {
height: 'auto',
padding: '0px !important',
marginBottom: '30px',
marginBottom: '4px',
},
tableContainer: {
background: theme.otherVars.tableBg,

20
web/pgadmin/dashboard/static/js/SystemStats/utility.js
View File

@ -1,3 +1,11 @@
/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2023, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import url_for from 'sources/url_for';
import { DATA_POINT_SIZE } from 'sources/chartjs';
@ -9,7 +17,7 @@ export function getStatsUrl(sid=-1, did=-1, chart_names=[]) {
base_url += '/' + sid;
base_url += (did > 0) ? ('/' + did) : '';
base_url += '?chart_names=' + chart_names.join(',');
return base_url;
}
@ -28,7 +36,7 @@ export function transformData(labels, refreshRate) {
pointHitRadius: DATA_POINT_SIZE,
};
}) || [];
return {
datasets: datasets,
refreshRate: refreshRate,
@ -43,15 +51,15 @@ export function statsReducer(state, action) {
if(action.reset) {
return action.reset;
}
if(!action.incoming) {
return state;
}
if(!action.counterData) {
action.counterData = action.incoming;
}
let newState = {};
Object.keys(action.incoming).forEach(label => {
if(state[label]) {
@ -66,4 +74,4 @@ export function statsReducer(state, action) {
}
});
return newState;
}
}

2
web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
View File

@ -29,7 +29,7 @@ function tooltipPlugin(refreshRate) {
document.body.appendChild(tooltip);
}
}
function hideTooltip() {
tooltip?.remove();
tooltip = null;