Explore: Unify trace view panel (#70408)

* PanelChrome scales vertically

* Trace View with old Trace View Header works with PanelChrome

* Add top margin

* Remove console.log

* Use contain: 'strict' only when height is passed

* Clean up: use title prop in PanelChrome and everything else should be put under

* Remove test as the title will be passed to PanelChrome

* Remove unused import

* Remove titleWithLinks from PanelChrome

* Make NewTracePageHeader compatible with PanelChrome

* Fix test

* Remove margin

* Remove unused css

* Revert config changes

* Clean up: remove console log and commented out css

* Clean up unused css

* Fix tests

* Revert to a brighter color

* Show links next to duration

* Cleanup

* Remove container style and use default displayMode in PanelChrome

* Clean up

* Revert 'Give feedback' styling

* PanelChrome's width auto scales

* Fix GraphContainer's props

* TraceViewContainer doesn't need a div wrapper

* Remove loading

* Fix build issue

* FIx merge conflict

* Revert old trace page header so the header items shows correctly in dashboards

* Revert to match old trace view header

* Revert NewTracePageHeader so it can show header items in dashboards

* Revert

* Revert tests

* Make 'Give feedback' link aligned vertically

* Remove unused css

* Reduce spacing between title and container in dashboards; remove top padding for NewTracePageHeader

---------

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/features/explore/Graph/GraphContainer.tsx

@@ -18,7 +18,9 @@ import { ExploreGraph } from './ExploreGraph';
 import { ExploreGraphLabel } from './ExploreGraphLabel';
 import { loadGraphStyle } from './utils';
 
-interface Props extends Pick<PanelChromeProps, 'width' | 'height' | 'statusMessage'> {
+interface Props extends Pick<PanelChromeProps, 'statusMessage'> {
+  width: number;
+  height: number;
   data: DataFrame[];
   annotations?: DataFrame[];
   eventBus: EventBus;

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

@@ -1,9 +1,8 @@
-import { css } from '@emotion/css';
 import React, { RefObject, useMemo, useState } from 'react';
 
-import { DataFrame, SplitOpen, PanelData, GrafanaTheme2 } from '@grafana/data';
+import { DataFrame, PanelData, SplitOpen } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { useStyles2 } from '@grafana/ui';
+import { PanelChrome } from '@grafana/ui/src/components/PanelChrome/PanelChrome';
 import { StoreState, useSelector } from 'app/types';
 
 import { TraceView } from './TraceView';
@@ -11,6 +10,7 @@ import TracePageSearchBar from './components/TracePageHeader/SearchBar/TracePage
 import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
 import { useSearch } from './useSearch';
 import { transformDataFrames } from './utils/transform';
+
 interface Props {
   dataFrames: DataFrame[];
   splitOpenFn: SplitOpen;
@@ -20,26 +20,9 @@ interface Props {
   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: ${theme.shape.radius.default};
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 0;
-    padding: ${config.featureToggles.newTraceViewHeader ? 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);
@@ -55,20 +38,25 @@ export function TraceViewContainer(props: Props) {
   }
 
   return (
-    <div className={style.container}>
-      {!config.featureToggles.newTraceViewHeader && (
-        <TracePageSearchBar
-          navigable={true}
-          searchValue={search}
-          setSearch={setSearch}
-          spanFindMatches={spanFindMatches}
-          searchBarSuffix={searchBarSuffix}
-          setSearchBarSuffix={setSearchBarSuffix}
-          focusedSpanIdForSearch={focusedSpanIdForSearch}
-          setFocusedSpanIdForSearch={setFocusedSpanIdForSearch}
-          datasourceType={datasourceType}
-        />
-      )}
+    <PanelChrome
+      padding="none"
+      title="Trace"
+      actions={
+        !config.featureToggles.newTraceViewHeader && (
+          <TracePageSearchBar
+            navigable={true}
+            searchValue={search}
+            setSearch={setSearch}
+            spanFindMatches={spanFindMatches}
+            searchBarSuffix={searchBarSuffix}
+            setSearchBarSuffix={setSearchBarSuffix}
+            focusedSpanIdForSearch={focusedSpanIdForSearch}
+            setFocusedSpanIdForSearch={setFocusedSpanIdForSearch}
+            datasourceType={datasourceType}
+          />
+        )
+      }
+    >
       <TraceView
         exploreId={exploreId}
         dataFrames={dataFrames}
@@ -83,6 +71,6 @@ export function TraceViewContainer(props: Props) {
         topOfViewRef={topOfViewRef}
         topOfViewRefType={TopOfViewRefType.Explore}
       />
-    </div>
+    </PanelChrome>
   );
 }

public/app/features/explore/TraceView/components/TracePageHeader/Actions/ActionButton.tsx

@@ -10,8 +10,6 @@ export const getStyles = (theme: GrafanaTheme2) => {
       label: ActionButton;
       overflow: hidden;
       position: relative;
-      width: 110px;
-      justify-content: center;
       &:after {
         content: '';
         background: ${theme.colors.primary.main};
@@ -46,6 +44,7 @@ export default function ActionButton(props: ActionButtonProps) {
   return (
     <Button
       className={styles.ActionButton}
+      size="sm"
       variant="secondary"
       fill={'outline'}
       type="button"

public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx

@@ -15,8 +15,9 @@ export const getStyles = (theme: GrafanaTheme2) => {
     TracePageActions: css`
       label: TracePageActions;
       display: flex;
+      align-items: center;
+      justify-content: center;
       gap: 4px;
-      margin-top: 2px;
     `,
     feedback: css`
       margin: 6px;

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

@@ -156,7 +156,6 @@ const getNewStyles = (theme: GrafanaTheme2) => {
     header: css`
       label: TracePageHeader;
       background-color: ${theme.colors.background.primary};
-      padding: 0.5em 0 0 0;
       position: sticky;
       top: 0;
       z-index: 5;

public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx

@@ -33,13 +33,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
       position: absolute;
       top: 0;
       right: 0;
-      z-index: ${theme.zIndex.navbarFixed};
-      background: ${theme.colors.background.primary};
-      margin-bottom: -48px;
       padding: 8px;
       margin-right: 2px;
-      border-radius: ${theme.shape.radius.default};
-      box-shadow: ${theme.shadows.z2};
     `,
     TracePageSearchBarBar: css`
       label: TracePageSearchBarBar;
@@ -55,17 +50,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
     `,
     TracePageSearchBarBtn: css`
       label: TracePageSearchBarBtn;
-      transition: 0.2s;
       margin-left: 8px;
     `,
-    TracePageSearchBarBtnDisabled: css`
-      label: TracePageSearchBarBtnDisabled;
-      opacity: 0.5;
-    `,
-    TracePageSearchBarLocateBtn: css`
-      label: TracePageSearchBarLocateBtn;
-      padding: 1px 8px 4px;
-    `,
   };
 };
 
@@ -101,7 +87,6 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
     </span>
   ) : null;
 
-  const btnClass = cx(styles.TracePageSearchBarBtn, { [styles.TracePageSearchBarBtnDisabled]: !searchValue });
   const SearchBarInputProps = {
     className: cx(styles.TracePageSearchBarBar, ubFlexAuto),
     name: 'search',
@@ -182,7 +167,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
           {navigable && (
             <>
               <Button
-                className={btnClass}
+                className={styles.TracePageSearchBarBtn}
                 variant="secondary"
                 disabled={!searchValue}
                 type="button"
@@ -191,7 +176,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
                 onClick={nextResult}
               />
               <Button
-                className={btnClass}
+                className={styles.TracePageSearchBarBtn}
                 variant="secondary"
                 disabled={!searchValue}
                 type="button"

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

@@ -91,11 +91,6 @@ export const getStyles = (theme: GrafanaTheme2) => {
         color: unset;
       }
     `,
-    TracePageHeaderArchiveIcon: css`
-      label: TracePageHeaderArchiveIcon;
-      font-size: 1.78em;
-      margin-right: 0.15em;
-    `,
     TracePageHeaderTraceId: css`
       label: TracePageHeaderTraceId;
       white-space: nowrap;