Browse Source

fix(queries): Fix gap in db summary (#65877)

### Summary
Looks like there was a missing gap in db summary page, this uses
`ModuleLayout` to fix it.
Kev 1 year ago
parent
commit
3bc972d437
1 changed files with 52 additions and 52 deletions
  1. 52 52
      static/app/views/performance/database/databaseSpanSummaryPage.tsx

+ 52 - 52
static/app/views/performance/database/databaseSpanSummaryPage.tsx

@@ -17,6 +17,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {DurationChart} from 'sentry/views/performance/database/durationChart';
 import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
 import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
+import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import {DatabaseSpanDescription} from 'sentry/views/starfish/components/spanDescription';
@@ -151,55 +152,61 @@ function SpanSummaryPage({params}: Props) {
           <FloatingFeedbackWidget />
 
           <HeaderContainer>
-            <PaddedContainer>
-              <PageFilterBar condensed>
-                <EnvironmentPageFilter />
-                <DatePageFilter />
-              </PageFilterBar>
-            </PaddedContainer>
+            <PageFilterBar condensed>
+              <EnvironmentPageFilter />
+              <DatePageFilter />
+            </PageFilterBar>
 
             <SpanMetricsRibbon spanMetrics={span} />
           </HeaderContainer>
 
-          {groupId && (
-            <DescriptionContainer>
-              <DatabaseSpanDescription
-                groupId={groupId}
-                preliminaryDescription={spanMetrics?.['span.description']}
-              />
-            </DescriptionContainer>
-          )}
-
-          <ChartContainer>
-            <ThroughputChart
-              series={throughputData['spm()']}
-              isLoading={isThroughputDataLoading}
-              error={throughputError}
+          <ModuleLayout.Layout>
+            {groupId && (
+              <DescriptionContainer>
+                <DatabaseSpanDescription
+                  groupId={groupId}
+                  preliminaryDescription={spanMetrics?.['span.description']}
+                />
+              </DescriptionContainer>
+            )}
+
+            <ModuleLayout.Full>
+              <ChartContainer>
+                <ThroughputChart
+                  series={throughputData['spm()']}
+                  isLoading={isThroughputDataLoading}
+                  error={throughputError}
+                />
+
+                <DurationChart
+                  series={
+                    durationData[
+                      `${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
+                    ]
+                  }
+                  isLoading={isDurationDataLoading}
+                  error={durationError}
+                />
+              </ChartContainer>
+            </ModuleLayout.Full>
+
+            {span && (
+              <ModuleLayout.Full>
+                <SpanTransactionsTable
+                  span={span}
+                  sort={sort}
+                  endpoint={endpoint}
+                  endpointMethod={endpointMethod}
+                />
+              </ModuleLayout.Full>
+            )}
+
+            <SampleList
+              groupId={span[SpanMetricsField.SPAN_GROUP]}
+              transactionName={transaction}
+              transactionMethod={transactionMethod}
             />
-
-            <DurationChart
-              series={
-                durationData[`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`]
-              }
-              isLoading={isDurationDataLoading}
-              error={durationError}
-            />
-          </ChartContainer>
-
-          {span && (
-            <SpanTransactionsTable
-              span={span}
-              sort={sort}
-              endpoint={endpoint}
-              endpointMethod={endpointMethod}
-            />
-          )}
-
-          <SampleList
-            groupId={span[SpanMetricsField.SPAN_GROUP]}
-            transactionName={transaction}
-            transactionMethod={transactionMethod}
-          />
+          </ModuleLayout.Layout>
         </Layout.Main>
       </Layout.Body>
     </ModulePageProviders>
@@ -211,10 +218,6 @@ const DEFAULT_SORT: Sort = {
   field: 'time_spent_percentage()',
 };
 
-const PaddedContainer = styled('div')`
-  margin-bottom: ${space(2)};
-`;
-
 const ChartContainer = styled('div')`
   display: grid;
   gap: 0;
@@ -232,10 +235,7 @@ const HeaderContainer = styled('div')`
   flex-wrap: wrap;
 `;
 
-const DescriptionContainer = styled('div')`
-  width: 100%;
-  margin-bottom: ${space(2)};
-  font-size: 1rem;
+const DescriptionContainer = styled(ModuleLayout.Full)`
   line-height: 1.2;
 `;