feat: New logs page

apps/dashboard/app/(app)/layout.tsx

@@ -43,7 +43,7 @@ export default async function Layout({ children, breadcrumb }: LayoutProps) {
         />
 
         <div className="isolate bg-background lg:border-l border-t lg:rounded-tl-[0.625rem] border-border w-full overflow-x-auto flex flex-col items-center lg:mt-2">
-          <div className="w-full max-w-[1152px] p-4 lg:p-8">
+          <div className="w-full p-4 lg:p-8">
             {workspace.enabled ? (
               <>
                 {/* Hacky way to make the breadcrumbs line up with the Teamswitcher on the left, because that also has h12 */}

apps/dashboard/app/(app)/logs/components/chart.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { format } from "date-fns";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+export type Log = {
+  request_id: string;
+  time: number;
+  workspace_id: string;
+  host: string;
+  method: string;
+  path: string;
+  request_headers: string[];
+  request_body: string;
+  response_status: number;
+  response_headers: string[];
+  response_body: string;
+  error: string;
+  service_latency: number;
+};
+
+const chartConfig = {
+  success: {
+    label: "Success",
+    color: "hsl(var(--chart-3))",
+  },
+  warning: {
+    label: "Warning",
+    color: "hsl(var(--chart-4))",
+  },
+  error: {
+    label: "Error",
+    color: "hsl(var(--chart-1))",
+  },
+} satisfies ChartConfig;
+
+function aggregateData(data: Log[]) {
+  const aggregatedData: {
+    date: string;
+    success: number;
+    warning: number;
+    error: number;
+  }[] = [];
+  const intervalMs = 60 * 1000 * 10;
+
+  if (data.length === 0) {
+    return aggregatedData;
+  }
+
+  const startOfDay = new Date(data[0].time).setHours(0, 0, 0, 0);
+  const endOfDay = startOfDay + 24 * 60 * 60 * 1000;
+
+  for (let timestamp = startOfDay; timestamp < endOfDay; timestamp += intervalMs) {
+    const filteredLogs = data.filter((d) => d.time >= timestamp && d.time < timestamp + intervalMs);
+
+    const success = filteredLogs.filter(
+      (log) => log.response_status >= 200 && log.response_status < 300,
+    ).length;
+    const warning = filteredLogs.filter(
+      (log) => log.response_status >= 400 && log.response_status < 500,
+    ).length;
+    const error = filteredLogs.filter((log) => log.response_status >= 500).length;
+
+    aggregatedData.push({
+      date: format(timestamp, "yyyy-MM-dd'T'HH:mm:ss"),
+      success,
+      warning,
+      error,
+    });
+  }
+
+  return aggregatedData;
+}
+
+export function LogsChart({ logs }: { logs: Log[] }) {
+  const data = aggregateData(logs);
+
+  return (
+    <ChartContainer config={chartConfig} className="h-[125px] w-full">
+      <BarChart accessibilityLayer data={data}>
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          dx={-40}
+          tickFormatter={(value) => {
+            const date = new Date(value);
+            return date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: true,
+            });
+          }}
+        />
+        <CartesianGrid strokeDasharray="2" stroke="#DFE2E6" vertical={false} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              className="w-[200px]"
+              nameKey="views"
+              labelFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: true,
+                });
+              }}
+            />
+          }
+        />
+        <Bar dataKey="success" stackId="a" fill="var(--color-success)" radius={3} />
+        <Bar dataKey="warning" stackId="a" fill="var(--color-warning)" radius={3} />
+        <Bar dataKey="error" stackId="a" fill="var(--color-error)" radius={3} />
+      </BarChart>
+    </ChartContainer>
+  );
+}

apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { addHours, format, setHours, setMinutes, setSeconds } from "date-fns";
+import type { DateRange } from "react-day-picker";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { ArrowRight, Calendar as CalendarIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useLogSearchParams } from "../../../query-state";
+import TimeSplitInput from "./time-split";
+
+export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
+  const [interimDate, setInterimDate] = useState<DateRange>({
+    from: new Date(),
+    to: new Date(),
+  });
+  const [finalDate, setFinalDate] = useState<DateRange>();
+  const [startTime, setStartTime] = useState({ HH: "09", mm: "00", ss: "00" });
+  const [endTime, setEndTime] = useState({ HH: "17", mm: "00", ss: "00" });
+  const [open, setOpen] = useState(false);
+  const { searchParams, setSearchParams } = useLogSearchParams();
+
+  useEffect(() => {
+    if (searchParams.startTime && searchParams.endTime) {
+      const from = new Date(searchParams.startTime);
+      const to = new Date(searchParams.endTime);
+      setFinalDate({ from, to });
+      setInterimDate({ from, to });
+      setStartTime({
+        HH: from.getHours().toString().padStart(2, "0"),
+        mm: from.getMinutes().toString().padStart(2, "0"),
+        ss: from.getSeconds().toString().padStart(2, "0"),
+      });
+      setEndTime({
+        HH: to.getHours().toString().padStart(2, "0"),
+        mm: to.getMinutes().toString().padStart(2, "0"),
+        ss: to.getSeconds().toString().padStart(2, "0"),
+      });
+    }
+  }, [searchParams.startTime, searchParams.endTime]);
+
+  const handleFinalDate = (interimDate: DateRange | undefined) => {
+    setOpen(false);
+
+    if (interimDate?.from) {
+      let mergedFrom = setHours(interimDate.from, Number(startTime.HH));
+      addHours(interimDate?.from, Number(startTime.HH));
+      mergedFrom = setMinutes(mergedFrom, Number(startTime.mm));
+      mergedFrom = setSeconds(mergedFrom, Number(startTime.ss));
+
+      let mergedTo: Date;
+      if (interimDate.to) {
+        mergedTo = setHours(interimDate.to, Number(endTime.HH));
+        mergedTo = setMinutes(mergedTo, Number(endTime.mm));
+        mergedTo = setSeconds(mergedTo, Number(endTime.ss));
+      } else {
+        mergedTo = setHours(interimDate.from, Number(endTime.HH));
+        mergedTo = setMinutes(mergedTo, Number(endTime.mm));
+        mergedTo = setSeconds(mergedTo, Number(endTime.ss));
+      }
+
+      setFinalDate({ from: mergedFrom, to: mergedTo });
+      setSearchParams({
+        startTime: mergedFrom.getTime(),
+        endTime: mergedTo.getTime(),
+      });
+    } else {
+      setFinalDate(interimDate);
+      setSearchParams({
+        startTime: null,
+        endTime: null,
+      });
+    }
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <div
+            id="date"
+            className={cn(
+              "justify-start text-left font-normal flex gap-2 items-center",
+              !finalDate && "text-muted-foreground",
+            )}
+          >
+            <div className="flex gap-2 items-center w-fit">
+              <div>
+                <CalendarIcon className="h-4 w-4" />
+              </div>
+              {finalDate?.from ? (
+                finalDate.to ? (
+                  <div className="truncate">
+                    {format(finalDate.from, "LLL dd, y")} - {format(finalDate.to, "LLL dd, y")}
+                  </div>
+                ) : (
+                  format(finalDate.from, "LLL dd, y")
+                )
+              ) : (
+                <span>Custom</span>
+              )}
+            </div>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0 bg-background">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={interimDate?.from}
+            selected={interimDate}
+            onSelect={(date) =>
+              setInterimDate({
+                from: date?.from,
+                to: date?.to,
+              })
+            }
+          />
+          <div className="flex flex-col gap-2">
+            <div className="border-t border-border" />
+            <div className="flex gap-2 items-center w-full justify-evenly">
+              <TimeSplitInput
+                type="start"
+                startTime={startTime}
+                endTime={endTime}
+                time={startTime}
+                setTime={setStartTime}
+                setStartTime={setStartTime}
+                setEndTime={setEndTime}
+                startDate={interimDate.from}
+                endDate={interimDate.to}
+              />
+              <ArrowRight strokeWidth={1.5} size={14} />
+              <TimeSplitInput
+                type="end"
+                startTime={startTime}
+                endTime={endTime}
+                time={endTime}
+                setTime={setEndTime}
+                setStartTime={setStartTime}
+                setEndTime={setEndTime}
+                startDate={interimDate.from}
+                endDate={interimDate.to}
+              />
+            </div>
+            <div className="border-t border-border" />
+          </div>
+          <div className="flex gap-2 p-2 w-full justify-end bg-background-subtle">
+            <Button size="sm" variant="outline" onClick={() => handleFinalDate(undefined)}>
+              Clear
+            </Button>
+            <Button size="sm" variant="primary" onClick={() => handleFinalDate(interimDate)}>
+              Apply
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

apps/dashboard/app/(app)/logs/components/filters/components/response-status.tsx

@@ -0,0 +1,92 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import React, { useEffect, useState } from "react";
+import { type ResponseStatus as Status, useLogSearchParams } from "../../../query-state";
+
+interface CheckboxItemProps {
+  id: string;
+  label: string;
+  description: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+const checkboxItems = [
+  { id: "500", label: "Error", description: "500 error codes" },
+  { id: "200", label: "Success", description: "200 success codes" },
+  { id: "400", label: "Warning", description: "400 warning codes" },
+];
+
+export const ResponseStatus = () => {
+  const [open, setOpen] = useState(false);
+  const { searchParams, setSearchParams } = useLogSearchParams();
+  const [checkedItems, setCheckedItems] = useState<Status[]>([]);
+
+  useEffect(() => {
+    if (searchParams.responseStatus) {
+      setCheckedItems(searchParams.responseStatus);
+    }
+  }, [searchParams.responseStatus]);
+
+  const handleItemChange = (status: Status, checked: boolean) => {
+    const newCheckedItems = checked
+      ? [...checkedItems, status]
+      : checkedItems.filter((item) => item !== status);
+
+    setCheckedItems(newCheckedItems);
+    setSearchParams((prevState) => ({
+      ...prevState,
+      responseStatus: newCheckedItems.length > 0 ? newCheckedItems : null,
+    }));
+  };
+
+  const getStatusDisplay = () => {
+    if (checkedItems.length === 0) {
+      return "Response Status";
+    }
+
+    const statusLabels = checkedItems
+      .map((status) => checkboxItems.find((item) => Number(item.id) === status)?.label)
+      .filter(Boolean)
+      .join(", ");
+
+    return `Response Status (${statusLabels})`;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div className="cursor-pointer">{getStatusDisplay()}</div>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 bg-background p-0">
+        {checkboxItems.map((item, index) => (
+          <React.Fragment key={item.id}>
+            <CheckboxItem
+              {...item}
+              checked={checkedItems.includes(Number(item.id) as Status)}
+              onCheckedChange={(checked) => {
+                handleItemChange(Number(item.id) as Status, checked);
+              }}
+            />
+            {index < checkboxItems.length - 1 && <div className="border-b border-border" />}
+          </React.Fragment>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const CheckboxItem = ({ id, label, description, checked, onCheckedChange }: CheckboxItemProps) => (
+  <div className="items-top flex space-x-2 p-4">
+    <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
+    <div className="grid gap-1.5 leading-none">
+      <label
+        htmlFor={id}
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {label}
+      </label>
+      <p className="text-xs text-content-subtle">{description}</p>
+    </div>
+  </div>
+);