diff --git a/public/app/features/explore/TraceView/TraceView.tsx b/public/app/features/explore/TraceView/TraceView.tsx index 11badf9eca6..ffee1e0d8f3 100644 --- a/public/app/features/explore/TraceView/TraceView.tsx +++ b/public/app/features/explore/TraceView/TraceView.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React, { RefObject, useCallback, useMemo, useState } from 'react'; +import React, { RefObject, useMemo, useState } from 'react'; import { DataFrame, @@ -90,10 +90,6 @@ export function TraceView(props: Props) { * Keeps state of resizable name column width */ const [spanNameColumnWidth, setSpanNameColumnWidth] = useState(0.25); - /** - * State of the top minimap, slim means it is collapsed. - */ - const [slim, setSlim] = useState(false); const [focusedSpanId, createFocusSpanLink] = useFocusSpanLink({ refId: props.dataFrames[0]?.refId, @@ -131,7 +127,6 @@ export function TraceView(props: Props) { }), [props.splitOpenFn, traceToLogsOptions, traceToMetricsOptions, props.dataFrames, createFocusSpanLink, traceProp] ); - const onSlimViewClicked = useCallback(() => setSlim(!slim), [slim]); const timeZone = useSelector((state) => getTimeZone(state.user)); const datasourceType = datasource ? datasource?.type : 'unknown'; @@ -140,12 +135,6 @@ export function TraceView(props: Props) { {props.dataFrames?.length && props.dataFrames[0]?.meta?.preferredVisualisationType === 'trace' && traceProp ? ( <> { expect(screen.getByText(/Reset Selection/)).toBeInTheDocument(); }); - describe('observes the visibility toggles for various UX elements', () => { - it('hides the minimap when hideMap === true', () => { - setup({ hideMap: true } as TracePageHeaderEmbedProps); - expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); - }); + it('shows the summary', () => { + const { rerender } = setup(); - it('hides the summary when hideSummary === true', () => { - const { rerender } = setup({ hideSummary: false } as TracePageHeaderEmbedProps); - expect(screen.queryAllByRole('listitem')).toHaveLength(5); - - rerender(); - expect(screen.queryAllByRole('listitem')).toHaveLength(0); - - rerender( - - ); - expect(screen.queryAllByRole('listitem')).toHaveLength(0); - - rerender( - - ); - expect(screen.queryAllByRole('listitem')).toHaveLength(5); - }); + rerender( + + ); + expect(screen.queryAllByRole('listitem')).toHaveLength(5); }); }); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx index 1a7af88ca81..5d4b04b3b37 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx @@ -18,7 +18,7 @@ import { get as _get, maxBy as _maxBy, values as _values } from 'lodash'; import * as React from 'react'; import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data'; -import { Icon, useStyles2 } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import ExternalLinks from '../common/ExternalLinks'; import LabeledList from '../common/LabeledList'; @@ -69,33 +69,6 @@ const getStyles = (theme: GrafanaTheme2) => { border-color: #ccc; } `, - TracePageHeaderTitleLink: css` - label: TracePageHeaderTitleLink; - align-items: center; - display: flex; - flex: 1; - - &:hover * { - text-decoration: underline; - } - &:hover > *, - &:hover small { - text-decoration: none; - } - /* Adapt styles when changing from a element into button */ - background: transparent; - text-align: left; - border: none; - `, - TracePageHeaderDetailToggle: css` - label: TracePageHeaderDetailToggle; - font-size: 2.5rem; - transition: transform 0.07s ease-out; - `, - TracePageHeaderDetailToggleExpanded: css` - label: TracePageHeaderDetailToggleExpanded; - transform: rotate(90deg); - `, TracePageHeaderTitle: css` label: TracePageHeaderTitle; color: inherit; @@ -105,10 +78,6 @@ const getStyles = (theme: GrafanaTheme2) => { margin: 0 0 0 0.5em; padding-bottom: 0.5em; `, - TracePageHeaderTitleCollapsible: css` - label: TracePageHeaderTitleCollapsible; - margin-left: 0; - `, TracePageHeaderOverviewItems: css` label: TracePageHeaderOverviewItems; border-bottom: 1px solid #e4e4e4; @@ -140,12 +109,6 @@ const getStyles = (theme: GrafanaTheme2) => { }; export type TracePageHeaderEmbedProps = { - canCollapse: boolean; - hideMap: boolean; - hideSummary: boolean; - onSlimViewClicked: () => void; - onTraceGraphViewClicked: () => void; - slimView: boolean; trace: Trace | null; updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void; updateViewRangeTime: TUpdateViewRangeTimeFunction; @@ -194,18 +157,7 @@ export const HEADER_ITEMS = [ ]; export default function TracePageHeader(props: TracePageHeaderEmbedProps) { - const { - canCollapse, - hideMap, - hideSummary, - onSlimViewClicked, - slimView, - trace, - updateNextViewRangeTime, - updateViewRangeTime, - viewRange, - timeZone, - } = props; + const { trace, updateNextViewRangeTime, updateViewRangeTime, viewRange, timeZone } = props; const styles = useStyles2(getStyles); const links = React.useMemo(() => { @@ -219,16 +171,13 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) { return null; } - const summaryItems = - !hideSummary && - !slimView && - HEADER_ITEMS.map((item) => { - const { renderer, ...rest } = item; - return { ...rest, value: renderer(trace, timeZone, styles) }; - }); + const summaryItems = HEADER_ITEMS.map((item) => { + const { renderer, ...rest } = item; + return { ...rest, value: renderer(trace, timeZone, styles) }; + }); const title = ( -

+

{' '} {trace.traceID}

@@ -238,36 +187,16 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
{links && links.length > 0 && } - {canCollapse ? ( - - ) : ( - title - )} + {title}
{summaryItems && } - {!hideMap && !slimView && ( - - )} + +
); }