Repository navigation
Service updates: dependency bumps, themed health dashboard, environment driven home page - #19
Merged
Merged
Conversation
…, Scalar 2.17.10, Test.Sdk 18.10.1, coverlet 10.1.0
This was referenced Sep 28, 2026
The Health Checks UI is a packaged single page application, so the theme is applied with a stylesheet registered through AddCustomStylesheet and loaded after the dashboard defaults. The logo is served from wwwroot instead of the remote image the dashboard ships with. - HealthCheckOptions.CustomStylesheet resolves the file from wwwroot and falls back to the dashboard defaults with a warning when it is not found - Page title of the dashboard now comes from HealthCheckOptions.HeaderText - Added HealthCheckUiTests and wwwroot copy for the test host
The project is hosted with the .NET CLI and Docker Compose; Aspire will replace the local orchestration setup later.
The static index.html showed the same four buttons everywhere, including the UIs that a production deployment does not expose. The page is now a Razor Page whose links are derived from the configuration of the running environment. - HomePageOptions configures the page: title, description, environment badge, documentation and health check groups, and extra links - Swagger, Scalar and Facet links follow SwaggerEnabled; the page states that the documentation is not available instead of silently dropping the links - appsettings.Production.json is the sample of a deployment without docs - The page can be turned off completely, then / returns 404 - Styles and icons moved to wwwroot/css/home.css and wwwroot/icons
Digiman
changed the title
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| { | ||
| // the shipped appsettings.Production.json is the sample of a deployment without Swagger | ||
| var configuration = new ConfigurationBuilder() | ||
| .AddJsonFile(Path.Combine(AppContext.BaseDirectory, "appsettings.Production.json"), optional: false) |
- Disable the CSS prettier linter as well: prettier style is not enforced for any language in this repository - Use the 'style sheet' and 'URL' spellings the natural language linter expects
Dashboard: - Reworked the palette on a light/dark pair and checked every text and background combination for at least WCAG AA contrast (4.5:1) - The dark palette is now complete: the table header, the status tags and the aside had light-on-light combinations, the table header text was effectively invisible before - Secondary text and the base font size follow the theme Home page: - Theme switch with System, Light and Dark, rendered as a radio group so it works with the keyboard and screen readers - The choice is stored in the browser and applied before the first paint by wwwroot/js/theme.js, and the system theme is followed live - HomePageOptions.DefaultTheme sets where the switch starts - The script is a separate file because the security headers policy does not allow inline scripts outside local development
The home page theme script is now written in the standard style enforced by super-linter (2 space indent, no semicolons, const instead of var), verified locally with standard, and the JavaScript prettier linter is disabled like the other prettier linters of this repository.
The page had a centered hero with the title, the environment badge and the theme switch stacked on top of each other, which pushed the actual content below the fold and repeated the title in two places. - A sticky top bar now carries the service mark and name on the left, the environment badge and the theme switch on the right - The title moved into the top bar, so the document keeps a single h1 and the content starts right below the bar - Description, link cards and the notes stay in the content area; an empty state was added for a service without links - New service mark icon, a visually hidden hint for links that open in a new tab, and focus outlines on the cards and the switch - The unselected switch labels got their own color: the muted text on the switch background was below the AA contrast ratio
- Replace the theme switch labels with monitor/sun/moon icons, keeping visually hidden accessible names and visible focus states - Lower the visual contrast of both palettes on the home page and the health check dashboard while keeping every text/background pair at WCAG AA (4.5:1) - Fix the dashboard title being invisible in the dark palette - Fix the table row hover overrides targeting a class the dashboard never renders; both palettes now use a quiet tinted hover - Soften the sidebar active/hover and button hover states - Keep the theme-color meta in sync with the active theme - Fix the quoted -apple-system font stack entry, add prefers-reduced-motion and -webkit-backdrop-filter handling - Invert the single color dark link icons in the dark theme
Both are internal facing surfaces, so production now serves only the API itself. The sample links are dropped from the config for the same reason.
The sample production configuration no longer ships custom links, so the test now asserts that no external links are rendered instead of expecting the removed Runbook and Mailbox entries.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Aggregates the three open Dependabot PRs and adds the next round of service improvements:
a themed health check dashboard, removal of the obsolete tye setup, and a home page that follows
the environment it runs in.
Aggregated dependency updates
github/codeql-action(workflow)Facet,Facet.Dashboard,Facet.ExtensionsMicrosoft.AspNetCore.Mvc.TestingMicrosoft.Extensions.ConfigurationMicrosoft.Extensions.Configuration.AbstractionsMicrosoft.Extensions.DependencyInjection.AbstractionsMicrosoft.Extensions.HostingMicrosoft.Extensions.Logging.AbstractionsMicrosoft.Extensions.OptionsMicrosoft.Extensions.Options.ConfigurationExtensionsMicrosoft.Extensions.Options.DataAnnotationsMicrosoft.NET.Test.SdkScalar.AspNetCorecoverlet.collectorSource PRs: #13, #17, #18 (#18 was a strict subset of #17).
Health check dashboard styling and logo
configured with
HealthCheckOptions:CustomStylesheet(a path relative towwwroot)wwwroot/css/healthcheck-dashboard.cssoverrides the dashboard CSS custom properties (palette,fonts, surfaces), adds a dark mode and points
--logoImageUrlatwwwroot/images/healthcheck-logo.svg- the default logo is a remote image, so this also removesthe external request
wwwrootis logged as a warning and the dashboardfalls back to its defaults instead of failing the startup
HealthCheckOptions:HeaderTextstandardconfig rejects the camelCase customproperties and BEM class names of the packaged dashboard that the theme has to override
tye removed
tye.yamlis gone - the service is hosted with the .NET CLI and Docker Compose, and Aspire willprovide the local orchestration later.
Environment driven home page
/is a Razor Page (Pages/Index.cshtml) instead of a staticwwwroot/index.htmlHomePageOptionsconfigures the title, description, environment badge, the documentation andhealth check link groups, and any extra links
SwaggerEnabled; when they are expected but turned off thepage says the documentation is not available instead of silently showing fewer buttons
HealthCheckOptions:HealthCheckUiEnabledHomePageOptions:Enabled=falseskips Razor Pages registration entirely and/returns 404appsettings.Production.jsonis the sample of a production deployment: no Swagger, no Scalar, noenvironment badge, plus an internal runbook link
wwwroot/css/home.css, icons live inwwwroot/icons(newfacets.svg)Tests
52 tests pass (11 Application + 41 Api, up from 40):
HealthCheckUiTests: dashboard title from configuration, custom stylesheet loaded after thedefault one, stylesheet and logo served, fallback when the stylesheet is missing
HomePageModelTests: links for documentation on/off, dashboard link on/off, link groups disabled,custom links (enabled/disabled, new tab, icon), title/description/environment badge, and the
shipped
appsettings.Production.jsonsamplewwwrootto their output, so static web assets (home page styles,dashboard theme, logo) are served as in a real run
Verification
dotnet build -c Release: succeeded, 0 warnings, 0 errorsdotnet test: 52/52 passeddotnet format --verify-no-changes: cleanLocalshows Swagger, Scalar, Facets, Health status and Health dashboard with aLocalbadge;Productionshows only health links, the runbook link and the documentation note,and
/swaggerreturns 404; the dashboard serves the custom stylesheet and the logo