From 1b68cfb0e34d6d8efb555131bd2820c180d27641 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 27 Nov 2025 14:55:21 -0500 Subject: [PATCH 1/3] wip --- .../detailsWidgetVisualization.tsx | 49 +++++-------------- .../common/components/spanDescription.tsx | 15 ++++-- 2 files changed, 22 insertions(+), 42 deletions(-) diff --git a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx index 3cfc548165596d..76a9873b8e4088 100644 --- a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx @@ -1,10 +1,9 @@ import styled from '@emotion/styled'; -import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText'; import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types'; -import {FullSpanDescription} from 'sentry/views/insights/common/components/fullSpanDescription'; +import {DatabaseSpanDescription} from 'sentry/views/insights/common/components/spanDescription'; import {resolveSpanModule} from 'sentry/views/insights/common/utils/resolveSpanModule'; -import {SpanFields, type SpanResponse} from 'sentry/views/insights/types'; +import {ModuleName, SpanFields, type SpanResponse} from 'sentry/views/insights/types'; import {DEEMPHASIS_COLOR_NAME, LOADING_PLACEHOLDER} from './settings'; @@ -15,39 +14,28 @@ interface DetailsWidgetVisualizationProps { export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProps) { const {span} = props; - const spanOp = span[SpanFields.SPAN_OP]; - const spanDescription = span[SpanFields.SPAN_DESCRIPTION]; + const spanOp = span[SpanFields.SPAN_OP] ?? ''; + const spanDescription = span[SpanFields.SPAN_DESCRIPTION] ?? ''; const spanGroup = span[SpanFields.SPAN_GROUP]; const spanCategory = span[SpanFields.SPAN_CATEGORY]; const moduleName = resolveSpanModule(spanOp, spanCategory); - if (spanOp === 'db') { + if (moduleName === ModuleName.DB) { return ( - ); } - // String values don't support differences, thresholds, max values, or anything else. - return ( - - {spanOp} - {spanDescription} - - ); + return {`${spanOp} - ${spanDescription}`}; } function Wrapper({children}: any) { - return ( - - - {children} - - - ); + return {children}; } // Takes up 100% of the parent. If within flex context, grows to fill. @@ -59,21 +47,6 @@ const GrowingWrapper = styled('div')` width: 100%; `; -const AutoResizeParent = styled('div')` - position: absolute; - inset: 0; - - color: ${p => p.theme.headingColor}; - - container-type: size; - container-name: auto-resize-parent; - - * { - line-height: 1; - text-align: left !important; - } -`; - const LoadingPlaceholder = styled('span')` color: ${p => p.theme[DEEMPHASIS_COLOR_NAME]}; font-size: ${p => p.theme.fontSize.lg}; diff --git a/static/app/views/insights/common/components/spanDescription.tsx b/static/app/views/insights/common/components/spanDescription.tsx index 6beb4b522a3366..af894fe81d1757 100644 --- a/static/app/views/insights/common/components/spanDescription.tsx +++ b/static/app/views/insights/common/components/spanDescription.tsx @@ -29,6 +29,7 @@ interface Props { groupId: SpanResponse[SpanFields.SPAN_GROUP]; op: SpanResponse[SpanFields.SPAN_OP]; preliminaryDescription?: string; + showBorder?: boolean; } const formatter = new SQLishFormatter(); @@ -36,6 +37,7 @@ const formatter = new SQLishFormatter(); export function DatabaseSpanDescription({ groupId, preliminaryDescription, + showBorder = true, }: Omit) { const navigate = useNavigate(); const location = useLocation(); @@ -130,7 +132,7 @@ export function DatabaseSpanDescription({ }, [preliminaryDescription, indexedSpan, system]); return ( - + {areIndexedSpansLoading ? ( @@ -174,9 +176,12 @@ function QueryClippedBox(props: any) { return ; } -const Frame = styled('div')` - border: solid 1px ${p => p.theme.border}; - border-radius: ${p => p.theme.borderRadius}; +const Frame = styled('div')<{showBorder: boolean}>` + display: flex; + flex-direction: column; + height: 100%; + border: ${p => (p.showBorder ? `solid 1px ${p.theme.border}` : 'none')}; + border-radius: ${p => (p.showBorder ? p.theme.borderRadius : '0')}; overflow: hidden; `; @@ -187,6 +192,8 @@ const WithPadding = styled('div')` const StyledClippedBox = styled(ClippedBox)` padding: 0; + height: 100%; + background: ${p => p.theme.backgroundSecondary}; > div > div { z-index: 1; From df4fc867af496da5d9800674d7c995f49047a9a0 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 27 Nov 2025 15:23:06 -0500 Subject: [PATCH 2/3] make db description look nicer --- static/app/components/core/code/codeBlock.tsx | 2 ++ .../detailsWidgetVisualization.tsx | 1 + .../common/components/spanDescription.tsx | 27 ++++++++++++++----- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/static/app/components/core/code/codeBlock.tsx b/static/app/components/core/code/codeBlock.tsx index 5d438e7f4da68c..705a0933a25440 100644 --- a/static/app/components/core/code/codeBlock.tsx +++ b/static/app/components/core/code/codeBlock.tsx @@ -219,11 +219,13 @@ const FlexSpacer = styled('div')` const Wrapper = styled('div')<{isRounded: boolean}>` position: relative; + height: 100%; background: var(--prism-block-background); border-radius: ${p => (p.isRounded ? p.theme.borderRadius : '0px')}; pre { margin: 0; + height: 100%; } &[data-render-inline='true'] pre { diff --git a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx index 76a9873b8e4088..9281931d28b6b7 100644 --- a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx @@ -25,6 +25,7 @@ export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProp return ( diff --git a/static/app/views/insights/common/components/spanDescription.tsx b/static/app/views/insights/common/components/spanDescription.tsx index af894fe81d1757..a3213fc3988177 100644 --- a/static/app/views/insights/common/components/spanDescription.tsx +++ b/static/app/views/insights/common/components/spanDescription.tsx @@ -29,6 +29,7 @@ interface Props { groupId: SpanResponse[SpanFields.SPAN_GROUP]; op: SpanResponse[SpanFields.SPAN_OP]; preliminaryDescription?: string; + shouldClipHeight?: boolean; showBorder?: boolean; } @@ -38,6 +39,7 @@ export function DatabaseSpanDescription({ groupId, preliminaryDescription, showBorder = true, + shouldClipHeight = true, }: Omit) { const navigate = useNavigate(); const location = useLocation(); @@ -138,11 +140,15 @@ export function DatabaseSpanDescription({ ) : ( - + {formattedDescription ?? ''} - + )} {!areIndexedSpansLoading && ( @@ -166,13 +172,16 @@ export function DatabaseSpanDescription({ ); } -function QueryClippedBox(props: any) { - const {isExpanded, children} = props; +function QueryWrapper(props: any) { + const {isExpanded, children, shouldClipHeight} = props; + + if (!shouldClipHeight) { + return {children}; + } if (isExpanded) { return children; } - return ; } @@ -192,10 +201,14 @@ const WithPadding = styled('div')` const StyledClippedBox = styled(ClippedBox)` padding: 0; - height: 100%; - background: ${p => p.theme.backgroundSecondary}; > div > div { z-index: 1; } `; + +const StyledFullBox = styled('div')` + padding: 0; + height: 100%; + overflow-y: auto; +`; From b77f1d8f185ecb702b0e64ba6c5ef60602d821a6 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 27 Nov 2025 15:30:20 -0500 Subject: [PATCH 3/3] add query summary widget --- .../prebuiltConfigs/queries/querySummary.ts | 36 +++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/static/app/views/dashboards/utils/prebuiltConfigs/queries/querySummary.ts b/static/app/views/dashboards/utils/prebuiltConfigs/queries/querySummary.ts index 9912547b4a6d5f..80d416815ba619 100644 --- a/static/app/views/dashboards/utils/prebuiltConfigs/queries/querySummary.ts +++ b/static/app/views/dashboards/utils/prebuiltConfigs/queries/querySummary.ts @@ -45,7 +45,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { }, ], widgetType: WidgetType.SPANS, - layout: {w: 2, h: 1, x: 2, y: 0, minH: 1}, + layout: {y: 0, x: 2, h: 1, w: 2, minH: 1}, }, { id: 'metrics-duration', @@ -66,7 +66,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { }, ], widgetType: WidgetType.SPANS, - layout: {w: 2, h: 1, x: 0, y: 0, minH: 1}, + layout: {y: 0, x: 0, h: 1, w: 2, minH: 1}, }, { id: 'metrics-time-spent', @@ -87,7 +87,31 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { }, ], widgetType: WidgetType.SPANS, - layout: {w: 2, h: 1, x: 4, y: 0, minH: 1}, + layout: {y: 0, x: 4, h: 1, w: 2, minH: 1}, + }, + { + id: 'example-query', + title: 'Example Query', + description: '', + displayType: DisplayType.DETAILS, + thresholds: null, + interval: '1h', + queries: [ + { + name: '', + fields: ['id', 'span.op', 'span.group', 'span.description', 'span.category'], + aggregates: [], + columns: ['id', 'span.op', 'span.group', 'span.description', 'span.category'], + fieldAliases: [], + conditions: '', + orderby: 'id', + onDemand: [], + linkedDashboards: [], + }, + ], + limit: 1, + widgetType: WidgetType.SPANS, + layout: {y: 1, x: 0, h: 2, w: 6, minH: 2}, }, { id: 'transactions-with-query', @@ -111,7 +135,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { }, ], widgetType: WidgetType.SPANS, - layout: {w: 6, h: 2, x: 0, y: 3, minH: 2}, + layout: {y: 5, x: 0, h: 2, w: 6, minH: 2}, }, { id: 'metrics-throughput-line', @@ -135,7 +159,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { }, ], widgetType: WidgetType.SPANS, - layout: {w: 3, h: 2, x: 0, y: 1, minH: 2}, + layout: {y: 3, x: 0, h: 2, w: 3, minH: 2}, }, { id: 'metrics-duration-line', @@ -158,7 +182,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = { isHidden: false, }, ], - layout: {w: 3, h: 2, x: 3, y: 1, minH: 2}, + layout: {y: 3, x: 3, h: 2, w: 3, minH: 2}, }, ], };