Create a new web frontend #627

JohannesLichtenberger · 2023-06-19T23:03:57Z

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 · 2023-08-17T06:21:36Z

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

JohannesLichtenberger · 2023-08-17T10:29:06Z

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

commitsovercoffee · 2023-08-17T11:06:32Z

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 · 2023-08-17T21:19:34Z

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

JohannesLichtenberger · 2023-08-17T21:21:57Z

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 · 2023-08-17T23:16:18Z

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

JohannesLichtenberger · 2023-08-19T22:30:24Z

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

commitsovercoffee · 2023-08-20T06:58:14Z

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 · 2023-08-20T09:27:23Z

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 · 2023-08-21T18:46:26Z

@mosheduminer, what's your suggestion?

mosheduminer · 2023-08-22T21:48:42Z

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 · 2023-08-23T06:52:25Z

The sharp module is not installing ...

node_modules/.pnpm/[email protected]/node_modules/sharp: Running install script, failed in 6.4s
.../[email protected]/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 · 2023-08-23T19:29:47Z

Does this thread help?

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

commitsovercoffee · 2023-08-23T20:19:26Z

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 · 2023-08-23T20:39:22Z

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

commitsovercoffee · 2023-08-23T21:10:45Z

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 · 2023-08-23T22:11:06Z

Is the keycloak container really up and running?

JohannesLichtenberger · 2023-08-25T13:28:01Z

@commitsovercoffee did you get to log in?

commitsovercoffee · 2023-08-25T13:36:54Z

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 · 2023-08-25T13:57:03Z

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 · 2023-08-25T14:08:21Z

Nope.

JohannesLichtenberger · 2023-08-25T17:38:34Z

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 · 2023-08-25T17:40:09Z

maybe it's the missing CSS file!?

JohannesLichtenberger · 2023-08-25T17:40:57Z

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

JohannesLichtenberger · 2023-08-25T17:46:08Z

Oh, totally missed, this stuff:

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

> [email protected] 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 · 2023-08-25T18:05:15Z

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

mosheduminer · 2023-08-25T18:09:40Z

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 · 2023-08-25T18:19:33Z

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

commitsovercoffee · 2023-08-25T18:46:00Z

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 · 2023-08-25T18:54:08Z

Set temporary to off, maybe that helps?

JohannesLichtenberger · 2023-08-25T18:55:30Z

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

JohannesLichtenberger · 2023-08-25T18:56:20Z

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

commitsovercoffee · 2023-08-25T18:59:59Z

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 · 2023-08-25T19:05:43Z

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 · 2023-08-25T19:07:15Z

CSS file?

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

JohannesLichtenberger · 2023-08-25T19:37:19Z

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

JohannesLichtenberger · 2023-10-04T20:02:17Z

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

henrycotton1 · 2023-10-19T00:48:25Z

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

JohannesLichtenberger · 2023-10-20T22:03:47Z

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

henrycotton1 · 2023-10-21T05:03:19Z

@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 · 2023-10-21T10:11:55Z

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 · 2023-10-23T19:31:26Z

@henrycotton1 are you up for the task?

henrycotton1 · 2023-10-24T00:56:23Z

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

JohannesLichtenberger · 2023-11-14T16:45:20Z

@henrycotton1 trying to ping

JohannesLichtenberger added enhancement good first issue Hacktoberfest help wanted labels Jun 19, 2023

JohannesLichtenberger assigned commitsovercoffee Aug 17, 2023

JohannesLichtenberger unassigned commitsovercoffee Oct 6, 2023

JohannesLichtenberger assigned henrycotton1 Oct 19, 2023

JohannesLichtenberger unassigned henrycotton1 Nov 14, 2023

Create a new web frontend #627

Create a new web frontend #627

Comments

JohannesLichtenberger commented Jun 19, 2023

commitsovercoffee commented Aug 17, 2023

JohannesLichtenberger commented Aug 17, 2023

commitsovercoffee commented Aug 17, 2023 • edited Loading

JohannesLichtenberger commented Aug 17, 2023

JohannesLichtenberger commented Aug 17, 2023

mosheduminer commented Aug 17, 2023

JohannesLichtenberger commented Aug 19, 2023

commitsovercoffee commented Aug 20, 2023

JohannesLichtenberger commented Aug 20, 2023

JohannesLichtenberger commented Aug 21, 2023

mosheduminer commented Aug 22, 2023

commitsovercoffee commented Aug 23, 2023

JohannesLichtenberger commented Aug 23, 2023

commitsovercoffee commented Aug 23, 2023

mosheduminer commented Aug 23, 2023

commitsovercoffee commented Aug 23, 2023

JohannesLichtenberger commented Aug 23, 2023

JohannesLichtenberger commented Aug 25, 2023

commitsovercoffee commented Aug 25, 2023 • edited Loading

JohannesLichtenberger commented Aug 25, 2023

commitsovercoffee commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

commitsovercoffee commented Aug 25, 2023

mosheduminer commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

commitsovercoffee commented Aug 25, 2023 • edited Loading

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

commitsovercoffee commented Aug 25, 2023 • edited Loading

JohannesLichtenberger commented Aug 25, 2023

mosheduminer commented Aug 25, 2023

JohannesLichtenberger commented Aug 25, 2023

JohannesLichtenberger commented Oct 4, 2023

henrycotton1 commented Oct 19, 2023

JohannesLichtenberger commented Oct 20, 2023

henrycotton1 commented Oct 21, 2023

JohannesLichtenberger commented Oct 21, 2023

JohannesLichtenberger commented Oct 23, 2023

henrycotton1 commented Oct 24, 2023

JohannesLichtenberger commented Nov 14, 2023

commitsovercoffee commented Aug 17, 2023 •

edited

Loading

commitsovercoffee commented Aug 25, 2023 •

edited

Loading

commitsovercoffee commented Aug 25, 2023 •

edited

Loading

commitsovercoffee commented Aug 25, 2023 •

edited

Loading