diff --git a/packages/jaeger-ui/index.html b/packages/jaeger-ui/index.html
index de638a857d..30a2c16e6a 100644
--- a/packages/jaeger-ui/index.html
+++ b/packages/jaeger-ui/index.html
@@ -44,6 +44,7 @@
window.embeddedMode;
window.isUserDefinedJaegerQueryURL;
window.staticPath;
+ window.enableZoomControls;
diff --git a/packages/jaeger-ui/src/Contexts.ts b/packages/jaeger-ui/src/Contexts.ts
new file mode 100644
index 0000000000..7ef40c9693
--- /dev/null
+++ b/packages/jaeger-ui/src/Contexts.ts
@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import ZoomManager from './utils/ZoomManager';
+
+export const ZoomContext = createContext(null);
diff --git a/packages/jaeger-ui/src/components/App/index.jsx b/packages/jaeger-ui/src/components/App/index.jsx
index 6833918177..1a03d1731b 100644
--- a/packages/jaeger-ui/src/components/App/index.jsx
+++ b/packages/jaeger-ui/src/components/App/index.jsx
@@ -39,6 +39,8 @@ import configureStore from '../../utils/configure-store';
import processScripts from '../../utils/config/process-scripts';
import prefixUrl from '../../utils/prefix-url';
import { isString } from '../../utils/ts/typeGuards/isString';
+import ZoomManager from '../../utils/ZoomManager';
+import { ZoomContext } from '../../Contexts';
import '../common/vars.css';
import '../common/utils.css';
@@ -52,6 +54,30 @@ export default class JaegerUIApp extends Component {
this.store = configureStore(history);
JaegerAPI.apiRoot = DEFAULT_API_ROOT;
processScripts();
+ this.zoomManager = new ZoomManager();
+ this._handleZoomKeyboardShortcuts = this._handleZoomKeyboardShortcuts.bind(this);
+ }
+
+ componentDidMount() {
+ document.addEventListener('keydown', this._handleZoomKeyboardShortcuts);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('keydown', this._handleZoomKeyboardShortcuts);
+ }
+
+ _handleZoomKeyboardShortcuts(e) {
+ if (window.enableZoomControls && (e.metaKey || e.ctrlKey)) {
+ switch (e.key) {
+ case '-':
+ this.zoomManager.zoomOut();
+ break;
+ case '=':
+ this.zoomManager.zoomIn();
+ break;
+ default:
+ }
+ }
}
render() {
@@ -65,23 +91,25 @@ export default class JaegerUIApp extends Component {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
index 338ca8110f..194989365d 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
@@ -108,3 +108,7 @@ limitations under the License.
font-size: 1.78em;
margin-right: 0.15em;
}
+
+.TracePageHeader--zoomControls {
+ margin-left: 0.5em;
+}
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index da58c5b4e7..7cf7f9471f 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -38,6 +38,7 @@ import { getTraceLinks } from '../../../model/link-patterns';
import './TracePageHeader.css';
import ExternalLinks from '../../common/ExternalLinks';
+import ZoomControls from './ZoomControls';
type TracePageHeaderEmbedProps = {
canCollapse: boolean;
@@ -199,6 +200,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
Archive Trace
)}
+ {window.enableZoomControls && }
{showStandaloneLink && (
{
+ const zoomManager = useContext(ZoomContext);
+
+ return (
+
+
+ );
+};
+
+export default ZoomControls;
diff --git a/packages/jaeger-ui/src/utils/ZoomManager.ts b/packages/jaeger-ui/src/utils/ZoomManager.ts
new file mode 100644
index 0000000000..8db2a4923b
--- /dev/null
+++ b/packages/jaeger-ui/src/utils/ZoomManager.ts
@@ -0,0 +1,25 @@
+const MIN_ZOOM_LEVEL = 0.7;
+const MAX_ZOOM_LEVEL = 1.5;
+const ZOOM_FACTOR = 0.1;
+
+export default class ZoomManager {
+ zoomLevel: number;
+
+ constructor() {
+ this.zoomLevel = document.body.style.zoom || 1;
+ }
+
+ updateStyles = () => {
+ document.body.style.zoom = this.zoomLevel;
+ };
+
+ zoomIn = () => {
+ this.zoomLevel = Math.min(this.zoomLevel + ZOOM_FACTOR, MAX_ZOOM_LEVEL);
+ this.updateStyles();
+ };
+
+ zoomOut = () => {
+ this.zoomLevel = Math.max(this.zoomLevel - ZOOM_FACTOR, MIN_ZOOM_LEVEL);
+ this.updateStyles();
+ };
+}
diff --git a/packages/jaeger-ui/typings/custom.d.ts b/packages/jaeger-ui/typings/custom.d.ts
index 17340d95cf..b0d037afe8 100644
--- a/packages/jaeger-ui/typings/custom.d.ts
+++ b/packages/jaeger-ui/typings/custom.d.ts
@@ -39,6 +39,7 @@ declare interface Window {
embeddedMode?: unknown;
isUserDefinedJaegerQueryURL?: unknown;
staticPath?: unknown;
+ enableZoomControls?: unknown
}
declare const __REACT_APP_GA_DEBUG__: string | undefined;