From 68b7ddb592dfda9eb9aff4eb19128cef80469ab4 Mon Sep 17 00:00:00 2001 From: Khushboo Vashi Date: Thu, 28 Sep 2023 15:23:15 +0530 Subject: [PATCH] Fix UI issues for System Statistics panel. --- web/pgadmin/dashboard/static/js/Dashboard.jsx | 8 ++--- .../dashboard/static/js/SystemStats/CPU.jsx | 4 +-- .../static/js/SystemStats/Memory.jsx | 12 +++++-- .../static/js/SystemStats/Storage.jsx | 34 ++++++++++++------- .../static/js/SystemStats/Summary.jsx | 10 +++++- .../static/js/SystemStats/utility.js | 20 +++++++---- .../js/components/PgChart/StreamingChart.jsx | 2 +- 7 files changed, 61 insertions(+), 29 deletions(-) diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index 96a4af499..6f733a8a0 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx @@ -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 = []; diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx index d344b85b9..d9bfe22ae 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx @@ -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, -}; \ No newline at end of file +}; diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx index b695e1600..abbbe6835 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx @@ -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, -}; \ No newline at end of file +}; diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx index 020f386df..1455796b9 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx @@ -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) { - ({ 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}> 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, -}; \ No newline at end of file +}; diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx index 89c590baa..cc3575f78 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx @@ -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, diff --git a/web/pgadmin/dashboard/static/js/SystemStats/utility.js b/web/pgadmin/dashboard/static/js/SystemStats/utility.js index ada0a32ba..a6e1d7feb 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/utility.js +++ b/web/pgadmin/dashboard/static/js/SystemStats/utility.js @@ -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; -} \ No newline at end of file +} diff --git a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx index 34a1a8fea..51df2498a 100644 --- a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx +++ b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx @@ -29,7 +29,7 @@ function tooltipPlugin(refreshRate) { document.body.appendChild(tooltip); } } - + function hideTooltip() { tooltip?.remove(); tooltip = null;