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,6 +6,8 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { EditableField } from 'lib/components/EditableField/EditableField'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
+import { MetalyticsSummary } from 'lib/components/Metalytics/MetalyticsSummary'
 import { IconMenu } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
@@ -101,7 +103,12 @@ export function TopBar(): JSX.Element | null {
                     )}
                     <Here breadcrumb={breadcrumbs[breadcrumbs.length - 1]} isOnboarding={isOnboarding} />
                 </div>
-                <div className="TopBar3000__actions" ref={setActionsContainer} />
+                <FlaggedFeature flag="metalytics">
+                    <div className="shrink-1">
+                        <MetalyticsSummary />
+                    </div>
+                </FlaggedFeature>
+                <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
 
@@ -126,11 +127,11 @@ export const SidePanelActivity = (): JSX.Element => {
             <SidePanelPaneHeader title="Team activity" />
             <PayGateMini
                 feature={AvailableFeature.AUDIT_LOGS}
-                className="flex flex-col overflow-hidden flex-1"
+                className="flex flex-col flex-1 overflow-hidden"
                 overrideShouldShowGate={user?.is_impersonated || !!featureFlags[FEATURE_FLAGS.AUDIT_LOGS_ACCESS]}
             >
-                <div className="flex flex-col overflow-hidden flex-1">
-                    <div className="shrink-0 mx-2">
+                <div className="flex flex-col flex-1 overflow-hidden">
+                    <div className="mx-2 shrink-0">
                         <LemonTabs
                             activeKey={activeTab as SidePanelActivityTab}
                             onChange={(key) => setActiveTab(key)}
@@ -143,76 +144,82 @@ export const SidePanelActivity = (): JSX.Element => {
                                     key: SidePanelActivityTab.All,
                                     label: 'All activity',
                                 },
+                                ...(featureFlags[FEATURE_FLAGS.METALYTICS]
+                                    ? [
+                                          {
+                                              key: SidePanelActivityTab.Metalytics,
+                                              label: 'Analytics',
+                                          },
+                                      ]
+                                    : []),
                             ]}
                         />
                     </div>
 
                     {/* Controls */}
-                    <div className="shrink-0 space-y-2 px-2 pb-2">
-                        {activeTab === SidePanelActivityTab.Unread ? (
-                            <>
-                                <LemonBanner type="info" dismissKey="notifications-introduction">
-                                    Notifications shows you changes others make to{' '}
-                                    <Link to={urls.savedInsights('history')}>Insights</Link> and{' '}
-                                    <Link to={urls.featureFlags('history')}>Feature Flags</Link> that you created. Come
-                                    join <Link to="https://posthog.com/community">our community forum</Link> and tell us
-                                    what else should be here!
-                                </LemonBanner>
+                    {activeTab === SidePanelActivityTab.Unread ? (
+                        <div className="px-2 pb-2 space-y-2 shrink-0">
+                            <LemonBanner type="info" dismissKey="notifications-introduction">
+                                Notifications shows you changes others make to{' '}
+                                <Link to={urls.savedInsights('history')}>Insights</Link> and{' '}
+                                <Link to={urls.featureFlags('history')}>Feature Flags</Link> that you created. Come join{' '}
+                                <Link to="https://posthog.com/community">our community forum</Link> and tell us what
+                                else should be here!
+                            </LemonBanner>
 
-                                <div className="flex items-center justify-between gap-2">
-                                    {toggleExtendedDescription}
-                                    {hasUnread ? (
-                                        <LemonButton type="secondary" onClick={() => markAllAsRead()}>
-                                            Mark all as read
-                                        </LemonButton>
-                                    ) : null}
-                                </div>
-                            </>
-                        ) : activeTab === SidePanelActivityTab.All ? (
                             <div className="flex items-center justify-between gap-2">
-                                <div className="flex items-center gap-2">
-                                    {toggleExtendedDescription}
-                                    {allActivityResponseLoading ? <Spinner textColored /> : null}
-                                </div>
+                                {toggleExtendedDescription}
+                                {hasUnread ? (
+                                    <LemonButton type="secondary" onClick={() => markAllAsRead()}>
+                                        Mark all as read
+                                    </LemonButton>
+                                ) : null}
+                            </div>
+                        </div>
+                    ) : activeTab === SidePanelActivityTab.All ? (
+                        <div className="flex items-center justify-between gap-2 px-2 pb-2 space-y-2 shrink-0">
+                            <div className="flex items-center gap-2">
+                                {toggleExtendedDescription}
+                                {allActivityResponseLoading ? <Spinner textColored /> : null}
+                            </div>
 
-                                <div className="flex items-center gap-2">
-                                    <span>Filter for activity on:</span>
-                                    <LemonSelect
-                                        size="small"
-                                        options={scopeMenuOptions}
-                                        placeholder="All activity"
-                                        value={(activeScopeMenuOption as ActivityScope) ?? undefined}
-                                        onChange={(value) =>
-                                            setFilters({
-                                                ...filters,
-                                                scope: value ?? undefined,
-                                                item_id: undefined,
-                                            })
-                                        }
-                                        dropdownMatchSelectWidth={false}
-                                    />
+                            <div className="flex items-center gap-2">
+                                <span>Filter for activity on:</span>
+                                <LemonSelect
+                                    size="small"
+                                    options={scopeMenuOptions}
+                                    placeholder="All activity"
+                                    value={(activeScopeMenuOption as ActivityScope) ?? undefined}
+                                    onChange={(value) =>
+                                        setFilters({
+                                            ...filters,
+                                            scope: value ?? undefined,
+                                            item_id: undefined,
+                                        })
+                                    }
+                                    dropdownMatchSelectWidth={false}
+                                />
 
-                                    <span>by</span>
-                                    <MemberSelect
-                                        value={filters?.user ?? null}
-                                        onChange={(user) =>
-                                            setFilters({
-                                                ...filters,
-                                                user: user?.id ?? undefined,
-                                            })
-                                        }
-                                    />
-                                </div>
+                                <span>by</span>
+                                <MemberSelect
+                                    value={filters?.user ?? null}
+                                    onChange={(user) =>
+                                        setFilters({
+                                            ...filters,
+                                            user: user?.id ?? undefined,
+                                        })
+                                    }
+                                />
                             </div>
-                        ) : null}
-                    </div>
+                        </div>
+                    ) : null}
 
                     <div className="flex flex-col flex-1 overflow-hidden" ref={contentRef} onScroll={handleScroll}>
                         <ScrollableShadows direction="vertical" innerClassName="p-2 space-y-px">
                             {activeTab === SidePanelActivityTab.Unread ? (
                                 <>
                                     {importantChangesLoading && !hasNotifications ? (
-                                        <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                                        <LemonSkeleton className="h-12 my-2" repeat={10} fade />
                                     ) : hasNotifications ? (
                                         notifications.map((logItem, index) => (
                                             <ActivityLogRow
@@ -222,15 +229,15 @@ export const SidePanelActivity = (): JSX.Element => {
                                             />
                                         ))
                                     ) : (
-                                        <div className="border rounded text-center border-dashed p-6 text-muted-alt">
+                                        <div className="p-6 text-center border border-dashed rounded text-muted-alt">
                                             You're all caught up!
                                         </div>
                                     )}
                                 </>
                             ) : activeTab === SidePanelActivityTab.All ? (
                                 <>
                                     {allActivityResponseLoading && !allActivity.length ? (
-                                        <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                                        <LemonSkeleton className="h-12 my-2" repeat={10} fade />
                                     ) : allActivity.length ? (
                                         <>
                                             {allActivity.map((logItem, index) => (
@@ -241,7 +248,7 @@ export const SidePanelActivity = (): JSX.Element => {
                                                 />
                                             ))}
 
-                                            <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                                            <div className="flex items-center justify-center h-10 gap-2 m-4 text-muted-alt">
                                                 {allActivityResponseLoading ? (
                                                     <>
                                                         <Spinner textColored /> Loading older activity
@@ -261,7 +268,7 @@ export const SidePanelActivity = (): JSX.Element => {
                                             </div>
                                         </>
                                     ) : (
-                                        <div className="border rounded text-center border-dashed p-6 flex flex-col gap-2 items-center">
+                                        <div className="flex flex-col items-center gap-2 p-6 text-center border border-dashed rounded">
                                             <span>No activity yet</span>
                                             {filters ? (
                                                 <LemonButton type="secondary" onClick={() => setFilters(null)}>
@@ -271,6 +278,8 @@ export const SidePanelActivity = (): JSX.Element => {
                                         </div>
                                     )}
                                 </>
+                            ) : activeTab === SidePanelActivityTab.Metalytics ? (
+                                <SidePanelActivityMetalytics />
                             ) : null}
                         </ScrollableShadows>
                     </div>

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

@@ -0,0 +1,74 @@
+import { Spinner, Tooltip } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { humanizeScope } from 'lib/components/ActivityLog/humanizeActivity'
+import { metalyticsLogic } from 'lib/components/Metalytics/metalyticsLogic'
+import { ProfileBubbles } from 'lib/lemon-ui/ProfilePicture/ProfileBubbles'
+
+export function SidePanelActivityMetalytics(): JSX.Element {
+    const { scope, instanceId, viewCount, recentUserMembers, viewCountLoading, recentUsersLoading } =
+        useValues(metalyticsLogic)
+
+    if (!instanceId) {
+        return (
+            <p className="border-dashed ">
+                You can see internal analytics of how your Organization members are using PostHog for things such as
+                Dashboards, Insights, Playlists etc. Open an app to see the viewership data here.
+            </p>
+        )
+    }
+
+    const humanizedScope = `this ${scope ? humanizeScope(scope, true) : 'app'}`
+
+    return (
+        <div className="space-y-4 ">
+            <p>
+                You are viewing "meta" analytics of how your organization members are interacting with{' '}
+                <b>{humanizedScope}</b>.
+            </p>
+            <div className="flex flex-wrap gap-4">
+                <Tooltip
+                    title={`The total number of times ${humanizedScope} has been viewed by members of your organization.`}
+                    placement="top"
+                >
+                    <div className="flex-1 p-4 border rounded bg-bg-light min-w-40">
+                        <div className="text-sm text-muted">Views</div>
+                        <div className="text-2xl font-semibold">
+                            {viewCountLoading ? <Spinner /> : viewCount?.views ?? 0}
+                        </div>
+                    </div>
+                </Tooltip>
+
+                <Tooltip
+                    title={`The total number of unique organization members who have viewed ${humanizedScope}.`}
+                    placement="top"
+                >
+                    <div className="flex-1 p-4 border rounded bg-bg-light min-w-40">
+                        <div className="text-sm text-muted">Viewers</div>
+                        <div className="text-2xl font-semibold">
+                            {viewCountLoading ? <Spinner /> : viewCount?.users ?? 0}
+                        </div>
+                    </div>
+                </Tooltip>
+
+                <Tooltip title={`The most recent 30 users who have viewed ${humanizedScope}.`} placement="top">
+                    <div className="flex-1 p-4 border rounded bg-bg-light min-w-40">
+                        <div className="text-sm text-muted">Recent viewers (30 days)</div>
+                        {recentUsersLoading ? (
+                            <Spinner />
+                        ) : (
+                            <ProfileBubbles
+                                className="mt-2"
+                                people={recentUserMembers.map((member) => ({
+                                    email: member.user.email,
+                                    name: member.user.first_name,
+                                    title: member.user.email,
+                                }))}
+                                limit={3}
+                            />
+                        )}
+                    </div>
+                </Tooltip>
+            </div>
+        </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 { projectLogic } from 'scenes/projectLogic'
 
+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'], projectLogic, ['currentProjectId']],
+        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 as SidePanelActivityTab)
+            }
+        },
     })),
     selectors({
         allActivity: [

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

@@ -0,0 +1,39 @@
+import { IconPulse } from '@posthog/icons'
+import { LemonBadge, LemonButton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+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?.views ?? 0
+    const safeUniqueUsers = viewCount?.users ?? 0
+    const { openSidePanel } = useActions(sidePanelStateLogic)
+
+    if (!instanceId || viewCountLoading) {
+        return null
+    }
+
+    return (
+        <span className="relative inline-flex">
+            <LemonButton
+                loading={viewCountLoading}
+                icon={<IconPulse />}
+                size="small"
+                onClick={() => openSidePanel(SidePanelTab.Activity, 'metalytics')}
+                tooltip={`${safeUniqueUsers} PostHog members have viewed this a total of ${safeViewCount} times. Click to see more.`}
+            />
+            <LemonBadge.Number
+                count={safeViewCount}
+                size="small"
+                position="top-right"
+                showZero={false}
+                status="primary"
+                maxDigits={3}
+            />
+        </span>
+    )
+}