diff --git a/frontend/src/scenes/sessions/filters/EditFiltersPanel.tsx b/frontend/src/scenes/sessions/filters/EditFiltersPanel.tsx index ee98a6fb869..7bc6b28ac19 100644 --- a/frontend/src/scenes/sessions/filters/EditFiltersPanel.tsx +++ b/frontend/src/scenes/sessions/filters/EditFiltersPanel.tsx @@ -3,7 +3,7 @@ import { Button, Card, Divider, Space } from 'antd' import { useActions, useValues } from 'kea' import { DownOutlined, SaveOutlined, SearchOutlined } from '@ant-design/icons' import { CloseButton } from 'lib/components/CloseButton' -import { EventTypePropertyFilter, PersonPropertyFilter, RecordingPropertyFilter } from '~/types' +import { Entity, EventTypePropertyFilter, PersonPropertyFilter, PropertyFilter, RecordingPropertyFilter } from '~/types' import { sessionsFiltersLogic } from 'scenes/sessions/filters/sessionsFiltersLogic' import { EventPropertyFilter } from 'scenes/sessions/filters/EventPropertyFilter' import { PersonFilter } from 'scenes/sessions/filters/UserFilter' @@ -11,6 +11,10 @@ import { DurationFilter } from 'scenes/sessions/filters/DurationFilter' import { SessionsFilterBox } from 'scenes/sessions/filters/SessionsFilterBox' import { AddFilterButton } from 'scenes/sessions/filters/AddFilterButton' import { sessionsTableLogic } from 'scenes/sessions/sessionsTableLogic' +import { LinkButton } from 'lib/components/LinkButton' +import { ACTION_TYPE, EVENT_TYPE } from 'lib/constants' +import { ViewType } from 'scenes/insights/insightLogic' +import { toParams } from 'lib/utils' interface Props { onSubmit: () => void @@ -73,6 +77,79 @@ export function EditFiltersPanel({ onSubmit }: Props): JSX.Element | null { AND ) + const properties: PropertyFilter[] = [] + const events: Entity[] = [] + const actions: Entity[] = [] + + Object.entries(displayedFilters).forEach(([key, values]) => { + if (key === ACTION_TYPE) { + values.forEach((filter) => { + if ( + filter.item.label && + (typeof filter.item.value === 'string' || typeof filter.item.value === 'number') + ) { + actions.push({ + id: filter.item.value, + name: filter.item.label, + type: 'actions', + order: 0, + }) + } + }) + } + if (key === EVENT_TYPE) { + values.forEach((filter) => { + if ( + filter.item.label && + (typeof filter.item.value === 'string' || typeof filter.item.value === 'number') + ) { + events.push({ + id: filter.item.value, + name: filter.item.label, + type: 'events', + order: 0, + }) + } + }) + } + if (key === 'cohort') { + values.forEach((filter) => { + if (filter.item.value) { + properties.push({ + key: 'id', + value: filter.item.value, + type: 'cohort', + operator: 'exact', + }) + } + }) + } + if (key === 'person') { + values.forEach((filter) => { + if (filter.item.value) { + properties.push({ + key: filter.item.key, + value: filter.item.value, + type: 'person', + operator: (filter.item as PersonPropertyFilter).operator, + }) + } + }) + } + }) + + const params = { + insight: ViewType.TRENDS, + interval: 'day', + display: 'ActionsLineGraph', + events, + actions, + properties, + } + const encodedParams = toParams(params) + const insightLink = `/insights?${encodedParams}#backTo=Sessions&backToURL=${ + window.location.pathname + window.location.search + }` return ( @@ -126,18 +203,25 @@ export function EditFiltersPanel({ onSubmit }: Props): JSX.Element | null { ))} - - {filtersDirty &&
There are unapplied filters.
} - - + + + + View Insights + + + + {filtersDirty &&
There are unapplied filters.
} + + +
) diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 936710d6689..2e88c28a08f 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -192,7 +192,7 @@ export interface PropertyFilter { key: string operator: string | null type: string - value: string | number + value: string | number | (string | number)[] } interface BasePropertyFilter {