♻️ use constant

Author: michellewzhang

static/app/views/insights/sessions/charts/chartWithIssues.tsx

@@ -21,6 +21,7 @@ import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDisco
 import {ModalChartContainer} from 'sentry/views/insights/pages/backend/laravel/styles';
 import {WidgetVisualizationStates} from 'sentry/views/insights/pages/backend/laravel/widgetVisualizationStates';
 import useRecentIssues from 'sentry/views/insights/sessions/queries/useRecentIssues';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function ChartWithIssues({
   project,
@@ -59,7 +60,7 @@ export default function ChartWithIssues({
   if (isLoading) {
     return (
       <Widget
-        height={400}
+        height={SESSION_HEALTH_CHART_HEIGHT}
         Visualization={<TimeSeriesWidgetVisualization.LoadingPlaceholder />}
       />
     );
@@ -94,7 +95,7 @@ export default function ChartWithIssues({
   return (
     <Widget
       Title={<Widget.WidgetTitle title={title} />}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       Visualization={visualization}
       Actions={
         <Widget.WidgetToolbar>

static/app/views/insights/sessions/charts/crashFreeSessionsChart.tsx

@@ -3,6 +3,7 @@ import {t, tct} from 'sentry/locale';
 import {formatSeriesName} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatSeriesName';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import useCrashFreeSessions from 'sentry/views/insights/sessions/queries/useCrashFreeSessions';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function CrashFreeSessionsChart() {
   const {series, releases, isPending, error} = useCrashFreeSessions();
@@ -17,7 +18,7 @@ export default function CrashFreeSessionsChart() {
   return (
     <InsightsLineChartWidget
       title={t('Crash Free Sessions')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={tct(
         'The percent of sessions terminating without a crash. See [link:session status].',
         {

static/app/views/insights/sessions/charts/errorFreeSessionsChart.tsx

@@ -2,6 +2,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import useErrorFreeSessions from 'sentry/views/insights/sessions/queries/useErrorFreeSessions';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function ErrorFreeSessionsChart() {
   const {series, isPending, error} = useErrorFreeSessions();
@@ -13,7 +14,7 @@ export default function ErrorFreeSessionsChart() {
   return (
     <InsightsLineChartWidget
       title={t('Error Free Sessions')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={tct(
         'The percent of sessions terminating without a single error occurring. See [link:session status].',
         {

static/app/views/insights/sessions/charts/releaseSessionCountChart.tsx

@@ -2,6 +2,7 @@ import {t} from 'sentry/locale';
 import {formatSeriesName} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatSeriesName';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import useReleaseSessionCounts from 'sentry/views/insights/sessions/queries/useReleaseSessionCounts';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function ReleaseSessionCountChart() {
   const {series, releases, isPending, error} = useReleaseSessionCounts();
@@ -14,7 +15,7 @@ export default function ReleaseSessionCountChart() {
   return (
     <InsightsLineChartWidget
       title={t('Total Sessions by Release')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={t(
         'The total number of sessions per release. The 5 most recent releases are shown.'
       )}

static/app/views/insights/sessions/charts/releaseSessionPercentageChart.tsx

@@ -2,6 +2,7 @@ import {t} from 'sentry/locale';
 import {formatSeriesName} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatSeriesName';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
 import useReleaseSessionPercentage from 'sentry/views/insights/sessions/queries/useReleaseSessionPercentage';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function ReleaseSessionPercentageChart() {
   const {series, releases, isPending, error} = useReleaseSessionPercentage();
@@ -14,7 +15,7 @@ export default function ReleaseSessionPercentageChart() {
   return (
     <InsightsAreaChartWidget
       title={t('Release Adoption')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={t(
         'The percentage of total sessions that each release accounted for. The 5 most recent releases are shown.'
       )}

static/app/views/insights/sessions/charts/sessionHealthCountChart.tsx

@@ -2,6 +2,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import useSessionHealthBreakdown from 'sentry/views/insights/sessions/queries/useSessionHealthBreakdown';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function SessionHealthCountChart() {
   const {series, isPending, error} = useSessionHealthBreakdown({type: 'count'});
@@ -15,7 +16,7 @@ export default function SessionHealthCountChart() {
 
   return (
     <InsightsLineChartWidget
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       title={t('Session Counts')}
       description={tct(
         'The count of sessions with each health status. See [link:session status].',

static/app/views/insights/sessions/charts/sessionHealthRateChart.tsx

@@ -2,6 +2,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
 import useSessionHealthBreakdown from 'sentry/views/insights/sessions/queries/useSessionHealthBreakdown';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function SessionHealthRateChart() {
   const {series, isPending, error} = useSessionHealthBreakdown({type: 'rate'});
@@ -16,7 +17,7 @@ export default function SessionHealthRateChart() {
   return (
     <InsightsAreaChartWidget
       title={t('Session Health')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={tct(
         'The percent of sessions with each health status. See [link:session status].',
         {

static/app/views/insights/sessions/charts/userHealthCountChart.tsx

@@ -2,6 +2,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import useUserHealthBreakdown from 'sentry/views/insights/sessions/queries/useUserHealthBreakdown';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function UserHealthCountChart() {
   const {series, isPending, error} = useUserHealthBreakdown({type: 'count'});
@@ -15,7 +16,7 @@ export default function UserHealthCountChart() {
 
   return (
     <InsightsLineChartWidget
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       title={t('User Counts')}
       description={tct(
         'Breakdown of total [linkUsers:users], grouped by [linkStatus:health status].',

static/app/views/insights/sessions/charts/userHealthRateChart.tsx

@@ -2,6 +2,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
 import useUserHealthBreakdown from 'sentry/views/insights/sessions/queries/useUserHealthBreakdown';
+import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
 export default function UserHealthRateChart() {
   const {series, isPending, error} = useUserHealthBreakdown({type: 'rate'});
@@ -16,7 +17,7 @@ export default function UserHealthRateChart() {
   return (
     <InsightsAreaChartWidget
       title={t('User Health')}
-      height={400}
+      height={SESSION_HEALTH_CHART_HEIGHT}
       description={tct(
         'The percent of [linkUsers:users] with each [linkStatus:health status].',
         {

static/app/views/insights/sessions/utils/sessions.tsx

@@ -14,3 +14,5 @@ export const getCountStatusSeries = (
   groups.find(group => group.by['session.status'] === status)?.series[
     'count_unique(user)'
   ] ?? [];
+
+export const SESSION_HEALTH_CHART_HEIGHT = 400;