[
https://issues.apache.org/jira/browse/KNOX-3508?focusedWorklogId=1046104&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-1046104
]
ASF GitHub Bot logged work on KNOX-3508:
----------------------------------------
Author: ASF GitHub Bot
Created on: 07/Oct/26 08:51
Start Date: 07/Oct/26 08:51
Worklog Time Spent: 10m
Work Description: smolnar82 opened a new pull request, #1444:
URL: https://github.com/apache/knox/pull/1444
[KNOX-3508](https://issues.apache.org/jira/browse/KNOX-3508) - Bundle UI
icons locally so they render in air-gapped networks
## What changes were proposed in this pull request?
The Angular 21 UI upgrade
([KNOX-3234](https://issues.apache.org/jira/browse/KNOX-3234)) and the newer
`mat-icon`-based UIs reintroduced external font `<link>` tags pointing at
`fonts.googleapis.com` / `fonts.gstatic.com` for Material Icons (and Roboto in
admin-ui), **regressing
[KNOX-1731](https://issues.apache.org/jira/browse/KNOX-1731)** ("Gateway Admin
UI should not include external js/css").
In air-gapped environments this fails two ways:
1. **Runtime** — the browser can't reach Google Fonts, so icons render as
literal ligature text (e.g. the gear and pin show as the words `settings` /
`push_pin`).
2. **Build-time** — the production build's Beasties critical-CSS inlining
fetches the fonts from Google and inlines them, so the build itself required
internet access. The previously-built `admin-ui/index.html` embedded the exact
`fonts.gstatic.com/.../materialicons...woff2` URL from the bug report plus 27
Roboto glyph-range URLs.
This PR vendors every icon used by the UIs as **local inline SVGs** (Google
[Material Symbols Outlined](https://github.com/google/material-design-icons),
Apache-2.0), removes all external font links, and drops the Roboto web font in
favor of the system font stack. Nothing is fetched from the network at build or
runtime.
- **gateway-admin-ui**: new standalone `<app-icon>` component +
`icon.data.ts` render the SVGs inline; the host keeps the `material-icons`
class so all existing `styles.scss` theming (color-by-action, hover, sizing)
applies unchanged. The inline-edit hover pencil (formerly the `\e254` icon-font
glyph) now uses a vendored `assets/icons/edit.svg` via CSS `mask`.
- **knox-homepage-ui, knox-token-generation-ui, knox-token-management-ui**:
register inline SVGs with `MatIconRegistry.addSvgIconLiteral` through a
per-module `provideIconRegistry()` and switch templates to `<mat-icon
svgIcon="…">`.
- Removed the Google font `<link>` / `preconnect` tags from all four
`index.html` files; added a system-font fallback (`-apple-system, …, Roboto, …,
sans-serif`) for the dropped Roboto web font.
- Cleaned up two pre-existing dead icon references found during analysis: an
`<i class="icon-warning">` with no backing CSS/font, and a Bootstrap-3
`glyphicon-info-sign` that Bootstrap 5 no longer renders.
- Deleted orphaned `fontawesome` and `fontopensans` font binaries (zero
references).
- Added a Material Symbols attribution paragraph to the repo-root `NOTICE`
(Apache-2.0, same license as Knox — no LICENSE grant required), plus per-file
provenance comments and a short `README.md` beside the icon data.
`knox-webshell-ui` is unaffected (no icons/fonts) and left untouched.
## How was this patch tested?
- **Offline build:** `mvn package` on
`gateway-admin-ui,knox-homepage-ui,knox-token-generation-ui,knox-token-management-ui`
— all four modules build successfully (lint + production bundle), with no
fetch/timeout, proving Beasties no longer reaches Google.
- **No external references in built output:** grepped the built `index.html`
and hashed `*.css`/`*.js` under each `target/classes/*/app` for
`googleapis`/`gstatic` → **zero matches** (down from 30 references previously).
Confirmed the inline SVG path data is bundled in the JS and `edit.svg` is
copied into the built assets.
- **Lint:** `npm run lint` passes in all four modules.
- **Manual, offline:** disabled networking on the machine and loaded the UIs
— all icons render as glyphs (not text), with correct admin-ui color/hover
theming and working expand/collapse chevron toggles; DevTools shows no requests
to `fonts.g*`.
## Integration Tests
N/A
## UI changes
This patch restores icon glyphs that were rendering as literal text in
air-gapped networks. Screenshots (air-gapped) of the UIs with the new icons:
<img width="376" height="542" alt="image"
src="https://github.com/user-attachments/assets/00fb0284-9abd-42c9-b76b-ba7901bb4fc9";
/>
<img width="1727" height="704" alt="image"
src="https://github.com/user-attachments/assets/eb686eea-ce5a-4235-b4f4-a66efea1cb67";
/>
<img width="1719" height="518" alt="image"
src="https://github.com/user-attachments/assets/3d8b2be1-a00b-42c6-ba0d-c2c91d507196";
/>
<img width="1718" height="949" alt="image"
src="https://github.com/user-attachments/assets/2454532d-dcb4-4630-a0dc-4c78ab314cfb";
/>
<img width="1717" height="752" alt="image"
src="https://github.com/user-attachments/assets/f913b346-b2b0-473b-8ae5-45d148f77028";
/>
<img width="1716" height="856" alt="image"
src="https://github.com/user-attachments/assets/8b4a927c-0814-4169-b7ce-01cf1c9ec75a";
/>
Issue Time Tracking
-------------------
Worklog Id: (was: 1046104)
Remaining Estimate: 0h
Time Spent: 10m
> Knox UIs load Material Icons/Roboto fonts from the internet
> (fonts.googleapis.com/gstatic.com), breaking icons in air-gapped environments
> -----------------------------------------------------------------------------------------------------------------------------------------
>
> Key: KNOX-3508
> URL: https://issues.apache.org/jira/browse/KNOX-3508
> Project: Apache Knox
> Issue Type: Bug
> Components: AdminUI, Homepage, TokenGenerationUI, TokenManagementUI
> Affects Versions: 3.0.0
> Reporter: Sandor Molnar
> Assignee: Sandor Molnar
> Priority: Major
> Fix For: 3.1.0
>
> Time Spent: 10m
> Remaining Estimate: 0h
>
> In air-gapped networks (and any environment that blocks outbound internet),
> the Knox Angular UIs render Material Icons as literal ligature text — e.g.
> the gear/settings and pin icons appear as the words settings / push_pin,
> visible on mouse-over in a small space — instead of as glyphs.
> Browser network analysis shows the UI attempting to download the icon font
> from the internet:
> [https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2]
> Root cause: The Angular 21 Admin UI upgrade (KNOX-3234) and the other Angular
> UIs reintroduced external font <link> tags into index.html:
> - [https://fonts.googleapis.com/icon?family=Material+Icons] (admin-ui, home,
> token-generation, token-management)
> - [https://fonts.googleapis.com/css2?family=Roboto:]... + preconnect to
> gstatic (admin-ui only)
> This regresses KNOX-1731 ("Gateway Admin UI should not include external
> js/css"), which had removed all external CSS/JS so the UI worked offline.
> Earlier Knox versions packaged these icons locally.
> There are two failures:
> # Runtime — the browser cannot reach Google Fonts, so icon ligatures display
> as text.
> # Build-time — the Angular production build (Beasties critical-CSS inlining)
> fetches the fonts from Google at build time and inlines them into the built
> HTML/CSS, so the build itself requires internet access. The built
> admin-ui/index.html currently embeds the exact gstatic woff2 URL above plus
> 27 Roboto glyph-range URLs.
> *Affected modules:* gateway-admin-ui, knox-homepage-ui,
> knox-token-generation-ui, knox-token-management-ui. knox-webshell-ui is
> unaffected (no icons/fonts).
> *Fix:* Bundle every icon used by the UIs locally as inline SVGs sourced from
> Google Material Symbols (Apache-2.0), remove all external font <link> tags,
> and drop the Roboto web font in favor of the system font stack. No font files
> are fetched at build or runtime. ~22 distinct Material Symbols are used
> across the UIs. Also clean up two pre-existing dead icon references found
> during analysis (a <i class="icon-warning"> with no backing CSS/font, and a
> Bootstrap-3 glyphicon-info-sign that Bootstrap 5 no longer renders).
> *Acceptance:* With all outbound network blocked
> * (a) mvn package builds every UI module successfully
> * (b) the built index.html and hashed CSS/JS contain no googleapis/gstatic
> references, and
> * (c) every icon renders as a glyph with correct color/size theming.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
