fix memavailable on centos6

avail = free + cache + buffer

Author: liaotonglang

src/main/ssh.ts

@@ -522,28 +522,24 @@ export class SshFetchStats {
 
     getMemInfo(s: LinuxSession) {
         this.execGetStdout(s, 'cat /proc/meminfo', (s: LinuxSession, data: string) => {
-            const getFieldsValue = (dataLines: string[], line: number): number => {
-                if (line >= dataLines.length) {
-                    console.log(`get ${line}-th line of data filed`);
-                    return undefined;
-                }
-                const selectedLine = dataLines[line];
-                const fields = selectedLine.split(/\s+/);
-                if (fields.length < 2) {
-                    console.log(`line ${selectedLine} get number failed`);
-                    return undefined;
+            const lines = data.split('\n');
+            const fields = new Map();
+            lines.forEach((line: string) => {
+                const splits = line.split(/\s+/);
+                if (splits.length < 2) {
+                    return;
                 }
-                const value = Number(fields[1]);
-                return value;
-            }
+                fields.set(splits[0], Number(splits[1]) * 1000);
+            });
 
-            const lines = data.split('\n');
-            if (lines.length < 3) {
-                console.log('data empty');
-                return;
+            const memtotal = fields.get('MemTotal:');
+            let memavail = fields.get('MemAvailable:');
+            if (memavail == undefined || memavail == null) {
+                const memfree = fields.get('MemFree:');
+                const buffers = fields.get('Buffers:');
+                const cached = fields.get('Cached:');
+                memavail = memfree + buffers + cached;
             }
-            const memtotal = getFieldsValue(lines, 0);
-            const memavail = getFieldsValue(lines, 2);
             s.stat.memtotal = memtotal;
             s.stat.memavail = memavail;
             s.stat.memUsePercent = (memtotal - memavail) / memtotal;
@@ -553,16 +549,23 @@ export class SshFetchStats {
 
     getDiskStat(s: LinuxSession) {
         this.execGetStdout(s, 'df', (s: LinuxSession, data: string) => {
+            let prevName = '';
             const getFieldsValue = (line: string): DiskStat => {
                 const fields = line.split(/\s+/);
                 if (fields.length < 5) {
                     // console.log(`line ${line} extract failed`);
+                    prevName = fields[0];
                     return undefined;
                 }
                 const res = new DiskStat();
                 res.name = fields[0];
+                if (res.name == undefined || res.name == '') {
+                    res.name = prevName;
+                }
                 const total = Number(fields[1]);
                 const avail = Number(fields[3]);
+                res.total = total * 1000;
+                res.avail = avail * 1000;
                 res.usePercent = (total - avail) / total;
                 return res;
             }
@@ -697,6 +700,8 @@ const OnlineStatus = {
 export class DiskStat {
     name: string
     usePercent: number
+    total: number
+    avail: number
 }
 
 export class LinuxStat {

src/pages/EditSmtp.jsx

@@ -77,9 +77,9 @@ export function EditSmtp(props) {
                 <EuiToolTip
                     position="top"
                     content={
-                        <p>
+                        <>
                             一般端口是<EuiCode>465</EuiCode>就勾上，<EuiCode>587</EuiCode>或<EuiCode>25</EuiCode>就别勾了
-                        </p>
+                        </>
                     }>
                     <EuiCheckbox
                         id='useSecure'

src/pages/ServerCard.jsx

@@ -95,14 +95,23 @@ export class ServerCard extends React.Component {
   render() {
     const diskX = this.state.stat.disks.map((it) => {
       return (
-        <EuiProgress
+        <EuiToolTip
+          display='block'
           key={it.name}
-          valueText={true}
-          max={100}
-          color={this.selectColor(it.usePercent * 100)}
-          label={"磁盘占用率 (" + it.name + ')'}
-          value={(it.usePercent * 100).toFixed(2)}
-        />);
+          title={"磁盘占用率 " + it.name}
+          content={<>
+            <p>总大小: {humanFileSize(it.total)}</p>
+            <p>剩余空间: {humanFileSize(it.avail)}</p>
+          </>}>
+          <EuiProgress
+            valueText={true}
+            max={100}
+            color={this.selectColor(it.usePercent * 100)}
+            label={"磁盘占用率 (" + it.name + ')'}
+            value={(it.usePercent * 100).toFixed(2)}
+          />
+        </EuiToolTip>
+      );
     });
     return (
       <EuiCard
@@ -256,15 +265,47 @@ export class ServerCard extends React.Component {
           label="CPU 占用率"
           value={(this.state.stat.cpuload * 100).toFixed(2)}
         />
-        <EuiProgress
-          valueText={true}
-          max={100}
-          color={this.selectColor(this.state.stat.memUsePercent * 100)}
-          label="内存占用率"
-          value={(this.state.stat.memUsePercent * 100).toFixed(2)}
-        />
+
+        <EuiToolTip
+          display='block'
+          title='内存占用'
+          content={<><p>内存总大小: {humanFileSize(this.state.stat.memtotal)}</p>
+            <p>内存剩余: {humanFileSize(this.state.stat.memavail)}</p>
+            <p>MemAvailable = MemFree + Buffers + Cached</p></>}>
+          <EuiProgress
+            valueText={true}
+            max={100}
+            color={this.selectColor(this.state.stat.memUsePercent * 100)}
+            label="内存占用率"
+            value={(this.state.stat.memUsePercent * 100).toFixed(2)}
+          />
+
+        </EuiToolTip>
         {diskX}
       </EuiCard>
     );
   }
 }
+
+
+function humanFileSize(bytes, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + ' B';
+  }
+
+  const units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+  return bytes.toFixed(dp) + ' ' + units[u];
+}