vue + flask 实现的 linux web dashboard

最近抽空写了一个linux 的 dashboard, 借此熟悉了vue框架和前端构建技术webpack等技术, 偶尔一次看到羊驼的英文名叫alpaca, 就拿来做这个项目的名字了。

alpaca是一个基于vue2.0 python2.7 flask的简单linux dashboard, 用于收集、统计和展示linux操作系统信息,主要包括四个维度的信息:

  1. 基本信息: ip,hostname,cpu配置信息,磁盘分区信息等;

  2. 系统信息: 前load及变化趋势,cpu空闲率,cpu时间分布,内存使用率,内存使用分布,占用
    cpu/内存比较多的进程, IO读写数量,以及耗费的时间等;

  3. 网络信息: 各个网卡的进出流量统计和走势,网络连接的详情以及各状态统计;

  4. 进程信息: 显示特定进程的详情,包括进程的内存使用情况,cpu使用情况,创建时间,状态,
    IO情况,子进程列表,网络连接列表,打开的文件描述符列表,启动的线程列表等;

git地址

https://github.com/echoyuanliang/alpaca

安装

环境要求

linux操作系统;python2.7; node >= 4.0.0; npm>= 3.0.0

安装和启动

  1. 确保目标机器环境符合要求

  2. 将代码clone到目标机器,进入代码文件目录,可以看到其中有以alpaca命名的管理脚本, 管理脚本提供了build(安装程序依赖包,打包前端的js,css文件等操作), startstoprestartstatus等功能,因此,代码刚clone到本地或者修改以后,需要重新build,然后再start.

git clone [email protected]:echoyuanliang/alpaca.git
cd alpaca 
bash alpaca build
bash alpaca start

相关配置

  • 程序使用gunicorn托管(也可以直接使用run.py启动),guncorn启动配置文件路径为backend/gun.py.默认配置如下,默认端口为8080,也是此处配置:
    # -*- coding: utf-8 -*-
    import multiprocessing
    
    bind = "0.0.0.0:8080"
    pidfile = 'var/gunicorn.pid'
    workers = multiprocessing.cpu_count() * 2 + 1
    
    worker_class = 'sync'
    backlog = 2048
    daemon = True
    loglevel = 'info'
    accesslog = 'logs/access.log'
    errorlog = 'logs/error.log'
    access_log_format = "%({X-Real-IP}i)s %(h)s %(l)s %(u)s %(t)s %(r)s %(s)s %(b)s %(f)s %(a)s"    
  • 应用程序配置文件路径为backend/config.py, alpaca使用linux的用户(root用户除外),密码来管理登陆的用户,因此需要配置那些用户具有访问权限,配置项为AUTH_USER, 如果不配置或配置为空数组,则所有用户均有权限登录, 同时,alpaca仅对白名单ip授予访问权限,配置项为AUTH_IP,如果不配置或配置项为空数组,则所有ip均有权限登录。

技术栈

python flask ecmascript6 vue2.0

项目结构

vue + flask 实现的 linux web dashboard_第1张图片
structure screenshot

截图

基本信息页面

vue + flask 实现的 linux web dashboard_第2张图片
basic screenshot

系统信息页面

vue + flask 实现的 linux web dashboard_第3张图片
system screenshot

网络信息页面

network screenshot

进程信息页面

vue + flask 实现的 linux web dashboard_第4张图片
process screenshot

你可能感兴趣的:(vue + flask 实现的 linux web dashboard)