Create Web GUI Dashboard with React (with NodeJS backend)

[vincentnam]

Project description

https://github.com/vincentnam/docker_datalake/projects/12

Web GUI : The service area is composed of different services that should improve the user experience. One of the services is the Graphical user interface (GUI) in a web browser. The reasons of the choice of web technlogies are :

• Easy to use for anyone
• Available on pretty much any device
• Great tools for GUI and data visualization

This GUI has several goals :

• Insert data into the datalake
• Download data from the datalake (from Openstack Swift or from any database / service in consumption area)
• Offer data visualization tools

The GUI has been designed as a 1 page dashboard with 3 tabs : insert, download and visualize tab. The differents components have to be designed and implemented as a card (React / bootstrap concept : https://react-bootstrap.github.io/components/cards/) to make it possible to easily modify, compose and adapt tabs.

Languages : Javascripts, HTML / CSS Tools : react, nodeJS, d3.js, bootstrap

The dashboard should be a multi-tab page with user authentication based on Datalake central authentication tool (Openstack Keystone). The other tab should be available until the user is authenticated.

• [x] Initial dashboard
• [ ] User tab for authentication

The insertion tab has to be easy to use to make it possible for people that doesn't know computing science to use the datalake. It has to integrate a drag'n'drop dropzone for files input. The data has to be qualified : technicals metadata should be inferred as much as possible but for metadata that couldn't or for semantical metadata, it should be possible to easily add it. As the project is in a great part a research project, it is linked to semantic web and ontologies and this insertion tab should integrate a way to easily insert this kind of data ( drag'n'drop tool for tags / label choice, classic form (dropdown menu)) that would generate a JSON document. The metadata should make it able to :

• Insert a list of mandatory metadata
• Chose among a list of metadata new metadata (from pre-defined ontologies)

Data insertion tab :

• [ ] Dropzone creation

Metadata form insertion :

• [ ] Tag / label drag'n'drop selection

• [ ] Dropdown menu

• [ ] SLO implementation (Openstack Swift insertion function : Static Large Object)

The data visualization tab goal is to :

• Quickly see if data have been inserted in the good container
• See what data are already in the datalake for a user
• Provide complex data visualization for crossed data (as the visualization of time-series for sensors on a map with their location) Tools should be customable by setting differents sources, drag'n'drop card for tools, anything is possble here until it is usefull for anyone. In the end, it should make it possible to create dashboard, save configuration for further utilization. It could integrate other visualization tool (as InfluxDB or neo4J web interface).

Data visualization :

• Basic visualization :
  • [x] Graph visualization
  • [x] Time series visualization
  • [ ] MongoDB collections content visualization

Maybe not useful :

• Complex visualization :
  • [ ] Map with time series
  • [ ] ... ?

The data download page should make it possible with graphical tools to select a data / a dataset and download it on local host.

Data download page :

• [ ] Visualization of download source list
• [ ] Download basket component
• [ ] Download button
• [ ] Visualization of differents data and selection tool

The project will be splitted in several big stages.