Make a web version of HTOP.
- preact
- redux
- chartjs
- https://nivo.rocks/
- psutil
client.js <- websocket -> server.py
Server sends data, eg. {'CPU': cpu_data}, {'MEM': mem_data...}.
Client has 1 element per data type, eg. CPUDisplay, MEMDisplay, SWAPDisplay.
https://www.createwithdata.com/react-chartjs-dashboard/
- https://github.com/preactjs/preact/blob/master/demo/redux.js
- https://developer.ibm.com/tutorials/wa-manage-state-with-redux-p1-david-geary/
- https://thoughtbot.com/blog/json-event-based-convention-websockets
https://psutil.readthedocs.io/en/latest/#system-related-functions
For CPU, we can get it every second and send it up:
In [28]: {'CPU': {i: {'user': cpu.user, 'system': cpu.system, 'iowait': cpu.iowait} for i, cpu in enumerate(psutil.cpu_times_percent(interval=1.0, percpu=True))}}
Out[28]:
{'CPU': {0: {'iowait': 0.0, 'system': 3.0, 'user': 5.0},
1: {'iowait': 5.0, 'system': 2.0, 'user': 4.0},
2: {'iowait': 0.0, 'system': 7.9, 'user': 6.9},
3: {'iowait': 0.0, 'system': 7.0, 'user': 7.0}}}
For memory, we can also schedule every one second, manually.
In [13]: psutil.virtual_memory()
Out[13]: svmem(total=16686583808, available=8698585088, percent=47.9, used=6622281728, free=2890137600, active=9016291328, inactive=3604058112, buffers=962240512, cached=6211923968, shared=1021370368, slab=758235136)
In [16]: psutil.swap_memory()
Out[16]: sswap(total=25165819904, used=0, free=25165819904, percent=0.0, sin=0, sout=0)
HTOP