Skip to content

Tutorials

Jump to bottom
aaajiulong edited this page Apr 25, 2021 · 10 revisions

Foreword

Flask-State is a lightweight chart plugin to show machine state.

  • Monitoring indicators: CPU, memory, disk usage, disk IO, Network IO, LoadAVG and boot time.
  • Extensible: Offers rich customization options, including redis monitoring, user authentication, custom logging, i18n and etc.
  • Stable: Solves multiprocessing concurrency problems (if you use gunicorn) built on top of lightweight dependencies.

Quickstart

Install Dependencies

  • Install via pip
pip3 install flask-state
  • Visualization plugin dependencies

Use jsDelivr CDN to import the Flask-State file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Import the Flask-State file -->
    <link href="https://cdn.jsdelivr.net/gh/yoobool/flask-state@v1.1.2/packages/flask-state.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/yoobool/flask-state@v1.1.2/packages/umd/flask-state.min.js"></script>
</head>

Initialization

# app.py
from flask import Flask
from flask import render_template
import flask_state

# Create a Flask app
app = Flask(__name__)

# Just bind the correct,readable and writable sqlite database path
app.config['SQLALCHEMY_BINDS'] = {flask_state.DEFAULT_BIND_SQLITE: 'sqlite:///path'}
flask_state.init_app(app)

# After setting up the route,you can display data!
@app.route('/')
def hello():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Display Flask-State

Example of initializing via Flask-State's init method. You can open the Flask-State window, by click on the DOM element bound to the method.

Below is the complete code:

<!DOCTYPE html>
<!-- templates/index.html -->
<html>
<head>
    <meta charset="utf-8">
    <title>Flask-State</title>
    <!-- Import echarts file -->
    <script src="echarts.min.js"></script>
    <!-- Import Flask-State file -->
    <link rel="stylesheet" href="flask-state.css">
    <script src="flask-state.min.js"></script>
</head>
<body>
    <!-- Create the DOM element that triggers Flask-State -->
    <button id="trigger" style="width: 100px; height:50px;"></button>
    <script type="text/javascript">
        // Bind the Flask-State trigger event to the specified DOM element
        flaskState.init({dom: document.getElementById('trigger')});
    </script>
</body>
</html>

Run app.py now, Open http://127.0.0.1:5000 by using browser, Flask-State is already running!

Configuration

Recording Frequency

Records the state of the machine every 60 seconds by default. Custom time interval is allowed, but please note that the minimum interval for collecting metrics also is 60 seconds.

import flask_state

app.config['SQLALCHEMY_BINDS'] = {flask_state.DEFAULT_BIND_SQLITE: 'sqlite:///path'}
# Pass the custom time into the init method
custom_interval = 120
flask_state.init_app(app, interval=custom_interval)

Redis Monitor

If you need to monitor Redis, just introduce the connection configuration of Redis, and Flask-State will collect Redis related indicators and display them on the page.

app.config['REDIS_CONF'] = {
    'REDIS_STATUS': True,    
    'REDIS_HOST': '192.168.0.1',    
    'REDIS_PORT': 16000,    
    'REDIS_PASSWORD': 'fish'
}
# Initialize Flask-State after configuration

Localization

Flask-State currently supports three languages, including English, Simplified Chinese, and Japanese. The default language is English. If you need other languages, please leave us a message under Issues.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask-State</title>
    <!-- including Flask-State file -->
    <script src="flask-state.min.js"></script>
    <!-- Load language pack after import the Flask-State -->
    <script src="umd/zh.js"></script>
    <script src="umd/ja.js"></script>
    <link rel="stylesheet" href="flask-state.css">
</head>
<body>
    <script type="text/javascript">
        flaskState.init({lang: flaskState.zh});
    </script>
</body>
</html>

Trigger popup windows event

Flask-State supports you to bind multiple init methods to different DOM elements, those elements can be clicked to open the Flask-State windows.

Of course, you needn't bind the DOM element, Flask-State will create a floating button on the page to open the Flask-State windows. (Through long press and drag to adjust the position of the floating button)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask-State</title>
    <!-- Import Flask-State -->
    <script src="flask-state.min.js"></script>
    <link href="flask-state.css" rel="stylesheet">
</head>
<body>
    <!-- Create the DOM element that triggers Flask-State -->
    <button id="trigger1" style="width: 100px; height:50px;"></button>
    <button id="trigger2" style="width: 100px; height:50px;"></button>
    <script type="text/javascript">
        /* Flask-State binds the trigger event to trigger1, trigger2, and floating button respectively */
        flaskState.init({dom: document.getElementById('trigger1')});
        flaskState.init({dom: document.getElementById('trigger2')});
        flaskState.init();
    </script>
</body>
</html>

FAQ

Data Backup

Records that ranges from 1, 3, 7 or 30 days is queryable in current Flask-State version. Meanwhile 30 days ago data will be auto delete.

If you need to view more data, please make a data backup in time.

Multiprocessing

When running multiple instances of Flask on the same server (For example using Gunicorn). In order to avoid the concurrency problem of Flask-State recording state, we introduced an external lock setting.

Only the process that obtains the lock resource has the permission to read and write the database. At the same time, the process that has acquired the lock resource will print out its PID.

Access Control

For users who have worry about security , we will recommend that you introduce the Flask-Login.

After enabling, in each read and write operation, Flask-State will perform user authentication based on Flask-Login, and only users who pass the authentication can read and write local state data.

Roadmap

  • Make Flask-State mobile-friendly.
  • Set up collect frequency via Cron expression.
  • Add more extended service monitoring.
Clone this wiki locally