feat(events): show stale events in separate section

Previously all events would ve listed in one list, irrespective of if they have recent activity. This makes it difficult to find relevent events if you have lots of stale events. This change: * adds a group "Stale events" based on `volume_30_days` being falsy * filters the main "Events" group by `volume_30_days` being truthy Closes PostHog#4791 References PostHog#4502 Note that this also references PostHog#4502 as it achieves the functionality of highlighting which events have had recent activity.
hazzadous · Jun 19, 2021 · 4d870d7 · 4d870d7
1 parent 2714447
commit 4d870d7
Showing 1 changed file with 28 additions and 4 deletions.
diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown.tsx b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown.tsx
@@ -161,10 +161,34 @@ export function ActionFilterDropdown({
                         )
                     },
                     dataSource:
-                        eventDefinitions.map((definition) => ({
-                            ...definition,
-                            key: EntityTypes.EVENTS + definition.id,
-                        })) || [],
+                        eventDefinitions
+                            .filter((definition) => definition.volume_30_day)
+                            .map((definition) => ({
+                                ...definition,
+                                key: EntityTypes.EVENTS + definition.id,
+                            })) || [],
+                    renderInfo: EventInfo,
+                    type: EntityTypes.EVENTS,
+                    getValue: (item: SelectedItem) => item.name || '',
+                    getLabel: (item: SelectedItem) => item.name || '',
+                },
+                {
+                    key: 'stale-events',
+                    name: 'Stale events',
+                    header: function eventHeader(label: string) {
+                        return (
+                            <>
+                                <ContainerOutlined /> {label}
+                            </>
+                        )
+                    },
+                    dataSource:
+                        eventDefinitions
+                            .filter((definition) => !definition.volume_30_day)
+                            .map((definition) => ({
+                                ...definition,
+                                key: EntityTypes.EVENTS + definition.id,
+                            })) || [],
                     renderInfo: EventInfo,
                     type: EntityTypes.EVENTS,
                     getValue: (item: SelectedItem) => item.name || '',