Merge pull request #27 from digma-ai/feature/zoom

Add zoom controls to the Trace Details Page
digma-ai · Jun 21, 2023 · cb4861c · cb4861c
2 parents 261159e + 547108e
commit cb4861c
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 15 deletions.
diff --git a/packages/jaeger-ui/index.html b/packages/jaeger-ui/index.html
@@ -44,6 +44,7 @@
       window.embeddedMode;
       window.isUserDefinedJaegerQueryURL;
       window.staticPath;
+      window.enableZoomControls;
     </script>
   </head>
   <body>

diff --git a/packages/jaeger-ui/src/Contexts.ts 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 | ZoomManager>(null);
diff --git 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 (
       <Provider store={this.store}>
         <ConnectedRouter history={history}>
-          <Page>
-            <Switch>
-              <Route path={searchPath} component={SearchTracePage} />
-              <Route path={traceDiffPath} component={TraceDiff} />
-              <Route path={tracePath} component={TracePage} />
-              <Route path={dependenciesPath} component={DependencyGraph} />
-              <Route path={deepDependenciesPath} component={DeepDependencies} />
-              <Route path={qualityMetricsPath} component={QualityMetrics} />
-              <Route path={monitorATMPath} component={MonitorATMPage} />
+          <ZoomContext.Provider value={this.zoomManager}>
+            <Page>
+              <Switch>
+                <Route path={searchPath} component={SearchTracePage} />
+                <Route path={traceDiffPath} component={TraceDiff} />
+                <Route path={tracePath} component={TracePage} />
+                <Route path={dependenciesPath} component={DependencyGraph} />
+                <Route path={deepDependenciesPath} component={DeepDependencies} />
+                <Route path={qualityMetricsPath} component={QualityMetrics} />
+                <Route path={monitorATMPath} component={MonitorATMPage} />
 
-              <Redirect exact path="/" to={searchPath} />
-              <Redirect exact path={prefixUrl()} to={searchPath} />
-              <Redirect exact path={prefixUrl('/')} to={searchPath} />
+                <Redirect exact path="/" to={searchPath} />
+                <Redirect exact path={prefixUrl()} to={searchPath} />
+                <Redirect exact path={prefixUrl('/')} to={searchPath} />
 
-              <Route component={NotFound} />
-            </Switch>
-          </Page>
+                <Route component={NotFound} />
+              </Switch>
+            </Page>
+          </ZoomContext.Provider>
         </ConnectedRouter>
       </Provider>
     );

diff --git 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
@@ -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
           </Button>
         )}
+        {window.enableZoomControls && <ZoomControls className="TracePageHeader--zoomControls" />}
         {showStandaloneLink && (
           <Link
             className="u-tx-inherit ub-nowrap ub-mx2"

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/ZoomControls.tsx
@@ -0,0 +1,33 @@
+import { Button } from 'antd';
+import React, { useContext } from 'react';
+import ButtonGroup from 'antd/lib/button/button-group';
+import { ZoomContext } from '../../../Contexts';
+
+type ZoomControlsProps = {
+  className?: string;
+};
+
+const ZoomControls = (props: ZoomControlsProps) => {
+  const zoomManager = useContext(ZoomContext);
+
+  return (
+    <ButtonGroup className={props.className}>
+      <Button
+        onClick={() => {
+          zoomManager?.zoomOut();
+        }}
+        htmlType="button"
+        icon="zoom-out"
+      />
+      <Button
+        onClick={() => {
+          zoomManager?.zoomIn();
+        }}
+        htmlType="button"
+        icon="zoom-in"
+      />
+    </ButtonGroup>
+  );
+};
+
+export default ZoomControls;
diff --git a/packages/jaeger-ui/src/utils/ZoomManager.ts 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
@@ -39,6 +39,7 @@ declare interface Window {
   embeddedMode?: unknown;
   isUserDefinedJaegerQueryURL?: unknown;
   staticPath?: unknown;
+  enableZoomControls?: unknown
 }
 
 declare const __REACT_APP_GA_DEBUG__: string | undefined;