feat(replays): added links to console timestamps so the scrubber can jump to those times (#34880)

Closes #34824 

Screenshots: 
As illustrated in the video, you can click on the timestamps and you'll jump to that point in the video.

https://user-images.githubusercontent.com/7014871/169597180-caff2eaa-3b65-49b2-b1cf-1fabce8e979a.mov

static/app/views/replays/detail/console/consoleMessage.tsx

@@ -6,6 +6,8 @@ import DateTime from 'sentry/components/dateTime';
 import AnnotatedText from 'sentry/components/events/meta/annotatedText';
 import {getMeta} from 'sentry/components/events/meta/metaProxy';
 import {Hovercard} from 'sentry/components/hovercard';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
+import {relativeTimeInMs, showPlayerTime} from 'sentry/components/replays/utils';
 import {IconClose, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -66,18 +68,21 @@ function MessageFormatter({breadcrumb}: MessageFormatterProps) {
 
 interface ConsoleMessageProps extends MessageFormatterProps {
   isLast: boolean;
-  relativeTimestamp: string;
+  startTimestamp: number;
 }
-function ConsoleMessage({
-  breadcrumb,
-  isLast,
-  relativeTimestamp = '',
-}: ConsoleMessageProps) {
+function ConsoleMessage({breadcrumb, isLast, startTimestamp = 0}: ConsoleMessageProps) {
   const ICONS = {
     error: <IconClose isCircled size="xs" />,
     warning: <IconWarning size="xs" />,
   };
 
+  const {setCurrentTime, setCurrentHoverTime} = useReplayContext();
+
+  const diff = relativeTimeInMs(breadcrumb.timestamp || '', startTimestamp);
+  const handleOnClick = () => setCurrentTime(diff);
+  const handleOnMouseOver = () => setCurrentHoverTime(diff);
+  const handleOnMouseOut = () => setCurrentHoverTime(undefined);
+
   return (
     <Fragment>
       <Icon isLast={isLast} level={breadcrumb.level}>
@@ -87,8 +92,19 @@ function ConsoleMessage({
         <MessageFormatter breadcrumb={breadcrumb} />
       </Message>
       <ConsoleTimestamp isLast={isLast} level={breadcrumb.level}>
-        <Hovercard body={`${t('Relative Time')}: ${relativeTimestamp}`}>
-          <DateTime date={breadcrumb.timestamp} timeOnly />
+        <Hovercard
+          body={`${t('Relative Time')}: ${showPlayerTime(
+            breadcrumb.timestamp || '',
+            startTimestamp
+          )}`}
+        >
+          <DateTime
+            timeOnly
+            date={breadcrumb.timestamp}
+            onClick={handleOnClick}
+            onMouseOver={handleOnMouseOver}
+            onMouseOut={handleOnMouseOut}
+          />
         </Hovercard>
       </ConsoleTimestamp>
     </Fragment>
@@ -110,6 +126,7 @@ const Common = styled('div')<{isLast: boolean; level: string}>`
 const ConsoleTimestamp = styled(Common)<{isLast: boolean; level: string}>`
   padding: ${space(1)};
   border-left: 1px solid ${p => p.theme.innerBorder};
+  cursor: pointer;
 `;
 
 const Icon = styled(Common)`

static/app/views/replays/detail/console/index.tsx

@@ -4,7 +4,6 @@ import debounce from 'lodash/debounce';
 
 import CompactSelect from 'sentry/components/forms/compactSelect';
 import {Panel} from 'sentry/components/panels';
-import {showPlayerTime} from 'sentry/components/replays/utils';
 import SearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -59,17 +58,16 @@ function Console({breadcrumbs, startTimestamp = 0}: Props) {
 
       {filteredBreadcrumbs.length > 0 ? (
         <ConsoleTable>
-          {filteredBreadcrumbs.map((breadcrumb, i) => (
-            <ConsoleMessage
-              relativeTimestamp={showPlayerTime(
-                breadcrumb.timestamp || '',
-                startTimestamp
-              )}
-              key={i}
-              isLast={i === breadcrumbs.length - 1}
-              breadcrumb={breadcrumb}
-            />
-          ))}
+          {filteredBreadcrumbs.map((breadcrumb, i) => {
+            return (
+              <ConsoleMessage
+                startTimestamp={startTimestamp}
+                key={i}
+                isLast={i === breadcrumbs.length - 1}
+                breadcrumb={breadcrumb}
+              />
+            );
+          })}
         </ConsoleTable>
       ) : (
         <StyledEmptyMessage title={t('No results found.')} />