Create a new web frontend

[JohannesLichtenberger]

The frontend sadly is dated, and some functionality has been missing.

Thus, we could either swap from Sapper to Svelte Kit or use for instance SolidJS (or whatever suits best).

The current frontend: https://github.com/sirixdb/sirix-svelte-frontend

A screenshot: https://github.com/sirixdb/sirix/blob/master/Screenshot%20from%202020-09-28%2018-50-58.png

[commitsovercoffee]

I'd like to work on this if svelte is used :)

[JohannesLichtenberger]

Sounds great (current code is still based on Sapper though)

[commitsovercoffee]

I'll start by getting to know the project and then begin the process of moving things over. I'm planning to do some research, but I haven't had experience with this before. Any advice you can offer would be really appreciated! I will ...

Let me know if anything else is needed. Also, please assign this to me.

[JohannesLichtenberger]

I think a lot of stuff was not finished regarding the GUI, but maybe @mosheduminer can give further insights.

[JohannesLichtenberger]

Thanks a lot for your help. Once we finish the GUI tasks (and it's a bigger project of course) and once we've implemented a few other things we can post on HN again :-)

[mosheduminer]

I'll see what I can summarize about the current state, issues, and plans thar we had.

[JohannesLichtenberger]

@commitsovercoffee did you already start? Let's keep in touch. We should keep track of individual issues in the other repo.

[commitsovercoffee]

I am unable to run it locally. npm install suggests to replace tauri dependency with @tauri-apps/cli. But I'm still not able to run it, log says tslib is missing. But it is installed, I tried with npm as well as my package manager (pacman).

I was able to create a user credential as per the README. Also, I read through the migration docs and feel someone more experienced with the project should do it. Once I get it running locally, I can work on the GUI tasks though.

[JohannesLichtenberger]

Not sure if @mosheduminer has time, but otherwise you could also start from scratch and add components or code snippets if they fit (for instance the file upload and the resource view (without the diffs) are maybe code wise ok. In general it would be awesome if we could do code reviews (that said I never found the thrill to do frontend stuff).

[JohannesLichtenberger]

@mosheduminer, what's your suggestion?

[mosheduminer]

It's possible some dependency versions weren't pinned, resulting in errors? But in any case, I think you should be able to run the web frontend without tauri. Tauri has come a long way since it was added to the project, and I have no doubt some changes would need to be made for it to work.

Regarding the migration to sapper - I'd have to see what is needed. If I remember correctly it's mainly our mess of config files that need to be updated? We'll see if I have time this week to check it out.

[commitsovercoffee]

The sharp module is not installing ...

node_modules/.pnpm/sharp@0.27.0/node_modules/sharp: Running install script, failed in 6.4s
.../sharp@0.27.0/node_modules/sharp install$ (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

Can you please help me resolve this.

[JohannesLichtenberger]

Does this thread help?

https://stackoverflow.com/questions/54409953/cant-install-sharp

[commitsovercoffee]

Installing libvips resolved the issue, that was missing, hence script failed. 🤦

I have ...

• created a user in keycloak.
• sudo docker-compose up -d keycloak
• sudo docker-compose up -d server

npm run dev is working now. 🙂

How do I login though ? What should I put in SirixURI ? I am using the username, password I created in keycloak.

[mosheduminer]

I believe it's http://localhost:9443 by default (whichever port sirix is exposed on).

[commitsovercoffee]

I believe it's http://localhost:9443 by default (whichever port sirix is exposed on).

TypeError: Network request failed
    onerror fetch-browser.js:550
    setTimeout handler*fetchPonyfill/</fetch/</xhr.onerror fetch-browser.js:549
    fetch fetch-browser.js:548
    fetch fetch-browser.js:522
    getTokenWithCredentials auth.js:61
    initClient auth.js:184
    init client.js:10
    init sirix.js:22
    login Login.svelte:18
    createEventDispatcher index.mjs:977
    createEventDispatcher index.mjs:976
    getFormData Inner.svelte:8

I tried that. Unable to login. Do I have to set the URI in keycloak ? I followed the sirix-svelte-frontend README, not sure what I'm missing.

[JohannesLichtenberger]

Is the keycloak container really up and running?

[JohannesLichtenberger]

@commitsovercoffee did you get to log in?

[commitsovercoffee]

Nope. Keycloak is running but haven't been able to login :( Keyclock is running and I am able to use it though. I'll wipe the project and try again.

[JohannesLichtenberger]

Can you access the Sirix server, though via a web browser for instance? http://localhost:9443?

There should be an error, but it should be reachable. Maybe though it has to do with docker and networking stuff...

[commitsovercoffee]

Nope.

[JohannesLichtenberger]

For the record: I checked sudo docker ps -a if the container runs... it did. Then I checked the log for the container: sudo docker logs contID and tada, we've added two sirix config files lately. One for docker and one for the use without docker. Now, after adding an admin user with an admin pass and assigning the 4 roles in Keycloak I could login. However I couldn't add a database for whatever reason. I think there was no apparent info in the console....

[JohannesLichtenberger]

maybe it's the missing CSS file!?

[JohannesLichtenberger]

So you have to kill your current containers sudo docker-compose rm IIRC and then start over again... (first pull my changes).

[JohannesLichtenberger]

Oh, totally missed, this stuff:

ohannes@luna:~/sirix-svelte-frontend$ npm run dev

> sirix-svelte-frontend@0.0.1 dev
> sapper dev

• server
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
src/components/resourceView/JsonNode/Key.svelte
A11y: on:mouseover must be accompanied by on:focus
43: </style>
44: 
45: <span
    ^
46:   on:mouseover={() => (hover = true)}
47:   on:mouseout={() => (hover = false)}
src/components/resourceView/JsonNode/Key.svelte
A11y: on:mouseout must be accompanied by on:blur
43: </style>

[commitsovercoffee]

Seems to be working now. But shouldn't I be able to create a db ?

[mosheduminer]

You should check the logs from sirix (or maybe you can see it in the web console) to see what the error was for route /?withResources. It's probably a related issue.

[JohannesLichtenberger]

I think it's also related to authorization. You can check via sudo docker logs containerID the sirix container logs...

[commitsovercoffee]

Yeah. Its an auth issue I guess.

• sudo docker ps

CONTAINER ID   IMAGE                                COMMAND                  CREATED          STATUS          PORTS                                                 NAMES
c0823efbbaca   sirixdb/sirix                        "sh -c 'exec java -D…"   40 minutes ago   Up 40 minutes   0.0.0.0:9443->9443/tcp, :::9443->9443/tcp             resources-server-1
85843c5e3da5   quay.io/keycloak/keycloak-x:12.0.3   "/opt/jboss/tools/do…"   42 minutes ago   Up 42 minutes   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp, 8443/tcp   resources-keycloak-1

• sudo docker ps

17:52:41.053 [vert.x-eventloop-thread-1] ERROR io.vertx.ext.web.RoutingContext - Unhandled exception in router
17:52:41.056 [vert.x-eventloop-thread-1] ERROR io.vertx.ext.web.RoutingContext - Unhandled exception in router
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up

It also says account not fully setup. So I tried creating a new user > setting password > assigning roles. Adding screen record for reference. Now login is not moving forward.

Lastest sirix log :

Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Account is not fully set up
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials
Exception in thread "vert.x-eventloop-thread-1" io.vertx.core.impl.NoStackTraceThrowable: invalid_grant: Invalid user credentials

[JohannesLichtenberger]

Set temporary to off, maybe that helps?

[JohannesLichtenberger]

Also I think you only need the username+pass and add the roles (you can add all 4 with "shift" pushed)

[JohannesLichtenberger]

Also the access token for instance is not set in new tabs sadly...

[commitsovercoffee]

Tried setting temporary to off. Still didn't work. It is working fine on your end right ? Will it be ok if we could get on a quick call on discord or meet ? I think it is taking longer than it should. Not sure where I'm messing it up. 😅

Perhaps it is time to learn docker :)

[JohannesLichtenberger]

I can't add a database currently, because it doesn't find the CSS file I assume. You can join discord. Maybe also Moshe has an idea. I'm however super tired right now.. but of course it would ne awesome to get you on board and overcome these issues

[mosheduminer]

CSS file?

If you are available now we can meet in a call in the discord to try to work it out.

[JohannesLichtenberger]

Our channel: https://discord.gg/yC33wVpv7t

[JohannesLichtenberger]

So, for new interested frontend devs, this is still up for grabs :-)

[henrycotton1]

Hey I would love to work on this issue, If its still up for grabs :)

[JohannesLichtenberger]

@henrycotton1 you may first run the current frontend to get a first glimpse

[henrycotton1]

@JohannesLichtenberger Is there any specific part of the frontend you would like me to work on first or shall I just choose what I like?

[JohannesLichtenberger]

Probably we either should try to migrate the project to SvelteKit or start again from a green field. That said I think you should be ready to be able to spend some time :-)

[JohannesLichtenberger]

@henrycotton1 are you up for the task?

[henrycotton1]

Yep I will begin to migrate to Svelte, sorry for lack of communication!

[JohannesLichtenberger]

@henrycotton1 trying to ping