Fix following issues in system stats:

1. Graphs rendering in opposite directions on tab change.
2. Y-axis label width should be dynamic.
3. Tooltip values should be formatted.

web/pgadmin/dashboard/__init__.py

@@ -659,6 +659,9 @@ def system_statistics(sid=None, did=None):
         )
         status, res = g.conn.execute_dict(sql)
 
+        if not status:
+            return internal_server_error(errormsg=str(res))
+
         for chart_row in res['rows']:
             resp_data[chart_row['chart_name']] = json.loads(
                 chart_row['chart_data'])

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

@@ -169,10 +169,10 @@ export default function CPU({preferences, sid, did, pageVisible, enablePoll=true
         setErrorMsg(null);
         if(data.hasOwnProperty('cpu_stats')){
           let new_cu_stats = {
-            'User Normal': data['cpu_stats']['usermode_normal_process_percent']?data['cpu_stats']['usermode_normal_process_percent']:0,
-            'User Niced': data['cpu_stats']['usermode_niced_process_percent']?data['cpu_stats']['usermode_niced_process_percent']:0,
-            'Kernel': data['cpu_stats']['kernelmode_process_percent']?data['cpu_stats']['kernelmode_process_percent']:0,
-            'Idle': data['cpu_stats']['idle_mode_percent']?data['cpu_stats']['idle_mode_percent']:0,
+            'User Normal': data['cpu_stats']['usermode_normal_process_percent'] ?? 0,
+            'User Niced': data['cpu_stats']['usermode_niced_process_percent'] ?? 0,
+            'Kernel': data['cpu_stats']['kernelmode_process_percent'] ?? 0,
+            'Idle': data['cpu_stats']['idle_mode_percent'] ?? 0,
           };
           cpuUsageInfoReduce({incoming: new_cu_stats});
         }

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

@@ -270,12 +270,14 @@ export function MemoryWrapper(props) {
       <Grid container spacing={1} className={classes.container}>
         <Grid item md={6} sm={12}>
           <ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
-            <StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
+            <StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
+              valueFormatter={toPrettySize}/>
           </ChartContainer>
         </Grid>
         <Grid item md={6} sm={12}>
           <ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
-            <StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
+            <StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
+              valueFormatter={toPrettySize}/>
           </ChartContainer>
         </Grid>
       </Grid>

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

@@ -409,6 +409,26 @@ export function StorageWrapper(props) {
     lineBorderWidth: props.lineBorderWidth,
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
 
+  const chartJsExtraOptions = {
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        animation: false,
+        callbacks: {
+          title: function (context) {
+            const label = context[0].label || '';
+            return label;
+          },
+          label: function (context) {
+            return (context.dataset?.label ?? 'Total space: ') + toPrettySize(context.raw);
+          },
+        },
+      },
+    },
+  };
+
   return (
     <>
       <Grid container spacing={1} className={classes.diskInfoContainer}>
@@ -440,23 +460,7 @@ export function StorageWrapper(props) {
               }}
               options={{
                 animation: false,
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                  tooltip: {
-                    callbacks: {
-                      title: function (context) {
-                        const label = context[0].label || '';
-                        return label;
-                      },
-                      label: function (context) {
-                        const value = context.formattedValue || 0;
-                        return 'Total space: ' + value;
-                      },
-                    },
-                  },
-                },
+                ...chartJsExtraOptions,
               }}
               />
             </ChartContainer>
@@ -502,11 +506,7 @@ export function StorageWrapper(props) {
                       },
                     },
                   },
-                  plugins: {
-                    legend: {
-                      display: false,
-                    },
-                  },
+                  ...chartJsExtraOptions,
                 }
               }
               />
@@ -524,8 +524,11 @@ export function StorageWrapper(props) {
               <Grid container spacing={1} className={classes.driveContainerBody}>
                 {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => (
                   <Grid key={`${type}-${innerKeyIndex}`} item md={4} sm={6}>
-                    <ChartContainer id={`io-graph-${type}`} title={type.endsWith('_bytes_rw') ? gettext('Data transfer (bytes)'): type.endsWith('_total_rw') ? gettext('I/O operations count'): type.endsWith('_time_rw') ? gettext('Time spent in I/O operations (milliseconds)'):''} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
-                      <StreamingChart data={transformData(props.ioInfo[drive][type], props.ioRefreshRate)} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
+                    <ChartContainer id={`io-graph-${type}`} title={type.endsWith('_bytes_rw') ? gettext('Data transfer'): type.endsWith('_total_rw') ? gettext('I/O operations count'): type.endsWith('_time_rw') ? gettext('Time spent in I/O operations'):''} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
+                      <StreamingChart data={transformData(props.ioInfo[drive][type], props.ioRefreshRate)} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
+                        valueFormatter={(v)=>{
+                          return type.endsWith('_time_rw') ? toPrettySize(v, 'ms') : toPrettySize(v);
+                        }} />
                     </ChartContainer>
                   </Grid>
                 ))}
@@ -556,4 +559,4 @@ StorageWrapper.propTypes = {
   lineBorderWidth: PropTypes.number.isRequired,
   isDatabase: PropTypes.bool.isRequired,
   isTest: PropTypes.bool,
-};
+};

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

@@ -60,14 +60,16 @@ export function statsReducer(state, action) {
 
   let newState = {};
   Object.keys(action.incoming).forEach(label => {
+    // Sys stats extension may send 'NaN' sometimes, better handle it.
+    const value = action.incoming[label] == 'NaN' ? 0 : action.incoming[label];
     if(state[label]) {
       newState[label] = [
-        action.counter ?  action.incoming[label] - action.counterData[label] : action.incoming[label],
+        action.counter ?  value - action.counterData[label] :value,
         ...state[label].slice(0, X_AXIS_LENGTH-1),
       ];
     } else {
       newState[label] = [
-        action.counter ?  action.incoming[label] - action.counterData[label] : action.incoming[label],
+        action.counter ? value - action.counterData[label] : value,
       ];
     }
   });