feat(insights): Add debug panel to saved insights

frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx

@@ -1,7 +1,11 @@
 import { IconCodeInsert, IconCopy } from '@posthog/icons'
+import { ChartConfiguration, ChartDataset } from 'chart.js'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100'
 import { actions, afterMount, kea, path, reducers, selectors, useActions, useValues } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
+import { Chart, ChartItem } from 'lib/Chart'
 import { dayjs } from 'lib/dayjs'
 import { IconRefresh } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -12,7 +16,7 @@ import { LemonTag } from 'lib/lemon-ui/LemonTag'
 import { Link } from 'lib/lemon-ui/Link'
 import { humanizeBytes } from 'lib/utils'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { urls } from 'scenes/urls'
 
 import { CodeSnippet, Language } from '../CodeSnippet'
@@ -27,6 +31,21 @@ export function openCHQueriesDebugModal(): void {
     })
 }
 
+export interface Stats {
+    total_queries: number
+    total_exceptions: number
+    average_query_duration_ms: number | null
+    max_query_duration_ms: number
+    exception_percentage: number | null
+}
+
+interface DataPoint {
+    hour: string
+    successful_queries: number
+    exceptions: number
+    avg_response_time_ms: number
+}
+
 export interface Query {
     /** @example '2023-07-27T10:06:11' */
     timestamp: string
@@ -46,6 +65,12 @@ export interface Query {
     }
 }
 
+export interface DebugResponse {
+    queries: Query[]
+    stats: Stats
+    hourly_stats: DataPoint[]
+}
+
 const debugCHQueriesLogic = kea<debugCHQueriesLogicType>([
     path(['lib', 'components', 'CommandPalette', 'DebugCHQueries']),
     actions({
@@ -59,23 +84,27 @@ const debugCHQueriesLogic = kea<debugCHQueriesLogicType>([
             },
         ],
     }),
-    loaders({
-        queries: [
-            [] as Query[],
+    loaders(({ props }: { props: { insightId: string } }) => ({
+        debugResponse: [
+            {} as DebugResponse,
             {
-                loadQueries: async () => {
-                    return (await api.get('api/debug_ch_queries/')).queries
+                loadDebugResponse: async () => {
+                    const params = new URLSearchParams()
+                    if (props.insightId) {
+                        params.append('insight_id', props.insightId)
+                    }
+                    return await api.get(`api/debug_ch_queries/?${params.toString()}`)
                 },
             },
         ],
-    }),
+    })),
     selectors({
         paths: [
-            (s) => [s.queries],
-            (queries: Query[]): [string, number][] | null => {
-                return queries
+            (s) => [s.debugResponse],
+            (debugResponse: DebugResponse): [string, number][] | null => {
+                return debugResponse.queries
                     ? Object.entries(
-                          queries
+                          debugResponse.queries
                               .map((result) => result.path)
                               .reduce((acc: { [path: string]: number }, val: string) => {
                                   acc[val] = acc[val] === undefined ? 1 : (acc[val] += 1)
@@ -86,40 +115,182 @@ const debugCHQueriesLogic = kea<debugCHQueriesLogicType>([
             },
         ],
         filteredQueries: [
-            (s) => [s.queries, s.pathFilter],
-            (queries: Query[], pathFilter: string | null) => {
-                return pathFilter && queries ? queries.filter((item) => item.path === pathFilter) : queries
+            (s) => [s.debugResponse, s.pathFilter],
+            (debugReponse: DebugResponse, pathFilter: string | null) => {
+                return pathFilter && debugReponse?.queries
+                    ? debugReponse.queries.filter((item) => item.path === pathFilter)
+                    : debugReponse.queries
             },
         ],
     }),
     afterMount(({ actions }) => {
-        actions.loadQueries()
+        actions.loadDebugResponse()
     }),
 ])
 
-function DebugCHQueries(): JSX.Element {
-    const { queriesLoading, filteredQueries, pathFilter, paths } = useValues(debugCHQueriesLogic)
-    const { setPathFilter, loadQueries } = useActions(debugCHQueriesLogic)
+const generateHourlyLabels = (days: number): string[] => {
+    const labels = []
+    const now = dayjs().startOf('hour') // current hour
+    for (let i = 0; i < days * 24; i++) {
+        labels.push(now.subtract(i, 'hour').format('YYYY-MM-DDTHH:00:00'))
+    }
+    return labels.reverse()
+}
+
+const BarChartWithLine: React.FC<{ data: DataPoint[] }> = ({ data }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    const labels = generateHourlyLabels(14)
+
+    useEffect(() => {
+        if (canvasRef.current) {
+            Chart.register(ChartjsPluginStacked100, ChartDataLabels)
+
+            const dataMap = new Map(data.map((d) => [d.hour, d]))
+
+            const successfulQueries = labels.map((label) => dataMap.get(label)?.successful_queries || 0)
+            const exceptions = labels.map((label) => dataMap.get(label)?.exceptions || 0)
+            const avgResponseTime = labels.map((label) => dataMap.get(label)?.avg_response_time_ms || 0)
+
+            const datasets: ChartDataset[] = [
+                {
+                    label: 'Successful Queries',
+                    data: successfulQueries,
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1,
+                    stack: 'Stack 0',
+                },
+                {
+                    label: 'Exceptions',
+                    data: exceptions,
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1,
+                    stack: 'Stack 0',
+                },
+                {
+                    label: 'Avg Response Time (ms)',
+                    data: avgResponseTime,
+                    type: 'line',
+                    fill: false,
+                    borderColor: 'rgba(153, 102, 255, 0.5)',
+                    yAxisID: 'y-axis-2',
+                },
+            ]
+
+            const maxQueryCount = Math.max(...successfulQueries, ...exceptions)
+            const maxResponseTime = Math.max(...avgResponseTime)
+            const options: ChartConfiguration['options'] = {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        display: false,
+                    },
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        max: maxQueryCount * 1.1,
+                    },
+                    'y-axis-2': {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
+                        },
+                        max: maxResponseTime * 2, // Double to have more room for the other bars
+                    },
+                },
+                plugins: {
+                    datalabels: { display: false },
+                },
+            }
+
+            const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
+                type: 'bar',
+                data: { labels, datasets },
+                options,
+                plugins: [ChartDataLabels],
+            })
+
+            return () => newChart.destroy()
+        }
+    }, [data])
+
+    // eslint-disable-next-line react/forbid-dom-props
+    return <canvas ref={canvasRef} style={{ height: '300px', width: '100%' }} />
+}
+
+interface DebugCHQueriesProps {
+    insightId?: number | null
+}
+
+export function DebugCHQueries({ insightId }: DebugCHQueriesProps): JSX.Element {
+    const logic = debugCHQueriesLogic({ insightId })
+    const { debugResponseLoading, filteredQueries, pathFilter, paths, debugResponse } = useValues(logic)
+    const { setPathFilter, loadDebugResponse } = useActions(logic)
 
     return (
         <>
-            <div className="flex gap-4 items-end justify-between mb-4">
+            {!debugResponseLoading && !!debugResponse.hourly_stats ? (
+                <div>
+                    <BarChartWithLine data={debugResponse.hourly_stats} />
+                </div>
+            ) : null}
+            <div className="flex gap-4 items-start justify-between mb-4">
                 <div className="flex flex-wrap gap-2">
-                    {paths?.map(([path, count]) => (
-                        <LemonButton
-                            key={path}
-                            type={pathFilter === path ? 'primary' : 'tertiary'}
-                            size="small"
-                            onClick={() => (pathFilter === path ? setPathFilter(null) : setPathFilter(path))}
-                        >
-                            {path} <span className="ml-0.5 text-muted ligatures-none">({count})</span>
-                        </LemonButton>
-                    ))}
+                    {!debugResponse.stats
+                        ? paths?.map(([path, count]) => (
+                              <LemonButton
+                                  key={path}
+                                  type={pathFilter === path ? 'primary' : 'tertiary'}
+                                  size="small"
+                                  onClick={() => (pathFilter === path ? setPathFilter(null) : setPathFilter(path))}
+                              >
+                                  {path} <span className="ml-0.5 text-muted ligatures-none">({count})</span>
+                              </LemonButton>
+                          ))
+                        : null}
+                    {!debugResponseLoading && !!debugResponse.stats ? (
+                        <div className="flex flex-row space-x-4 p-4 border rounded bg-bg-light">
+                            <div className="flex flex-col items-center">
+                                <span className="text-sm font-bold">last 14 days</span>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <span className="text-xl font-bold">{debugResponse.stats.total_queries}</span>
+                                <span className="text-sm text-gray-600">Total queries</span>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <span className="text-xl font-bold">{debugResponse.stats.total_exceptions}</span>
+                                <span className="text-sm text-gray-600">Total exceptions</span>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <span className="text-xl font-bold">
+                                    {debugResponse.stats.average_query_duration_ms?.toFixed(2)} ms
+                                </span>
+                                <span className="text-sm text-gray-600">Avg query duration</span>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <span className="text-xl font-bold">
+                                    {debugResponse.stats.max_query_duration_ms} ms
+                                </span>
+                                <span className="text-sm text-gray-600">Max query duration</span>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <span className="text-xl font-bold">
+                                    {debugResponse.stats.exception_percentage?.toFixed(2)}%
+                                </span>
+                                <span className="text-sm text-gray-600">Exception %</span>
+                            </div>
+                        </div>
+                    ) : null}
                 </div>
                 <LemonButton
                     icon={<IconRefresh />}
-                    disabledReason={queriesLoading ? 'Loading…' : null}
-                    onClick={() => loadQueries()}
+                    disabledReason={debugResponseLoading ? 'Loading…' : null}
+                    onClick={() => loadDebugResponse()}
                     size="small"
                     type="secondary"
                 >
@@ -352,7 +523,7 @@ function DebugCHQueries(): JSX.Element {
                     },
                 ]}
                 dataSource={filteredQueries}
-                loading={queriesLoading}
+                loading={debugResponseLoading}
                 loadingSkeletonRows={5}
                 pagination={undefined}
                 rowClassName="align-top"

frontend/src/scenes/insights/Insight.tsx

@@ -1,4 +1,5 @@
 import { BindLogic, useActions, useMountedLogic, useValues } from 'kea'
+import { DebugCHQueries } from 'lib/components/CommandPalette/DebugCHQueries'
 import { InsightPageHeader } from 'scenes/insights/InsightPageHeader'
 import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 
@@ -27,7 +28,7 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
     const { insightProps } = useValues(logic)
 
     // insightDataLogic
-    const { query, showQueryEditor } = useValues(insightDataLogic(insightProps))
+    const { query, showQueryEditor, showDebugPanel } = useValues(insightDataLogic(insightProps))
     const { setQuery: setInsightQuery } = useActions(insightDataLogic(insightProps))
 
     // other logics
@@ -48,6 +49,12 @@ export function Insight({ insightId }: InsightSceneProps): JSX.Element {
 
                 {insightMode === ItemMode.Edit && <InsightsNav />}
 
+                {showDebugPanel && (
+                    <div className="mb-4">
+                        <DebugCHQueries insightId={insightProps.cachedInsight?.id} />
+                    </div>
+                )}
+
                 <Query
                     query={isInsightVizNode(query) ? { ...query, full: true } : query}
                     setQuery={insightMode === ItemMode.Edit ? setQuery : undefined}

frontend/src/scenes/insights/InsightPageHeader.tsx

@@ -23,9 +23,11 @@ import { insightLogic } from 'scenes/insights/insightLogic'
 import { InsightSaveButton } from 'scenes/insights/InsightSaveButton'
 import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
 
 import { tagsModel } from '~/models/tagsModel'
 import { DataTableNode, NodeKind } from '~/queries/schema'
@@ -52,12 +54,16 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
     const { duplicateInsight, loadInsights } = useActions(savedInsightsLogic)
 
     // insightDataLogic
-    const { queryChanged, showQueryEditor, hogQL, exportContext } = useValues(insightDataLogic(insightProps))
-    const { toggleQueryEditorPanel } = useActions(insightDataLogic(insightProps))
+    const { queryChanged, showQueryEditor, showDebugPanel, hogQL, exportContext } = useValues(
+        insightDataLogic(insightProps)
+    )
+    const { toggleQueryEditorPanel, toggleDebugPanel } = useActions(insightDataLogic(insightProps))
 
     // other logics
     useMountedLogic(insightCommandLogic(insightProps))
     const { tags } = useValues(tagsModel)
+    const { user } = useValues(userLogic)
+    const { preflight } = useValues(preflightLogic)
     const { currentTeamId } = useValues(teamLogic)
     const { push } = useActions(router)
 
@@ -184,6 +190,19 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                                         fullWidth
                                         label="View source"
                                     />
+                                    {hasDashboardItemId &&
+                                    (user?.is_staff || user?.is_impersonated || !preflight?.cloud) ? (
+                                        <LemonSwitch
+                                            data-attr="toggle-debug-panel"
+                                            className="px-2 py-1"
+                                            checked={showDebugPanel}
+                                            onChange={() => {
+                                                toggleDebugPanel()
+                                            }}
+                                            fullWidth
+                                            label="Debug panel"
+                                        />
+                                    ) : null}
                                     {hogQL && (
                                         <>
                                             <LemonDivider />