Skip to content

Commit

Permalink
feat(insights): group actor modals (#20446)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariusandra
mariusandra authored Feb 20, 2024
1 parent 94d185b commit cd78ec0
Show file tree
Hide file tree
Showing 13 changed files with 301 additions and 102 deletions.
11 changes: 2 additions & 9 deletions frontend/src/queries/nodes/DataNode/LoadNext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'

import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { DataNode } from '~/queries/schema'
import { isActorsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
import { isHogQLQuery } from '~/queries/utils'

interface LoadNextProps {
query: DataNode
Expand All @@ -23,14 +23,7 @@ export function LoadNext({ query }: LoadNextProps): JSX.Element {
) : (
<>
Showing {canLoadNextData || numberOfRows === 1 ? '' : 'all '}
{numberOfRows === 1 ? 'one' : numberOfRows}{' '}
{isPersonsNode(query) || isActorsQuery(query)
? numberOfRows === 1
? 'person'
: 'people'
: numberOfRows === 1
? 'entry'
: 'entries'}
{numberOfRows === 1 ? 'one' : numberOfRows} {numberOfRows === 1 ? 'entry' : 'entries'}
{canLoadNextData ? '. Click to load more.' : '. Reached the end of results.'}
</>
)}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/queries/nodes/DataTable/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export function DataTable({
// Typecasting to a query type with select and order_by fields.
// The actual query may or may not be an events query.
const source = query.source as EventsQuery
const columns = getDataNodeDefaultColumns(source)
const columns = columnsInLemonTable ?? getDataNodeDefaultColumns(source)
const isAggregation = isHogQlAggregation(hogQl)
const isOrderBy = source.orderBy?.[0] === key
const isDescOrderBy = source.orderBy?.[0] === `${key} DESC`
Expand Down Expand Up @@ -282,7 +282,7 @@ export function DataTable({
if (setQuery && hogQl && sourceFeatures.has(QueryFeature.selectAndOrderByColumns)) {
const isAggregation = isHogQlAggregation(hogQl)
const source = query.source as EventsQuery
const columns = getDataNodeDefaultColumns(source)
const columns = columnsInLemonTable ?? getDataNodeDefaultColumns(source)
setQuery({
...query,
source: {
Expand Down Expand Up @@ -311,7 +311,7 @@ export function DataTable({
if (setQuery && hogQl && sourceFeatures.has(QueryFeature.selectAndOrderByColumns)) {
const isAggregation = isHogQlAggregation(hogQl)
const source = query.source as EventsQuery
const columns = getDataNodeDefaultColumns(source)
const columns = columnsInLemonTable ?? getDataNodeDefaultColumns(source)
setQuery?.({
...query,
source: {
Expand Down
18 changes: 18 additions & 0 deletions frontend/src/queries/nodes/DataTable/renderColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Sparkline } from 'lib/lemon-ui/Sparkline'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { autoCaptureEventToDescription } from 'lib/utils'
import { GroupActorDisplay } from 'scenes/persons/GroupActorDisplay'
import { PersonDisplay, PersonDisplayProps } from 'scenes/persons/PersonDisplay'
import { urls } from 'scenes/urls'

Expand Down Expand Up @@ -240,6 +241,8 @@ export function renderColumn(
}

return <PersonDisplay {...displayProps} />
} else if (key === 'group' && typeof value === 'object') {
return <GroupActorDisplay actor={value} />
} else if (key === 'person.$delete' && (isPersonsNode(query.source) || isActorsQuery(query.source))) {
const personRecord = record as PersonType
return <DeletePersonButton person={personRecord} />
Expand All @@ -263,6 +266,21 @@ export function renderColumn(
} else {
if (typeof value === 'object') {
return <JSONViewer src={value} name={null} collapsed={Object.keys(value).length > 10 ? 0 : 1} />
} else if (
typeof value === 'string' &&
((value.startsWith('{') && value.endsWith('}')) || (value.startsWith('[') && value.endsWith(']')))
) {
try {
return (
<JSONViewer
src={JSON.parse(value)}
name={null}
collapsed={Object.keys(value).length > 10 ? 0 : 1}
/>
)
} catch (e) {
// do nothing
}
}
return String(value)
}
Expand Down
52 changes: 35 additions & 17 deletions frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
BreakdownType,
ChartDisplayType,
CommonActorType,
GroupActorType,
IntervalType,
PersonActorType,
PropertiesTimelineFilterType,
Expand Down Expand Up @@ -117,24 +118,41 @@ export const personsModalLogic = kea<personsModalLogicType>([
results: [
{
count: response.results.length,
people: response.results.map((result): PersonActorType => {
const person: PersonActorType = {
type: 'person',
id: result[0].id,
uuid: result[0].id,
distinct_ids: result[0].distinct_ids,
is_identified: result[0].is_identified,
properties: result[0].properties,
created_at: result[0].created_at,
matched_recordings: [],
value_at_data_point: null,
}
people: response.results.map((result): ActorType => {
if (result[0].group_type_index !== undefined) {
const group: GroupActorType = {
type: 'group',
id: result[0].id,
group_key: result[0].group_key,
group_type_index: result[0].group_type_index,
properties: result[0].group_properties,
created_at: result[0].created_at,
matched_recordings: [],
value_at_data_point: null,
}
Object.keys(props.additionalSelect || {}).forEach((field, index) => {
group[field] = result[additionalFieldIndices[index]]
})
return group
} else {
const person: PersonActorType = {
type: 'person',
id: result[0].id,
uuid: result[0].id,
distinct_ids: result[0].distinct_ids,
is_identified: result[0].is_identified,
properties: result[0].properties,
created_at: result[0].created_at,
matched_recordings: [],
value_at_data_point: null,
}

Object.keys(props.additionalSelect || {}).forEach((field, index) => {
person[field] = result[additionalFieldIndices[index]]
})
Object.keys(props.additionalSelect || {}).forEach((field, index) => {
person[field] = result[additionalFieldIndices[index]]
})

return person
return person
}
}),
},
],
Expand Down Expand Up @@ -329,7 +347,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
() => [(_, p) => p.additionalSelect],
(additionalSelect: PersonModalLogicProps['additionalSelect']): string[] => {
const extra = Object.values(additionalSelect || {})
return ['person', 'created_at', ...extra]
return ['actor', 'created_at', ...extra]
},
],
actorsQuery: [
Expand Down
Loading

0 comments on commit cd78ec0

Please sign in to comment.