Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a new web frontend #627

Open
JohannesLichtenberger opened this issue Jun 19, 2023 · 44 comments
Open

Create a new web frontend #627

JohannesLichtenberger opened this issue Jun 19, 2023 · 44 comments

Comments

@JohannesLichtenberger
Copy link
Member

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
Copy link

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

@JohannesLichtenberger
Copy link
Member Author

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

@commitsovercoffee
Copy link

commitsovercoffee commented Aug 17, 2023

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
Copy link
Member Author

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

@JohannesLichtenberger
Copy link
Member Author

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
Copy link
Member

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

@JohannesLichtenberger
Copy link
Member Author

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

@commitsovercoffee
Copy link

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
Copy link
Member Author

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
Copy link
Member Author

@mosheduminer, what's your suggestion?

@mosheduminer
Copy link
Member

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
Copy link

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
Copy link
Member Author

@commitsovercoffee
Copy link

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
Copy link
Member

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

@commitsovercoffee
Copy link

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
Copy link
Member Author

Is the keycloak container really up and running?

@JohannesLichtenberger
Copy link
Member Author

@commitsovercoffee did you get to log in?

@commitsovercoffee
Copy link

commitsovercoffee commented Aug 25, 2023

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
Copy link
Member Author

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
Copy link

Nope.

@JohannesLichtenberger
Copy link
Member Author

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
Copy link
Member Author

Screenshot from 2023-08-25 19-35-41

maybe it's the missing CSS file!?

Screenshot from 2023-08-25 19-39-27

@JohannesLichtenberger
Copy link
Member Author

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

@JohannesLichtenberger
Copy link
Member Author

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
Copy link

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

svelte-frontend

@mosheduminer
Copy link
Member

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
Copy link
Member Author

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

@commitsovercoffee
Copy link

commitsovercoffee commented Aug 25, 2023

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.

recreating-users

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
Copy link
Member Author

Set temporary to off, maybe that helps?

@JohannesLichtenberger
Copy link
Member Author

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

@JohannesLichtenberger
Copy link
Member Author

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

@commitsovercoffee
Copy link

commitsovercoffee commented Aug 25, 2023

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
Copy link
Member Author

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
Copy link
Member

CSS file?

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

@JohannesLichtenberger
Copy link
Member Author

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

@JohannesLichtenberger
Copy link
Member Author

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

@henrycotton1
Copy link

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

@JohannesLichtenberger
Copy link
Member Author

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

@henrycotton1
Copy link

@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
Copy link
Member Author

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
Copy link
Member Author

@henrycotton1 are you up for the task?

@henrycotton1
Copy link

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

@JohannesLichtenberger
Copy link
Member Author

@henrycotton1 trying to ping

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

4 participants