Feature/move list to client (#50)
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
c2abdaadf2
commit
668434d246
@@ -230,7 +230,7 @@ export default function AddClient(props: Props) {
|
||||
]}
|
||||
placeholder="Select a project"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{field.value === 'write' &&
|
||||
'Write: Is the default client type and is used for ingestion of data'}
|
||||
{field.value === 'read' &&
|
||||
|
||||
@@ -31,12 +31,13 @@ export default function AddDashboard() {
|
||||
|
||||
const mutation = api.dashboard.create.useMutation({
|
||||
onError: handleError,
|
||||
onSuccess() {
|
||||
router.refresh();
|
||||
onSuccess(res) {
|
||||
router.push(`/${organizationSlug}/${projectId}/dashboards/${res.id}`);
|
||||
toast('Success', {
|
||||
description: 'Dashboard created.',
|
||||
});
|
||||
popModal();
|
||||
router.refresh();
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@ export default function FunnelStepDetails(props: Props) {
|
||||
asChild
|
||||
content={profile.createdAt.toLocaleString()}
|
||||
>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<div className=" text-muted-foreground">
|
||||
{profile.createdAt.toLocaleTimeString()}
|
||||
</div>
|
||||
</Tooltiper>
|
||||
|
||||
@@ -33,7 +33,7 @@ export function ModalHeader({
|
||||
<div className={cn('mb-6 flex justify-between', className)}>
|
||||
<div>
|
||||
<div className="mt-0.5 font-medium">{title}</div>
|
||||
{!!text && <div className="text-sm text-muted-foreground">{text}</div>}
|
||||
{!!text && <div className=" text-muted-foreground">{text}</div>}
|
||||
</div>
|
||||
{onClose !== false && (
|
||||
<Button
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function OnboardingTroubleshoot() {
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
<p className="mt-4 text-sm">
|
||||
<p className="mt-4 ">
|
||||
Still have issues? Join our{' '}
|
||||
<a href="https://go.openpanel.dev/discord" className="underline">
|
||||
discord channel
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function ShareOverviewModal() {
|
||||
render={({ field }) => (
|
||||
<label
|
||||
htmlFor="public"
|
||||
className="mb-4 flex items-center gap-2 text-sm font-medium leading-none"
|
||||
className="mb-4 flex items-center gap-2 font-medium leading-none"
|
||||
>
|
||||
<Checkbox
|
||||
id="public"
|
||||
|
||||
214
apps/dashboard/src/modals/event-details.tsx
Normal file
214
apps/dashboard/src/modals/event-details.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import { ChartRootShortcut } from '@/components/report/chart';
|
||||
import { KeyValue } from '@/components/ui/key-value';
|
||||
import { useAppParams } from '@/hooks/useAppParams';
|
||||
import {
|
||||
useEventQueryFilters,
|
||||
useEventQueryNamesFilter,
|
||||
} from '@/hooks/useEventQueryFilters';
|
||||
import { api } from '@/trpc/client';
|
||||
import { round } from 'mathjs';
|
||||
|
||||
import { popModal } from '.';
|
||||
import { ModalContent, ModalHeader } from './Modal/Container';
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export default function EventDetails({ id }: Props) {
|
||||
const { projectId } = useAppParams();
|
||||
const [, setEvents] = useEventQueryNamesFilter();
|
||||
const [, setFilter] = useEventQueryFilters();
|
||||
const query = api.event.byId.useQuery({ id, projectId });
|
||||
|
||||
if (query.isLoading || query.isFetching) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (query.isError || !query.isSuccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const event = query.data;
|
||||
|
||||
const common = [
|
||||
{
|
||||
name: 'Origin',
|
||||
value: event.origin,
|
||||
},
|
||||
{
|
||||
name: 'Duration',
|
||||
value: event.duration ? round(event.duration / 1000, 1) : undefined,
|
||||
},
|
||||
{
|
||||
name: 'Referrer',
|
||||
value: event.referrer,
|
||||
onClick() {
|
||||
setFilter('referrer', event.referrer ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Referrer name',
|
||||
value: event.referrerName,
|
||||
onClick() {
|
||||
setFilter('referrer_name', event.referrerName ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Referrer type',
|
||||
value: event.referrerType,
|
||||
onClick() {
|
||||
setFilter('referrer_type', event.referrerType ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Brand',
|
||||
value: event.brand,
|
||||
onClick() {
|
||||
setFilter('brand', event.brand ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Model',
|
||||
value: event.model,
|
||||
onClick() {
|
||||
setFilter('model', event.model ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Browser',
|
||||
value: event.browser,
|
||||
onClick() {
|
||||
setFilter('browser', event.browser ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Browser version',
|
||||
value: event.browserVersion,
|
||||
onClick() {
|
||||
setFilter('browser_version', event.browserVersion ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'OS',
|
||||
value: event.os,
|
||||
onClick() {
|
||||
setFilter('os', event.os ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'OS version',
|
||||
value: event.osVersion,
|
||||
onClick() {
|
||||
setFilter('os_version', event.osVersion ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'City',
|
||||
value: event.city,
|
||||
onClick() {
|
||||
setFilter('city', event.city ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Region',
|
||||
value: event.region,
|
||||
onClick() {
|
||||
setFilter('region', event.region ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Country',
|
||||
value: event.country,
|
||||
onClick() {
|
||||
setFilter('country', event.country ?? '');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Device',
|
||||
value: event.device,
|
||||
onClick() {
|
||||
setFilter('device', event.device ?? '');
|
||||
},
|
||||
},
|
||||
].filter((item) => typeof item.value === 'string' && item.value);
|
||||
|
||||
const properties = Object.entries(event.properties)
|
||||
.map(([name, value]) => ({
|
||||
name,
|
||||
value: value as string | number | undefined,
|
||||
}))
|
||||
.filter((item) => typeof item.value === 'string' && item.value);
|
||||
|
||||
return (
|
||||
<ModalContent>
|
||||
<ModalHeader title={event.name} />
|
||||
<div>
|
||||
<div className="flex flex-col gap-8">
|
||||
{properties.length > 0 && (
|
||||
<div>
|
||||
<div className="mb-2 font-medium">Params</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{properties.map((item) => (
|
||||
<KeyValue
|
||||
key={item.name}
|
||||
name={item.name.replace(/^__/, '')}
|
||||
value={item.value}
|
||||
onClick={() => {
|
||||
setFilter(
|
||||
`properties.${item.name}`,
|
||||
item.value ? String(item.value) : '',
|
||||
'is'
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="mb-2 font-medium">Common</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{common.map((item) => (
|
||||
<KeyValue
|
||||
key={item.name}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
onClick={() => item.onClick?.()}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 flex justify-between font-medium">
|
||||
<div>Similar events</div>
|
||||
<button
|
||||
className="text-muted-foreground hover:underline"
|
||||
onClick={() => {
|
||||
setEvents([event.name]);
|
||||
popModal();
|
||||
}}
|
||||
>
|
||||
Show all
|
||||
</button>
|
||||
</div>
|
||||
<ChartRootShortcut
|
||||
projectId={event.projectId}
|
||||
chartType="histogram"
|
||||
events={[
|
||||
{
|
||||
id: 'A',
|
||||
name: event.name,
|
||||
displayName: 'Similar events',
|
||||
segment: 'event',
|
||||
filters: [],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,9 @@ const Loading = () => (
|
||||
);
|
||||
|
||||
const modals = {
|
||||
EventDetails: dynamic(() => import('./event-details'), {
|
||||
loading: Loading,
|
||||
}),
|
||||
EditProject: dynamic(() => import('./EditProject'), {
|
||||
loading: Loading,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user