feature(dashboard): add ability to filter out events by profile id and ip (#101)

2024-12-07 21:34:32 +01:00
parent 27ee623584
commit f4ad97d87d
39 changed files with 1148 additions and 542 deletions
--- a/apps/dashboard/src/components/clients/table.tsx
+++ b/apps/dashboard/src/components/clients/table.tsx
@@ -1,55 +0,0 @@
-import { formatDate } from '@/utils/date';
-import type { ColumnDef } from '@tanstack/react-table';
-
-import type { IServiceClientWithProject } from '@openpanel/db';
-
-import { ACTIONS } from '../data-table';
-import { ClientActions } from './client-actions';
-
-export const columns: ColumnDef<IServiceClientWithProject>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-    cell: ({ row }) => {
-      return (
-        <div>
-          <div>{row.original.name}</div>
-          <div className=" text-muted-foreground">
-            {row.original.project?.name ?? 'No project'}
-          </div>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'id',
-    header: 'Client ID',
-  },
-  {
-    accessorKey: 'cors',
-    header: 'Cors',
-  },
-  {
-    accessorKey: 'secret',
-    header: 'Secret',
-    cell: (info) =>
-      info.getValue() ? (
-        <div className="italic text-muted-foreground">Hidden</div>
-      ) : (
-        'None'
-      ),
-  },
-  {
-    accessorKey: 'createdAt',
-    header: 'Created at',
-    cell({ row }) {
-      const date = row.original.createdAt;
-      return formatDate(date);
-    },
-  },
-  {
-    id: ACTIONS,
-    header: 'Actions',
-    cell: ({ row }) => <ClientActions {...row.original} />,
-  },
-];
--- a/apps/dashboard/src/components/clients/table/columns.tsx
+++ b/apps/dashboard/src/components/clients/table/columns.tsx
@@ -0,0 +1,56 @@
+import { EventIcon } from '@/components/events/event-icon';
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { pushModal } from '@/modals';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import { ACTIONS } from '@/components/data-table';
+import type { IServiceClientWithProject, IServiceEvent } from '@openpanel/db';
+import { ClientActions } from '../client-actions';
+
+export function useColumns() {
+  const number = useNumber();
+  const columns: ColumnDef<IServiceClientWithProject>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        return <div className="font-medium">{row.original.name}</div>;
+      },
+    },
+    {
+      accessorKey: 'id',
+      header: 'Client ID',
+      cell: ({ row }) => <div className="font-mono">{row.original.id}</div>,
+    },
+    // {
+    //   accessorKey: 'secret',
+    //   header: 'Secret',
+    //   cell: (info) =>
+    //       <div className="italic text-muted-foreground"></div>
+
+    // },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created at',
+      cell({ row }) {
+        const date = row.original.createdAt;
+        return (
+          <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
+        );
+      },
+    },
+    {
+      id: ACTIONS,
+      header: 'Actions',
+      cell: ({ row }) => <ClientActions {...row.original} />,
+    },
+  ];
+
+  return columns;
+}
--- a/apps/dashboard/src/components/clients/table/index.tsx
+++ b/apps/dashboard/src/components/clients/table/index.tsx
@@ -0,0 +1,67 @@
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { Pagination } from '@/components/pagination';
+import { Button } from '@/components/ui/button';
+import { TableSkeleton } from '@/components/ui/table';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { GanttChartIcon, PlusIcon } from 'lucide-react';
+import type { Dispatch, SetStateAction } from 'react';
+
+import type { IServiceClientWithProject } from '@openpanel/db';
+
+import { useAppParams } from '@/hooks/useAppParams';
+import { pushModal } from '@/modals';
+import { useColumns } from './columns';
+
+type Props = {
+  query: UseQueryResult<IServiceClientWithProject[]>;
+  cursor: number;
+  setCursor: Dispatch<SetStateAction<number>>;
+};
+
+export const ClientsTable = ({ query, ...props }: Props) => {
+  const columns = useColumns();
+  const { data, isFetching, isLoading } = query;
+
+  if (isLoading) {
+    return <TableSkeleton cols={columns.length} />;
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No clients here" icon={GanttChartIcon}>
+        <p>Could not find any clients</p>
+        <div className="row gap-4 mt-4">
+          {'cursor' in props && props.cursor !== 0 && (
+            <Button
+              className="mt-8"
+              variant="outline"
+              onClick={() => props.setCursor((p) => p - 1)}
+            >
+              Go to previous page
+            </Button>
+          )}
+          <Button icon={PlusIcon} onClick={() => pushModal('AddClient')}>
+            Add client
+          </Button>
+        </div>
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+      {'cursor' in props && (
+        <Pagination
+          className="mt-2"
+          setCursor={props.setCursor}
+          cursor={props.cursor}
+          count={Number.POSITIVE_INFINITY}
+          take={50}
+          loading={isFetching}
+        />
+      )}
+    </>
+  );
+};
--- a/apps/dashboard/src/components/forms/tag-input.tsx
+++ b/apps/dashboard/src/components/forms/tag-input.tsx
@@ -14,6 +14,7 @@ type Props = {
  className?: string;
  onChange: (value: string[]) => void;
  renderTag?: (tag: string) => string;
+  id?: string;
 };

 const TagInput = ({
@@ -22,6 +23,7 @@ const TagInput = ({
  renderTag,
  placeholder,
  error,
+  id,
 }: Props) => {
  const value = (
    Array.isArray(propValue) ? propValue : propValue ? [propValue] : []
@@ -34,7 +36,7 @@ const TagInput = ({
  const [scope, animate] = useAnimate();

  const appendTag = (tag: string) => {
-    onChange([...value, tag]);
+    onChange([...value, tag.trim()]);
  };

  const removeTag = (tag: string) => {
@@ -141,6 +143,7 @@ const TagInput = ({
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
+        id={id}
      />
    </div>
  );
--- a/apps/dashboard/src/components/full-width-navbar.tsx
+++ b/apps/dashboard/src/components/full-width-navbar.tsx
@@ -2,7 +2,7 @@

 import { cn } from '@/utils/cn';

-import { Logo } from './logo';
+import { Logo, LogoSquare } from './logo';

 type Props = {
  children: React.ReactNode;
@@ -13,7 +13,7 @@ const FullWidthNavbar = ({ children, className }: Props) => {
  return (
    <div className={cn('border-b border-border bg-card', className)}>
      <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
-        <Logo />
+        <LogoSquare className="size-8" />
        {children}
      </div>
    </div>
--- a/apps/dashboard/src/components/projects/project-card.tsx
+++ b/apps/dashboard/src/components/projects/project-card.tsx
@@ -5,30 +5,48 @@ import { escape } from 'sqlstring';
 import type { IServiceProject } from '@openpanel/db';
 import { TABLE_NAMES, chQuery } from '@openpanel/db';

+import { SettingsIcon } from 'lucide-react';
+import Link from 'next/link';
 import { ChartSSR } from '../chart-ssr';
 import { FadeIn } from '../fade-in';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { LinkButton } from '../ui/button';

-function ProjectCard({ id, name, organizationId }: IServiceProject) {
+function ProjectCard({ id, domain, name, organizationId }: IServiceProject) {
  // For some unknown reason I get when navigating back to this page when using <Link />
  // Should be solved: https://github.com/vercel/next.js/issues/61336
  // But still get the error
  return (
-    <a
-      href={`/${organizationId}/${id}`}
-      className="card inline-flex flex-col gap-2 p-4 transition-transform hover:-translate-y-1"
-    >
-      <div className="font-medium">{name}</div>
-      <div className="-mx-4 aspect-[15/1]">
-        <Suspense>
-          <ProjectChart id={id} />
-        </Suspense>
-      </div>
-      <div className="flex justify-end gap-4 ">
-        <Suspense>
-          <ProjectMetrics id={id} />
-        </Suspense>
-      </div>
-    </a>
+    <div className="relative card hover:-translate-y-px hover:shadow-sm">
+      <a
+        href={`/${organizationId}/${id}`}
+        className="col p-4 transition-transform"
+      >
+        <div className="font-medium flex items-center gap-2 text-lg pb-2">
+          <div className="row gap-2 flex-1">
+            {domain && <SerieIcon name={domain ?? ''} />}
+            {name}
+          </div>
+        </div>
+        <div className="-mx-4 aspect-[8/1]">
+          <Suspense>
+            <ProjectChart id={id} />
+          </Suspense>
+        </div>
+        <div className="flex justify-end gap-4 h-9 md:h-4">
+          <Suspense>
+            <ProjectMetrics id={id} />
+          </Suspense>
+        </div>
+      </a>
+      <LinkButton
+        variant="ghost"
+        href={`/${organizationId}/${id}/settings/projects`}
+        className="text-muted-foreground absolute top-2 right-2"
+      >
+        <SettingsIcon size={16} />
+      </LinkButton>
+    </div>
  );
 }

--- a/apps/dashboard/src/components/settings-toggle.tsx
+++ b/apps/dashboard/src/components/settings-toggle.tsx
@@ -17,6 +17,8 @@ import { CheckIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import * as React from 'react';

+import { useAppParams } from '@/hooks/useAppParams';
+import { useAuth } from '@clerk/nextjs';
 import { ProjectLink } from './links';

 interface Props {
@@ -25,6 +27,8 @@ interface Props {

 export default function SettingsToggle({ className }: Props) {
  const { setTheme, theme } = useTheme();
+  const { projectId } = useAppParams();
+  const auth = useAuth();

  return (
    <DropdownMenu>
@@ -35,37 +39,47 @@ export default function SettingsToggle({ className }: Props) {
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="center" className="w-56">
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/reports">
-            Create report
-            <DropdownMenuShortcut>
-              <PlusIcon className="h-4 w-4" />
-            </DropdownMenuShortcut>
-          </ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel>Settings</DropdownMenuLabel>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/organization">Organization</ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/projects">Projects</ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/profile">Your profile</ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/references">References</ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/notifications">
-            Notifications
-          </ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <ProjectLink href="/settings/integrations">Integrations</ProjectLink>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
+        {projectId && (
+          <>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/reports">
+                Create report
+                <DropdownMenuShortcut>
+                  <PlusIcon className="h-4 w-4" />
+                </DropdownMenuShortcut>
+              </ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Settings</DropdownMenuLabel>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/organization">
+                Organization
+              </ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/projects">
+                Project & Clients
+              </ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/profile">Your profile</ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/references">References</ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/notifications">
+                Notifications
+              </ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <ProjectLink href="/settings/integrations">
+                Integrations
+              </ProjectLink>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
        <DropdownMenuSub>
          <DropdownMenuSubTrigger className="flex w-full items-center justify-between">
            Theme
@@ -87,7 +101,14 @@ export default function SettingsToggle({ className }: Props) {
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
-        <DropdownMenuItem className="text-red-600">Logout</DropdownMenuItem>
+        <DropdownMenuItem
+          className="text-red-600"
+          onClick={() => {
+            auth.signOut();
+          }}
+        >
+          Logout
+        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
--- a/apps/dashboard/src/components/ui/checkbox.tsx
+++ b/apps/dashboard/src/components/ui/checkbox.tsx
@@ -52,7 +52,7 @@ const CheckboxInput = React.forwardRef<
    )}
  >
    <Checkbox ref={ref} {...props} className="relative top-0.5" />
-    <div className=" font-medium">{props.children}</div>
+    <div className="font-medium leading-5">{props.children}</div>
  </label>
 ));
 CheckboxInput.displayName = 'CheckboxInput';
--- a/apps/dashboard/src/components/ui/combobox.tsx
+++ b/apps/dashboard/src/components/ui/combobox.tsx
@@ -14,6 +14,7 @@ import {
  PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/utils/cn';
+import { PopoverPortal } from '@radix-ui/react-popover';
 import type { LucideIcon } from 'lucide-react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import VirtualList from 'rc-virtual-list';
@@ -98,67 +99,69 @@ export function Combobox<T extends string>({
          </Button>
        )}
      </PopoverTrigger>
-      <PopoverContent
-        className="w-full max-w-md p-0"
-        align={align}
-        portal={portal}
-      >
-        <Command shouldFilter={false}>
-          {searchable === true && (
-            <CommandInput
-              placeholder="Search item..."
-              value={search}
-              onValueChange={setSearch}
-            />
-          )}
-          {typeof onCreate === 'function' && search ? (
-            <CommandEmpty className="p-2">
-              <Button
-                onClick={() => {
-                  onCreate(search as T);
-                  setSearch('');
-                  setOpen(false);
-                }}
-              >
-                Create &quot;{search}&quot;
-              </Button>
-            </CommandEmpty>
-          ) : (
-            <CommandEmpty>Nothing selected</CommandEmpty>
-          )}
-          <VirtualList
-            height={Math.min(items.length * 32, 300)}
-            data={items.filter((item) => {
-              if (search === '') return true;
-              return item.label.toLowerCase().includes(search.toLowerCase());
-            })}
-            itemHeight={32}
-            itemKey="value"
-            className="min-w-60"
-          >
-            {(item) => (
-              <CommandItem
-                key={item.value}
-                value={item.value}
-                onSelect={(currentValue) => {
-                  const value = find(currentValue)?.value ?? currentValue;
-                  onChange(value as T);
-                  setOpen(false);
-                }}
-                {...(item.disabled && { disabled: true })}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4 flex-shrink-0',
-                    value === item.value ? 'opacity-100' : 'opacity-0',
-                  )}
-                />
-                {item.label}
-              </CommandItem>
+      <PopoverPortal>
+        <PopoverContent
+          className="w-full max-w-md p-0"
+          align={align}
+          portal={portal}
+        >
+          <Command shouldFilter={false}>
+            {searchable === true && (
+              <CommandInput
+                placeholder="Search item..."
+                value={search}
+                onValueChange={setSearch}
+              />
            )}
-          </VirtualList>
-        </Command>
-      </PopoverContent>
+            {typeof onCreate === 'function' && search ? (
+              <CommandEmpty className="p-2">
+                <Button
+                  onClick={() => {
+                    onCreate(search as T);
+                    setSearch('');
+                    setOpen(false);
+                  }}
+                >
+                  Create &quot;{search}&quot;
+                </Button>
+              </CommandEmpty>
+            ) : (
+              <CommandEmpty>Nothing selected</CommandEmpty>
+            )}
+            <VirtualList
+              height={Math.min(items.length * 32, 300)}
+              data={items.filter((item) => {
+                if (search === '') return true;
+                return item.label.toLowerCase().includes(search.toLowerCase());
+              })}
+              itemHeight={32}
+              itemKey="value"
+              className="min-w-60"
+            >
+              {(item) => (
+                <CommandItem
+                  key={item.value}
+                  value={item.value}
+                  onSelect={(currentValue) => {
+                    const value = find(currentValue)?.value ?? currentValue;
+                    onChange(value as T);
+                    setOpen(false);
+                  }}
+                  {...(item.disabled && { disabled: true })}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4 flex-shrink-0',
+                      value === item.value ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                  {item.label}
+                </CommandItem>
+              )}
+            </VirtualList>
+          </Command>
+        </PopoverContent>
+      </PopoverPortal>
    </Popover>
  );
 }
--- a/apps/dashboard/src/components/widget.tsx
+++ b/apps/dashboard/src/components/widget.tsx
@@ -9,7 +9,7 @@ export function WidgetHead({ children, className }: WidgetHeadProps) {
  return (
    <div
      className={cn(
-        'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-medium',
+        'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-semibold [&_.title]:text-lg',
        className,
      )}
    >