Trace view scroll to top button (#46077)

* Trace view scroll to top button

* Updated button css selector

* Updates for scrolToTop

* Updated snapshot

* Updated render

* Add smooth scrolling

packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -17,7 +17,7 @@ import { css } from '@emotion/css';
 
 import { isEqual } from 'lodash';
 import memoizeOne from 'memoize-one';
-import { stylesFactory, withTheme2 } from '@grafana/ui';
+import { stylesFactory, withTheme2, ToolbarButton } from '@grafana/ui';
 import { GrafanaTheme2, LinkModel } from '@grafana/data';
 
 import ListView from './ListView';
@@ -38,6 +38,7 @@ import { SpanLinkFunc, TNil } from '../types';
 import { TraceLog, TraceSpan, Trace, TraceKeyValuePair, TraceLink, TraceSpanReference } from '../types/trace';
 import TTraceTimeline from '../types/TTraceTimeline';
 import { PEER_SERVICE } from '../constants/tag-keys';
+import { createRef, RefObject } from 'react';
 
 type TExtractUiFindFromStateReturn = {
   uiFind: string | undefined;
@@ -51,6 +52,18 @@ const getStyles = stylesFactory(() => {
     row: css`
       width: 100%;
     `,
+    scrollToTopButton: css`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      z-index: 1;
+    `,
   };
 });
 
@@ -89,6 +102,7 @@ type TVirtualizedTraceViewOwnProps = {
   scrollElement?: Element;
   focusedSpanId?: string;
   createFocusSpanLink: (traceId: string, spanId: string) => LinkModel;
+  topOfExploreViewRef?: RefObject<HTMLDivElement>;
 };
 
 type VirtualizedTraceViewProps = TVirtualizedTraceViewOwnProps & TExtractUiFindFromStateReturn & TTraceTimeline;
@@ -168,6 +182,7 @@ const memoizedGetClipping = memoizeOne(getClipping, isEqual);
 // export from tests
 export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTraceViewProps> {
   listView: ListView | TNil;
+  topTraceViewRef = createRef<HTMLDivElement>();
 
   constructor(props: VirtualizedTraceViewProps) {
     super(props);
@@ -495,11 +510,16 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
     );
   }
 
+  scrollToTop = () => {
+    const { topOfExploreViewRef } = this.props;
+    topOfExploreViewRef?.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
   render() {
     const styles = getStyles();
     const { scrollElement } = this.props;
     return (
-      <div>
+      <>
         <ListView
           ref={this.setListView}
           dataLength={this.getRowStates().length}
@@ -513,7 +533,14 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
           windowScroller={false}
           scrollElement={scrollElement}
         />
-      </div>
+
+        <ToolbarButton
+          className={styles.scrollToTopButton}
+          onClick={this.scrollToTop}
+          title="Scroll to top"
+          icon="arrow-up"
+        ></ToolbarButton>
+      </>
     );
   }
 }

packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { RefObject } from 'react';
 import { css } from '@emotion/css';
 import { GrafanaTheme2, LinkModel } from '@grafana/data';
 import { stylesFactory, withTheme2 } from '@grafana/ui';
@@ -106,6 +106,7 @@ type TProps = TExtractUiFindFromStateReturn & {
   scrollElement?: Element;
   focusedSpanId?: string;
   createFocusSpanLink: (traceId: string, spanId: string) => LinkModel;
+  topOfExploreViewRef?: RefObject<HTMLDivElement>;
 };
 
 type State = {
@@ -161,6 +162,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
       createLinkToExternalSpan,
       traceTimeline,
       theme,
+      topOfExploreViewRef,
       ...rest
     } = this.props;
     const { trace } = rest;
@@ -191,6 +193,7 @@ export class UnthemedTraceTimelineViewer extends React.PureComponent<TProps, Sta
             {...traceTimeline}
             setSpanNameColumnWidth={setSpanNameColumnWidth}
             currentViewRangeTime={viewRange.time.current}
+            topOfExploreViewRef={topOfExploreViewRef}
           />
         </div>
       </ExternalLinkContext.Provider>