molssi / qcfractaldashboard

Dashboard for the QCFractal Server

MolSSI QCArchive Dashboard

This application is a Dashboard for the QCArchive/QCFractal database.

Base template

• Datta Able Flask - product page
• Datta Able Flask Pro (more examples) - More examples, the pro version
• Datta Able Flask - Demo - LIVE Deployment
• Flask Tutorial - Getting started with Flask

How to use it

# Get the code
git clone https://github.com/MolSSI/QCFractalDashboard.git
cd QCFractalDashboard

`

Add QCFractal user and password

Create a private .env file in the root directory of the repo (i.e. QCFractalDashboard/), and set any cutomization to the config defined in .flaskenv or in config.py.

Create environment and install requirements

conda create -n qca-dash python=3.8
conda activate qca-dash

# Install modules - SQLite Database
pip3 install -r requirements.txt

# OR with PostgreSQL connector
# pip install -r requirements-pgsql.txt

Run the app in development mode

# Start the application (development mode)
# --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
# --port=5000    - specify the app port (default 5000)  
flask run --host=0.0.0.0 --port=5000

# or just for defaults
flask run

Access the dashboard in browser using the host and post you chose: http://127.0.0.1:5000/. In the login page, enter the server address (the default is set in the .flaskenv and can be overriden in the .evn file)

For productoction, use guincorn or docker as described in the deployment section below.

---

Dashboard Template structure

Supported Features

• DBMS: SQLite, PostgreSQL (production)
• DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
• Modular design with Blueprints, simple codebase
• Session-Based authentication (via flask_login), Forms validation
• Deployment scripts: Docker, Gunicorn / Nginx, Heroku

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:

Simplified version

< PROJECT ROOT >
   |
   |-- app/                      # Implements app logic
   |    |-- base/                # Base Blueprint - handles the authentication
   |    |-- home/                # Home Blueprint - serve UI Kit pages
   |    |
   |   __init__.py               # Initialize the app
   |
   |-- requirements.txt          # Development modules - SQLite storage
   |-- requirements-mysql.txt    # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
   |
   |-- .env                      # Inject Configuration via Environment
   |-- config.py                 # Set up the app
   |-- run.py                    # Start the app - WSGI gateway
   |
   |-- ************************************************************************

The bootstrap flow

• run.py loads the .env file
• Initialize the app using the specified profile: Debug or Production
  • If env.DEBUG is set to True the SQLite storage is used
  • If env.DEBUG is set to False the specified DB driver is used (MySql, PostgreSQL)
• Call the app factory method create_app defined in app/init.py
• Redirect the guest users to Login page
• Unlock the pages served by home blueprint for authenticated users

App / Base Blueprint

The Base blueprint handles the authentication (routes and forms) and assets management. The structure is presented below:

< PROJECT ROOT >
   |
   |-- app/
   |    |-- home/                                # Home Blueprint - serve app pages (private area)
   |    |-- base/                                # Base Blueprint - handles the authentication
   |         |-- static/
   |         |    |-- <css, JS, images>          # CSS files, Javascripts files
   |         |
   |         |-- templates/                      # Templates used to render pages
   |              |
   |              |-- includes/                  #
   |              |    |-- navigation.html       # Top menu component
   |              |    |-- sidebar.html          # Sidebar component
   |              |    |-- footer.html           # App Footer
   |              |    |-- scripts.html          # Scripts common to all pages
   |              |
   |              |-- layouts/                   # Master pages
   |              |    |-- base-fullscreen.html  # Used by Authentication pages
   |              |    |-- base.html             # Used by common pages
   |              |
   |              |-- accounts/                  # Authentication pages
   |                   |-- login.html            # Login page
   |                   |-- register.html         # Registration page
   |
   |-- requirements.txt                          # Development modules - SQLite storage
   |-- requirements-mysql.txt                    # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt                    # Production modules  - PostgreSql DMBS
   |
   |-- .env                                      # Inject Configuration via Environment
   |-- config.py                                 # Set up the app
   |-- run.py                                    # Start the app - WSGI gateway
   |
   |-- ************************************************************************

App / Home Blueprint

The Home blueprint handles UI Kit pages for authenticated users. This is the private zone of the app - the structure is presented below:

< PROJECT ROOT >
   |
   |-- app/
   |    |-- base/                     # Base Blueprint - handles the authentication
   |    |-- home/                     # Home Blueprint - serve app pages (private area)
   |         |
   |         |-- templates/           # UI Kit Pages
   |              |
   |              |-- index.html      # Default page
   |              |-- page-404.html   # Error 404 page
   |              |-- page-500.html   # Error 500 page
   |              |-- page-403.html   # Error 403 page
   |              |-- *.html          # All other HTML pages
   |
   |-- requirements.txt               # Development modules - SQLite storage
   |-- requirements-mysql.txt         # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt         # Production modules  - PostgreSql DMBS
   |
   |-- .env                           # Inject Configuration via Environment
   |-- config.py                      # Set up the app
   |-- run.py                         # Start the app - WSGI gateway
   |
   |-- ************************************************************************

Deployment

The app is provided with a basic configuration to be executed in Docker, Gunicorn, and Waitress.

Docker execution

---

The application can be easily executed in a docker container. The steps:

Get the code

$ git clone https://github.com/app-generator/flask-datta-able.git
$ cd flask-datta-able

Start the app in Docker

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Visit http://localhost:5005 in your browser. The app should be up & running.

Gunicorn

---

Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

Install using pip

$ pip install gunicorn

Start the app using gunicorn binary

$ gunicorn --bind 0.0.0.0:8001 run:app
Serving on http://localhost:8001

Visit http://localhost:8001 in your browser. The app should be up & running.

Waitress

---

Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.

Install using pip

$ pip install waitress

Start the app using waitress-serve

$ waitress-serve --port=8001 run:app
Serving on http://localhost:8001

Visit http://localhost:8001 in your browser. The app should be up & running.

Credits & Links

• Flask Framework - The official website
• Boilerplate Code - Index provided by AppSeed
• Boilerplate Code - Index published on Github

---

qcfractaldashboard's Issues

task-00001: Establish basic application framework

Select and configure basic application framework and technology stack to be utilized during server dashboard development.

Targets:

• QCFractal Client
• Python
• Plotly Dash / UI