Trace View: Sticky trace view header (#64236)

* Sticky trace view header. Remove title from trace view container.

* Set background color of header as primary

* Remove search bar from trace view in dashboards when toggle is enabled

public/app/features/explore/TraceView/TraceViewContainer.tsx

@@ -1,7 +1,9 @@
+import { css } from '@emotion/css';
 import React, { RefObject, useMemo, useState } from 'react';
 
-import { DataFrame, SplitOpen, PanelData } from '@grafana/data';
-import { Collapse } from '@grafana/ui';
+import { DataFrame, SplitOpen, PanelData, GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
 import { StoreState, useSelector } from 'app/types';
 import { ExploreId } from 'app/types/explore';
 
@@ -18,9 +20,27 @@ interface Props {
   queryResponse: PanelData;
   topOfViewRef: RefObject<HTMLDivElement>;
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    label: container;
+    margin-bottom: ${theme.spacing(1)};
+    background-color: ${theme.colors.background.primary};
+    border: 1px solid ${theme.colors.border.medium};
+    position: relative;
+    border-radius: 3px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    padding: ${config.featureToggles.newTraceView ? 0 : theme.spacing(theme.components.panel.padding)};
+  `,
+});
+
 export function TraceViewContainer(props: Props) {
   // At this point we only show single trace
   const frame = props.dataFrames[0];
+  const style = useStyles2(getStyles);
   const { dataFrames, splitOpenFn, exploreId, scrollElement, topOfViewRef, queryResponse } = props;
   const traceProp = useMemo(() => transformDataFrames(frame), [frame]);
   const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);
@@ -36,18 +56,20 @@ export function TraceViewContainer(props: Props) {
   }
 
   return (
-    <Collapse label="Trace View" isOpen>
-      <TracePageSearchBar
-        navigable={true}
-        searchValue={search}
-        setSearch={setSearch}
-        spanFindMatches={spanFindMatches}
-        searchBarSuffix={searchBarSuffix}
-        setSearchBarSuffix={setSearchBarSuffix}
-        focusedSpanIdForSearch={focusedSpanIdForSearch}
-        setFocusedSpanIdForSearch={setFocusedSpanIdForSearch}
-        datasourceType={datasourceType}
-      />
+    <div className={style.container}>
+      {!config.featureToggles.newTraceView && (
+        <TracePageSearchBar
+          navigable={true}
+          searchValue={search}
+          setSearch={setSearch}
+          spanFindMatches={spanFindMatches}
+          searchBarSuffix={searchBarSuffix}
+          setSearchBarSuffix={setSearchBarSuffix}
+          focusedSpanIdForSearch={focusedSpanIdForSearch}
+          setFocusedSpanIdForSearch={setFocusedSpanIdForSearch}
+          datasourceType={datasourceType}
+        />
+      )}
       <TraceView
         exploreId={exploreId}
         dataFrames={dataFrames}
@@ -62,6 +84,6 @@ export function TraceViewContainer(props: Props) {
         topOfViewRef={topOfViewRef}
         topOfViewRefType={TopOfViewRefType.Explore}
       />
-    </Collapse>
+    </div>
   );
 }

public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageHeader.tsx

@@ -14,11 +14,12 @@
 
 import { css } from '@emotion/css';
 import cx from 'classnames';
-import { get as _get, maxBy as _maxBy, values as _values } from 'lodash';
 import * as React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { Badge, BadgeColor, Tooltip, useStyles2 } from '@grafana/ui';
 
+import { autoColor } from '../Theme';
 import ExternalLinks from '../common/ExternalLinks';
 import TraceName from '../common/TraceName';
 import { getTraceLinks } from '../model/link-patterns';
@@ -28,7 +29,7 @@ import { formatDuration } from '../utils/date';
 import SpanGraph from './SpanGraph';
 import { TracePageHeaderEmbedProps, timestamp, getStyles } from './TracePageHeader';
 
-const getNewStyles = () => {
+const getNewStyles = (theme: GrafanaTheme2) => {
   return {
     subtitle: css`
       flex: 1;
@@ -49,6 +50,17 @@ const getNewStyles = () => {
     divider: css`
       margin: 0 0.75em;
     `,
+    header: css`
+      label: TracePageHeader;
+      background-color: ${theme.colors.background.primary};
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      padding: 10px 5px 0 5px;
+      & > :last-child {
+        border-bottom: 1px solid ${autoColor(theme, '#ccc')};
+      }
+    `,
   };
 };
 
@@ -89,7 +101,7 @@ export function NewTracePageHeader(props: TracePageHeaderEmbedProps) {
   }
 
   return (
-    <header className={styles.TracePageHeader}>
+    <header className={styles.header}>
       <div className={styles.TracePageHeaderTitleRow}>
         {links && links.length > 0 && <ExternalLinks links={links} className={styles.TracePageHeaderBack} />}
         {title}

public/app/plugins/panel/traces/TracesPanel.tsx

@@ -3,7 +3,7 @@ import React, { useMemo, useState, createRef } from 'react';
 import { useAsync } from 'react-use';
 
 import { PanelProps } from '@grafana/data';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { config, getDataSourceSrv } from '@grafana/runtime';
 import { TraceView } from 'app/features/explore/TraceView/TraceView';
 import TracePageSearchBar from 'app/features/explore/TraceView/components/TracePageHeader/TracePageSearchBar';
 import { TopOfViewRefType } from 'app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView';
@@ -40,7 +40,7 @@ export const TracesPanel: React.FunctionComponent<PanelProps> = ({ data }) => {
   return (
     <div className={styles.wrapper}>
       <div ref={topOfViewRef}></div>
-      {data.series[0]?.meta?.preferredVisualisationType === 'trace' ? (
+      {data.series[0]?.meta?.preferredVisualisationType === 'trace' && !config.featureToggles.newTraceView ? (
         <TracePageSearchBar
           navigable={true}
           searchValue={search}