Skip to content

Commit 22bae2d

Browse files
kshmidt-digmakshmidt-digma
committed
Add keyboard shortcuts
1 parent a6b0ca2 commit 22bae2d

File tree

8 files changed

+83
-31
lines changed

8 files changed

+83
-31
lines changed

‎packages/jaeger-ui/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
window.embeddedMode;
4545
window.isUserDefinedJaegerQueryURL;
4646
window.staticPath;
47+
window.enableZoomControls;
4748
</script>
4849
</head>
4950
<body>

‎packages/jaeger-ui/src/Contexts.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createContext } from 'react';
2+
import ZoomManager from './utils/ZoomManager';
3+
4+
export const ZoomContext = createContext<null | ZoomManager>(null);

‎packages/jaeger-ui/src/components/App/index.jsx‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ import configureStore from '../../utils/configure-store';
3939
import processScripts from '../../utils/config/process-scripts';
4040
import prefixUrl from '../../utils/prefix-url';
4141
import { isString } from '../../utils/ts/typeGuards/isString';
42+
import ZoomManager from '../../utils/ZoomManager';
43+
import { ZoomContext } from '../../Contexts';
4244

4345
import '../common/vars.css';
4446
import '../common/utils.css';
@@ -52,6 +54,30 @@ export default class JaegerUIApp extends Component {
5254
this.store = configureStore(history);
5355
JaegerAPI.apiRoot = DEFAULT_API_ROOT;
5456
processScripts();
57+
this.zoomManager = new ZoomManager();
58+
this._handleZoomKeyboardShortcuts = this._handleZoomKeyboardShortcuts.bind(this);
59+
}
60+
61+
componentDidMount() {
62+
document.addEventListener('keydown', this._handleZoomKeyboardShortcuts);
63+
}
64+
65+
componentWillUnmount() {
66+
document.removeEventListener('keydown', this._handleZoomKeyboardShortcuts);
67+
}
68+
69+
_handleZoomKeyboardShortcuts(e) {
70+
if ((window.enableZoomControls && e.metaKey) || e.ctrlKey) {
71+
switch (e.key) {
72+
case '-':
73+
this.zoomManager.zoomOut();
74+
break;
75+
case '=':
76+
this.zoomManager.zoomIn();
77+
break;
78+
default:
79+
}
80+
}
5581
}
5682

5783
render() {
@@ -65,23 +91,25 @@ export default class JaegerUIApp extends Component {
6591
return (
6692
<Provider store={this.store}>
6793
<ConnectedRouter history={history}>
68-
<Page>
69-
<Switch>
70-
<Route path={searchPath} component={SearchTracePage} />
71-
<Route path={traceDiffPath} component={TraceDiff} />
72-
<Route path={tracePath} component={TracePage} />
73-
<Route path={dependenciesPath} component={DependencyGraph} />
74-
<Route path={deepDependenciesPath} component={DeepDependencies} />
75-
<Route path={qualityMetricsPath} component={QualityMetrics} />
76-
<Route path={monitorATMPath} component={MonitorATMPage} />
94+
<ZoomContext.Provider value={this.zoomManager}>
95+
<Page>
96+
<Switch>
97+
<Route path={searchPath} component={SearchTracePage} />
98+
<Route path={traceDiffPath} component={TraceDiff} />
99+
<Route path={tracePath} component={TracePage} />
100+
<Route path={dependenciesPath} component={DependencyGraph} />
101+
<Route path={deepDependenciesPath} component={DeepDependencies} />
102+
<Route path={qualityMetricsPath} component={QualityMetrics} />
103+
<Route path={monitorATMPath} component={MonitorATMPage} />
77104

78-
<Redirect exact path="/" to={searchPath} />
79-
<Redirect exact path={prefixUrl()} to={searchPath} />
80-
<Redirect exact path={prefixUrl('/')} to={searchPath} />
105+
<Redirect exact path="/" to={searchPath} />
106+
<Redirect exact path={prefixUrl()} to={searchPath} />
107+
<Redirect exact path={prefixUrl('/')} to={searchPath} />
81108

82-
<Route component={NotFound} />
83-
</Switch>
84-
</Page>
109+
<Route component={NotFound} />
110+
</Switch>
111+
</Page>
112+
</ZoomContext.Provider>
85113
</ConnectedRouter>
86114
</Provider>
87115
);

‎packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,5 +110,5 @@ limitations under the License.
110110
}
111111

112112
.TracePageHeader--zoomControls {
113-
margin-right: 0.5em;
113+
margin-left: 0.5em;
114114
}

‎packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
200200
Archive Trace
201201
</Button>
202202
)}
203+
<ZoomControls className="TracePageHeader--zoomControls" />
203204
{showStandaloneLink && (
204205
<Link
205206
className="u-tx-inherit ub-nowrap ub-mx2"
@@ -210,7 +211,6 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
210211
<NewWindowIcon isLarge />
211212
</Link>
212213
)}
213-
<ZoomControls className="TracePageHeader--zoomControls" />
214214
</div>
215215
{summaryItems && <LabeledList className="TracePageHeader--overviewItems" items={summaryItems} />}
216216
{!hideMap && !slimView && (

‎packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
import { Button } from 'antd';
2-
import React, { useEffect, useState } from 'react';
2+
import React, { useContext } from 'react';
33
import ButtonGroup from 'antd/lib/button/button-group';
4-
5-
const MIN_ZOOM_LEVEL = 0.7;
6-
const MAX_ZOOM_LEVEL = 1.5;
7-
const ZOOM_FACTOR = 0.1;
4+
import { ZoomContext } from '../../../Contexts';
85

96
type ZoomControlsProps = {
107
className?: string;
118
};
129

1310
const ZoomControls = (props: ZoomControlsProps) => {
14-
const [zoom, setZoom] = useState(document.body.style.zoom || 1);
15-
16-
useEffect(() => {
17-
document.body.style.zoom = zoom;
18-
}, [zoom]);
11+
const zoomManager = useContext(ZoomContext);
1912

2013
return (
2114
<ButtonGroup className={props.className}>
2215
<Button
2316
onClick={() => {
24-
setZoom(Math.min(zoom + ZOOM_FACTOR, MAX_ZOOM_LEVEL));
17+
zoomManager?.zoomOut();
2518
}}
2619
htmlType="button"
27-
icon="zoom-in"
20+
icon="zoom-out"
2821
/>
2922
<Button
3023
onClick={() => {
31-
setZoom(Math.max(zoom - ZOOM_FACTOR, MIN_ZOOM_LEVEL));
24+
zoomManager?.zoomIn();
3225
}}
3326
htmlType="button"
34-
icon="zoom-out"
27+
icon="zoom-in"
3528
/>
3629
</ButtonGroup>
3730
);

‎packages/jaeger-ui/src/utils/ZoomManager.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const MIN_ZOOM_LEVEL = 0.7;
2+
const MAX_ZOOM_LEVEL = 1.5;
3+
const ZOOM_FACTOR = 0.1;
4+
5+
export default class ZoomManager {
6+
zoomLevel: number;
7+
8+
constructor() {
9+
this.zoomLevel = document.body.style.zoom || 1;
10+
}
11+
12+
updateStyles = () => {
13+
document.body.style.zoom = this.zoomLevel;
14+
};
15+
16+
zoomIn = () => {
17+
this.zoomLevel = Math.min(this.zoomLevel + ZOOM_FACTOR, MAX_ZOOM_LEVEL);
18+
this.updateStyles();
19+
};
20+
21+
zoomOut = () => {
22+
this.zoomLevel = Math.max(this.zoomLevel - ZOOM_FACTOR, MIN_ZOOM_LEVEL);
23+
this.updateStyles();
24+
};
25+
}

‎packages/jaeger-ui/typings/custom.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ declare interface Window {
3939
embeddedMode?: unknown;
4040
isUserDefinedJaegerQueryURL?: unknown;
4141
staticPath?: unknown;
42+
enableZoomControls?: unknown
4243
}
4344

4445
declare const __REACT_APP_GA_DEBUG__: string | undefined;

0 commit comments

Comments
 (0)