profiling: allow session expanding (#94633)

Enable visualizing more profiler session data by allowing users to
increase the time range.

Author: JonasBa

static/app/components/profiling/flamegraph/flamegraphToolbar/flamegraphOptionsMenu.tsx

@@ -1,14 +1,16 @@
-import {Fragment, useCallback} from 'react';
+import {Fragment, useCallback, useMemo} from 'react';
 
 import {Button} from 'sentry/components/core/button';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
-import {IconSliders} from 'sentry/icons';
+import {IconChevron, IconSliders} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {CanvasPoolManager} from 'sentry/utils/profiling/canvasScheduler';
 import type {FlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/reducers/flamegraphPreferences';
 import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphPreferences';
 import {useDispatchFlamegraphState} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphState';
+import {useLocation} from 'sentry/utils/useLocation';
 
 interface FlamegraphOptionsMenuProps {
   canvasPoolManager: CanvasPoolManager;
@@ -17,6 +19,7 @@ interface FlamegraphOptionsMenuProps {
 function FlamegraphOptionsMenu({
   canvasPoolManager,
 }: FlamegraphOptionsMenuProps): React.ReactElement {
+  const location = useLocation();
   const {colorCoding} = useFlamegraphPreferences();
   const dispatch = useDispatchFlamegraphState();
 
@@ -34,6 +37,22 @@ function FlamegraphOptionsMenu({
     canvasPoolManager.dispatch('reset zoom', []);
   }, [canvasPoolManager]);
 
+  const continuousLocationDescriptor: {end: string; start: string} | null =
+    useMemo(() => {
+      if (
+        typeof location.query.start !== 'string' ||
+        typeof location.query.end !== 'string' ||
+        typeof location.query.profilerId !== 'string'
+      ) {
+        return null;
+      }
+
+      return {
+        start: new Date(location.query.start).toISOString(),
+        end: new Date(location.query.end).toISOString(),
+      };
+    }, [location.query]);
+
   return (
     <Fragment>
       <Button size="xs" onClick={onResetZoom}>
@@ -48,6 +67,40 @@ function FlamegraphOptionsMenu({
         closeOnSelect={false}
         onChange={onColorChange}
       />
+      {continuousLocationDescriptor ? (
+        <LinkButton
+          to={{
+            ...location,
+            query: {
+              ...location.query,
+              start: new Date(
+                new Date(continuousLocationDescriptor.start).getTime() - 30 * 60 * 1000
+              ).toISOString(),
+            },
+          }}
+          size="xs"
+          icon={<IconChevron direction="left" />}
+          aria-label={t('View Previous 30 Minutes')}
+          title={t('View Previous 30 Minutes')}
+        />
+      ) : null}
+      {continuousLocationDescriptor ? (
+        <LinkButton
+          to={{
+            ...location,
+            query: {
+              ...location.query,
+              end: new Date(
+                new Date(continuousLocationDescriptor.end).getTime() + 30 * 60 * 1000
+              ).toISOString(),
+            },
+          }}
+          size="xs"
+          icon={<IconChevron direction="right" />}
+          aria-label={t('View Next 30 Minutes')}
+          title={t('View Next 30 Minutes')}
+        />
+      ) : null}
     </Fragment>
   );
 }