Skip to content

Commit 5072bd1

Browse files
committed
docs: add comprehensive UI configuration options
Add documentation for previously undocumented Jaeger UI configuration options in the Frontend/UI Configuration page. ## New Sections Added ### Themes (Dark Mode) - Document `themes.enabled` for enabling the light/dark theme toggle - Explains theme persistence in local storage and system preference fallback ### Critical Path - Document `criticalPathEnabled` for trace view critical path visualization ### Top Tag Prefixes - Document `topTagPrefixes` for prioritizing important span tags ### Trace Graph - Document `traceGraph.layoutManagerMemory` for GraphViz memory control ### UI Controls - Document `disableFileUploadControl` for disabling trace file uploads - Document `disableJsonView` for disabling JSON view - Document `forbidNewPage` for preventing new tab/window opens ## Enhanced Existing Sections ### Monitor - Added `monitor.docsLink` for SPM documentation links - Added `monitor.emptyState` for customizing empty state display ## Other Changes - Updated example JSON config to include new options - Expanded configuration overview list with new capabilities Relates to: jaegertracing/jaeger-ui#3243 Signed-off-by: Jonah Kowall <[email protected]>
1 parent 5f9cbd2 commit 5072bd1

File tree

2 files changed

+100
-1
lines changed

2 files changed

+100
-1
lines changed

.cspell/project-words.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ downsampling
2323
dropwizard
2424
dsoie
2525
eddsa
26+
Emscripten
2627
emsgsize
2728
errorf
2829
expvar

content/docs/v2/_dev/deployment/frontend-ui.md

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,15 @@ weight: 7
1010

1111
Several aspects of the UI can be configured:
1212

13+
* Themes can be enabled to allow switching between light and dark modes
1314
* The Dependencies section can be enabled / configured
1415
* The [Monitor tab (aka: Service Performance Monitoring)](../../architecture/spm/) can be enabled / configured
1516
* App analytics tracking can be enabled / configured (via Google Analytics or custom plugin)
1617
* Additional menu options can be added to the global nav
1718
* Search input limits can be configured
19+
* Critical path visualization can be enabled
20+
* Tag display priorities can be configured
21+
* Various UI controls can be disabled for embedding scenarios
1822

1923
These options can be configured by a JSON configuration file. The `--query.ui-config` command line parameter of the query service must then be set to the path to the JSON file when the query service is started.
2024

@@ -29,6 +33,9 @@ An example configuration file (see [complete schema here](https://github.com/jae
2933
"monitor": {
3034
"menuEnabled": true
3135
},
36+
"themes": {
37+
"enabled": true
38+
},
3239
"archiveEnabled": true,
3340
"tracking": {
3441
"gaID": "UA-000000-2",
@@ -73,10 +80,28 @@ An example configuration file (see [complete schema here](https://github.com/jae
7380
"url": "https://my-logs.server?from=#{startTime | add -60000000 | epoch_micros_to_date_iso}&to=#{endTime | add 60000000 | epoch_micros_to_date_iso}'",
7481
"text": "Redirect to kibana to view log with formatted dates"
7582
}],
76-
"traceIdDisplayLength": 20
83+
"traceIdDisplayLength": 20,
84+
"criticalPathEnabled": true,
85+
"topTagPrefixes": ["http.", "db."]
7786
}
7887
```
7988

89+
### Themes (Dark Mode)
90+
91+
Enable the theme toggle button in the navigation bar to allow users to switch between light and dark modes:
92+
93+
```json
94+
{
95+
"themes": {
96+
"enabled": true
97+
}
98+
}
99+
```
100+
101+
When enabled, users can toggle between light and dark themes using a button in the top navigation. The selected theme is persisted in the browser's local storage. If no theme is stored, the UI respects the user's system preference (`prefers-color-scheme`).
102+
103+
`themes.enabled` enables (`true`) or disables (`false`) the theme toggle button. Default: `false`.
104+
80105
### Dependencies
81106

82107
`dependencies.dagMaxNumServices` defines the maximum number of services allowed before the DAG dependency view is disabled. Default: `200`.
@@ -87,6 +112,29 @@ An example configuration file (see [complete schema here](https://github.com/jae
87112

88113
`monitor.menuEnabled` enables (`true`) or disables (`false`) the Monitor menu button. Default: `false`.
89114

115+
`monitor.docsLink` specifies a URL to documentation about Service Performance Monitoring. When set, a help link is displayed in the Monitor tab.
116+
117+
`monitor.emptyState` allows customizing the empty state display when no monitoring data is available:
118+
119+
```json
120+
{
121+
"monitor": {
122+
"menuEnabled": true,
123+
"docsLink": "https://www.jaegertracing.io/docs/latest/spm/",
124+
"emptyState": {
125+
"mainTitle": "Get started with Service Performance Monitoring",
126+
"subTitle": "No data available",
127+
"description": "Configure your services to emit RED metrics.",
128+
"info": "Additional information text",
129+
"alert": {
130+
"message": "SPM requires metrics storage backend",
131+
"type": "info"
132+
}
133+
}
134+
}
135+
}
136+
```
137+
90138
### Archive Support
91139

92140
`archiveEnabled` enables (`true`) or disables (`false`) the archive traces button. Default: `false`. It requires a configuration of an archive storage in Query service. Archived traces are only accessible directly by ID, they are not searchable.
@@ -205,6 +253,56 @@ Field | Description
205253

206254
This will display trace IDs like: `1a2b3c4d5e6f` (instead of the full 32-character ID or default 7-character).
207255

256+
### Critical Path
257+
258+
`criticalPathEnabled` enables (`true`) or disables (`false`) the critical path visualization in the trace view. When enabled, the critical path of each span is highlighted, showing which operations are on the critical path of the overall trace duration. Default: `false`.
259+
260+
```json
261+
{
262+
"criticalPathEnabled": true
263+
}
264+
```
265+
266+
### Top Tag Prefixes
267+
268+
`topTagPrefixes` defines a set of prefixes for span tag names that are considered "important" and cause the matching tags to appear higher in the list of tags. For example, setting `topTagPrefixes` to `["http."]` would cause all span tags that begin with "http." to be shown above all other tags.
269+
270+
```json
271+
{
272+
"topTagPrefixes": ["http.", "db.", "rpc."]
273+
}
274+
```
275+
276+
### Trace Graph
277+
278+
`traceGraph.layoutManagerMemory` controls the total memory available for the GraphViz Emscripten module instance used to render trace graphs. The value should be a power of two. The default of 16MB should be sufficient for most cases — only consider using a larger number if you run into the error "Cannot enlarge memory arrays".
279+
280+
```json
281+
{
282+
"traceGraph": {
283+
"layoutManagerMemory": 33554432
284+
}
285+
}
286+
```
287+
288+
### UI Controls
289+
290+
Several options allow disabling specific UI controls, which is useful for embedding scenarios or restricting functionality:
291+
292+
`disableFileUploadControl` disables (`true`) or enables (`false`) the file upload control for loading trace JSON files. Default: `false`.
293+
294+
`disableJsonView` disables (`true`) or enables (`false`) the JSON view option in the trace view. Default: `false`.
295+
296+
`forbidNewPage` when set to `true`, alters all link targets to prevent opening new browser tabs/windows. This is useful when embedding the UI in another application. Default: `false`.
297+
298+
```json
299+
{
300+
"disableFileUploadControl": true,
301+
"disableJsonView": true,
302+
"forbidNewPage": true
303+
}
304+
```
305+
208306
## Embedded Mode
209307

210308
Starting with version 1.9, Jaeger UI provides an "embedded" layout mode which is intended to support integrating Jaeger UI into other applications. Currently (as of `v0`), the approach taken is to remove various UI elements from the page to make the UI better suited for space-constrained layouts.

0 commit comments

Comments
 (0)