dashboard

The Web-UI component of the AUTOradio framework

Prerequisites

This version is an early development prototype, only the interface to the steering/pv module is implemented partly yet.

Build Setup

For the current early dev prototype you only need the first two steps here:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Configuration

All global configuration settings of the dashboard application can be set in the corresponding config/*.env.js files. You can use different settings of a development, a production and a test environment. So for a productive environment you will have to set all values in config/prod.env.js. In then config/dev.env.js you can overwrite only those value that differ from those in the production setting.

All values are provided with comments in the config/prod.env.js, so you can just take a look there. Here are some important notes on what to set and what to not forget.

Most likely the only values that you will have to set in the dev.env.js file different from the prod.env.js file are those containing links. Also be aware that these settings become environment variables once compiled by Vue.js. Therefore an integer is represented as '23' while a string is represented as '"23"' in the config file. Sometimes this is important.

For the OpenID Connect settings it is very important to use exactly the same redirect URIs as defined in you OIDC client settings in the aura/steering module. So API_STEERING_OIDC_REDIRECT_URI and API_STEERING_OIDC_REDIRECT_URI_SILENT should ideally be a copy-paste from there. This can be a nasty debug issue if you don't get the login to work. For example we once had the issue that while the steering used http://localhost:8080/static/oidc_callback.html as the parameter for the REDIRECT_URI, the dashboard had configured http://127.0.0.1:8080/static/oidc_callback.html. You would expect that this resolves to the same location, but even if localhost resolves to 127.0.0.1, the OIDC provider in the steering module does a string comparison of what it receives from the client and what it has configured.

Configuration of the steering backend

For the dashboard to run in a dev mode you only need the npm install and npm run dev commands. To access show data in the show manager you also have to have the steering/pv module running somewhere. There you need to add the following lines to the pv/local_settings.py, in order to allow CORS requests from you dashboard:

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
	'localhost:8080'
)

This assumes of course that you have the dashboard running on its standard localhost port 8080. If you want to change this to e.g. port 9090, add a line PORT: 9090, to the module.exports in config/dev.env.js file of the dashboard package.

Detailed infos on build environment

This project is built with Vue.js 2. Take a look at their Guide or the API docs to find out more about the core framework. As template we are using the webpack template. For a detailed explanation on how things work with this, check out the webpack guide and docs for vue-loader.

Webpack also comes with code linting, using ESLint, which makes our code consistent, functional and less error-prone. For infos on how the routes work, take a look at the vue-router.

And if you want to dig into a lot of useful awesome stuff that was already coded by others and which can be easily integrated into this project, go to the vue-aweseome repo.