VPS Usage

├── README.md ├── getData.php ├── index.php └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # VPS Resource Monitor 2 | 3 | A very simple, single monitoring page that fetches real-time info about your system. Does not save history. 4 | 5 | # What does it show ? 6 | * RAM usage 7 | * Used 8 | * Cached 9 | * Total 10 | * Free 11 | * HDD usage 12 | * Used 13 | * Total 14 | * Free 15 | * CPU specs 16 | * usage 17 | * cores 18 | * speed 19 | * threads 20 | * System uptime 21 | * Network usage 22 | * amount and size of recieved packets 23 | * amount and size of sent packets 24 | * Operating system 25 | 26 | # Dependencies 27 | These dependencies are required but already included. 28 | 29 | * Highcharts 30 | 31 | # Compatibility 32 | This php page has been tested on `CentOS 7` and `Debian 9` 33 | There's a chance you might need to edit the `getData.php` for your system. 34 | 35 | # Configuration 36 | This is located in the `script.js` 37 | 38 | ```javascript 39 | var refresh_time = 3; //every x seconds the page get refreshed 40 | ``` 41 | 42 | # Example 43 | 44 | If you want you can have yours below too. Just do a pull request and i'll merge it with pleasure. 45 | 46 | * [Click](https://michaelbelgium.me/vps) 47 | 48 | ![Image](https://i.imgur.com/QNEL5BI.png) -------------------------------------------------------------------------------- /getData.php: -------------------------------------------------------------------------------- 1 | array_map( 6 | function($value) { 7 | return (int)$value / 1000000; 8 | }, 9 | explode(" ", exec("free | grep 'Mem:' | awk {'print $2\" \"$3\" \"$4\" \"$6'}")) 10 | ), 11 | "CPUDetail" => trim(exec("sed -n 's/^cpu\s//p' /proc/stat")), 12 | "CPU" => array(), 13 | "storage" => array( 14 | "total" => disk_total_space("/") / 1000000000, 15 | "free" => disk_free_space("/") / 1000000000, 16 | "used" => (disk_total_space("/") - disk_free_space("/")) / 1000000000 17 | ), 18 | "network" => array_map('intval', explode(" ",exec("cat /proc/net/dev | grep 'eth0:' | awk {'print $2\" \"$3\" \"$10\" \"$11'}"))), 19 | "uptime" => (int)exec("cut -d. -f1 /proc/uptime"), 20 | "OS" => exec("cat /etc/*-release | grep 'PRETTY_NAME' | cut -d \\\" -f2") 21 | ); 22 | 23 | exec("cat /proc/cpuinfo | grep -i 'model name\|cpu cores\|cpu mhz'", $tmp); 24 | 25 | foreach($tmp as $line) 26 | { 27 | list($key, $value) = explode(":", $line); 28 | $data["CPU"][] = array(trim($key), trim($value)); 29 | } 30 | 31 | echo json_encode($data); 32 | ?> 33 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VPS Usage 6 | 7 | 8 | 9 | 10 |

11 |

12 |

13 |

Note: Content refreshes every second(s).

14 |

15 |

16 |

17 | 18 |

19 | 20 |

21 |

22 |

23 |

24 |

25 |

RAM

26 |

-

27 |

28 |

0 %

29 |

30 |

31 |

32 |

33 |

Usage: 0
Total: 0 GB
Free: 0 GB

38 |

39 |

40 |

41 |

42 |

43 |

44 |

Drive

45 |

-

46 |

47 |

0 %

48 |

49 |

50 |

51 |

52 |

Usage: 0 GB
Total: 0 GB
Free: 0 GB

57 |

58 |

59 |

60 |

61 |

62 |

63 |

CPU

64 |

0 %

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 | Network usage 77 |

78 |

Received: 0
Sent: 0

82 |

83 |

84 |

85 |

86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var mainchart; 2 | 3 | var refresh_time = 3; 4 | 5 | var prev_total = prev_idle = 0; 6 | 7 | window.onload = () => 8 | { 9 | document.getElementById('refresh_time').innerText = refresh_time; 10 | 11 | highChartsInit(); 12 | 13 | setInterval(refresh, refresh_time * 1000); 14 | }; 15 | 16 | function highChartsInit() 17 | { 18 | Highcharts.setOptions({ global: { useUTC: false } }); 19 | mainchart = new Highcharts.stockChart({ 20 | rangeSelector: { 21 | buttons: [{ 22 | count: 1, 23 | type: 'minute', 24 | text: '1M' 25 | },{ 26 | count: 5, 27 | type: 'minute', 28 | text: '5M' 29 | },{ 30 | count: 10, 31 | type: 'minute', 32 | text: '10M' 33 | },{ 34 | count: 15, 35 | type: 'minute', 36 | text: '15M' 37 | },{ 38 | type: 'all', 39 | text: 'All' 40 | }], 41 | inputEnabled: false, 42 | selected: 0 43 | }, 44 | 45 | tooltip: { pointFormat: '{series.name}: {point.y}%' }, 46 | chart: { renderTo: 'mainchart' }, 47 | title: { text: 'Hardware usage' }, 48 | xAxis: { title: "Time", type: "datetime" }, 49 | 50 | yAxis: { 51 | title: 'Percentage', 52 | max: 100, 53 | min: 0, 54 | tickInterval:10 55 | }, 56 | 57 | series: [ 58 | { name: 'RAM', data: getDummyData() }, 59 | { name: 'HDD', data: getDummyData() }, 60 | { name: 'CPU', data: getDummyData() } 61 | ] 62 | }); 63 | } 64 | 65 | function getDummyData() 66 | { 67 | const chartdata = new Array(), curtime = new Date().getTime(); 68 | 69 | for (i = -399; i <= 0; i++) chartdata.push([curtime + i * 1000, 0]); 70 | 71 | chartdata.push([curtime, 0]); 72 | 73 | return chartdata; 74 | } 75 | 76 | function refresh() 77 | { 78 | fetch('getData.php') 79 | .then(response => response.json()) 80 | .then(data => { 81 | const time = (new Date()).getTime(); 82 | 83 | const cpuload = getCpuLoad(data.CPUDetail); 84 | const currentram = ((data.memory[1] / data.memory[0]) * 100).toFixed(2); 85 | const currenthdd = ((data.storage["used"] / data.storage["total"]) * 100).toFixed(2); 86 | const currentcpu = cpuload > 100 ? 100 : cpuload; 87 | 88 | mainchart.series[0].addPoint([time, parseFloat(currentram)], false, true); 89 | mainchart.series[1].addPoint([time, parseFloat(currenthdd)], false, true); 90 | mainchart.series[2].addPoint([time, parseFloat(currentcpu)], true, true); 91 | 92 | document.querySelector('#ram-usage .usage').innerHTML = formatNumber(data.memory[1]) + " GB
Cache: " + formatNumber(data.memory[3]) + " GB"; 93 | document.querySelector('#ram-usage .total').innerHTML = formatNumber(data.memory[0]); 94 | document.querySelector('#ram-usage .free').innerHTML = formatNumber(data.memory[2]); 95 | 96 | document.querySelector('#drive-usage .usage').innerText = formatNumber(data.storage["used"]); 97 | document.querySelector('#drive-usage .total').innerText = formatNumber(data.storage["total"]); 98 | document.querySelector('#drive-usage .free').innerText = formatNumber(data.storage["free"]); 99 | 100 | document.querySelector('#network .rec').innerHTML = formatNumber(data.network[0]) + " bytes
Packets: " + formatNumber(data.network[1]); 101 | document.querySelector('#network .sent').innerHTML = formatNumber(data.network[2]) + " bytes
Packets: " + formatNumber(data.network[3]); 102 | 103 | const info = "Uptime: " + getTime(data.uptime) + "
Operating System: " + data.OS; 104 | document.getElementById('general_info').innerHTML = info; 105 | 106 | document.querySelector('#cpu-usage .list-group').innerHTML = ""; 107 | 108 | document.querySelector('#cpu-usage h3').innerText = parseFloat(currentcpu) + "%"; 109 | document.querySelector('#ram-usage h3').innerText = parseFloat(currentram) + "%"; 110 | document.querySelector('#drive-usage h3').innerText = parseFloat(currenthdd) + "%"; 111 | 112 | document.querySelector('#cpu-usage .progress-bar').style.width = parseFloat(currentcpu) + "%"; 113 | document.querySelector('#ram-usage .progress-bar').style.width = parseFloat(currentram) + "%"; 114 | document.querySelector('#drive-usage .progress-bar').style.width = parseFloat(currenthdd) + "%"; 115 | 116 | document.querySelector('#ram-usage .card-subtitle').innerText = formatNumber(data.memory[1]) + ' GB out of ' + formatNumber(data.memory[0]) + ' GB'; 117 | document.querySelector('#drive-usage .card-subtitle').innerText = formatNumber(data.storage["used"]) + ' GB out of ' + formatNumber(data.storage["total"]) + ' GB'; 118 | 119 | for (var i = 0; i < data.CPU.length; i++) 120 | { 121 | if(i % 3 === 0) 122 | { 123 | const listitem = document.createElement('li'); 124 | listitem.classList.add('list-group-item'); 125 | listitem.innerHTML = data.CPU[i][1] + "
" + data.CPU[i + 1][0] + ": " + data.CPU[i + 1][1] + "
" + data.CPU[i + 2][0] + ": " + data.CPU[i + 2][1]; 126 | 127 | document.querySelector("#cpu-usage .list-group").append(listitem); 128 | } 129 | } 130 | }); 131 | } 132 | 133 | //Calculation by https://github.com/Leo-G/DevopsWiki/wiki/How-Linux-CPU-Usage-Time-and-Percentage-is-calculated 134 | function getCpuLoad(input) 135 | { 136 | var cpuload = input.split(' '); 137 | var sum = 0; 138 | 139 | for (var i = 0; i < cpuload.length; i++) { 140 | sum += parseInt(cpuload[i]); 141 | } 142 | 143 | var idlecpuload = cpuload[3]; 144 | var diff_idle = idlecpuload - prev_idle; 145 | var diff_total = sum - prev_total; 146 | var diff_usage = (1000 * (diff_total - diff_idle) / diff_total + 5) / 10; 147 | 148 | prev_total = sum; 149 | prev_idle = idlecpuload; 150 | 151 | return diff_usage.toFixed(2); 152 | } 153 | 154 | function formatNumber(number) 155 | { 156 | return number.toLocaleString("nl").replace(/\./g, " "); 157 | } 158 | 159 | function getTime(seconds) 160 | { 161 | var leftover = seconds; 162 | 163 | var days = Math.floor(leftover / 86400); 164 | leftover = leftover - (days * 86400); 165 | 166 | var hours = Math.floor(leftover / 3600); 167 | leftover = leftover - (hours * 3600); 168 | 169 | var minutes = Math.floor(leftover / 60); 170 | leftover = leftover - (minutes * 60); 171 | 172 | return days + " days, " + hours + " hours, " + minutes + " minutes, " + leftover + " seconds"; 173 | } --------------------------------------------------------------------------------