Building a Server Load and Disk Space Monitoring Web Application with Vue, Element, Echarts, and Flask

The article describes how to build a web‑based server monitoring tool that tracks load and disk usage, using Vue.js with Element UI and Echarts for the frontend and Flask (Python) for the backend.

It starts by creating a Vue project via Vue CLI, installing Element, vue‑echarts and axios, and verifying the setup with $ vue create server-monitor and $ npm run serve .

For the backend, a run.py file is created that serves the built Vue files and defines a Flask app:

from flask import Flask, render_template
app = Flask(__name__,
    static_folder="../server-monitor/dist",
    static_url_path="",
    template_folder="../server-monitor/dist")
@app.route('/')
def index():
    return render_template("index.html")
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

A configuration file monitor.config stores the server password:

[config]
SERVER_PASS=123456

The monitoring logic uses paramiko to SSH into a target server, run df and uptime , parse the results, and store them in an SQLite database via the Peewee ORM.

ssh = paramiko.SSHClient()
    ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
    ssh.connect('192.168.199.208', 22, 'pi', SERVER_PASS)
    stdin, stdout, stder = ssh.exec_command('df')
    occupation_result_list = stdout.read().decode("utf-8","strict").split('\n')
    stdin, stdout, stder = ssh.exec_command('uptime')
    uptime_result_list = stdout.read().decode("utf-8","strict").split('\n')
    ssh.close()

A Flask route /systemMonitor queries the SQLite tables and returns the latest metrics as JSON:

@app.route('/systemMonitor', methods=['GET'])
def systemMonitor():
    result = {}
    system_disk_monitor_query = system_disk_monitor.select().order_by(-system_disk_monitor.id).limit(1).dicts()
    result['disk'] = {}
    for row in system_disk_monitor_query:
        result['disk']['size'] = row['size']
        result['disk']['used'] = row['used']
        result['time'] = row['update_time']
    system_uptime_query = system_uptime.select().order_by(-system_uptime.id).limit(60).dicts()
    result['uptime'] = {'average': [], 'time': []}
    for row in system_uptime_query:
        result['uptime']['average'].append(row['average'])
        result['uptime']['time'].append(row['update_time'].strftime('%H:%M'))
    return jsonify(result)

On the Vue side, the App.vue component fetches this data in its mounted() hook using axios and updates charts and tables accordingly.

mounted() {
    axios({
        method: "GET",
        url: "http://localhost:5000/systemMonitor"
    }).then(data => {
        this.update_time = data.data["update_time"]
        this.info1.conn = data.data["user"]
        // update pie and line charts with disk and uptime data
    })
  }

After building the Vue app with $ npm run build , the Flask server serves the static files, and the monitoring dashboard displays real‑time load and disk usage, with suggestions for scaling to multiple servers and adding alerting features.