Add zoom controls to the Trace Search Page

Author: kshmidt-digma

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-right: 0.5em;
+}

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;
@@ -209,6 +210,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             <NewWindowIcon isLarge />
           </Link>
         )}
+        <ZoomControls className="TracePageHeader--zoomControls" />
       </div>
       {summaryItems && <LabeledList className="TracePageHeader--overviewItems" items={summaryItems} />}
       {!hideMap && !slimView && (

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

@@ -0,0 +1,40 @@
+import { Button } from 'antd';
+import React, { useEffect, useState } from 'react';
+import ButtonGroup from 'antd/lib/button/button-group';
+
+const MIN_ZOOM_LEVEL = 0.7;
+const MAX_ZOOM_LEVEL = 1.5;
+const ZOOM_FACTOR = 0.1;
+
+type ZoomControlsProps = {
+  className?: string;
+};
+
+const ZoomControls = (props: ZoomControlsProps) => {
+  const [zoom, setZoom] = useState(document.body.style.zoom || 1);
+
+  useEffect(() => {
+    document.body.style.zoom = zoom;
+  }, [zoom]);
+
+  return (
+    <ButtonGroup className={props.className}>
+      <Button
+        onClick={() => {
+          setZoom(Math.min(zoom + ZOOM_FACTOR, MAX_ZOOM_LEVEL));
+        }}
+        htmlType="button"
+        icon="zoom-in"
+      />
+      <Button
+        onClick={() => {
+          setZoom(Math.max(zoom - ZOOM_FACTOR, MIN_ZOOM_LEVEL));
+        }}
+        htmlType="button"
+        icon="zoom-out"
+      />
+    </ButtonGroup>
+  );
+};
+
+export default ZoomControls;