State of the UI (css & bootstrap mainly)

[saurori]

Hey - I wanted to first say thanks for maintaining NZBHydra for so long. I've used it for years. However, as a developer, the UI has always been a frustration - mainly the horizontal scrollbars and lack of responsive layout. When I dig into the html/css it becomes obvious that fixing simple things are not so simple. I'd love to help, but want to get some feedback before I proceed.

Status & Contributing

1. Are there any existing (current) plans for revamping the UI? I see this Issue: https://github.com/theotherp/nzbhydra2/issues/698
2. If I wanted to work on fixes, what is the process for building css/js etc? I see use of less, bower, gulp. The front end stack is quite dated as I'm sure you know. Bower is deprecated, bootstrap-less doesn't go beyond v3, etc
3. Is there a development setup you can share (docker, bare)? This thread has some information for the UI, if it is still relevant.

UI Questions

1. It seems the source of many UI problems are abuses of the Bootstrap framework. For example, instead of proper layout classes being applied, the css overrides classes and breaks expectations everywhere. The biggest offender is overriding column classes in theme css files bright.css, dark.css, grey.css. Take for example .col-sm-10{width:50%} which more or less makes it a col-sm-6.
2. Is there a source for the minified bright.css, dark.css, grey.css ? I can't find any.

Paths Forward

1. There's a lot of tech debt on the front end. Ideally I would say starting from scratch with npm, boostrap v5 + SASS, esbuild, and more or less redoing the UI html to be responsive from day 1. But that is a lot of work for 1 person.
2. The shortest path to fixing issues is working with the current stack and getting a development workflow set up so that css can be built (and possibly do this separate from the JS if that breaking things)

[theotherp]

Hi. You're completely right that the UI and its code is a mess. I clearly don't know what I'm doing ;-) I could provide a docker image with instructions on how to update the UI. The stack is very old, uses an older gulp and npm version and I've had troubles getting it to run when moving it to another machine. I try do don't touch it...

The attempt to revamp the UI did, as expected, not go anywhere. I worked on it for some weeks with high motivation but redoing so much of the logic and custom components was just too much work, even though working with an up-to-date stack was a bliss. The problem is that I use AngularJS (the old version without TypeScript) and the bootstrap components only work with Bootstrap 3. So updating to a newer stack and especially Bootstrap version would require a lot of work that's code related, not "just" UI.

I would love if somebody could improve this but also know that at least two people started with that and I never heard from them again :-D

So to be realistic doing some fixes on the current stack would be the only viable approach. So, as I said, if you're interested I could try getting some UI dev environment going.

[saurori]

I agree, the best approach would be to make the current stack more maintainable. It seems the bootstrap components tied with Angular 1.x and the JS build are tightly coupled and should be left as-is.

My suggestion would be to move only the CSS build to a modern stack, using the official 3.x branch with SASS. The CSS building doesn't have to be part of any build process, at least to start, and instead an un-minified (for review) and minified (for deployment) .css files could be generated and committed.

If you could put together a UI dev environment and any helpful notes, that would be really helpful to get things started. Minimally, I would need to set up a separate build process for CSS and write to static CSS files, but also be able to modify the html templates (and build them if it's part of the Angualr JS build).

[theotherp]

Alright, that was a bit of a pain in the ass, mainly because the bower components are broken somehow and installing them using bower.json will result in JS errors. Something related to the order in which components are added to the JS file.

But I got it working.

You can run https://github.com/theotherp/nzbhydra2/blob/master/docker/uiDev/docker-compose.yaml in any folder you like. The folder will have two subfolders, data/static and ui-src. The first one contains the built UI resources. The latter contains all UI data (apart from the main index.html).

Any changes you make to files in ui-src are automatically built using gulp. There's also a livereload server. I use https://chromewebstore.google.com/detail/livereload++/ciehpookapcdlakedibajeccomagbfab?pli=1

I've also included the files static/css/additional.css and static/js/additional.js to be loaded. You can change these (in the data/static folder) and they will never be overwritten or changed by gulp (hopefully). If you clear the .less files you can completely replace the CSS with your own code (in additional.css) and build it however you like.

I'm not sure what your workflow is. Let me know if this works for you. I'm happy to help in any way I can.

There are some select cases where the JS code changes the styles, e.g. for the history to make sure table columns have the correct size. I'm not saying it's a good idea, just be aware ;-)

[saurori]

Wow that was both quick and way more work than I imagined. I will check it out and see if I can get things running.

[saurori]

Looks like I'm getting an unauthorized error:

[+] Running 1/1
 ✘ nzbhydra-ui-dev Error Head "https://ghcr.io/v2/theotherp/nzbhydra-ui-dev/manifests/latest": unauthorized

[theotherp]

Ah the image is probably private. Let me see... Should be public now i.e. please try again.

[saurori]

Some additional errors (No such file or directory: '/app/data/control.id'):

nzbhydra-ui-dev  | /app/ui-src/ does not exist or is empty - coping files from source to /app/ui-src/
nzbhydra-ui-dev  | mkdir: cannot create directory '/app/ui-src/': File exists
nzbhydra-ui-dev  | Building UI resources
nzbhydra-ui-dev  | Running gulp watch task in background
nzbhydra-ui-dev  | Running NZBHydra2
nzbhydra-ui-dev  | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev  | 2024-05-18 16:05:09,536  INFO - Determined release type: native
nzbhydra-ui-dev  | 2024-05-18 16:05:09,539  INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=lupqebyqeqqwtzqcjkqh -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev  | 2024-05-18 16:05:10,574  WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev  | 2024-05-18 16:05:10,575  INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev exited with code 0

[theotherp]

You can ignore those (mkdir: ... and Unable to read control ID).

But it does start up and you can reach the UI?

[saurori]

No I can't reach the UI. It looks like it goes into a crash restart loop:

nzbhydra-ui-dev  | /app/ui-src/ already exists
nzbhydra-ui-dev  | Building UI resources
nzbhydra-ui-dev  | Running gulp watch task in background
nzbhydra-ui-dev  | Running NZBHydra2
nzbhydra-ui-dev  | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev  | 2024-05-18 16:20:14,019  INFO - Determined release type: native
nzbhydra-ui-dev  | 2024-05-18 16:20:14,023  INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=kskvmdtmovhtghrguwit -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev  | 2024-05-18 16:20:15,123  WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev  | 2024-05-18 16:20:15,124  INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev exited with code 0
nzbhydra-ui-dev  | /app/ui-src/ already exists
nzbhydra-ui-dev  | Building UI resources
nzbhydra-ui-dev  | Running gulp watch task in background
nzbhydra-ui-dev  | Running NZBHydra2
nzbhydra-ui-dev  | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev  | 2024-05-18 16:20:36,086  INFO - Determined release type: native
nzbhydra-ui-dev  | 2024-05-18 16:20:36,089  INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=fycbqdmrnhhtomkyqfgo -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev  | 2024-05-18 16:20:37,133  WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev  | 2024-05-18 16:20:37,134  INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev  | /app/ui-src/ already exists
nzbhydra-ui-dev  | Building UI resources
nzbhydra-ui-dev  | Running gulp watch task in background
nzbhydra-ui-dev  | Running NZBHydra2
nzbhydra-ui-dev  | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev  | 2024-05-18 16:20:58,458  INFO - Determined release type: native
nzbhydra-ui-dev  | 2024-05-18 16:20:58,461  INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=zgkqswxzbquyomoglyfj -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev  | 2024-05-18 16:20:59,503  WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev  | 2024-05-18 16:20:59,503  INFO - NZBHydra main process has terminated for shutdown

[theotherp]

What the fuck I could start it fine. I mean that's the point of docker that it should run fine for you if it ran for me. What a shitty start.

[theotherp]

What OS and architecture do you have? I mean, what do you usually do to run hydra?

[saurori]

Haha no worries. I'm on mac (M1, ARM) for development. I usually run NZBHydra on Unraid or plain Debian

[theotherp]

Ahhh I added an amd64 binary. I'll have to build one for you. Give me some time.

[saurori]

amd64 should still work, it runs through Rosetta (now), used to be qemu with Docker Desktop

[theotherp]

Ok, try again. This time with java. Takes a bit longer but should work on all systems.

[saurori]

Looks like it's working!

Here's the log output

```shell 2024-05-18 16:44:20.123 INFO --- [ main] org.nzbhydra.NzbHydra : Starting NzbHydra using Java 17.0.10 with PID 48 (/app/lib/core-6.2.2-SNAPSHOT-exec.jar started by root in /app) 2024-05-18 16:44:20.148 INFO --- [ main] org.nzbhydra.NzbHydra : The following 1 profile is active: "default" 2024-05-18 16:44:24.801 INFO --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2024-05-18 16:44:25.532 INFO --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 705 ms. Found 13 JPA repository interfaces. 2024-05-18 16:44:26.395 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'hydraTaskConfiguration' of type [org.nzbhydra.tasks.HydraTaskConfiguration] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.580 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'baseConfig' of type [org.nzbhydra.config.BaseConfig] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.598 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'categoriesConfigValidator' of type [org.nzbhydra.config.validation.CategoriesConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.610 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'downloaderConfigValidator' of type [org.nzbhydra.config.validation.DownloaderConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.614 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'downloadingConfigValidator' of type [org.nzbhydra.config.validation.DownloadingConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.622 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'searchingConfigValidator' of type [org.nzbhydra.config.validation.SearchingConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.639 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'loggingConfigValidator' of type [org.nzbhydra.config.validation.LoggingConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.650 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'mainConfigValidator' of type [org.nzbhydra.config.validation.MainConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.673 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'userAuthConfigValidator' of type [org.nzbhydra.config.validation.UserAuthConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.677 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'authConfigValidator' of type [org.nzbhydra.config.validation.AuthConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.686 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'indexerConfigValidator' of type [org.nzbhydra.config.validation.IndexerConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.694 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'notificationConfigValidator' of type [org.nzbhydra.config.validation.NotificationConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.704 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'baseConfigValidator' of type [org.nzbhydra.config.validation.BaseConfigValidator] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.707 INFO --- [ main] org.nzbhydra.config.BaseConfigHandler : Using data folder /app/data 2024-05-18 16:44:26.847 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'baseConfigHandler' of type [org.nzbhydra.config.BaseConfigHandler] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.887 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'configProvider' of type [org.nzbhydra.config.ConfigProvider] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.897 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'hydraGlobalMethodSecurityConfiguration' of type [org.nzbhydra.auth.HydraGlobalMethodSecurityConfiguration] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.916 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'methodSecurityMetadataSource' of type [org.springframework.security.access.method.DelegatingMethodSecurityMetadataSource] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:26.942 INFO --- [ main] trationDelegate$BeanPostProcessorChecker : Bean 'taskExecutor' of type [org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2024-05-18 16:44:27.764 INFO --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 5076 (http) 2024-05-18 16:44:27.929 INFO --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 7086 ms 2024-05-18 16:44:28.463 INFO --- [ main] o.n.a.HydraAnonymousAuthenticationFilter : Granting basic user rights to anonymous users 2024-05-18 16:44:28.467 INFO --- [ main] o.n.a.HydraAnonymousAuthenticationFilter : Granting stats rights to anonymous users 2024-05-18 16:44:28.468 INFO --- [ main] o.n.a.HydraAnonymousAuthenticationFilter : Granting admin rights to anonymous users 2024-05-18 16:44:28.915 INFO --- [ main] o.f.c.internal.license.VersionPrinter : Flyway Community Edition 9.10.2 by Redgate 2024-05-18 16:44:28.916 INFO --- [ main] o.f.c.internal.license.VersionPrinter : See what's new here: https://flywaydb.org/documentation/learnmore/releaseNotes#9.10.2 2024-05-18 16:44:28.919 INFO --- [ main] o.f.c.internal.license.VersionPrinter : 2024-05-18 16:44:28.969 INFO --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2024-05-18 16:44:29.703 INFO --- [ main] com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Added connection conn0: url=jdbc:h2:file:/app/data/database/nzbhydra user=SA 2024-05-18 16:44:29.713 INFO --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2024-05-18 16:44:29.748 INFO --- [ main] o.f.c.i.database.base.BaseDatabaseType : Database: jdbc:h2:file:/app/data/database/nzbhydra (H2 2.1) 2024-05-18 16:44:29.903 INFO --- [ main] o.f.core.internal.command.DbValidate : Successfully validated 2 migrations (execution time 00:00.044s) 2024-05-18 16:44:29.918 INFO --- [ main] o.f.c.i.s.JdbcTableSchemaHistory : Creating Schema History table "PUBLIC"."flyway_schema_history" ... 2024-05-18 16:44:29.979 INFO --- [ main] o.f.core.internal.command.DbMigrate : Current version of schema "PUBLIC": << Empty Schema >> 2024-05-18 16:44:30.010 INFO --- [ main] o.f.core.internal.command.DbMigrate : Migrating schema "PUBLIC" to version "1 - INITIAL" 2024-05-18 16:44:30.100 INFO --- [ main] o.f.core.internal.command.DbMigrate : Migrating schema "PUBLIC" to version "2 - SEQUENCES" 2024-05-18 16:44:30.121 INFO --- [ main] o.f.core.internal.command.DbMigrate : Successfully applied 2 migrations to schema "PUBLIC", now at version v2 (execution time 00:00.146s) 2024-05-18 16:44:31.770 INFO --- [ main] o.s.o.j.p.SpringPersistenceUnitInfo : No LoadTimeWeaver setup: ignoring JPA class transformer 2024-05-18 16:44:34.511 INFO --- [ main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2024-05-18 16:44:35.865 INFO --- [ main] o.s.d.j.r.query.QueryEnhancerFactory : Hibernate is in classpath; If applicable, HQL parser will be used. 2024-05-18 16:44:39.788 INFO --- [ main] org.nzbhydra.InstanceCounter : Instance counted 2024-05-18 16:44:40.136 INFO --- [ main] o.n.searching.SearchModuleProvider : Loading indexers 2024-05-18 16:44:40.137 INFO --- [ main] o.n.searching.SearchModuleProvider : Finished initializing active indexers 2024-05-18 16:44:40.140 WARN --- [ main] o.n.searching.SearchModuleProvider : No indexers configured 2024-05-18 16:44:40.184 INFO --- [ main] o.n.d.downloaders.DownloaderProvider : Loading downloaders 2024-05-18 16:44:40.190 INFO --- [ main] o.n.d.downloaders.DownloaderProvider : Finished initializing active downloaders 2024-05-18 16:44:40.191 INFO --- [ main] o.n.d.downloaders.DownloaderProvider : No downloaders configured 2024-05-18 16:44:41.027 WARN --- [ main] org.nzbhydra.web.WebConfiguration : Found folder /app/data/static. Will load UI resources from there instead 2024-05-18 16:44:41.652 INFO --- [ main] org.nzbhydra.auth.SecurityConfig : CSRF is disabled 2024-05-18 16:44:41.998 INFO --- [ main] o.s.b.a.e.web.EndpointLinksResolver : Exposing 14 endpoint(s) beneath base path '/actuator' 2024-05-18 16:44:42.082 INFO --- [ main] o.s.s.web.DefaultSecurityFilterChain : Will secure any request with [org.springframework.security.web.session.DisableEncodeUrlFilter@6785786d, org.nzbhydra.auth.ForwardedForRecognizingFilter@5c261c74, org.springframework.web.filter.ForwardedHeaderFilter@6d38a81d, org.springframework.security.web.context.request.async.WebAsyncManagerIntegrationFilter@41f61188, org.springframework.security.web.context.SecurityContextHolderFilter@6018d82c, org.springframework.security.web.header.HeaderWriterFilter@5a5b394, org.springframework.security.web.authentication.logout.LogoutFilter@67216c33, org.springframework.security.web.savedrequest.RequestCacheAwareFilter@36f80ceb, org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter@31ab75a5, org.springframework.security.web.authentication.AnonymousAuthenticationFilter@d7c4fcb, org.springframework.security.web.access.ExceptionTranslationFilter@63ccb1b2, org.springframework.security.web.access.intercept.AuthorizationFilter@2dd4a7a9] 2024-05-18 16:44:42.721 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Problem detector" to be run every 1 hour 2024-05-18 16:44:42.726 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Check for and install updates" to be run every 1 hour 2024-05-18 16:44:42.727 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Delete short term storage results" to be run every 12 hours 2024-05-18 16:44:42.728 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Delete old history entries" to be run every 1 hour 2024-05-18 16:44:42.729 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Download queue check" to be run every 10 seconds 2024-05-18 16:44:42.730 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Backup" to be run every 1 hour 2024-05-18 16:44:42.731 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Clean up indexer statuses" to be run every 1 minute 2024-05-18 16:44:42.732 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Download history check" to be run every 10 minutes 2024-05-18 16:44:42.738 INFO --- [ main] org.nzbhydra.tasks.HydraTaskScheduler : Scheduling task "Delete old search results" to be run every 1 hour 2024-05-18 16:44:42.957 INFO --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 5076 (http) with context path '' 2024-05-18 16:44:42.977 INFO --- [ main] o.s.m.s.b.SimpleBrokerMessageHandler : Starting... 2024-05-18 16:44:42.983 INFO --- [ main] o.s.m.s.b.SimpleBrokerMessageHandler : BrokerAvailabilityEvent[available=true, SimpleBrokerMessageHandler [org.springframework.messaging.simp.broker.DefaultSubscriptionRegistry@7bdddfa4]] 2024-05-18 16:44:42.984 INFO --- [ main] o.s.m.s.b.SimpleBrokerMessageHandler : Started. 2024-05-18 16:44:43.027 INFO --- [ main] org.nzbhydra.NzbHydra : Started NzbHydra in 24.846 seconds (process running for 27.948) 2024-05-18 16:44:43.175 INFO --- [ main] org.nzbhydra.NzbHydra : First start of NZBHydra detected 2024-05-18 16:44:43.282 INFO --- [ main] org.nzbhydra.NzbHydra : You seem to be running NZBHydra 2 in docker. You can access Hydra using your local address and the IP you provided 2024-05-18 16:45:28.120 INFO --- [http-nio-0.0.0.0-5] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2024-05-18 16:45:28.129 INFO --- [http-nio-0.0.0.0-5] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2024-05-18 16:45:28.134 INFO --- [http-nio-0.0.0.0-5] o.s.web.servlet.DispatcherServlet : Completed initialization in 4 ms ```

[theotherp]

That looks good. Give it a whirl.

[saurori]

First impressions are this might not be as bad as I thought. I mistakenly thought it was using a 12 based grid but it's using 20 so some of the layout classes make more sense. I will probably just need to modify some html and css classes, and possibly introduce some flexbox functionality to help clean up the UI. I'll keep this thread posted with updates.

[theotherp]

Well that's nice to hear. Looking forward to it.

[saurori]

I have the changes mostly complete. It wasn't so bad, mainly misplaced css row and lack of responsive col-* classes along with not using responsive table. Bootstrap 3 has it's issues, v5 would have been nicer but 🤷 . I'll make a PR soon.

Also, if I try and run the container again (after initial run), I get this error:

Docker log

```shell nzbhydra-ui-dev | # A fatal error has been detected by the Java Runtime Environment: nzbhydra-ui-dev | # nzbhydra-ui-dev | # SIGSEGV (0xb) at pc=0x00007ffffe92a201, pid=47, tid=78 nzbhydra-ui-dev | # nzbhydra-ui-dev | # JRE version: OpenJDK Runtime Environment (17.0.10+7) (build 17.0.10+7-Ubuntu-122.04.1) nzbhydra-ui-dev | # Java VM: OpenJDK 64-Bit Server VM (17.0.10+7-Ubuntu-122.04.1, mixed mode, sharing, tiered, compressed oops, compressed class ptrs, g1 gc, linux-amd64) nzbhydra-ui-dev | # Problematic frame: nzbhydra-ui-dev | # V [libjvm.so+0x745201] G1ParScanThreadState::trim_queue_to_threshold(unsigned int)+0x14f1 nzbhydra-ui-dev | # nzbhydra-ui-dev | # No core dump will be written. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java again nzbhydra-ui-dev | # nzbhydra-ui-dev | # An error report file with more information is saved as: nzbhydra-ui-dev | # /app/hs_err_pid47.log nzbhydra-ui-dev | # nzbhydra-ui-dev | # If you would like to submit a bug report, please visit: nzbhydra-ui-dev | # Unknown nzbhydra-ui-dev | # nzbhydra-ui-dev | 2024-05-19 03:46:47,609 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -6 nzbhydra-ui-dev | 2024-05-19 03:46:47,610 INFO - NZBHydra main process has terminated for shutdown ```

[theotherp]

Ouch, that message looks gnarly. I may have found a solution but it requires some work as I would need to update to a newer java version. Unfortunately I can't reproduce it so we will have to just try it but I think the chances are good.

But anyway, that was quick! And it does look a lot better, thank you. I always assumed it wouldn't be too much work if I knew what I was doing which you certainly do.

Should I release this straight away or do you want to work on it some more?

[saurori]

It's no rush, but if you looked over all the changed screens and don't see any major issues, then sure release it. I can always make additional PRs if any issues pop up.

[theotherp]

I've updated the docker image. Let me know if it works better now.

[saurori]

I pulled the new version. First time running it gave me the same error. Second time running it looked like it booted fine. Visiting the UI, An error modal popped up with:

{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"NzbHydra2-Handle-Errors-Generically":true,"Accept":"application/json, text/plain, */*"},"url":"internalapi/history/searches/forsearching","cached":false},"statusText":"","xhrStatus":"error"}

And the container logs had same error:

Docker logs

```shell nzbhydra-ui-dev | # A fatal error has been detected by the Java Runtime Environment: nzbhydra-ui-dev | # nzbhydra-ui-dev | # SIGSEGV (0xb) at pc=0x00007ffffe83daee, pid=46, tid=79 nzbhydra-ui-dev | # nzbhydra-ui-dev | # JRE version: OpenJDK Runtime Environment (21.0.2+13) (build 21.0.2+13-Ubuntu-122.04.1) nzbhydra-ui-dev | # Java VM: OpenJDK 64-Bit Server VM (21.0.2+13-Ubuntu-122.04.1, mixed mode, sharing, tiered, compressed oops, compressed class ptrs, g1 gc, linux-amd64) nzbhydra-ui-dev | # Problematic frame: nzbhydra-ui-dev | # V [libjvm.so+0x807aee] G1ParScanThreadState::trim_queue_to_threshold(unsigned int)+0x331e nzbhydra-ui-dev | # nzbhydra-ui-dev | # No core dump will be written. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java again nzbhydra-ui-dev | # nzbhydra-ui-dev | # An error report file with more information is saved as: nzbhydra-ui-dev | # /app/hs_err_pid46.log nzbhydra-ui-dev | # nzbhydra-ui-dev | # If you would like to submit a bug report, please visit: nzbhydra-ui-dev | # Unknown nzbhydra-ui-dev | # nzbhydra-ui-dev | 2024-05-19 17:07:10,388 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -6 nzbhydra-ui-dev | 2024-05-19 17:07:10,389 INFO - NZBHydra main process has terminated for shutdown ```

I did notice it is running Java 21 where previously I think it was 17?

nzbhydra-ui-dev  | 2024-05-19 17:06:53,162  INFO - Determined release type: generic
nzbhydra-ui-dev  | 2024-05-19 17:06:53,394  INFO - Determined java version as '21' from version string 'openjdk version "21.0.2" 2024-01-16'

[theotherp]

Yes that bug was supposed to be fixed with Java 18+.

I will create an image with the arm binary, perhaps that will help.

[saurori]

Yeah the container issue seems like a bug with docker+arm amd64 translation and java. I found that if I set Docker to use 1 CPU, it works fine. Very slow startup but otherwise not terrible.

I was playing around with mobile search view and found a solution using only CSS (see image). Let me know what you think and I can PR some changes this week.

[theotherp]

Wow, that looks so much better. And may make the search actually usably on phones and tablets. Would be happy to use that.

[saurori]

Created a PR, and fixed some minor issues in Config: https://github.com/theotherp/nzbhydra2/pull/949

[moya2162]

@saurori

Would you be able to implement automatic light and dark mode based on either operating system or browser state information?

The new theme could be called "system" or "auto". Firefox has a theme called system which follows the operating systems dark/light mode.

[theotherp]

The theme is set in the config but I could add some JS that selects the theme depending on the browser settings.

[moya2162]

Im using the following JS code for a userscript i set up for something else. Tested and working with Firefox for my purpose. Maybe there is a better way though.

(window.matchMedia) ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? dark_mode : lite_mode) : lite_mode;

----Edit Just wanted to say thank you for making, updating, and maintaining nzbhydra2.

[theotherp]

Yeah, that seems to be the way to go. Should be easy to implement.

[apiweb]

I want to say thanks for the great updates that @saurori and @theotherp have made on NZBHydra. Thank you for your work on modernizing it. You're doing a great job.

[saurori]

@moya2162 @theotherp Regarding an automatic light/dark theme:

It's definitely possible but a bit cumbersome with how things are set up right now. Currently, the full CSS is built for each theme. So to switch themes, the config code is read and that particular CSS file is loaded (which happens on the backend). prefers-color-scheme is a CSS media feature so if the theme was "Auto", we would need to either set some property after page load (which would cause a color flash) or include all themes at load and do something like:

[data-theme="grey"] {
    ...wrap all css for theme
}

The proper way to do this, which requires a bit more work, is to use CSS variables for each theme, for example:

Grey:

:root {
    --body-bg: rgb(38, 44, 46);
    ...
}

Auto:

@media (prefers-color-scheme: light) {
    --body-bg: rgb(255, 255, 255);
}

@media (prefers-color-scheme: dark) {
    --body-bg: rgb(0, 0, 0);
}

And use the variables like:

html,
body {
  height: 100%;
  background: var(--body-bg);
}

And we'd have to decide if the "Auto Dark" is theme grey or dark. I vote grey.

I can look into it when I find some time. It would also be a good opportunity to clean up some CSS (file separation, deduplicate Bootstrap css include).

@theotherp in the meantime, can you add an auto theme and an auto.less file? I would do it myself but it's part of the Gulp pipeline which I don't think is set up to be modified and developed on via the ui Docker dev container.

[theotherp]

@saurori I've pushed a new docker image that allows you to set an "auto" theme. Please update the ui-src folder accordingly: https://github.com/theotherp/nzbhydra2/tree/master/core/ui-src

By the way, if you link the ui-src folder from your checked out repository to the data/ui-src folder of the docker volume you can more easily work with the files and git.

[saurori]

@theotherp Looks like there's some MIME type issues with new files. Console errors:

Refused to apply style from 'http://localhost:5076/static/css/additional.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to apply style from 'http://localhost:5076/static/css/auto.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

GET http://localhost:5076/static/js/additional.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from 'http://localhost:5076/static/js/additional.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[moya2162]

For "Auto Dark" i think grey looks good as the "dark" option. However i could see people wanting to use dark as the "dark" option for purpose of battery life on OLEDs. Maybe if "Auto Dark" is selected as theme, a check box can appear to use dark and it can be called "true black" or "pure black" or something like that.

[saurori]

@moya2162 That's a good point regarding OLED. I don't have a strong opinion either way as I probably won't use it. I have it all completed, just waiting for @theotherp to check on a fix for the above mentioned issue so I can test it before making a PR.

[theotherp]

@saurori additional.js and additional.css don't exist by default. As the files in the static folder are usually generated from the ui-src folder and this would result in the files to be overwritten they don't exist in your static folder. You can create them and they will be loaded.

As for the auto theme, I don't know what's wrong there. I can select it in the config and any changes to the .less files are made effective in the css files.

[theotherp]

Regarding the grey vs dark I wouldn't put too much effort into this, to be honest. I'm not even sure I would want to make auto the default. I, for example, prefer dark themes for some websites but not for others. I have a bright theme on my browser but use the grey hydra theme.

[saurori]

@theotherp got it working. I had to remove and pull the ui dev dockier image and started fresh by removing the data dir, seems to be working now.

I'll use dark for the auto theme. I mainly implemented the auto theme feature since the css needed cleanup anyway.

[saurori]

@theotherp I take that back, it's still having issues (prior it wasn't creating auto.css). I still have the MIME issues:

Chrome:

Refused to apply style from 'http://localhost:5076/static/css/auto.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Safari for some reason is giving a 404 on auto.css.

I'm not sure what's going on.

[saurori]

Loading up http://localhost:5076/static/css/auto.css there is a 404 Java error:

Some details:
Path | /static/css/auto.css
-- | --
Query parameters |  
Status | 404
Timestamp | 2024-05-27T19:54:19.904650792Z
Error |  
Exception | java.lang.Exception at java.base/jdk.internal.reflect.DirectConstructorHandleAccessor.newInstance(DirectConstructorHandleAccessor.java:62) at java.base/java.lang.reflect.Constructor.newInstanceWithCaller(Constructor.java:502) at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:486) at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:198) at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:126) at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:120) at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:100) at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:63) at org.springframework.security.web.context.SecurityContextHolderFilter.doFilter(SecurityContextHolderFilter.java:82) at org.springframework.security.web.context.SecurityContextHolderFilter.doFilter(SecurityContextHolderFilter.java:69) at java.base/java.lang.Thread.run(Thread.java:1583)

I noticed the nzbhydra version inside the container is reporting 6.2.2 if that matters:

[main] INFO org.nzbhydra.NzbHydra -- Version: 6.2.2-SNAPSHOT

[theotherp]

Please try again. Sorry, for some reason the new image wasn't pushed correctly.

[saurori]

PR opened for Auto theme: https://github.com/theotherp/nzbhydra2/pull/952

[theotherp]

How do I see if I've fixed the duplicate bootstrap?

[saurori]

If you look in alllibs.css you'll see a comment for Bootstrap like:

 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

[theotherp]

Got it: https://github.com/theotherp/nzbhydra2/blob/master/core/src/main/resources/static/css/alllibs.css

[theotherp]

Argh unfortunately the moved images don't work anymore and I have no idea how to fix it :-(

[theotherp]

@saurori Moving the images one folder up (relativ to the less files referencing them) resulted in the full URL used being http://127.0.0.1:5076/static/css/static/img/sab.png instead of http://127.0.0.1:5076/static/img/sab.png It's possible that I had an ugly hack to fix that before. Will need to find out why that worked before.