A webapp for monitoring GPU machines, written in Vue.js and Flask.

Overview

Server Dashboard

A webapp for monitoring GPU machines. The app aggregates the output from gpustat across all machines and displays them on a single page.
The frontend is written in Vue.js (+ Vuetify) and backend is written in Flask.

til

About

  • The backend uses paramiko to connect to the servers via ssh in order to query the information.
  • Each server is queried once per minute (can be changed).
  • Multithreading is used to send out the requests to avoid long waiting times.

Installation

  1. Install Node.js and npm (example given for Ubuntu):
    sudo apt install nodejs
    sudo apt install npm
  2. Clone the repository:
    git clone https://github.com/matthias-wright/server-dashboard.git
  3. cd into the frontend directory:
    cd server-dashboard/frontend
  4. Install node packages:
    npm install
  5. cd into the backend directory:
    cd ../backend
  6. Install python packages:
    pip install -r requirements.txt

Configuration

  1. Add your server addresses to server-dashboard/backend/config/servers.yaml:

    server1:
        hostname: server1.some.domain.com
        active: true
    server2:
        hostname: server2.some.domain.com
        active: true
    ...

    gpustat needs to be installed on every server you add to the list.

  2. Add your credentials to server-dashboard/backend/config/config.yaml:

    credentials:
        username: username-for-servers
        path_to_ssh_key: /home/username-local-machine/.ssh/id_rsa
    settings:
        path_to_server_config: config/servers.yaml
        process_timeout: 10
        port: 5000
         

    The username will be used for the ssh requests and path_to_ssh_key is the path to the corresponding ssh key. If you currently use a password to login to the servers, you have to generate a ssh key pair and copy your public key to the servers (see here for more instructions).
    Don't use ~ for path_to_ssh_key, write out the full path.
    process_timeout is the time in seconds to wait for a server to respond and port is the port for the Flask app. You don't have to change these.

Usage

After installing and configurating the app, you can start it as follows:

  1. cd into the server-dashboard directory:
    cd server-dashboard
  2. Run the run.py script:
    python run.py

The app should be available at: http://localhost:8080/

Disclaimer

I have been using the app for a while now and it is working well for me but it has not been extensively tested. If you encounter any problems while setting the app up, don't hesitate to open an issue!

Acknowledgements

  • I used this awesome tutorial by The Net Ninja to learn Vuetify.
  • gpustat is used to obtain the GPU information from each separate machine.
You might also like...
A Vue Webapp for searching github organizations

Github Search Live Demo: https://master--gracious-cray-748bfa.netlify.app Project setup npm install Compiles and hot-reloads for development npm run

Githubapp ia a webapp made with vuejs in which the user can get the data like repos, stars, followers, following

Githubapp ia a webapp made with vuejs in which the user can get the data like repos, stars, followers, following, bio etc. about a particular github user by searching their username. Firebase is used for authentication purpose.

Happi-heyday - Webapp happi bớt đây

happi-heyday Production: https://heydayle.github.io/Congratulatory-letter/#/ Project setup yarn install Compiles and hot-reloads for development yarn

WebApp für das jährliche Handballturnier des Pfadikorps Glockenhof. Der HaBaTu Tournament Manager ermöglicht es, automatisch einen Spielplan und Finalspiele zu generieren.
WebApp für das jährliche Handballturnier des Pfadikorps Glockenhof. Der HaBaTu Tournament Manager ermöglicht es, automatisch einen Spielplan und Finalspiele zu generieren.

HaBaTu Tournament Manager WebApp für das jährliche Handballturnier des Pfadikorps Glockenhof. Der HaBaTu Tournament Manager ermöglicht es, automatisch

🎀 A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.

Chrome-Ribbon-Reminder This is a Chrome extension in popup form. Ribbon Reminder was an old app I made in Swift for iOS a while back, and I think its

A P300 online spelling mechanism for Emotiv headsets. It's completely written in Node.js, and the GUI is based on Electron and Vue.
A P300 online spelling mechanism for Emotiv headsets. It's completely written in Node.js, and the GUI is based on Electron and Vue.

brain bits This project implements a P300 online spelling mechanism for Emotiv headsets. It's completely written in Node.js, and the GUI is based on E

BetterCompass is a frontend for JDLF's compass.education written in Vue 2 and Vuetify.
BetterCompass is a frontend for JDLF's compass.education written in Vue 2 and Vuetify.

BetterCompass BetterCompass is a frontend for JDLF's compass.education written in Vue 2 and Vuetify. The normal Compass frontend has a variety of issu

A HashiCorp Vault UI written with VueJS and Vault native Go API
A HashiCorp Vault UI written with VueJS and Vault native Go API

Goldfish Vault UI - Live Demo Share this repo with your colleagues! What is this? Goldfish - A HashiCorp Vault UI and workflow tool. pic.twitter.com/u

A blazing fast start-page for your services written with Nuxt3 and Go
A blazing fast start-page for your services written with Nuxt3 and Go

Launchpad #################### ARCHIVED #################### I moved over to a go-only approach (SPEED!) and created a new project: https://github.com

Owner
Matthias Wright
PhD Student in Computer Science @ Ludwig Maximilian University of Munich
Matthias Wright
Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue + Python/Flask + WebSockets.

Streamsync Like Streamlit, but fast. A proof-of-concept framework built using JavaScript/Vue.js + Python/Flask + WebSockets. By avoiding a rerun of th

Ramiro Medina 101 Dec 11, 2022
A picture book creation platform created by Vue2.X+Flask+MySQL

A picture book creation platform created by Vue2.X+Flask+MySQL

QinShiwen 2 Jun 7, 2022
Linux System Optimizer and Monitoring - https://oguzhaninan.github.io/Stacer-Web

Linux System Optimizer and Monitoring Sponsors Reviews Required Packages curl, systemd PPA Repository (for ubuntu) sudo add-apt-repository ppa:oguzhan

Oguzhan Inan 8.2k Jan 4, 2023
atmo is a selfhosted temperature and humidity monitoring system for you home.

atmo atmo is a selfhosted temperature and humidity monitoring system for you home. It uses standard ZigBee sensors but without the need for a commerci

Alexander Zeller 13 Dec 11, 2022
It is a self-hosted monitoring tool like "Uptime Robot".

Uptime Kuma It is a self-hosted monitoring tool like "Uptime Robot". Features Monitoring uptime for HTTP(s) / TCP / Ping. Fancy, Reactive, Fast UI/UX.

Louis Lam 27.5k Jan 5, 2023
A webapp what base Vue2.0 contains seaching and playing music

vue-music163 A Vue.js project for music Use vuejs-2.0 vue-cli vue-router vuex mint-ui Support Chrome Firefox Mobile browser Package for app Appcan Api

null 92 Apr 21, 2022
TarkovTracker - a webapp for tracking and planning your progress in the game Escape From Tarkov.

TarkovTracker TarkovTracker is a progress tracker meant to help players of Escape From Tarkov. The core goal of the project is to provide insights int

TarkovTracker 61 Dec 28, 2022
A indeed type webapp for recruiters and job applicants.

Job board This is an epitech project, the purpose was to create a Indeed like application where users can apply to job offers and where companies coul

Felix P 1 Nov 3, 2021
Use the LEO outlining editor to create a Vue.js webapp.

LeoVue Use the Open Source Leo Outlining Editor to create tree-based websites. Content items can be text, markdown, or html with Vue components. Tree

Joe Orr 150 Dec 24, 2022
This repo contains a VueJS component for embedding a Twitter Feed on a Vue WebApp

VueJSTwitterFeed This repo contains a VueJS component for embedding a Twitter Feed on a Vue WebApp Installation Add to your node project using: npm in

null 6 Jul 24, 2022