feat: hackathon metalytics (tracking team usage metrics)

frontend/src/layout/navigation-3000/components/TopBar.scss

@@ -155,7 +155,6 @@
 
 .TopBar3000__actions {
     display: flex;
-    flex-grow: 1;
     gap: 0.5rem;
     align-items: center;
     justify-content: flex-end;

frontend/src/layout/navigation-3000/components/TopBar.tsx

@@ -6,9 +6,12 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { EditableField } from 'lib/components/EditableField/EditableField'
+import { MetalyticsSummary } from 'lib/components/Metalytics/MetalyticsSummary'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { IconMenu } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import React, { useLayoutEffect, useState } from 'react'
 
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
@@ -25,6 +28,7 @@ export function TopBar(): JSX.Element | null {
     const { showNavOnMobile } = useActions(navigation3000Logic)
     const { breadcrumbs, renameState } = useValues(breadcrumbsLogic)
     const { setActionsContainer } = useActions(breadcrumbsLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const [compactionRate, setCompactionRate] = useState(0)
 
@@ -101,7 +105,12 @@ export function TopBar(): JSX.Element | null {
                     )}
                     <Here breadcrumb={breadcrumbs[breadcrumbs.length - 1]} isOnboarding={isOnboarding} />
                 </div>
-                <div className="TopBar3000__actions" ref={setActionsContainer} />
+                {featureFlags[FEATURE_FLAGS.METALYTICS] && (
+                    <div className="shrink-1">
+                        <MetalyticsSummary />
+                    </div>
+                )}
+                <div className="TopBar3000__actions border-danger" ref={setActionsContainer} />
             </div>
         </div>
     ) : null

frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx

@@ -31,6 +31,7 @@ import {
 import { ActivityScope, AvailableFeature } from '~/types'
 
 import { SidePanelPaneHeader } from '../../components/SidePanelPaneHeader'
+import { SidePanelActivityMetalytics } from './SidePanelActivityMetalytics'
 
 const SCROLL_TRIGGER_OFFSET = 100
 
@@ -143,6 +144,14 @@ export const SidePanelActivity = (): JSX.Element => {
                                     key: SidePanelActivityTab.All,
                                     label: 'All activity',
                                 },
+                                ...(featureFlags[FEATURE_FLAGS.METALYTICS]
+                                    ? [
+                                          {
+                                              key: SidePanelActivityTab.Metalytics,
+                                              label: 'Analytics',
+                                          },
+                                      ]
+                                    : []),
                             ]}
                         />
                     </div>
@@ -204,6 +213,8 @@ export const SidePanelActivity = (): JSX.Element => {
                                     />
                                 </div>
                             </div>
+                        ) : activeTab === SidePanelActivityTab.Metalytics ? (
+                            <SidePanelActivityMetalytics />
                         ) : null}
                     </div>
 

frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivityMetalytics.tsx

@@ -0,0 +1,71 @@
+import { BindLogic, useValues } from 'kea'
+import { metalyticsLogic } from 'lib/components/Metalytics/metalyticsLogic'
+import { ProfileBubbles } from 'lib/lemon-ui/ProfilePicture/ProfileBubbles'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { Query } from '~/queries/Query/Query'
+import { NodeKind } from '~/queries/schema'
+import { hogql } from '~/queries/utils'
+
+export function SidePanelActivityMetalytics(): JSX.Element {
+    const { instanceId, viewCount, recentUserMembers } = useValues(metalyticsLogic)
+
+    if (!instanceId) {
+        return (
+            <>
+                <h3>Metalytics</h3>
+                <p>
+                    You can see internal analytics of how your Organization members are using PostHog for certain
+                    things.
+                </p>
+            </>
+        )
+    }
+
+    return (
+        <div className="space-y-4 overflow-y-auto max-h-[calc(100vh-200px)]">
+            <div className="flex gap-4">
+                <div className="flex-1 rounded bg-bg-light p-4">
+                    <div className="text-muted text-sm">Number Of Sessions</div>
+                    <div className="text-2xl font-semibold">{viewCount ?? 0}</div>
+                </div>
+
+                <div className="flex-1 rounded bg-bg-light p-4">
+                    <div className="text-muted text-sm mb-2">Recent Viewers (30 days)</div>
+                    <ProfileBubbles
+                        people={recentUserMembers.map((member) => ({
+                            email: member.user.email,
+                            name: member.user.first_name,
+                            title: member.user.email,
+                        }))}
+                        tooltip="Recent viewers"
+                        limit={3}
+                    />
+                </div>
+            </div>
+
+            {/* This looks odd but is a weirdness of the Query component it needs to be bound in an insight logic */}
+            <BindLogic logic={insightLogic} props={{ dashboardItemId: '', doNotLoad: true }}>
+                <Query
+                    query={{
+                        display: 'ActionsLineGraph',
+                        chartSettings: {
+                            seriesBreakdownColumn: null,
+                        },
+                        kind: NodeKind.DataVisualizationNode,
+                        source: {
+                            kind: NodeKind.HogQLQuery,
+                            query: hogql`SELECT timestamp, SUM(count) AS number_of_sessions
+                                FROM app_metrics
+                                WHERE app_source = 'metalytics'
+                                AND instance_id = ${instanceId}
+                                AND timestamp >= NOW() - INTERVAL 30 DAY
+                                GROUP BY timestamp
+                                ORDER BY timestamp DESC`,
+                        },
+                    }}
+                />
+            </BindLogic>
+        </div>
+    )
+}

frontend/src/layout/navigation-3000/sidepanel/panels/activity/activityForSceneLogic.ts

@@ -37,6 +37,7 @@ export const activityForSceneLogic = kea<activityForSceneLogicType>([
     connect({
         values: [sceneLogic, ['sceneConfig']],
     }),
+
     selectors({
         sceneActivityFilters: [
             (s) => [

frontend/src/layout/navigation-3000/sidepanel/panels/activity/sidePanelActivityLogic.tsx

@@ -10,6 +10,7 @@ import { toParams } from 'lib/utils'
 import posthog from 'posthog-js'
 import { teamLogic } from 'scenes/teamLogic'
 
+import { sidePanelStateLogic } from '../../sidePanelStateLogic'
 import { ActivityFilters, activityForSceneLogic } from './activityForSceneLogic'
 import type { sidePanelActivityLogicType } from './sidePanelActivityLogicType'
 
@@ -29,12 +30,14 @@ export interface ChangesResponse {
 export enum SidePanelActivityTab {
     Unread = 'unread',
     All = 'all',
+    Metalytics = 'metalytics',
 }
 
 export const sidePanelActivityLogic = kea<sidePanelActivityLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelActivityLogic']),
     connect({
         values: [activityForSceneLogic, ['sceneActivityFilters']],
+        actions: [sidePanelStateLogic, ['openSidePanel']],
     }),
     actions({
         togglePolling: (pageIsVisible: boolean) => ({ pageIsVisible }),
@@ -183,6 +186,11 @@ export const sidePanelActivityLogic = kea<sidePanelActivityLogicType>([
                 actions.loadOlderActivity()
             }
         },
+        openSidePanel: ({ options }) => {
+            if (options) {
+                actions.setActiveTab(options)
+            }
+        },
     })),
     selectors({
         allActivity: [

frontend/src/lib/components/Metalytics/MetalyticsSummary.tsx

@@ -0,0 +1,31 @@
+import { IconPulse } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { IconWithCount } from 'lib/lemon-ui/icons'
+
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
+import { SidePanelTab } from '~/types'
+
+import { metalyticsLogic } from './metalyticsLogic'
+
+export function MetalyticsSummary(): JSX.Element | null {
+    const { instanceId, viewCount, viewCountLoading } = useValues(metalyticsLogic)
+    const safeViewCount = viewCount ?? 0
+    const { openSidePanel } = useActions(sidePanelStateLogic)
+
+    if (!instanceId) {
+        return null
+    }
+
+    return (
+        <IconWithCount count={safeViewCount}>
+            <LemonButton
+                loading={viewCountLoading}
+                icon={<IconPulse />}
+                size="small"
+                onClick={() => openSidePanel(SidePanelTab.Activity, 'metalytics')}
+                tooltip="Click to see more usage data for this tool"
+            />
+        </IconWithCount>
+    )
+}

frontend/src/lib/components/Metalytics/metalyticsLogic.ts

@@ -0,0 +1,103 @@
+import { connect, kea, path, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import { subscriptions } from 'kea-subscriptions'
+import api from 'lib/api'
+import { membersLogic } from 'scenes/organization/membersLogic'
+
+import { activityForSceneLogic } from '~/layout/navigation-3000/sidepanel/panels/activity/activityForSceneLogic'
+import { HogQLQuery, NodeKind } from '~/queries/schema'
+import { hogql } from '~/queries/utils'
+
+import type { metalyticsLogicType } from './metalyticsLogicType'
+
+export const metalyticsLogic = kea<metalyticsLogicType>([
+    path(['lib', 'components', 'metalytics', 'metalyticsLogic']),
+    connect({
+        values: [activityForSceneLogic, ['sceneActivityFilters'], membersLogic, ['members']],
+    }),
+
+    loaders(({ values }) => ({
+        viewCount: [
+            null as number | null,
+            {
+                loadViewCount: async () => {
+                    const query: HogQLQuery = {
+                        kind: NodeKind.HogQLQuery,
+                        query: hogql`SELECT sum(count) as count
+                            FROM app_metrics
+                            WHERE app_source = 'metalytics'
+                            AND instance_id = ${values.instanceId}`,
+                    }
+
+                    // NOTE: I think this gets cached heavily - how to correctly invalidate?
+
+                    const response = await api.query(query)
+                    const result = response.results as number[]
+                    return result[0]
+                },
+            },
+        ],
+        recentUsers: [
+            [] as string[],
+            {
+                loadUsersLast30days: async () => {
+                    const query: HogQLQuery = {
+                        kind: NodeKind.HogQLQuery,
+                        query: hogql`SELECT DISTINCT app_source_id
+                            FROM app_metrics
+                            WHERE app_source = 'metalytics'
+                            AND instance_id = ${values.instanceId}
+                            AND timestamp >= NOW() - INTERVAL 30 DAY
+                            ORDER BY timestamp DESC`,
+                    }
+
+                    const response = await api.query(query)
+                    return response.results.map((result) => result[0]) as string[]
+                },
+            },
+        ],
+    })),
+
+    selectors({
+        instanceId: [
+            (s) => [s.sceneActivityFilters],
+            (sceneActivityFilters) =>
+                sceneActivityFilters
+                    ? sceneActivityFilters.item_id
+                        ? `${sceneActivityFilters.scope}:${sceneActivityFilters.item_id}`
+                        : sceneActivityFilters.scope
+                    : null,
+        ],
+
+        recentUserMembers: [
+            (s) => [s.recentUsers, s.members],
+            (recentUsers, members) => {
+                if (!members || !recentUsers) {
+                    return []
+                }
+                // Filter members whose IDs match the recentUsers array
+                const filteredMembers = members.filter((member) => recentUsers.includes(String(member.user.id)))
+                return filteredMembers
+            },
+        ],
+    }),
+
+    subscriptions(({ actions }) => ({
+        instanceId: async (instanceId) => {
+            if (instanceId) {
+                actions.loadViewCount()
+                actions.loadUsersLast30days()
+
+                await api.create('/api/projects/@current/metalytics/', {
+                    metric_name: 'viewed',
+                    // metric_kind: 'misc',
+                    instance_id: instanceId,
+
+                    // API sets these
+                    // app_source: 'internal_metrics',
+                    // app_source_id: user.id,
+                })
+            }
+        },
+    })),
+])

frontend/src/lib/constants.tsx

@@ -232,6 +232,7 @@ export const FEATURE_FLAGS = {
     CUSTOM_CHANNEL_TYPE_RULES: 'custom-channel-type-rules', // owner: @robbie-c #team-web-analytics
     SELF_SERVE_CREDIT_OVERRIDE: 'self-serve-credit-override', // owner: @zach
     EXPERIMENTS_MIGRATION_DISABLE_UI: 'experiments-migration-disable-ui', // owner: @jurajmajerik #team-experiments
+    METALYTICS: 'metalytics', // owner: @surbhi
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/actions/actionLogic.ts

@@ -5,7 +5,8 @@ import { DataManagementTab } from 'scenes/data-management/DataManagementScene'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { ActionType, Breadcrumb, HogFunctionType } from '~/types'
+import { ActivityFilters } from '~/layout/navigation-3000/sidepanel/panels/activity/activityForSceneLogic'
+import { ActionType, ActivityScope, Breadcrumb, HogFunctionType } from '~/types'
 
 import { actionEditLogic } from './actionEditLogic'
 import type { actionLogicType } from './actionLogicType'
@@ -104,6 +105,18 @@ export const actionLogic = kea<actionLogicType>([
             (s) => [s.action],
             (action) => action?.steps?.some((step) => step.properties?.find((p) => p.type === 'cohort')) ?? false,
         ],
+
+        activityFilters: [
+            (s) => [s.action],
+            (action): ActivityFilters | null => {
+                return action?.id
+                    ? {
+                          scope: ActivityScope.ACTION,
+                          item_id: String(action.id),
+                      }
+                    : null
+            },
+        ],
     }),
     listeners(({ actions, values }) => ({
         checkIsFinished: ({ action }) => {

frontend/src/types.ts

@@ -3929,6 +3929,7 @@ export type PromptFlag = {
 
 // Should be kept in sync with "posthog/models/activity_logging/activity_log.py"
 export enum ActivityScope {
+    ACTION = 'Action',
     FEATURE_FLAG = 'FeatureFlag',
     PERSON = 'Person',
     INSIGHT = 'Insight',

posthog/api/__init__.py

@@ -2,7 +2,7 @@
 from rest_framework_extensions.routers import NestedRegistryItem
 
 
-from posthog.api import project
+from posthog.api import metalytics, project
 from posthog.api.routing import DefaultRouterPlusPlus
 from posthog.batch_exports import http as batch_exports
 from posthog.settings import EE_AVAILABLE
@@ -534,6 +534,13 @@ def register_grandfathered_environment_nested_viewset(
     ["team_id"],
 )
 
+register_grandfathered_environment_nested_viewset(
+    r"metalytics",
+    metalytics.MetalyticsViewSet,
+    "environment_metalytics",
+    ["team_id"],
+)
+
 projects_router.register(
     r"insight_variables",
     insight_variable.InsightVariableViewSet,