Merge branch 'master' into ch-24.3

cypress/e2e/alerts.cy.ts

@@ -1,5 +1,5 @@
 import { decideResponse } from '../fixtures/api/decide'
-import { createInsight } from '../productAnalytics'
+import { createInsight, createInsightWithBreakdown } from '../productAnalytics'
 
 describe('Alerts', () => {
     beforeEach(() => {
@@ -115,4 +115,25 @@ describe('Alerts', () => {
         cy.reload()
         cy.contains('Alert name').should('not.exist')
     })
+
+    it('Should allow creating alerts on trends with breakdowns', () => {
+        createInsightWithBreakdown('insight with breakdown')
+        setInsightDisplayTypeAndSave('Bar chart')
+
+        createAlert('Alert name', '10', '20', 'increases by')
+        cy.reload()
+
+        // Check the alert has the same values as when it was created
+        cy.contains('Alerts').click()
+        cy.get('[data-attr=alert-list-item]').contains('Alert name').click()
+        cy.contains('any breakdown value').should('exist')
+        cy.get('[data-attr=alertForm-name]').should('have.value', 'Alert name')
+        cy.get('[data-attr=alertForm-lower-threshold').should('have.value', '10')
+        cy.get('[data-attr=alertForm-upper-threshold').should('have.value', '20')
+        cy.contains('Delete alert').click()
+        cy.wait(2000)
+
+        cy.reload()
+        cy.contains('Alert name').should('not.exist')
+    })
 })

cypress/productAnalytics/index.ts

@@ -29,6 +29,11 @@ export const insight = {
             }
         })
     },
+    applyBreakdown: (): void => {
+        cy.contains('Add breakdown').click()
+        cy.contains('Browser').click()
+        cy.wait(1000)
+    },
     editName: (insightName: string): void => {
         if (insightName) {
             cy.get('[data-attr="top-bar-name"] button').click()
@@ -207,6 +212,17 @@ export function createInsight(insightName: string): Cypress.Chainable<string> {
     })
 }
 
+export function createInsightWithBreakdown(insightName: string): Cypress.Chainable<string> {
+    savedInsights.createNewInsightOfType('TRENDS')
+    insight.applyBreakdown()
+    insight.editName(insightName)
+    insight.save()
+    // return insight id from the url
+    return cy.url().then((url) => {
+        return url.split('/').at(-1)
+    })
+}
+
 export function duplicateDashboardFromMenu(duplicateTiles = false): void {
     cy.contains('.LemonButton', 'Duplicate').click()
     if (duplicateTiles) {

docker/clickhouse/config.xml

@@ -171,6 +171,14 @@
                 </replica>
             </shard>
         </posthog>
+        <posthog_single_shard>
+            <shard>
+                <replica>
+                    <host>localhost</host>
+                    <port>9000</port>
+                </replica>
+            </shard>
+        </posthog_single_shard>
     </remote_servers>
 
     <remote_url_allow_hosts>

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx

@@ -4,14 +4,15 @@ import {
     IconDatabase,
     IconDecisionTree,
     IconFeatures,
+    IconGraph,
     IconHelmet,
     IconMap,
     IconMessage,
     IconPieChart,
     IconRewindPlay,
     IconStack,
+    IconTestTube,
     IconToggle,
-    IconTrends,
 } from '@posthog/icons'
 import { LemonBanner, LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
@@ -40,7 +41,7 @@ const PRODUCTS = [
     {
         name: 'Product analytics',
         slug: 'product-analytics',
-        icon: <IconTrends className="text-brand-blue h-5 w-5" />,
+        icon: <IconGraph className="text-[#2F80FA] h-5 w-5" />,
     },
     {
         name: 'Web analytics',
@@ -55,7 +56,12 @@ const PRODUCTS = [
     {
         name: 'Feature flags',
         slug: 'feature-flags',
-        icon: <IconToggle className="text-success h-5 w-5" />,
+        icon: <IconToggle className="text-[#30ABC6] h-5 w-5" />,
+    },
+    {
+        name: 'Experiments',
+        slug: 'experiments',
+        icon: <IconTestTube className="text-[#B62AD9] h-5 w-5" />,
     },
     {
         name: 'Surveys',

frontend/src/lib/components/Alerts/AlertsButton.tsx

@@ -35,7 +35,7 @@ export function AlertsButton({ insight, insightLogicProps, text, ...props }: Ale
             onClick={() => push(urls.insightAlerts(insight.short_id!))}
             disabledReason={
                 !areAlertsSupportedForInsight(insight.query)
-                    ? 'Alerts are only available for trends without breakdowns. Change the insight representation to add alerts.'
+                    ? 'Alerts are only available for trends. Change the insight representation to add alerts.'
                     : undefined
             }
             {...props}

frontend/src/lib/components/Alerts/insightAlertsLogic.ts

@@ -4,7 +4,7 @@ import api from 'lib/api'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 import { AlertConditionType, GoalLine, InsightThresholdType } from '~/queries/schema'
-import { getBreakdown, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
+import { isInsightVizNode, isTrendsQuery } from '~/queries/utils'
 import { InsightLogicProps } from '~/types'
 
 import type { insightAlertsLogicType } from './insightAlertsLogicType'
@@ -16,13 +16,7 @@ export interface InsightAlertsLogicProps {
 }
 
 export const areAlertsSupportedForInsight = (query?: Record<string, any> | null): boolean => {
-    return (
-        !!query &&
-        isInsightVizNode(query) &&
-        isTrendsQuery(query.source) &&
-        query.source.trendsFilter !== null &&
-        !getBreakdown(query.source)
-    )
+    return !!query && isInsightVizNode(query) && isTrendsQuery(query.source) && query.source.trendsFilter !== null
 }
 
 export const insightAlertsLogic = kea<insightAlertsLogicType>([

frontend/src/lib/components/Alerts/views/EditAlertModal.tsx

@@ -1,4 +1,11 @@
-import { LemonCheckbox, LemonInput, LemonSegmentedButton, LemonSelect, SpinnerOverlay } from '@posthog/lemon-ui'
+import {
+    LemonBanner,
+    LemonCheckbox,
+    LemonInput,
+    LemonSegmentedButton,
+    LemonSelect,
+    SpinnerOverlay,
+} from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
 import { AlertStateIndicator } from 'lib/components/Alerts/views/ManageAlertsModal'
@@ -85,7 +92,7 @@ export function EditAlertModal({
     const { setAlertFormValue } = useActions(formLogic)
 
     const trendsLogic = trendsDataLogic({ dashboardItemId: insightShortId })
-    const { alertSeries, isNonTimeSeriesDisplay } = useValues(trendsLogic)
+    const { alertSeries, isNonTimeSeriesDisplay, isBreakdownValid } = useValues(trendsLogic)
 
     const creatingNewAlert = alertForm.id === undefined
 
@@ -138,6 +145,12 @@ export function EditAlertModal({
                             <div className="space-y-6">
                                 <h3>Definition</h3>
                                 <div className="space-y-5">
+                                    {isBreakdownValid && (
+                                        <LemonBanner type="warning">
+                                            For trends with breakdown, the alert will fire if any of the breakdown
+                                            values breaches the threshold.
+                                        </LemonBanner>
+                                    )}
                                     <div className="flex gap-4 items-center">
                                         <div>When</div>
                                         <Group name={['config']}>
@@ -146,9 +159,16 @@ export function EditAlertModal({
                                                     fullWidth
                                                     data-attr="alertForm-series-index"
                                                     options={alertSeries?.map(({ event }, index) => ({
-                                                        label: `${alphabet[index]} - ${event}`,
+                                                        label: isBreakdownValid
+                                                            ? 'any breakdown value'
+                                                            : `${alphabet[index]} - ${event}`,
                                                         value: index,
                                                     }))}
+                                                    disabledReason={
+                                                        isBreakdownValid &&
+                                                        `For trends with breakdown, the alert will fire if any of the breakdown
+                                            values breaches the threshold.`
+                                                    }
                                                 />
                                             </LemonField>
                                         </Group>

frontend/src/lib/components/Alerts/views/ManageAlertsModal.tsx

@@ -1,4 +1,5 @@
 import { IconCheck, IconX } from '@posthog/icons'
+import { Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -85,8 +86,12 @@ export function ManageAlertsModal(props: ManageAlertsModalProps): JSX.Element {
                 <div className="mb-4">
                     With alerts, PostHog will monitor your insight and notify you when certain conditions are met. We do
                     not evaluate alerts in real-time, but rather on a schedule (hourly, daily...). Please note that
-                    alerts are in alpha and may not be fully reliable.
+                    alerts are in alpha and may not be fully reliable. <br />
+                    <Link to={urls.alerts()} target="_blank">
+                        View all your alerts here
+                    </Link>
                 </div>
+
                 {alerts.length ? (
                     <div className="space-y-2">
                         <div>

frontend/src/lib/components/Errors/ErrorDisplay.tsx

@@ -141,7 +141,7 @@ function ChainedStackTraces({
                 </LemonBanner>
             )}
             {exceptionList.map(({ stacktrace, value }, index) => {
-                if (stacktrace.type === 'resolved') {
+                if (stacktrace && stacktrace.type === 'resolved') {
                     const { frames } = stacktrace
                     if (!showAllFrames && !frames?.some((frame) => frame.in_app)) {
                         // if we're not showing all frames and there are no in_app frames, skip this exception
@@ -155,8 +155,6 @@ function ChainedStackTraces({
                         </div>
                     )
                 }
-
-                return null
             })}
         </>
     )

frontend/src/lib/components/Errors/stackFrameLogic.ts

@@ -14,7 +14,7 @@ export const stackFrameLogic = kea<stackFrameLogicType>([
                 loadFrameContexts: async ({ frames }: { frames: ErrorTrackingStackFrame[] }) => {
                     const loadedFrameIds = Object.keys(values.frameContexts)
                     const ids = frames
-                        .filter(({ raw_id }) => loadedFrameIds.includes(raw_id))
+                        .filter(({ raw_id }) => !loadedFrameIds.includes(raw_id))
                         .map(({ raw_id }) => raw_id)
                     const response = await api.errorTracking.fetchStackFrames(ids)
                     return { ...values.frameContexts, ...response }

frontend/src/lib/components/Errors/types.ts

@@ -1,5 +1,5 @@
 export interface ErrorTrackingException {
-    stacktrace: ErrorTrackingRawStackTrace | ErrorTrackingResolvedStackTrace
+    stacktrace?: ErrorTrackingRawStackTrace | ErrorTrackingResolvedStackTrace
     module: string
     type: string
     value: string

frontend/src/scenes/surveys/surveyViewViz.tsx

@@ -89,7 +89,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                         {[
                             {
                                 count: seen,
-                                label: 'Shown',
+                                label: 'Unanswered',
                                 classes: `rounded-l ${dismissed === 0 && sent === 0 ? 'rounded-r' : ''}`,
                                 style: { backgroundColor: '#1D4AFF', width: `${seenPercentage}%` },
                             },
@@ -135,7 +135,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                     <div className="w-full flex justify-center">
                         <div className="flex items-center">
                             {[
-                                { count: seen, label: 'Viewed', style: { backgroundColor: '#1D4AFF' } },
+                                { count: seen, label: 'Unanswered', style: { backgroundColor: '#1D4AFF' } },
                                 { count: dismissed, label: 'Dismissed', style: { backgroundColor: '#E3A506' } },
                                 { count: sent, label: 'Submitted', style: { backgroundColor: '#529B08' } },
                             ].map(

frontend/src/scenes/trends/trendsDataLogic.ts

@@ -9,7 +9,16 @@ import {
     BREAKDOWN_OTHER_STRING_LABEL,
 } from 'scenes/insights/utils'
 
-import { EventsNode, InsightQueryNode, LifecycleQuery, MathType, TrendsFilter, TrendsQuery } from '~/queries/schema'
+import {
+    BreakdownFilter,
+    EventsNode,
+    InsightQueryNode,
+    LifecycleQuery,
+    MathType,
+    TrendsFilter,
+    TrendsQuery,
+} from '~/queries/schema'
+import { isValidBreakdown } from '~/queries/utils'
 import {
     ChartDisplayType,
     CountPerActorMathType,
@@ -124,6 +133,11 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
             },
         ],
 
+        isBreakdownValid: [
+            (s) => [s.breakdownFilter],
+            (breakdownFilter: BreakdownFilter | null) => isValidBreakdown(breakdownFilter),
+        ],
+
         indexedResults: [
             (s) => [s.results, s.display, s.lifecycleFilter],
             (results, display, lifecycleFilter): IndexedTrendResult[] => {

package.json

@@ -154,7 +154,7 @@
         "pmtiles": "^2.11.0",
         "postcss": "^8.4.31",
         "postcss-preset-env": "^9.3.0",
-        "posthog-js": "1.187.2",
+        "posthog-js": "1.188.0",
         "posthog-js-lite": "3.0.0",
         "prettier": "^2.8.8",
         "prop-types": "^15.7.2",