feat: error tracking filtering (#22988)

PostHog · Jun 17, 2024 · e3481ae · e3481ae
1 parent cbc7e88
commit e3481ae
Show file tree

Hide file tree

Showing 15 changed files with 255 additions and 111 deletions.
diff --git a/frontend/__snapshots__/filters-universal-filters--default--dark.png b/frontend/__snapshots__/filters-universal-filters--default--dark.png
diff --git a/frontend/__snapshots__/filters-universal-filters--default--light.png b/frontend/__snapshots__/filters-universal-filters--default--light.png
diff --git a/frontend/src/lib/components/UniversalFilters/UniversalFilters.tsx b/frontend/src/lib/components/UniversalFilters/UniversalFilters.tsx
@@ -1,5 +1,5 @@
 import { IconPlusSmall } from '@posthog/icons'
-import { LemonButton, LemonDropdown, Popover } from '@posthog/lemon-ui'
+import { LemonButton, LemonButtonProps, LemonDropdown, Popover } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { useState } from 'react'
 
@@ -132,7 +132,7 @@ const Value = ({
     )
 }
 
-const AddFilterButton = (): JSX.Element => {
+const AddFilterButton = (props: Omit<LemonButtonProps, 'onClick' | 'sideAction' | 'icon'>): JSX.Element => {
     const [dropdownOpen, setDropdownOpen] = useState<boolean>(false)
 
     const { taxonomicGroupTypes } = useValues(universalFiltersLogic)
@@ -153,11 +153,10 @@ const AddFilterButton = (): JSX.Element => {
             onClickOutside={() => setDropdownOpen(false)}
         >
             <LemonButton
-                type="secondary"
-                size="small"
                 icon={<IconPlusSmall />}
                 sideIcon={null}
                 onClick={() => setDropdownOpen(!dropdownOpen)}
+                {...props}
             >
                 Add filter
             </LemonButton>

diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -34,7 +34,7 @@
 
         &.LemonSwitch--small {
             gap: 0.5rem;
-            min-height: 2rem;
+            min-height: calc(1.875rem + 3px); // Small size button height + button shadow height
             padding: 0 0.5rem;
         }
     }

diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx
@@ -12,6 +12,7 @@ export interface LemonSwitchProps {
     labelClassName?: string
     id?: string
     fullWidth?: boolean
+    size?: 'small' | 'medium'
     bordered?: boolean
     disabled?: boolean
     /** Like plain `disabled`, except we enforce a reason to be shown in the tooltip. */
@@ -34,6 +35,7 @@ export const LemonSwitch: React.FunctionComponent<LemonSwitchProps & React.RefAt
             checked,
             fullWidth,
             bordered,
+            size = 'medium',
             disabled,
             disabledReason,
             label,
@@ -94,7 +96,7 @@ export const LemonSwitch: React.FunctionComponent<LemonSwitchProps & React.RefAt
         return (
             <div
                 ref={ref}
-                className={clsx('LemonSwitch', className, {
+                className={clsx('LemonSwitch', className, `LemonSwitch--${size}`, {
                     'LemonSwitch--checked': checked,
                     'LemonSwitch--active': isActive,
                     'LemonSwitch--bordered': bordered,

diff --git a/frontend/src/queries/nodes/DataTable/renderColumn.tsx b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
@@ -110,17 +110,16 @@ export function renderColumn(
 
         if (value === '$autocapture' && eventRecord) {
             return autoCaptureEventToDescription(eventRecord)
-        } else {
-            const content = <PropertyKeyInfo value={value} type={TaxonomicFilterGroupType.Events} />
-            const $sentry_url = eventRecord?.properties?.$sentry_url
-            return $sentry_url ? (
-                <Link to={$sentry_url} target="_blank">
-                    {content}
-                </Link>
-            ) : (
-                content
-            )
         }
+        const content = <PropertyKeyInfo value={value} type={TaxonomicFilterGroupType.Events} />
+        const $sentry_url = eventRecord?.properties?.$sentry_url
+        return $sentry_url ? (
+            <Link to={$sentry_url} target="_blank">
+                {content}
+            </Link>
+        ) : (
+            content
+        )
     } else if (key === 'timestamp' || key === 'created_at' || key === 'session_start' || key === 'session_end') {
         return <TZLabel time={value} showSeconds />
     } else if (!Array.isArray(record) && key.startsWith('properties.')) {
@@ -250,6 +249,9 @@ export function renderColumn(
         const columnName = trimQuotes(key.substring(16)) // 16 = "context.columns.".length
         const Component = context?.columns?.[columnName]?.render
         return Component ? <Component record={record} columnName={columnName} value={value} query={query} /> : ''
+    } else if (context?.columns?.[key]) {
+        const Component = context?.columns?.[key]?.render
+        return Component ? <Component record={record} columnName={key} value={value} query={query} /> : ''
     } else if (key === 'id' && (isPersonsNode(query.source) || isActorsQuery(query.source))) {
         return (
             <CopyToClipboardInline
@@ -263,25 +265,18 @@ export function renderColumn(
     } else if (key.startsWith('user.') && isTimeToSeeDataSessionsQuery(query.source)) {
         const [parent, child] = key.split('.')
         return typeof record === 'object' ? record[parent][child] : 'unknown'
-    } else {
-        if (typeof value === 'object') {
-            return <JSONViewer src={value} name={null} collapsed={Object.keys(value).length > 10 ? 0 : 1} />
-        } else if (
-            typeof value === 'string' &&
-            ((value.startsWith('{') && value.endsWith('}')) || (value.startsWith('[') && value.endsWith(']')))
-        ) {
-            try {
-                return (
-                    <JSONViewer
-                        src={JSON.parse(value)}
-                        name={null}
-                        collapsed={Object.keys(value).length > 10 ? 0 : 1}
-                    />
-                )
-            } catch (e) {
-                // do nothing
-            }
+    }
+    if (typeof value === 'object') {
+        return <JSONViewer src={value} name={null} collapsed={Object.keys(value).length > 10 ? 0 : 1} />
+    } else if (
+        typeof value === 'string' &&
+        ((value.startsWith('{') && value.endsWith('}')) || (value.startsWith('[') && value.endsWith(']')))
+    ) {
+        try {
+            return <JSONViewer src={JSON.parse(value)} name={null} collapsed={Object.keys(value).length > 10 ? 0 : 1} />
+        } catch (e) {
+            // do nothing
         }
-        return String(value)
     }
+    return String(value)
 }
diff --git a/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx b/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx
@@ -10,12 +10,12 @@ import { isHogQLQuery, trimQuotes } from '~/queries/utils'
 
 export interface ColumnMeta {
     title?: JSX.Element | string
-    width?: number
+    width?: string | number
     align?: 'left' | 'right' | 'center'
 }
 
 export function renderColumnMeta(key: string, query: DataTableNode, context?: QueryContext): ColumnMeta {
-    let width: number | undefined
+    let width: string | number | undefined
     let title: JSX.Element | string | undefined
     const queryFeatures = getQueryFeatures(query.source)
     let align: ColumnMeta['align']
@@ -66,6 +66,12 @@ export function renderColumnMeta(key: string, query: DataTableNode, context?: Qu
         title = queryFeatures.has(QueryFeature.selectAndOrderByColumns) ? extractExpressionComment(key) : key
     }
 
+    const specifiedWidth = context?.columns?.[key]?.width
+
+    if (specifiedWidth) {
+        width = specifiedWidth
+    }
+
     if (queryFeatures.has(QueryFeature.selectAndOrderByColumns) && !query.allowSorting) {
         const sortKey = queryFeatures.has(QueryFeature.selectAndOrderByColumns)
             ? (query.source as EventsQuery)?.orderBy?.[0]

diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
@@ -2804,6 +2804,10 @@
             "enum": ["actions", "events", "data_warehouse", "new_entity"],
             "type": "string"
         },
+        "ErrorTrackingOrder": {
+            "enum": ["last_seen", "first_seen", "unique_occurrences", "unique_users", "unique_sessions"],
+            "type": "string"
+        },
         "EventDefinition": {
             "additionalProperties": false,
             "properties": {

diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
@@ -1189,6 +1189,8 @@ export interface WebTopClicksQueryResponse extends AnalyticsQueryResponseBase<un
 
 export type CachedWebTopClicksQueryResponse = CachedQueryResponse<WebTopClicksQueryResponse>
 
+export type ErrorTrackingOrder = 'last_seen' | 'first_seen' | 'unique_occurrences' | 'unique_users' | 'unique_sessions'
+
 export enum WebStatsBreakdown {
     Page = 'Page',
     InitialPage = 'InitialPage',

diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
@@ -18,7 +18,7 @@ export interface QueryContext {
     rowProps?: (record: unknown) => Omit<HTMLProps<HTMLTableRowElement>, 'key'>
     /** chart-specific rendering context **/
     chartRenderingMetadata?: ChartRenderingMetadata
-    /** Wether queries should always be refreshed. */
+    /** Whether queries should always be refreshed. */
     alwaysRefresh?: boolean
 }
 
@@ -49,4 +49,5 @@ interface QueryContextColumn {
     renderTitle?: QueryContextColumnTitleComponent
     render?: QueryContextColumnComponent
     align?: 'left' | 'right' | 'center' // default is left
+    width?: string
 }