feat: dashboard v2, esm, upgrades (#211)
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
436e81ecc9
commit
81a7e5d62e
@@ -0,0 +1,26 @@
|
||||
import { useAppParams } from '@/hooks/use-app-params';
|
||||
import useWS from '@/hooks/use-ws';
|
||||
import type { Notification } from '@openpanel/db';
|
||||
import { BellIcon } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export function NotificationProvider() {
|
||||
const { projectId } = useAppParams();
|
||||
|
||||
if (!projectId) return null;
|
||||
|
||||
return <InnerNotificationProvider projectId={projectId} />;
|
||||
}
|
||||
|
||||
export function InnerNotificationProvider({
|
||||
projectId,
|
||||
}: { projectId: string }) {
|
||||
useWS<Notification>(`/live/notifications/${projectId}`, (notification) => {
|
||||
toast(notification.title, {
|
||||
description: notification.message,
|
||||
icon: <BellIcon className="size-4" />,
|
||||
});
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useAppParams } from '@/hooks/use-app-params';
|
||||
import { useTRPC } from '@/integrations/trpc/react';
|
||||
import { pushModal } from '@/modals';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { PencilRulerIcon, PlusIcon } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { FullPageEmptyState } from '../full-page-empty-state';
|
||||
import { IntegrationCardSkeleton } from '../integrations/integration-card';
|
||||
import { Button } from '../ui/button';
|
||||
import { RuleCard } from './rule-card';
|
||||
|
||||
export function NotificationRules() {
|
||||
const { projectId } = useAppParams();
|
||||
const trpc = useTRPC();
|
||||
const query = useQuery(
|
||||
trpc.notification.rules.queryOptions({
|
||||
projectId,
|
||||
}),
|
||||
);
|
||||
const data = useMemo(() => {
|
||||
return query.data || [];
|
||||
}, [query.data]);
|
||||
|
||||
const isLoading = query.isLoading;
|
||||
|
||||
if (!isLoading && data.length === 0) {
|
||||
return (
|
||||
<FullPageEmptyState title="No rules yet" icon={PencilRulerIcon}>
|
||||
<p>
|
||||
You have not created any rules yet. Create a rule to start getting
|
||||
notifications.
|
||||
</p>
|
||||
<Button
|
||||
className="mt-8"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
pushModal('AddNotificationRule', {
|
||||
rule: undefined,
|
||||
})
|
||||
}
|
||||
>
|
||||
Add Rule
|
||||
</Button>
|
||||
</FullPageEmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
icon={PlusIcon}
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
pushModal('AddNotificationRule', {
|
||||
rule: undefined,
|
||||
})
|
||||
}
|
||||
>
|
||||
Add Rule
|
||||
</Button>
|
||||
</div>
|
||||
<div className="col gap-4 w-full grid md:grid-cols-2">
|
||||
{isLoading && (
|
||||
<>
|
||||
<IntegrationCardSkeleton />
|
||||
<IntegrationCardSkeleton />
|
||||
<IntegrationCardSkeleton />
|
||||
</>
|
||||
)}
|
||||
<AnimatePresence mode="popLayout">
|
||||
{data.map((item) => {
|
||||
return (
|
||||
<motion.div key={item.id} layout="position">
|
||||
<RuleCard rule={item} />
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
apps/start/src/components/notifications/notifications.tsx
Normal file
16
apps/start/src/components/notifications/notifications.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { useAppParams } from '@/hooks/use-app-params';
|
||||
import { useTRPC } from '@/integrations/trpc/react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { NotificationsTable } from './table';
|
||||
|
||||
export function Notifications() {
|
||||
const { projectId } = useAppParams();
|
||||
const trpc = useTRPC();
|
||||
const query = useQuery(
|
||||
trpc.notification.list.queryOptions({
|
||||
projectId,
|
||||
}),
|
||||
);
|
||||
|
||||
return <NotificationsTable query={query} />;
|
||||
}
|
||||
133
apps/start/src/components/notifications/rule-card.tsx
Normal file
133
apps/start/src/components/notifications/rule-card.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { useTRPC } from '@/integrations/trpc/react';
|
||||
import { pushModal, showConfirm } from '@/modals';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import type { NotificationRule } from '@openpanel/db';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { FilterIcon } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { ColorSquare } from '../color-square';
|
||||
import {
|
||||
IntegrationCardFooter,
|
||||
IntegrationCardHeader,
|
||||
} from '../integrations/integration-card';
|
||||
import { PingBadge } from '../ping';
|
||||
import { Badge } from '../ui/badge';
|
||||
import { Button } from '../ui/button';
|
||||
import { Tooltiper } from '../ui/tooltip';
|
||||
|
||||
function EventBadge({
|
||||
event,
|
||||
}: { event: NotificationRule['config']['events'][number] }) {
|
||||
return (
|
||||
<Tooltiper
|
||||
disabled={!event.filters.length}
|
||||
content={
|
||||
<div className="col gap-2 font-mono">
|
||||
{event.filters.map((filter) => (
|
||||
<div key={filter.id}>
|
||||
{filter.name} {filter.operator} {JSON.stringify(filter.value)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Badge variant="outline" className="inline-flex">
|
||||
{event.name === '*' ? 'Any event' : event.name}
|
||||
{Boolean(event.filters.length) && (
|
||||
<FilterIcon className="size-2 ml-1" />
|
||||
)}
|
||||
</Badge>
|
||||
</Tooltiper>
|
||||
);
|
||||
}
|
||||
|
||||
export function RuleCard({
|
||||
rule,
|
||||
}: { rule: RouterOutputs['notification']['rules'][number] }) {
|
||||
const trpc = useTRPC();
|
||||
const client = useQueryClient();
|
||||
const deletion = useMutation(
|
||||
trpc.notification.deleteRule.mutationOptions({
|
||||
onSuccess() {
|
||||
toast.success('Rule deleted');
|
||||
client.refetchQueries(trpc.notification.rules.pathFilter());
|
||||
},
|
||||
}),
|
||||
);
|
||||
const renderConfig = () => {
|
||||
switch (rule.config.type) {
|
||||
case 'events':
|
||||
return (
|
||||
<div className="row gap-2 items-baseline flex-wrap">
|
||||
<div>Get notified when</div>
|
||||
{rule.config.events.map((event) => (
|
||||
<EventBadge key={event.id} event={event} />
|
||||
))}
|
||||
<div>occurs</div>
|
||||
</div>
|
||||
);
|
||||
case 'funnel':
|
||||
return (
|
||||
<div className="col gap-4">
|
||||
<div>Get notified when a session has completed this funnel</div>
|
||||
<div className="col gap-2">
|
||||
{rule.config.events.map((event, index) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="row gap-2 items-center font-mono"
|
||||
>
|
||||
<ColorSquare>{index + 1}</ColorSquare>
|
||||
<EventBadge key={event.id} event={event} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="card">
|
||||
<IntegrationCardHeader>
|
||||
<div className="title">{rule.name}</div>
|
||||
</IntegrationCardHeader>
|
||||
<div className="p-4 col gap-2">{renderConfig()}</div>
|
||||
<IntegrationCardFooter className="row gap-2 justify-between items-center">
|
||||
<div className="row gap-2 flex-wrap">
|
||||
{rule.integrations.map((integration) => (
|
||||
<PingBadge key={integration.id}>{integration.name}</PingBadge>
|
||||
))}
|
||||
</div>
|
||||
<div className="row gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => {
|
||||
showConfirm({
|
||||
title: `Delete ${rule.name}?`,
|
||||
text: 'This action cannot be undone.',
|
||||
onConfirm: () => {
|
||||
deletion.mutate({
|
||||
id: rule.id,
|
||||
});
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
pushModal('AddNotificationRule', {
|
||||
rule,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</IntegrationCardFooter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
184
apps/start/src/components/notifications/table/columns.tsx
Normal file
184
apps/start/src/components/notifications/table/columns.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { formatDateTime, formatTime } from '@/utils/date';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { isToday } from 'date-fns';
|
||||
|
||||
import { ProjectLink } from '@/components/links';
|
||||
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
|
||||
import { createHeaderColumn } from '@/components/ui/data-table/data-table-helpers';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import type { INotificationPayload } from '@openpanel/db';
|
||||
|
||||
function getEventFromPayload(payload: INotificationPayload | null) {
|
||||
if (payload?.type === 'event') {
|
||||
return payload.event;
|
||||
}
|
||||
if (payload?.type === 'funnel') {
|
||||
return payload.funnel[0] || null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function useColumns() {
|
||||
const columns: ColumnDef<RouterOutputs['notification']['list'][number]>[] = [
|
||||
{
|
||||
accessorKey: 'title',
|
||||
header: 'Title',
|
||||
cell({ row }) {
|
||||
const { title } = row.original;
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
{/* {isReadAt === null && <PingBadge>Unread</PingBadge>} */}
|
||||
<span className="max-w-md truncate font-medium">{title}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
variant: 'text',
|
||||
placeholder: 'Search',
|
||||
label: 'Title',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'message',
|
||||
header: 'Message',
|
||||
cell({ row }) {
|
||||
const { message } = row.original;
|
||||
return (
|
||||
<div className="inline-flex min-w-full flex-none items-center gap-2">
|
||||
{message}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
label: 'Message',
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'integration',
|
||||
header: 'Integration',
|
||||
cell({ row }) {
|
||||
const integration = row.original.integration;
|
||||
return <div>{integration?.name}</div>;
|
||||
},
|
||||
meta: {
|
||||
label: 'Integration',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'notificationRule',
|
||||
header: 'Rule',
|
||||
cell({ row }) {
|
||||
const rule = row.original.notificationRule;
|
||||
return <div>{rule?.name}</div>;
|
||||
},
|
||||
meta: {
|
||||
label: 'Rule',
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'country',
|
||||
header: 'Country',
|
||||
cell({ row }) {
|
||||
const { payload } = row.original;
|
||||
const event = getEventFromPayload(payload);
|
||||
if (!event) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="inline-flex min-w-full flex-none items-center gap-2">
|
||||
<SerieIcon name={event.country} />
|
||||
<span>{event.city}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
label: 'Country',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'os',
|
||||
header: 'OS',
|
||||
cell({ row }) {
|
||||
const { payload } = row.original;
|
||||
const event = getEventFromPayload(payload);
|
||||
if (!event) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="flex min-w-full items-center gap-2">
|
||||
<SerieIcon name={event.os} />
|
||||
<span>{event.os}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
label: 'OS',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'browser',
|
||||
header: 'Browser',
|
||||
cell({ row }) {
|
||||
const { payload } = row.original;
|
||||
const event = getEventFromPayload(payload);
|
||||
if (!event) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="inline-flex min-w-full flex-none items-center gap-2">
|
||||
<SerieIcon name={event.browser} />
|
||||
<span>{event.browser}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
label: 'Browser',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'profile',
|
||||
header: createHeaderColumn('Profile'),
|
||||
cell({ row }) {
|
||||
const { payload } = row.original;
|
||||
const event = getEventFromPayload(payload);
|
||||
if (!event) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ProjectLink
|
||||
href={`/profiles/${event.profileId}`}
|
||||
className="inline-flex min-w-full flex-none items-center gap-2"
|
||||
>
|
||||
{event.profileId}
|
||||
</ProjectLink>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
label: 'Profile',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created at',
|
||||
cell({ row }) {
|
||||
const date = row.original.createdAt;
|
||||
if (!date) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
|
||||
);
|
||||
},
|
||||
filterFn: 'isWithinRange',
|
||||
meta: {
|
||||
variant: 'dateRange',
|
||||
placeholder: 'Created at',
|
||||
label: 'Created at',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
}
|
||||
32
apps/start/src/components/notifications/table/index.tsx
Normal file
32
apps/start/src/components/notifications/table/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { UseQueryResult } from '@tanstack/react-query';
|
||||
|
||||
import { DataTable } from '@/components/ui/data-table/data-table';
|
||||
import { DataTableToolbar } from '@/components/ui/data-table/data-table-toolbar';
|
||||
import { useTable } from '@/components/ui/data-table/use-table';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import { useColumns } from './columns';
|
||||
|
||||
type Props = {
|
||||
query: UseQueryResult<
|
||||
RouterOutputs['notification']['list'][number][],
|
||||
unknown
|
||||
>;
|
||||
};
|
||||
|
||||
export const NotificationsTable = ({ query }: Props) => {
|
||||
const columns = useColumns();
|
||||
const { data, isLoading } = query;
|
||||
const { table } = useTable({
|
||||
columns,
|
||||
data: data ?? [],
|
||||
loading: isLoading,
|
||||
pageSize: 50,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTableToolbar table={table} />
|
||||
<DataTable table={table} loading={isLoading} />;
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user