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/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}, }, ], }; diff --git a/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx b/static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx index 3cfc548165596d..9281931d28b6b7 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,29 @@ 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 +48,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..a3213fc3988177 100644 --- a/static/app/views/insights/common/components/spanDescription.tsx +++ b/static/app/views/insights/common/components/spanDescription.tsx @@ -29,6 +29,8 @@ interface Props { groupId: SpanResponse[SpanFields.SPAN_GROUP]; op: SpanResponse[SpanFields.SPAN_OP]; preliminaryDescription?: string; + shouldClipHeight?: boolean; + showBorder?: boolean; } const formatter = new SQLishFormatter(); @@ -36,6 +38,8 @@ const formatter = new SQLishFormatter(); export function DatabaseSpanDescription({ groupId, preliminaryDescription, + showBorder = true, + shouldClipHeight = true, }: Omit) { const navigate = useNavigate(); const location = useLocation(); @@ -130,17 +134,21 @@ export function DatabaseSpanDescription({ }, [preliminaryDescription, indexedSpan, system]); return ( - + {areIndexedSpansLoading ? ( ) : ( - + {formattedDescription ?? ''} - + )} {!areIndexedSpansLoading && ( @@ -164,19 +172,25 @@ 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 ; } -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; `; @@ -192,3 +206,9 @@ const StyledClippedBox = styled(ClippedBox)` z-index: 1; } `; + +const StyledFullBox = styled('div')` + padding: 0; + height: 100%; + overflow-y: auto; +`;