DVS UI

PWA built in Vue.js for the DVS project. It's a realtime dashboard that visualize the flights activities. The data is processed through a backend developed in Scala with Kafka Streams & KSQL.

http://dvs.reactive-labs.io/

Screenshot

Demo mode

You can append the query parameter ?demo=[NUMBER-OF-MINUTES] to the url to enable the demo mode, once activated it will fully refresh the application every specified minutes.

For example, this will refresh the application every 30 minutes:

http://dvs.reactive-labs.io/?demo=30

This is useful if you want to run the application for an indefinite amount of time, like in a kiosk or totem device.

Design

The UI & UX of the application is designed on top of the Amber Design System made by Bitrock. Loading states are handled using an "Optmistic UI" updates pattern.

To prevent an overhead of visible informations for the user, the map shows the latest 100 RSVP events, without interrupting the data stream flow happening in the background and in other widgets.

Development

What is being used

• Typescript
• Vue (CLI, Router, Vuex)
• RxJS
• SASS
• Amber Design System
• Google Maps API

Getting started

Clone the repo

$ git clone [email protected]:bitrockteam/kafka-dvs-ui.git
$ cd kafka-dvs-ui

Install dependencies

$ yarn
--- or ---
$ npm install

Available NPM tasks

Start the project in development mode (live reload)

$ yarn start
--- or ---
$ npm start

Create a static build in the ./dist folder

$ yarn build
--- or ---
$ npm run build

Run the unit tests (only plain Typescript files via Jest)

$ yarn test:unit
--- or ---
$ npm run test:unit

Change REST & websocket endpoints URL

The project make use of .env files, just update the values before starting the local server or building.

Things to keep in mind

• The Vuex store contains only global values for the application, the real time data coming from the websockets is processed & rendered directly in the relative component state. Otherwise the store would act as a computational bottleneck.
• Each widget in the dashboard is independent on getting the data from the backend and is also exported as dedicated module for lazy loading. Both of these approaches also results in a better development experience.
• For a cleaner UX, the map will show only up to 1000 flights. The amount of markers for the "time window" is defined in the Vuex store.

How to contribute

Pull Request Submitting Process:

1. branch from master using a feature/[name] or fix/[name] naming
2. write code
3. bump the version number in the package.json file accordingly to the semver guidelines
4. check that linter & tests are fine
5. open a PR to master assigning as a reviewer someone from UI Engineering team
6. wait for response
7. if it's approved, merge and delete the feature branch

Please refer to the contributing.md file for the full guidelines and code of conduct.

License

Application developed by Bitrock UI Engineering team, released under the MIT license.

Bitrock s.r.l is part of Databiz Group.