Show version info on webui #205

poruta99 · 2024-03-08T20:27:14Z

See: #81

Fetch version info from /status endpoint and show it right after the icon on the menu bar.

Added status module and version component. The version component simply fetch the version info from the /status endpoint on page init.

poruta99 · 2024-03-08T20:31:57Z

The webui is still not built and commited, I'm not sure the build instruction in the package.json is correct. After I build the project, there some untracked files generated, and the filenames looks different. Would you mind have a look on it? Thanks. @mgdigital

mgdigital · 2024-03-08T20:38:17Z

Hey thanks for this!

I hadn't thought of making the version so prominent in the heading but I kinda like it... I was thinking to make something like a status drawer to include the version and a health check indicator, but that needs a bit more work.

One thing - I think this needs to come from the GraphQL API as we don't wanna be talking to 2 separate APIs. So we'd need to add a GraphQL query for it. Is this something you're able to look at?

To build the embedded web UI you'd need to run ng build -c embedded - you can find various useful commands for local development here: https://github.com/bitmagnet-io/bitmagnet/blob/main/Taskfile.yml (yes the development docs could probably be improved!)

poruta99 · 2024-03-08T20:49:47Z

Hey thanks for this!

I hadn't thought of making the version so prominent in the heading but I kinda like it... I was thinking to make something like a status drawer to include the version and a health check indicator, but that needs a bit more work.

One thing - I think this needs to come from the GraphQL API as we don't wanna be talking to 2 separate APIs. So we'd need to add a GraphQL query for it. Is this something you're able to look at?

To build the embedded web UI you'd need to run ng build -c embedded - you can find various useful commands for local development here: https://github.com/bitmagnet-io/bitmagnet/blob/main/Taskfile.yml (yes the development docs could probably be improved!)

Sure. Using 2 kinds of APIs do look kind of weird.

I would like to see if I can implement it in GraphQL and then implement the status drawer.

mgdigital · 2024-03-08T21:00:05Z

I'm thinking we can keep the version where you've put it, could we make the font size a few points smaller than the bitmagnet though?

Maybe the health indicator/drawer should be separate PR? I haven't really thought about how it needs to look, if it needs to be a drawer or maybe just like a ⚠️ icon when something is wrong...

mgdigital · 2024-03-08T21:18:22Z

Quick guide to implementing the GraphQL:

Add the query in graphql/schemas (maybe under Query -> system -> version (string))
Generate the boilerplate resolver with go run github.com/99designs/gqlgen generate --config ./internal/gql/gqlgen.yml
Implement the resolver in internal/gql/resolvers (it needs to import the version from internal/version)
Add a query in graphql/queries
Generate the frontend GraphQL code with npm graphql:codegen
Integrate the frontend component

poruta99 · 2024-03-08T21:24:40Z

Maybe the health indicator/drawer should be separate PR?

Sure.

What about the GraphQL refactoring, also comes with another PR? I didn't use GraphQL before, so I made this workaround version. : )

The font size is updated:

poruta99 · 2024-03-08T21:25:25Z

Quick guide to implementing the GraphQL:

Add the query in graphql/schemas (maybe under Query -> system -> version (string))

Generate the boilerplate resolver with go run github.com/99designs/gqlgen generate --config ./internal/gql/gqlgen.yml

Implement the resolver in internal/gql/resolvers (it needs to import the version from internal/version)

Add a query in graphql/queries

Generate the frontend GraphQL code with npm graphql:codegen

Integrate the frontend component

Thank you for the detailed guide, should I finish the status GraphQL API refactoring in this PR?

mgdigital · 2024-03-08T21:26:36Z

Quick guide to implementing the GraphQL:

Add the query in graphql/schemas (maybe under Query -> system -> version (string))

Generate the boilerplate resolver with go run github.com/99designs/gqlgen generate --config ./internal/gql/gqlgen.yml

Implement the resolver in internal/gql/resolvers (it needs to import the version from internal/version)

Add a query in graphql/queries

Generate the frontend GraphQL code with npm graphql:codegen

Integrate the frontend component

Thank you for the detailed guide, should I finish the status GraphQL API refactoring in this PR?

Yeah I think the version would have to come from GraphQL in this PR, as otherwise we're adding a dependency on the status endpoint.

mgdigital · 2024-03-08T21:27:51Z

I didn't use GraphQL before

If you're stuck on implementing this I can update the PR when I get to it.

poruta99 · 2024-03-08T23:37:34Z

I reworked the code, now it's using GraphQL API to fetch system status. I'm not sure the GraphQL query schema is well-defined.

mgdigital · 2024-03-09T11:24:18Z

graphql/queries/SystemStatusQuery.graphql

+            version
+        }
+    }
+}


I think this should be:

query SystemQuery { system { version } }

graphql/schema/query.graphqls

mgdigital · 2024-03-09T11:30:47Z

Thanks, I think it's nearly there, have added a few comments.

That dirty in the version number is expected until we push a new version tag, it just means you have changes in your build since the last version.

I've run the CI checks that have highlighted some issues, you need to run prettier on your code and your test is failing.

mgdigital · 2024-03-09T11:45:54Z

webui/src/app/status/version/version.component.ts

+import * as generated from "../../graphql/generated";
+import { GraphQLService } from 'src/app/graphql/graphql.service';
+
+const defaultVersionName = 'N/A';


I think maybe default to an empty string as you might get a flash of N/A on initial load with this?

Sure, I will fix this later.

poruta99 · 2024-03-09T11:58:19Z

I've pushed new commits on it. I believe the issues are fixed right now, please have a look again.

Thank you for your patient review. @mgdigital

poruta99 · 2024-03-09T12:00:51Z

Do I need to rebase this branch to keep commits less and clean?

mgdigital · 2024-03-09T12:02:43Z

webui/src/app/graphql/graphql.service.ts

@@ -96,6 +96,15 @@ export class GraphQLService {
      })
      .pipe(map((r) => r.data.torrent.suggestTags));
  }
+
+  systemStatusQeury(): Observable<generated.SystemQuery> {


This should probably just be systemQuery

mgdigital · 2024-03-09T12:05:24Z

Looks like it's nearly there. You need to run npx prettier --write . from the root of the project to pick up any formatting issues. Also your test is still failing on here:

Unexpected directive 'VersionComponent' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

Do I need to rebase this branch to keep commits less and clean?

No that's fine, the PR will be squash merged.

poruta99 · 2024-03-09T12:10:13Z

Also your test is still failing on here:

That's strange, I can serve or build locally without this error.

mgdigital · 2024-03-09T12:15:14Z

Also your test is still failing on here:

That's strange, I can serve or build locally without this error.

Should the component here be under declarations rather than imports? (or the import should be the StatusModule?)

    await TestBed.configureTestingModule({
      imports: [VersionComponent],
    }).compileComponents();

mgdigital · 2024-03-09T12:24:45Z

I assume ng test must still be failing locally for you as it can't currently resolve anything for the GraphQL service?

poruta99 · 2024-03-09T12:27:08Z

I assume ng test must still be failing locally for you as it can't currently resolve anything for the GraphQL service?

Sorry, I run ng test in wsl, it prompts me that I don't have a Chrome bin available. I'm trying to fix this...

poruta99 · 2024-03-09T12:38:21Z

I assume ng test must still be failing locally for you as it can't currently resolve anything for the GraphQL service?

Sorry, I run ng test in wsl, it prompts me that I don't have a Chrome bin available. I'm trying to fix this...

ng test pass locally.

mgdigital · 2024-03-09T14:45:25Z

Thanks for this! I can suggest more stuff if you're interested in working on the web UI. One of the next things is getting Angular Routing working so we can have more than just a single page....

poruta99 · 2024-03-09T14:50:45Z

Thanks for this! I can suggest more stuff if you're interested in working on the web UI. One of the next things is getting Angular Routing working so we can have more than just a single page....

Maybe not, I am not an expert in Angular, anyway thanks for the merge and help.

… v0.7.12@07c9c43 by renovate (#19063) This PR contains the following updates: | Package | Update | Change | |---|---|---| | [ghcr.io/bitmagnet-io/bitmagnet](https://togithub.com/bitmagnet-io/bitmagnet) | patch | `0.7.7` -> `0.7.12` | --- > [!WARNING] > Some dependencies could not be looked up. Check the Dependency Dashboard for more information. --- ### Release Notes <details> <summary>bitmagnet-io/bitmagnet (ghcr.io/bitmagnet-io/bitmagnet)</summary> ### [`v0.7.12`](https://togithub.com/bitmagnet-io/bitmagnet/releases/tag/v0.7.12) [Compare Source](https://togithub.com/bitmagnet-io/bitmagnet/compare/v0.7.10...v0.7.12) #### What's Changed - Fix Torznab content type criteria by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#209 - fix duplicate word in index.md by [@sweetbbak](https://togithub.com/sweetbbak) in [bitmagnet-io/bitmagnet#208 - Add external resources page by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#202 - Upgrade GitHub Actions and fix Docker build by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#201 - Fix actions: Use name and key for matrix by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#210 #### New Contributors - [@sweetbbak](https://togithub.com/sweetbbak) made their first contribution in [bitmagnet-io/bitmagnet#208 **Full Changelog**: bitmagnet-io/bitmagnet@v0.7.10...v0.7.12 ### [`v0.7.10`](https://togithub.com/bitmagnet-io/bitmagnet/releases/tag/v0.7.10) [Compare Source](https://togithub.com/bitmagnet-io/bitmagnet/compare/v0.7.9...v0.7.10) #### What's Changed - Show version info on webui by [@poruta99](https://togithub.com/poruta99) in [bitmagnet-io/bitmagnet#205 - Fix metrics endpoint by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#207 #### New Contributors - [@poruta99](https://togithub.com/poruta99) made their first contribution in [bitmagnet-io/bitmagnet#205 **Full Changelog**: bitmagnet-io/bitmagnet@v0.7.9...v0.7.10 ### [`v0.7.9`](https://togithub.com/bitmagnet-io/bitmagnet/releases/tag/v0.7.9) [Compare Source](https://togithub.com/bitmagnet-io/bitmagnet/compare/v0.7.8...v0.7.9) #### What's Changed - Fix Docker build by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#200 **Full Changelog**: bitmagnet-io/bitmagnet@v0.7.8...v0.7.9 ### [`v0.7.8`](https://togithub.com/bitmagnet-io/bitmagnet/releases/tag/v0.7.8) [Compare Source](https://togithub.com/bitmagnet-io/bitmagnet/compare/v0.7.7...v0.7.8) This release includes several minor bug fixes. #### What's Changed - Fix comma-separated Torznab categories by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#194 - Rebuild webui by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#195 - Fix Postgres call on CLI by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#196 - Upgrade actions by [@mgdigital](https://togithub.com/mgdigital) in [bitmagnet-io/bitmagnet#198 #### New Contributors - [@RealFascinated](https://togithub.com/RealFascinated) made their first contribution in [bitmagnet-io/bitmagnet#193 - [@Ornias1993](https://togithub.com/Ornias1993) made their first contribution in [bitmagnet-io/bitmagnet#188 **Full Changelog**: bitmagnet-io/bitmagnet@v0.7.7...v0.7.8 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "before 10pm on monday" in timezone Europe/Amsterdam, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://togithub.com/renovatebot/renovate).

Show version info on webui

510d455

Added status module and version component. The version component simply fetch the version info from the /status endpoint on page init.

poruta99 added 2 commits March 9, 2024 05:22

Change font size of version info on webui

838e0d0

Build webui

c90af69

Rework webui version info fetch with GraphQL API

3ef0e1d

poruta99 added 2 commits March 9, 2024 08:02

Fix SystemStatusQuery definition

ca247c4

Build webui

fe766cc

mgdigital reviewed Mar 9, 2024

View reviewed changes

graphql/schema/query.graphqls Show resolved Hide resolved

mgdigital reviewed Mar 9, 2024

View reviewed changes

Update GraphQL query schema, fix code format issue

a2d4efb

mgdigital reviewed Mar 9, 2024

View reviewed changes

Fix format issue

734572e

poruta99 added 2 commits March 9, 2024 20:19

Fix version component test code

e119950

Build webui

1e47eb9

Eslint fix

c45c5ac

Fix test code

8ad349c

mgdigital merged commit f6edd02 into bitmagnet-io:main Mar 9, 2024
9 checks passed

poruta99 deleted the webui-menu-bar-version branch March 11, 2024 02:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show version info on webui #205

Show version info on webui #205

poruta99 commented Mar 8, 2024

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024 •

edited

Loading

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024

mgdigital commented Mar 8, 2024

poruta99 commented Mar 8, 2024

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024

mgdigital commented Mar 8, 2024

poruta99 commented Mar 8, 2024 •

edited

Loading

mgdigital Mar 9, 2024 •

edited

Loading

mgdigital commented Mar 9, 2024

mgdigital Mar 9, 2024

poruta99 Mar 9, 2024

poruta99 commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital Mar 9, 2024

poruta99 Mar 9, 2024

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital commented Mar 9, 2024 •

edited

Loading

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

Show version info on webui #205

Show version info on webui #205

Conversation

poruta99 commented Mar 8, 2024

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024 • edited Loading

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024

mgdigital commented Mar 8, 2024

poruta99 commented Mar 8, 2024

poruta99 commented Mar 8, 2024

mgdigital commented Mar 8, 2024

mgdigital commented Mar 8, 2024

poruta99 commented Mar 8, 2024 • edited Loading

mgdigital Mar 9, 2024 • edited Loading

Choose a reason for hiding this comment

mgdigital commented Mar 9, 2024

mgdigital Mar 9, 2024

Choose a reason for hiding this comment

poruta99 Mar 9, 2024

Choose a reason for hiding this comment

poruta99 commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital Mar 9, 2024

Choose a reason for hiding this comment

poruta99 Mar 9, 2024

Choose a reason for hiding this comment

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital commented Mar 9, 2024 • edited Loading

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital commented Mar 9, 2024

poruta99 commented Mar 9, 2024

mgdigital commented Mar 8, 2024 •

edited

Loading

poruta99 commented Mar 8, 2024 •

edited

Loading

mgdigital Mar 9, 2024 •

edited

Loading

mgdigital commented Mar 9, 2024 •

edited

Loading