Join us on Slack | Community Forum

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub and another tutorial: How YOU can contribute to OSS, a beginners guide

SirixDB Web frontend - An Evolutionary, Versioned, Temporal NoSQL Document Store

Store and query revisions of your data efficiently

"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)

Introduction

Discuss it in the Community Forum

This is the repository for a web frontend based on Vue.js, D3.js and TypeScript.

It'll provide several interaction possibilities to store, update and query databases in SirixDB. Furthermore the front-end will provide interactive visualizations for exploring and comparing revisions of resources stored in SirixDB based on different views.

Some ideas for comparing revisions of the XML or JSON resources, which need to be ported from a Java GUI/Processing can be found in my Master's Theses and in a Screencast.

Test and edit in Gitpod

Test and edit this project in a web based VS code environment.

Project setup

We currently face the following issue, whereas this workaround works until Nuxt.js or Element-UI fix the issue

We've created a Dockerfile and a docker-compose.yml file to simplify the setup process. However you still have to setup Keycloak as desribed in the documentation for the REST-API (especially assigning the roles to an admin-user):

In order to use docker-compose:

1. git clone https://github.com/sirixdb/sirix-web-frontend.git
2. Start Keyclock with the command sudo docker-compose up waitforkeycloak from your sirixdb directory with the copied docker-compose.yml file.
3. In your browser navigate to http://127.0.0.1:8080 and click on the link "Administration Console" (if using Docker Toolbox, see below).
4. Use username "admin", password "admin" to log in.
5. Navigate to Clients => sirix.
6. Set Standard Flow Enabled.
7. Set redirect URL to http://localhost:3005/callback.
8. Navigate to the Credentials tab and generate a new secret.
9. Put this secret in sirix/bundles/sirix-rest-api/src/main/resources/sirix-conf.json as the value for client.secret. Make sure that the oAuthFlowType is set to AUTH_CODE
10. Create a user: Users => Add User => Username admin. Under Credentials => New password => admin / admin. Set Temporary to off. Under Role Mappings add the 4 roles: create, delete, modify, view.
11. Start the SirixDB HTTP-Server with the command sudo docker-compose up -d server.
12. Start the Node.js Server without Docker: npm run dev.
13. In your browser call http://localhost:3005 and the frontend should appear.

NOTE: For those using Docker Toolbox instead of Docker to run Keycloak and Sirix, you will need to do the following:

1. Find your Docker IP (you should see it when starting Docker Quickstart Terminal).
2. Go to the nuxt.config.js file, and change

proxy: {
    '/sirix': {
      target: 'https://localhost:9443',
      pathRewrite: {'^/sirix': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }

to

  proxy: {
    '/sirix': {
      target: 'https://<your docker host>:9443',
      pathRewrite: {'^/sirix': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }

3. The URL for Keycloak in step 3 above is http://<your docker host>:8080.
4. You may also need to use a browser extension like switcheroo to redirect localhost:8080/ to <your docker host>:8080/.

Setting up the Nuxt.js application:

# install dependencies
$ npm install

# serve with hot reload at localhost:3005
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

Customize configuration

For detailed explanation on how things work, check out Nuxt.js docs.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Simon Holdorf 💻

yang 💻

Atman 💻

Jawahar 💻

Moshe Uminer 💻

This project follows the all-contributors specification. Contributions of any kind welcome!