Giter VIP home page Giter VIP logo

flash's Introduction

Flash

GitHub Actions Build Status Test Coverage Other Code Issues ISC License

Flask + Dashboard = Flash. A project dashboard that works.

Deploying it

  1. Heroku

    Deploy to Heroku

  2. Cloud Foundry

    Flash can easily be deployed to any Cloud Foundry environment. An example manifest.yml is included with the project, showing how to configure the deployment with an app name and a random route. Once you have installed the CLI and selected an appropriate target org and space, you can simply cf push.

  3. Docker

    Alternatively, build a Docker container as below and deploy to an online container hosting service.

Configuring it

There are three environment variables that Flash is aware of:

  • PORT - the port to bind to (defaults to 5000)
  • FLASK_SECRET_KEY - the secret key for Flask sessions (they aren't currently used, but it's good practice to set it to a random value)
  • FLASH_CONFIG - the configuration, described below

The configuration, either saved in config.json at the project root or as the $FLASH_CONFIG environment variable, should look like:

{
  "project_name": <name of the project>,
  "services": [
    {
      "name": "tracker",
      "api_token": <your API token>,
      "project_id": <your project ID>
    }
  ]
}

If both the environment variable and the config file are provided, the environment variable takes precedence.

If loading from config.json, any value in the "services" settings that $LOOKS_LIKE_THIS (leading $, capital letters and underscores only) will be assumed to be an environment variable and retrieved accordingly. This lets you version control most of your configuration without leaking API tokens and other secrets.

Settings

  • project_name - the project's name to display in the footer (defaults to "unnamed")
  • services - an array of service configurations (see flash_services for details and configuration options)
  • style - the stylesheet to use (defaults to "default", which is currently the only option...)
  • project_end - the end data and time of the project, in any format accepted by Moment.js. If provided, a countdown to this point will be shown in the footer (no default, if not provided no countdown is shown).

Running it

If you just want to run Flash locally, you can use the included Dockerfile to build and run a Docker container. This is a two-step process, after which Flash will be available at http://localhost:5000:

docker build -t textbook/flash .
docker run -p 5000:80 textbook/flash

If your config.json includes environment variable references, or you want to override the configuration completely with $FLASH_CONFIG, you can supply environment variables at docker run time with the -e command.

Developing it

The easiest way to install Flash for development is:

  1. Install the dependencies: pip3 install -r requirements.txt
  2. Install the package in development mode: python3 setup.py develop
  3. To run it locally, edit flash/config.json or provide $FLASH_CONFIG then run: python3 scripts/launch.py
  4. To run the tests, use python setup.py test or run py.test directly. In the latter case, use --runslow --Chrome (or another browser of your choice) to include the integration tests, and see the docs for pytest-pylint configuration options. For the integration tests you will need to ensure that chromedriver is on your PATH; on OS X, you can simply brew cask install chromedriver.

The templates are written using the Jinja2 template language.

Thunder

Thunder is a new branch in the Flash repository that might eventually replace the original. It switches the framework from Flask to Tornado, allowing asynchronous processing and websockets.

flash's People

Contributors

bengro avatar butzopower avatar dependabot[bot] avatar entomb avatar textbook avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flash's Issues

Publish Docker image

People don't need to build their own Docker images with config.json inside, they could deploy an existing image from e.g. Docker Hub and just set the config via the environment variable.

Optimize styling for CI monitors

The look of flash should be optimized for CI monitors any size.

  • Font size need to be bigger
  • Everything should be relatively positioned

Tiles should support OK/ERR states

For example, for the codeship tile: if the last build failed, the tile itself should have the ERR state.
Similarly, if the last build was green, the tile should be OK.

This would allow us to color-code our design and make it easier to see the relevant information right away.

Also, if a service is a down, perhaps yet another state could be used to flag availability issues.

Add branch info/options to GitHub service

It might be useful to see the active branch(es) in the name of the GitHub service, and perhaps to be able to choose in the config which are active (defaulting to master).

Improve service testing

Currently you'd need one app setting for every service to test them all, need to find a way to integration test a single service in isolation

Initial state doesn't work with build status enum

The outcome doesn't get serialised into the classname correctly, so you see e.g. pane-item build-outcome Outcome.FAILED. It does get serialised into the JSON payload correctly, so once the first JS fetch succeeds you see the right outcome.

Add logging

Needs more cowbell logging.

For example, whether a service wasn't found or was found but didn't return anything, the endpoint returns {} with no further explanation.

Also: include message in payload?

Move last updated into common area

There is redundant information (= last updated) on the tiles that should be moved into the common area. Assuming we update all the services at the same time, there is little gain in keeping them separate for each tile.

Reducing redundancy will help make the design more focused.

Test helper to imitate different scenarios

It would be great if we had a way to control the state of the services in order to render the UI in different states. This would help when styling the front-end.

Most important states are:

  • A tile in an error state
  • A tile in an ok state
  • A pane item in a pending state
  • A pane item in an ok state
  • A pane item in an error state

Errors on initial load if fetches fail

By default, the various update implementations return an empty dictionary if something goes wrong. This is not gracefully handled by the initial load templating:

   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT   File "/home/vcap/app/flash/templates/home.html", line 1, in top-level template code
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT     {% extends "base.html" %}
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT   File "/home/vcap/app/flash/templates/base.html", line 20, in top-level template code
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT     {% block body %}{% endblock %}
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT   File "/home/vcap/app/flash/templates/home.html", line 15, in block "body"
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT     {% include template %}
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT   File "/home/vcap/app/flash/templates/partials/vcs-section.html", line 3, in top-level template code
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT     {% set commit_data = service_data['commits'][i] or {} %}
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT   File "/home/vcap/deps/0/python/lib/python3.7/site-packages/jinja2/environment.py", line 411, in getitem
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT     return obj[argument]
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'commits'
   2019-11-04T22:31:43.79+0000 [APP/PROC/WEB/0] OUT INFO:werkzeug:10.253.7.131 - - [04/Nov/2019 22:31:43] "GET / HTTP/1.1" 500 -

Calculate end moment once and reuse

Currently the moment for the project end (see #28) is re-created every 1000ms:

setInterval(function() {
  $('#countdown').text(moment({{ config.project_end | safe }}).fromNow());
}, 1000);

It would be more efficient to calculate it once, on page load, then just call fromNow as required.

Can't run on CF with newer buildpacks

E.g. with v1.6.18, the app won't start:

   2018-09-26T09:51:50.04+0100 [CELL/0] OUT Starting health monitoring of container
   2018-09-26T09:51:50.21+0100 [APP/PROC/WEB/0] ERR Traceback (most recent call last):
   2018-09-26T09:51:50.21+0100 [APP/PROC/WEB/0] ERR   File "scripts/launch.py", line 12, in <module>
   2018-09-26T09:51:50.21+0100 [APP/PROC/WEB/0] ERR     from flash import app
   2018-09-26T09:51:50.21+0100 [APP/PROC/WEB/0] ERR ImportError: No module named 'flash'
   2018-09-26T09:51:50.22+0100 [APP/PROC/WEB/0] OUT Exit status 1
   2018-09-26T09:51:50.22+0100 [CELL/SSHD/0] OUT Exit status 0

Stacking services

Services of the same type should be stacked.

An animation will help transition between the service tiles.

Support service duplicates

Currently Flash only allows one instance of each service; it would be good to allow multiple instances.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.