Merge branch 'master' into fix-none-comparision

frontend/src/lib/api.ts

@@ -13,6 +13,9 @@ import {
     ActionType,
     ActivityScope,
     AlertType,
+    AppMetricsTotalsV2Response,
+    AppMetricsV2RequestParams,
+    AppMetricsV2Response,
     BatchExportConfiguration,
     BatchExportRun,
     CohortType,
@@ -1626,6 +1629,18 @@ const api = {
         ): Promise<PaginatedResponse<LogEntry>> {
             return await new ApiRequest().hogFunction(id).withAction('logs').withQueryString(params).get()
         },
+        async metrics(
+            id: HogFunctionType['id'],
+            params: AppMetricsV2RequestParams = {}
+        ): Promise<AppMetricsV2Response> {
+            return await new ApiRequest().hogFunction(id).withAction('metrics').withQueryString(params).get()
+        },
+        async metricsTotals(
+            id: HogFunctionType['id'],
+            params: Partial<AppMetricsV2RequestParams> = {}
+        ): Promise<AppMetricsTotalsV2Response> {
+            return await new ApiRequest().hogFunction(id).withAction('metrics/totals').withQueryString(params).get()
+        },
 
         async listTemplates(): Promise<PaginatedResponse<HogFunctionTemplateType>> {
             return await new ApiRequest().hogFunctionTemplates().get()

frontend/src/scenes/pipeline/AppMetricSparkLine.tsx

@@ -1,7 +1,9 @@
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { Sparkline, SparklineTimeSeries } from 'lib/components/Sparkline'
+import { useEffect } from 'react'
 
 import { pipelineNodeMetricsLogic } from './pipelineNodeMetricsLogic'
+import { pipelineNodeMetricsV2Logic } from './pipelineNodeMetricsV2Logic'
 import { PipelineBackend, PipelineNode } from './types'
 
 export function AppMetricSparkLine({ pipelineNode }: { pipelineNode: PipelineNode }): JSX.Element {
@@ -34,3 +36,28 @@ export function AppMetricSparkLine({ pipelineNode }: { pipelineNode: PipelineNod
     }
     return <Sparkline loading={appMetricsResponse === null} labels={dates} data={displayData} className="max-w-24" />
 }
+
+export function AppMetricSparkLineV2({ pipelineNode }: { pipelineNode: PipelineNode }): JSX.Element {
+    const logic = pipelineNodeMetricsV2Logic({ id: `${pipelineNode.id}`.replace('hog-', '') })
+    const { appMetrics, appMetricsLoading } = useValues(logic)
+    const { loadMetrics } = useActions(logic)
+
+    useEffect(() => {
+        loadMetrics()
+    }, [])
+
+    const displayData: SparklineTimeSeries[] = [
+        {
+            color: 'success',
+            name: 'Success',
+            values: appMetrics?.series.find((s) => s.name === 'succeeded')?.values || [],
+        },
+        {
+            color: 'danger',
+            name: 'Failures',
+            values: appMetrics?.series.find((s) => s.name === 'failed')?.values || [],
+        },
+    ]
+
+    return <Sparkline loading={appMetricsLoading} labels={appMetrics?.labels} data={displayData} className="max-w-24" />
+}

frontend/src/scenes/pipeline/BatchExportBackfill.tsx → frontend/src/scenes/pipeline/BatchExportBackfillModal.tsx

@@ -7,7 +7,7 @@ import { LemonModal } from 'lib/lemon-ui/LemonModal'
 
 import { batchExportRunsLogic, BatchExportRunsLogicProps } from './batchExportRunsLogic'
 
-export function BatchExportBackfill({ id }: BatchExportRunsLogicProps): JSX.Element {
+export function BatchExportBackfillModal({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, isBackfillModalOpen, isBackfillFormSubmitting } = useValues(logic)

frontend/src/scenes/pipeline/BatchExportRuns.tsx

@@ -4,89 +4,91 @@ import { LemonButton, LemonDialog, LemonSwitch, LemonTable } from '@posthog/lemo
 import { useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { NotFound } from 'lib/components/NotFound'
+import { PageHeader } from 'lib/components/PageHeader'
 import { IconRefresh } from 'lib/lemon-ui/icons'
 import { BatchExportRunIcon } from 'scenes/batch_exports/components'
 import { isRunInProgress } from 'scenes/batch_exports/utils'
 
 import { BatchExportConfiguration, GroupedBatchExportRuns } from '~/types'
 
-import { BatchExportBackfill } from './BatchExportBackfill'
+import { BatchExportBackfillModal } from './BatchExportBackfillModal'
 import { batchExportRunsLogic, BatchExportRunsLogicProps } from './batchExportRunsLogic'
 import { pipelineAccessLogic } from './pipelineAccessLogic'
 
 export function BatchExportRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, groupedRuns, loading, hasMoreRunsToLoad, usingLatestRuns } = useValues(logic)
-    const { loadOlderRuns, retryRun } = useActions(logic)
+    const { loadOlderRuns, retryRun, openBackfillModal } = useActions(logic)
 
     if (!batchExportConfig) {
         return <NotFound object="batch export" />
     }
 
-    const dateSelector = <RunsDateSelection id={id} />
-
-    if (usingLatestRuns) {
-        return (
-            <>
-                {dateSelector}
-                <BatchExportLatestRuns id={id} />
-            </>
-        )
-    }
-
     return (
         <>
-            {dateSelector}
-            <BatchExportRunsGrouped
-                id={id}
-                groupedRuns={groupedRuns}
-                loading={loading}
-                retryRun={retryRun}
-                hasMoreRunsToLoad={hasMoreRunsToLoad}
-                loadOlderRuns={loadOlderRuns}
-                interval={batchExportConfig.interval}
+            <PageHeader
+                buttons={
+                    <LemonButton type="primary" onClick={() => openBackfillModal()}>
+                        Backfill batch export
+                    </LemonButton>
+                }
             />
+            <div className="space-y-2">
+                <BatchExportRunsFilters id={id} />
+                {usingLatestRuns ? (
+                    <BatchExportLatestRuns id={id} />
+                ) : (
+                    <BatchExportRunsGrouped
+                        id={id}
+                        groupedRuns={groupedRuns}
+                        loading={loading}
+                        retryRun={retryRun}
+                        hasMoreRunsToLoad={hasMoreRunsToLoad}
+                        loadOlderRuns={loadOlderRuns}
+                        interval={batchExportConfig.interval}
+                    />
+                )}
+            </div>
+            <BatchExportBackfillModal id={id} />
         </>
     )
 }
 
-export function RunsDateSelection({ id }: { id: string }): JSX.Element {
+function BatchExportRunsFilters({ id }: { id: string }): JSX.Element {
     const logic = batchExportRunsLogic({ id })
     const { dateRange, usingLatestRuns, loading } = useValues(logic)
     const { setDateRange, switchLatestRuns, loadRuns } = useActions(logic)
 
-    // TODO: Autoload option similar to frontend/src/queries/nodes/DataNode/AutoLoad.tsx
-    const latestToggle = (
-        <LemonSwitch bordered label="Show latest runs" checked={usingLatestRuns} onChange={switchLatestRuns} />
-    )
-
-    const dateFilter = (
-        <DateFilter
-            dateTo={dateRange.to}
-            dateFrom={dateRange.from}
-            disabledReason={usingLatestRuns ? 'Turn off "Show latest runs" to filter by data interval' : undefined}
-            onChange={(from, to) => setDateRange(from, to)}
-            allowedRollingDateOptions={['hours', 'days', 'weeks', 'months', 'years']}
-            makeLabel={(key) => (
-                <>
-                    <IconCalendar /> {key}
-                </>
-            )}
-        />
-    )
     return (
-        <div className="flex gap-2">
-            <LemonButton onClick={loadRuns} loading={loading} type="secondary" icon={<IconRefresh />}>
+        <div className="flex items-center gap-2">
+            <LemonButton onClick={loadRuns} loading={loading} type="secondary" icon={<IconRefresh />} size="small">
                 Refresh
             </LemonButton>
-            {latestToggle}
-            {dateFilter}
+            <LemonSwitch
+                bordered
+                label="Show latest runs"
+                checked={usingLatestRuns}
+                onChange={switchLatestRuns}
+                size="small"
+            />
+            <DateFilter
+                dateTo={dateRange.to}
+                dateFrom={dateRange.from}
+                disabledReason={usingLatestRuns ? 'Turn off "Show latest runs" to filter by data interval' : undefined}
+                onChange={(from, to) => setDateRange(from, to)}
+                allowedRollingDateOptions={['hours', 'days', 'weeks', 'months', 'years']}
+                makeLabel={(key) => (
+                    <>
+                        <IconCalendar /> {key}
+                    </>
+                )}
+            />
         </div>
     )
 }
 
-export function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
+function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.Element {
     const logic = batchExportRunsLogic({ id })
 
     const { batchExportConfig, latestRuns, loading, hasMoreRunsToLoad } = useValues(logic)
@@ -163,24 +165,24 @@ export function BatchExportLatestRuns({ id }: BatchExportRunsLogicProps): JSX.El
                         width: 0,
                         render: function RenderActions(_, run) {
                             if (canEnableNewDestinations) {
-                                return <RunRetryModal run={run} retryRun={retryRun} />
+                                return <RunRetryButton run={run} retryRun={retryRun} />
                             }
                         },
                     },
                 ]}
                 emptyState={
-                    <>
-                        No runs in this time range. Your exporter runs every <b>{batchExportConfig.interval}</b>.
-                        <br />
+                    <div className="space-y-2">
+                        <div>
+                            No runs in this time range. Your exporter runs every <b>{batchExportConfig.interval}</b>.
+                        </div>
                         {canEnableNewDestinations && (
                             <LemonButton type="primary" onClick={() => openBackfillModal()}>
                                 Backfill batch export
                             </LemonButton>
                         )}
-                    </>
+                    </div>
                 }
             />
-            <BatchExportBackfill id={id} />
         </>
     )
 }
@@ -302,30 +304,29 @@ export function BatchExportRunsGrouped({
                         width: 0,
                         render: function RenderActions(_, groupedRun) {
                             if (!isRunInProgress(groupedRun.runs[0]) && canEnableNewDestinations) {
-                                return <RunRetryModal run={groupedRun.runs[0]} retryRun={retryRun} />
+                                return <RunRetryButton run={groupedRun.runs[0]} retryRun={retryRun} />
                             }
                         },
                     },
                 ]}
                 emptyState={
-                    <>
-                        No runs in this time range. Your exporter runs every <b>{interval}</b>.
-                        <br />
+                    <div className="space-y-2">
+                        <div>
+                            No runs in this time range. Your exporter runs every <b>{interval}</b>.
+                        </div>
                         {canEnableNewDestinations && (
                             <LemonButton type="primary" onClick={() => openBackfillModal()}>
                                 Backfill batch export
                             </LemonButton>
                         )}
-                    </>
+                    </div>
                 }
             />
-
-            <BatchExportBackfill id={id} />
         </>
     )
 }
 
-export function RunRetryModal({ run, retryRun }: { run: any; retryRun: any }): JSX.Element {
+function RunRetryButton({ run, retryRun }: { run: any; retryRun: any }): JSX.Element {
     return (
         <span className="flex items-center gap-1">
             <LemonButton

frontend/src/scenes/pipeline/PipelineNode.tsx

@@ -14,6 +14,7 @@ import { BatchExportRuns } from './BatchExportRuns'
 import { PipelineNodeConfiguration } from './PipelineNodeConfiguration'
 import { pipelineNodeLogic, PipelineNodeLogicProps } from './pipelineNodeLogic'
 import { PipelineNodeMetrics } from './PipelineNodeMetrics'
+import { PipelineNodeMetricsV2 } from './PipelineNodeMetricsV2'
 import { PipelineBackend } from './types'
 
 export const PIPELINE_TAB_TO_NODE_STAGE: Partial<Record<PipelineTab, PipelineStage>> = {
@@ -58,10 +59,8 @@ export function PipelineNode(params: { stage?: string; id?: string } = {}): JSX.
         [PipelineNodeTab.Configuration]: <PipelineNodeConfiguration />,
     }
 
-    if ([PipelineBackend.Plugin, PipelineBackend.BatchExport].includes(node.backend)) {
-        tabToContent[PipelineNodeTab.Metrics] = <PipelineNodeMetrics id={id} />
-    }
-
+    tabToContent[PipelineNodeTab.Metrics] =
+        node.backend === PipelineBackend.HogFunction ? <PipelineNodeMetricsV2 /> : <PipelineNodeMetrics id={id} />
     tabToContent[PipelineNodeTab.Logs] = <PipelineNodeLogs id={id} stage={stage} />
 
     if (node.backend === PipelineBackend.BatchExport) {