feat(profile hours): add ui profile hours to overage banners

Author: brendanhsentry

static/gsApp/components/addEventsCTA.tsx

@@ -21,6 +21,7 @@ export type EventType =
   | 'monitorSeat'
   | 'span'
   | 'profileDuration'
+  | 'profileDurationUI'
   | 'uptime';
 
 type Props = {

static/gsApp/components/gsBanner.spec.tsx

@@ -331,6 +331,7 @@ describe('GSBanner', function () {
         attachments: MetricHistoryFixture({usageExceeded: false}),
         monitorSeats: MetricHistoryFixture({usageExceeded: false}),
         profileDuration: MetricHistoryFixture({usageExceeded: false}),
+        profileDurationUI: MetricHistoryFixture({usageExceeded: false}),
       },
       canSelfServe: true,
       productTrials: [
@@ -367,6 +368,7 @@ describe('GSBanner', function () {
         attachments: MetricHistoryFixture({usageExceeded: false}),
         monitorSeats: MetricHistoryFixture({usageExceeded: false}),
         profileDuration: MetricHistoryFixture({usageExceeded: false}),
+        profileDurationUI: MetricHistoryFixture({usageExceeded: false}),
       },
       canSelfServe: true,
       productTrials: [
@@ -528,6 +530,7 @@ describe('GSBanner', function () {
         attachments: MetricHistoryFixture({sentUsageWarning: false}),
         monitorSeats: MetricHistoryFixture({sentUsageWarning: false}),
         profileDuration: MetricHistoryFixture({sentUsageWarning: false}),
+        profileDurationUI: MetricHistoryFixture({sentUsageWarning: false}),
       },
       canSelfServe: true,
       productTrials: [
@@ -564,8 +567,8 @@ describe('GSBanner', function () {
         replays: MetricHistoryFixture({usageExceeded: true}),
         attachments: MetricHistoryFixture({sentUsageWarning: false}),
         monitorSeats: MetricHistoryFixture({sentUsageWarning: false}),
+        profileDurationUI: MetricHistoryFixture({sentUsageWarning: false}),
       },
-      canSelfServe: true,
       productTrials: [
         {
           category: 'replays',
@@ -2112,11 +2115,40 @@ describe('GSBanner', function () {
     });
     const subscription = SubscriptionFixture({
       organization,
-      plan: 'am1_team',
+      plan: 'am3_team',
       categories: {
         errors: MetricHistoryFixture({sentUsageWarning: false}),
         spans: MetricHistoryFixture({sentUsageWarning: false}),
         profileDuration: MetricHistoryFixture({sentUsageWarning: true}), // Warning sent
+        profileDurationUI: MetricHistoryFixture({sentUsageWarning: false}),
+        replays: MetricHistoryFixture({usageExceeded: false}),
+        attachments: MetricHistoryFixture({sentUsageWarning: false}),
+        monitorSeats: MetricHistoryFixture({sentUsageWarning: false}),
+      },
+      canSelfServe: true,
+    });
+    SubscriptionStore.set(organization.slug, subscription);
+
+    render(<GSBanner organization={organization} />, {organization});
+
+    expect(
+      await screen.findByRole('button', {name: /increase reserved limits/i})
+    ).toBeInTheDocument();
+  });
+
+  it('shows overage warning banner for profileDurationUI', async function () {
+    const organization = OrganizationFixture({
+      access: ['org:billing'],
+      slug: 'another-slug-1',
+    });
+    const subscription = SubscriptionFixture({
+      organization,
+      plan: 'am3_team',
+      categories: {
+        errors: MetricHistoryFixture({sentUsageWarning: false}),
+        spans: MetricHistoryFixture({sentUsageWarning: false}),
+        profileDuration: MetricHistoryFixture({sentUsageWarning: false}),
+        profileDurationUI: MetricHistoryFixture({sentUsageWarning: true}),
         replays: MetricHistoryFixture({usageExceeded: false}),
         attachments: MetricHistoryFixture({sentUsageWarning: false}),
         monitorSeats: MetricHistoryFixture({sentUsageWarning: false}),

static/gsApp/components/gsBanner.tsx

@@ -90,6 +90,7 @@ const ALERTS_OFF: Record<EventType, boolean> = {
   monitorSeat: false,
   span: false,
   profileDuration: false,
+  profileDurationUI: false,
   uptime: false,
 };
 
@@ -319,6 +320,7 @@ class GSBanner extends Component<Props, State> {
       monitorSeat: true,
       span: true,
       profileDuration: true,
+      profileDurationUI: true,
       uptime: true,
     },
     overageWarningDismissed: {
@@ -329,6 +331,7 @@ class GSBanner extends Component<Props, State> {
       monitorSeat: true,
       span: true,
       profileDuration: true,
+      profileDurationUI: true,
       uptime: true,
     },
     productTrialDismissed: {
@@ -339,6 +342,7 @@ class GSBanner extends Component<Props, State> {
       monitorSeat: true,
       span: true,
       profileDuration: true,
+      profileDurationUI: true,
       uptime: true,
     },
   };
@@ -669,6 +673,7 @@ class GSBanner extends Component<Props, State> {
           'monitor_seats_overage_alert',
           'spans_overage_alert',
           'profile_duration_overage_alert',
+          'profile_duration_ui_overage_alert',
           'uptime_overage_alert',
 
           // warning alerts
@@ -679,6 +684,7 @@ class GSBanner extends Component<Props, State> {
           'monitor_seats_warning_alert',
           'spans_warning_alert',
           'profile_duration_warning_alert',
+          'profile_duration_ui_warning_alert',
           'uptime_warning_alert',
 
           // product trial alerts
@@ -689,6 +695,7 @@ class GSBanner extends Component<Props, State> {
           'monitor_seats_product_trial_alert',
           'spans_product_trial_alert',
           'profile_duration_product_trial_alert',
+          'profile_duration_ui_product_trial_alert',
           'uptime_product_trial_alert',
         ],
         {
@@ -731,6 +738,9 @@ class GSBanner extends Component<Props, State> {
           profileDuration: promptIsDismissedForBillingPeriod(
             checkResults.profile_duration_overage_alert!
           ),
+          profileDurationUI: promptIsDismissedForBillingPeriod(
+            checkResults.profile_duration_ui_overage_alert!
+          ),
           uptime: promptIsDismissedForBillingPeriod(checkResults.uptime_overage_alert!),
         },
         overageWarningDismissed: {
@@ -749,6 +759,9 @@ class GSBanner extends Component<Props, State> {
           profileDuration: promptIsDismissedForBillingPeriod(
             checkResults.profile_duration_warning_alert!
           ),
+          profileDurationUI: promptIsDismissedForBillingPeriod(
+            checkResults.profile_duration_ui_warning_alert!
+          ),
           uptime: promptIsDismissedForBillingPeriod(checkResults.uptime_warning_alert!),
         },
 
@@ -781,6 +794,10 @@ class GSBanner extends Component<Props, State> {
             checkResults.profile_duration_product_trial_alert!,
             subscription
           ),
+          profileDurationUI: trialPromptIsDismissed(
+            checkResults.profile_duration_ui_product_trial_alert!,
+            subscription
+          ),
           uptime: trialPromptIsDismissed(
             checkResults.uptime_product_trial_alert!,
             subscription
@@ -820,6 +837,9 @@ class GSBanner extends Component<Props, State> {
       profileDuration:
         !this.state.overageAlertDismissed.profileDuration &&
         !!subscription.categories.profileDuration?.usageExceeded,
+      profileDurationUI:
+        !this.state.overageAlertDismissed.profileDurationUI &&
+        !!subscription.categories.profileDurationUI?.usageExceeded,
       uptime:
         !this.state.overageAlertDismissed.uptime &&
         !!subscription.categories.uptime?.usageExceeded,
@@ -857,6 +877,9 @@ class GSBanner extends Component<Props, State> {
       profileDuration:
         !this.state.overageWarningDismissed.profileDuration &&
         !!subscription.categories.profileDuration?.sentUsageWarning,
+      profileDurationUI:
+        !this.state.overageWarningDismissed.profileDurationUI &&
+        !!subscription.categories.profileDurationUI?.sentUsageWarning,
       uptime:
         !this.state.overageWarningDismissed.uptime &&
         !!subscription.categories.uptime?.sentUsageWarning,
@@ -924,6 +947,7 @@ class GSBanner extends Component<Props, State> {
         monitorSeat: `monitor_seats_${key}_alert`,
         span: `spans_${key}_alert`,
         profileDuration: `profile_duration_${key}_alert`,
+        profileDurationUI: `profile_duration_ui_${key}_alert`,
         uptime: `uptime_${key}_alert`,
       };
 
@@ -942,6 +966,7 @@ class GSBanner extends Component<Props, State> {
       monitorSeat: true,
       span: true,
       profileDuration: true,
+      profileDurationUI: true,
       uptime: true,
     };
     // Suppress all warnings and alerts
@@ -1060,7 +1085,7 @@ class GSBanner extends Component<Props, State> {
             })}
           </ExternalLink>
         ),
-        // TODO: Uncomment when we have a continuous profile doc link
+        // TODO(continuous profiling): Uncomment when we have a continuous profile doc link
         // profile: (
         //   <ExternalLink
         //     key="profiles"