From 864166400d17631600e645132cd640e78bd3417c Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Thu, 26 Oct 2023 17:23:55 +0100 Subject: [PATCH] feat: beta tag for sampling controls --- .../settings/SessionRecordingSettings.tsx | 385 +++++++++--------- 1 file changed, 198 insertions(+), 187 deletions(-) diff --git a/frontend/src/scenes/session-recordings/settings/SessionRecordingSettings.tsx b/frontend/src/scenes/session-recordings/settings/SessionRecordingSettings.tsx index 785a5c92ec343..7ff2582193790 100644 --- a/frontend/src/scenes/session-recordings/settings/SessionRecordingSettings.tsx +++ b/frontend/src/scenes/session-recordings/settings/SessionRecordingSettings.tsx @@ -1,6 +1,6 @@ import { useActions, useValues } from 'kea' import { teamLogic } from 'scenes/teamLogic' -import { LemonBanner, LemonButton, LemonSelect, LemonSwitch, Link } from '@posthog/lemon-ui' +import { LemonBanner, LemonButton, LemonSelect, LemonSwitch, LemonTag, Link } from '@posthog/lemon-ui' import { urls } from 'scenes/urls' import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList' import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic' @@ -15,6 +15,202 @@ export type SessionRecordingSettingsProps = { inModal?: boolean } +function ReplayCostControl(): JSX.Element { + const { updateCurrentTeam } = useActions(teamLogic) + const { currentTeam } = useValues(teamLogic) + + return ( + + <> +

+ Replay ingestion controls BETA +

+

+ PostHog offers several tools to let you control the number of recordings you collect and which users + you collect recordings for.{' '} + + Learn more in our docs + +

+ Requires posthog-js version 1.85.0 or greater +
+ Sampling + { + updateCurrentTeam({ session_recording_sample_rate: v }) + }} + dropdownMatchSelectWidth={false} + options={[ + { + label: '100% (no sampling)', + value: '1.00', + }, + { + label: '95%', + value: '0.95', + }, + { + label: '90%', + value: '0.90', + }, + { + label: '85%', + value: '0.85', + }, + { + label: '80%', + value: '0.80', + }, + { + label: '75%', + value: '0.75', + }, + { + label: '70%', + value: '0.70', + }, + { + label: '65%', + value: '0.65', + }, + { + label: '60%', + value: '0.60', + }, + { + label: '55%', + value: '0.55', + }, + { + label: '50%', + value: '0.50', + }, + { + label: '45%', + value: '0.45', + }, + { + label: '40%', + value: '0.40', + }, + { + label: '35%', + value: '0.35', + }, + { + label: '30%', + value: '0.30', + }, + { + label: '25%', + value: '0.25', + }, + { + label: '20%', + value: '0.20', + }, + { + label: '15%', + value: '0.15', + }, + { + label: '10%', + value: '0.10', + }, + { + label: '5%', + value: '0.05', + }, + { + label: '0% (replay disabled)', + value: '0.00', + }, + ]} + value={ + typeof currentTeam?.session_recording_sample_rate === 'string' + ? currentTeam?.session_recording_sample_rate + : '1.00' + } + /> +
+

+ Use this setting to restrict the percentage of sessions that will be recorded. This is useful if you + want to reduce the amount of data you collect. 100% means all sessions will be collected. 50% means + roughly half of sessions will be collected. +

+
+ Minimum session duration (seconds) + { + updateCurrentTeam({ session_recording_minimum_duration_milliseconds: v }) + }} + options={[ + { + label: 'no minimum', + value: null, + }, + { + label: '1', + value: 1000, + }, + { + label: '2', + value: 2000, + }, + { + label: '5', + value: 5000, + }, + { + label: '10', + value: 10000, + }, + { + label: '15', + value: 15000, + }, + ]} + value={currentTeam?.session_recording_minimum_duration_milliseconds} + /> +
+

+ Setting a minimum session duration will ensure that only sessions that last longer than that value + are collected. This helps you avoid collecting sessions that are too short to be useful. +

+
+ Enable recordings using feature flag +
+ { + updateCurrentTeam({ session_recording_linked_flag: { id, key } }) + }} + /> + {currentTeam?.session_recording_linked_flag && ( + } + size="small" + status="stealth" + onClick={() => updateCurrentTeam({ session_recording_linked_flag: null })} + title="Clear selected flag" + /> + )} +
+
+

+ Linking a flag means that recordings will only be collected for users who have the flag enabled. + Only supports release toggles (boolean flags). +

+ + + ) +} + export function SessionRecordingSettings({ inModal = false }: SessionRecordingSettingsProps): JSX.Element { const { updateCurrentTeam } = useActions(teamLogic) const { currentTeam } = useValues(teamLogic) @@ -106,192 +302,7 @@ export function SessionRecordingSettings({ inModal = false }: SessionRecordingSe

- - <> -

Replay ingestion controls

-

- PostHog offers several tools to let you control the number of recordings you collect and which - users you collect recordings for.{' '} - - Learn more in our docs - -

- Requires posthog-js version 1.85.0 or greater -
- Sampling - { - updateCurrentTeam({ session_recording_sample_rate: v }) - }} - dropdownMatchSelectWidth={false} - options={[ - { - label: '100% (no sampling)', - value: '1.00', - }, - { - label: '95%', - value: '0.95', - }, - { - label: '90%', - value: '0.90', - }, - { - label: '85%', - value: '0.85', - }, - { - label: '80%', - value: '0.80', - }, - { - label: '75%', - value: '0.75', - }, - { - label: '70%', - value: '0.70', - }, - { - label: '65%', - value: '0.65', - }, - { - label: '60%', - value: '0.60', - }, - { - label: '55%', - value: '0.55', - }, - { - label: '50%', - value: '0.50', - }, - { - label: '45%', - value: '0.45', - }, - { - label: '40%', - value: '0.40', - }, - { - label: '35%', - value: '0.35', - }, - { - label: '30%', - value: '0.30', - }, - { - label: '25%', - value: '0.25', - }, - { - label: '20%', - value: '0.20', - }, - { - label: '15%', - value: '0.15', - }, - { - label: '10%', - value: '0.10', - }, - { - label: '5%', - value: '0.05', - }, - { - label: '0% (replay disabled)', - value: '0.00', - }, - ]} - value={ - typeof currentTeam?.session_recording_sample_rate === 'string' - ? currentTeam?.session_recording_sample_rate - : '1.00' - } - /> -
-

- Use this setting to restrict the percentage of sessions that will be recorded. This is useful if - you want to reduce the amount of data you collect. 100% means all sessions will be collected. - 50% means roughly half of sessions will be collected. -

-
- Minimum session duration (seconds) - { - updateCurrentTeam({ session_recording_minimum_duration_milliseconds: v }) - }} - options={[ - { - label: 'no minimum', - value: null, - }, - { - label: '1', - value: 1000, - }, - { - label: '2', - value: 2000, - }, - { - label: '5', - value: 5000, - }, - { - label: '10', - value: 10000, - }, - { - label: '15', - value: 15000, - }, - ]} - value={currentTeam?.session_recording_minimum_duration_milliseconds} - /> -
-

- Setting a minimum session duration will ensure that only sessions that last longer than that - value are collected. This helps you avoid collecting sessions that are too short to be useful. -

-
- Enable recordings using feature flag -
- { - updateCurrentTeam({ session_recording_linked_flag: { id, key } }) - }} - /> - {currentTeam?.session_recording_linked_flag && ( - } - size="small" - status="stealth" - onClick={() => updateCurrentTeam({ session_recording_linked_flag: null })} - title="Clear selected flag" - /> - )} -
-
-

- Linking a flag means that recordings will only be collected for users who have the flag enabled. - Only supports release toggles (boolean flags). -

- - + ) }