Fix system stat dashboard UI issues.

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -127,6 +127,7 @@ const useStyles = makeStyles((theme) => ({
     '& > div': {
       display: 'flex',
       fontWeight: 'normal',
+      flexWrap: 'wrap',
 
       '& .legend-value': {
         marginLeft: '4px',

web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx

@@ -48,9 +48,11 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
   },
   containerHeader: {
-    fontSize: '16px',
+    fontSize: '15px',
     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,
     },
     {
-      Header: gettext('CPU Usage'),
+      Header: gettext('CPU usage'),
       accessor: 'cpu_usage',
       sortable: true,
       resizable: true,
@@ -278,6 +280,9 @@ export function CPUWrapper(props) {
         <div className={classes.tableContainer}>
           <PgTable
             className={classes.autoResizer}
+            CustomHeader={() => {
+              return <div className={classes.containerHeader}>{gettext('Process CPU usage')}</div>;
+            }}
             columns={props.tableHeader}
             data={props.processCpuUsageStats}
             msg={props.errorMsg}

web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx

@@ -47,9 +47,11 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
   },
   containerHeader: {
-    fontSize: '16px',
+    fontSize: '15px',
     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,
     },
     {
-      Header: gettext('Memory Usage'),
+      Header: gettext('Memory usage'),
       accessor: 'memory_usage',
       sortable: true,
       resizable: true,
       disableGlobalFilter: false,
     },
     {
-      Header: gettext('Memory Bytes'),
+      Header: gettext('Memory bytes'),
       accessor: 'memory_bytes',
       sortable: true,
       resizable: true,
@@ -281,6 +283,9 @@ export function MemoryWrapper(props) {
         <div className={classes.tableContainer}>
           <PgTable
             className={classes.autoResizer}
+            CustomHeader={() => {
+              return <div className={classes.containerHeader}>{gettext('Process memory usage')}</div>;
+            }}
             columns={props.tableHeader}
             data={props.processMemoryUsageStats}
             msg={props.errorMsg}

web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx

@@ -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 gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
@@ -28,17 +20,25 @@ const useStyles = makeStyles((theme) => ({
   container: {
     height: 'auto',
     padding: '8px',
-    marginBottom: '4px',
+    marginBottom: '6px',
+  },
+  driveContainer: {
+    width: '100%',
   },
   diskInfoContainer: {
     height: 'auto',
-    padding: '8px',
-    marginBottom: '4px',
+    padding: '8px 8px 0px 8px',
+    marginBottom: '0px',
   },
   diskInfoSummary: {
     height: 'auto',
-    padding: '0px',
-    marginBottom: '4px',
+    padding: '0px 0px 4px 0px',
+    marginBottom: '0px',
+  },
+  diskInfoCharts: {
+    height: 'auto',
+    padding: '0px 0px 2px 0px',
+    marginBottom: '0px',
   },
   containerHeaderText: {
     fontWeight: 'bold',
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
     border: '1px solid '+theme.otherVars.borderColor,
     borderCollapse: 'collapse',
     borderRadius: '4px',
-    overflow: 'hidden',
+    overflow: 'auto',
     width: '100%',
     margin: '4px 4px 4px 4px',
   },
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
     height: 'auto',
     padding: '5px 0px 0px 0px',
     background: theme.otherVars.tableBg,
-    marginBottom: '4px',
+    marginBottom: '5px',
     borderRadius: '4px 4px 0px 0px',
   },
   driveContainerBody: {
@@ -418,19 +418,19 @@ export function StorageWrapper(props) {
             <DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
           </div>
         </Grid>
-        <Grid container spacing={1} className={classes.diskInfoSummary}>
+        <Grid container spacing={1} className={classes.diskInfoCharts}>
           <Grid item md={6} sm={12}>
             <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,
+                label: item.mount_point !== '' ? item.mount_point : item.drive_letter !== '' ? item.drive_letter : 'disk' + index,
               }))}
               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),
+                labels: props.diskStats.map((item, index) => item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index),
                 datasets: [
                   {
                     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}>
             <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={{
-                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: [
                   {
                     label: 'Used space',
@@ -556,4 +556,4 @@ StorageWrapper.propTypes = {
   lineBorderWidth: PropTypes.number.isRequired,
   isDatabase: PropTypes.bool.isRequired,
   isTest: PropTypes.bool,
-};
+};

web/pgadmin/dashboard/static/js/SystemStats/utility.js

@@ -17,7 +17,6 @@ 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;
 }
 
@@ -36,7 +35,6 @@ export function transformData(labels, refreshRate) {
       pointHitRadius: DATA_POINT_SIZE,
     };
   }) || [];
-
   return {
     datasets: datasets,
     refreshRate: refreshRate,