feat: key details (#3242)

* chore: remove key details

* refactor: add v2 for easier dev

* chore: cleanup old key detail related stuff

* feat: add initial key details

* fix: style and color fixes

* feat: add chart of key details

* fix: use our new controls component

* chore: run fmt

* feat: Add key details drawer

* feat: add proper details error checking

* feat: add minute granularity

* chore: fmt

* fix: add settings to key details

* feat: add live query

* feat: add loading animation overview

* fix: ring colors

* feat: add permisssions

* fix: permissions

* feat: add credits

* feat: add ai saerch

* fix: broken test

* fix: coderabit issues

* fix: remove unused param

* fix: analytics return type

* fix: test case

* fix: revalidation issue

* fix: separator for remaining credit

* fix: coderabbit issues

* fix: import path

Author: ogzhanolguncu

apps/api/src/pkg/analytics.ts

@@ -4,10 +4,7 @@ import { z } from "zod";
 export class Analytics {
   private readonly clickhouse: ClickHouse;
 
-  constructor(opts: {
-    clickhouseUrl: string;
-    clickhouseInsertUrl?: string;
-  }) {
+  constructor(opts: { clickhouseUrl: string; clickhouseInsertUrl?: string }) {
     if (opts.clickhouseInsertUrl) {
       this.clickhouse = new ClickHouse({
         insertUrl: opts.clickhouseInsertUrl,
@@ -44,7 +41,7 @@ export class Analytics {
   }
 
   public get getVerificationsDaily() {
-    return this.clickhouse.verifications.perDay;
+    return this.clickhouse.verifications.timeseries.perDay;
   }
 
   /**

apps/api/src/routes/v1_keys_getVerifications.ts

@@ -2,7 +2,9 @@ import type { App } from "@/pkg/hono/app";
 import { createRoute, z } from "@hono/zod-openapi";
 
 import { rootKeyAuth } from "@/pkg/auth/root_key";
+import type { CacheNamespaces } from "@/pkg/cache/namespaces";
 import { UnkeyApiError, openApiErrorResponses } from "@/pkg/errors";
+import type { VerificationTimeseriesDataPoint } from "@unkey/clickhouse/src/verifications";
 import { buildUnkeyQuery, type unkeyPermissionValidation } from "@unkey/rbac";
 
 const route = createRoute({
@@ -222,23 +224,33 @@ export const registerV1KeysGetVerifications = (app: App) =>
     const verificationsFromAllKeys = await Promise.all(
       ids.map(({ keyId, keySpaceId }) => {
         return cache.verificationsByKeyId.swr(`${keyId}:${start}-${end}`, async () => {
-          const res = await analytics.getVerificationsDaily({
-            workspaceId: authorizedWorkspaceId,
-            keySpaceId: keySpaceId,
-            keyId: keyId,
-            start: start ? start : now - 24 * 60 * 60 * 1000,
-            end: end ? end : now,
-          });
-          if (res.err) {
-            throw new Error(res.err.message);
-          }
-          return res.val;
+          const res = await analytics
+            .getVerificationsDaily({
+              workspaceId: authorizedWorkspaceId,
+              keyspaceId: keySpaceId,
+              keyId: keyId,
+              startTime: start ? start : now - 24 * 60 * 60 * 1000,
+              endTime: end ? end : now,
+              identities: null,
+              keyIds: null,
+              outcomes: null,
+              names: null,
+            })
+            .catch((err) => {
+              throw new Error(err.message);
+            });
+
+          return transformData(res);
         });
       }),
     );
 
     const verifications: {
-      [time: number]: { success: number; rateLimited: number; usageExceeded: number };
+      [time: number]: {
+        success: number;
+        rateLimited: number;
+        usageExceeded: number;
+      };
     } = {};
     for (const dataPoint of verificationsFromAllKeys) {
       if (dataPoint.err) {
@@ -247,7 +259,11 @@ export const registerV1KeysGetVerifications = (app: App) =>
       }
       for (const d of dataPoint.val!) {
         if (!verifications[d.time]) {
-          verifications[d.time] = { success: 0, rateLimited: 0, usageExceeded: 0 };
+          verifications[d.time] = {
+            success: 0,
+            rateLimited: 0,
+            usageExceeded: 0,
+          };
         }
         switch (d.outcome) {
           case "VALID":
@@ -283,3 +299,38 @@ export const registerV1KeysGetVerifications = (app: App) =>
       ),
     });
   });
+
+function transformData(
+  data: VerificationTimeseriesDataPoint[] | undefined,
+): CacheNamespaces["verificationsByKeyId"] {
+  if (!data || !data.length) {
+    return [];
+  }
+
+  const verificationsByKeyId = data.flatMap((item) => {
+    const time = item.x;
+    const outcomes: Array<{ outcome: string; count: number }> = [
+      { outcome: "valid", count: item.y.valid_count },
+      { outcome: "rate_limited", count: item.y.rate_limited_count },
+      {
+        outcome: "insufficient_permissions",
+        count: item.y.insufficient_permissions_count,
+      },
+      { outcome: "forbidden", count: item.y.forbidden_count },
+      { outcome: "disabled", count: item.y.disabled_count },
+      { outcome: "expired", count: item.y.expired_count },
+      { outcome: "usage_exceeded", count: item.y.usage_exceeded_count },
+    ];
+
+    // Only include outcomes with non-zero counts
+    return outcomes
+      .filter((outcome) => outcome.count > 0)
+      .map((outcome) => ({
+        time,
+        count: outcome.count,
+        outcome: outcome.outcome,
+      }));
+  });
+
+  return verificationsByKeyId;
+}

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/charts/bar-chart/utils.ts

@@ -39,7 +39,7 @@ export function createOutcomeChartConfig(includedOutcomes?: string[]) {
 
     // Convert to the format used in our timeseries data (snake_case)
     const key = outcome.toLowerCase();
-    const colorClass = OUTCOME_BACKGROUND_COLORS[outcome] || "bg-accent-4";
+    const colorClass = OUTCOME_BACKGROUND_COLORS[outcome];
 
     config[key] = {
       label: formatOutcomeName(outcome),

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/controls/index.tsx

@@ -1,30 +1,24 @@
+import {
+  ControlsContainer,
+  ControlsLeft,
+  ControlsRight,
+} from "@/components/logs/controls-container";
 import { LogsDateTime } from "./components/logs-datetime";
 import { LogsFilters } from "./components/logs-filters";
 import { LogsRefresh } from "./components/logs-refresh";
 import { LogsSearch } from "./components/logs-search";
 
 export function KeysOverviewLogsControls({ apiId }: { apiId: string }) {
   return (
-    <div className="flex flex-col border-b border-gray-4 w-full">
-      <div className="px-3 py-1 w-full justify-between flex items-center">
-        <div className="flex gap-2 w-full">
-          <div className="flex flex-1 gap-2 items-center">
-            <LogsSearch apiId={apiId} />
-          </div>
-          <div className="flex gap-2 md:w-full max-md:justify-end">
-            <div className="flex gap-2 items-center">
-              <LogsFilters />
-            </div>
-            <div className="flex gap-2 items-center">
-              <LogsDateTime />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex gap-2 max-md:hidden">
-          <LogsRefresh />
-        </div>
-      </div>
-    </div>
+    <ControlsContainer>
+      <ControlsLeft>
+        <LogsSearch apiId={apiId} />
+        <LogsFilters />
+        <LogsDateTime />
+      </ControlsLeft>
+      <ControlsRight>
+        <LogsRefresh />
+      </ControlsRight>
+    </ControlsContainer>
   );
 }

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx

@@ -1,36 +1,18 @@
 "use client";
+import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { cn } from "@/lib/utils";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
 import { TriangleWarning2 } from "@unkey/icons";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { AnimatedLoadingSpinner } from "@unkey/ui";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
 import { getErrorPercentage, getErrorSeverity } from "../utils/calculate-blocked-percentage";
 
-export const KeyTooltip = ({
-  children,
-  content,
-}: {
-  children: React.ReactNode;
-  content: React.ReactNode;
-}) => {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent
-          className="bg-gray-12 text-gray-1 px-3 py-2 border border-accent-6 shadow-md font-medium text-xs"
-          side="right"
-        >
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
-
 type KeyIdentifierColumnProps = {
   log: KeysOverviewLog;
   apiId: string;
+  onNavigate?: () => void;
 };
 
 // Get warning icon based on error severity
@@ -61,26 +43,48 @@ const getWarningMessage = (severity: string, errorRate: number) => {
   }
 };
 
-export const KeyIdentifierColumn = ({ log, apiId }: KeyIdentifierColumnProps) => {
+export const KeyIdentifierColumn = ({ log, apiId, onNavigate }: KeyIdentifierColumnProps) => {
+  const router = useRouter();
   const errorPercentage = getErrorPercentage(log);
   const severity = getErrorSeverity(log);
   const hasErrors = severity !== "none";
 
+  const [isNavigating, setIsNavigating] = useState(false);
+
+  const handleLinkClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsNavigating(true);
+
+      onNavigate?.();
+
+      router.push(`/apis/${apiId}/keys/${log.key_details?.key_auth_id}/${log.key_id}`);
+    },
+    [apiId, log.key_id, log.key_details?.key_auth_id, onNavigate, router.push],
+  );
+
   return (
     <div className="flex gap-6 items-center pl-2">
-      <KeyTooltip
-        content={<p className="text-sm">{getWarningMessage(severity, errorPercentage)}</p>}
+      <RatelimitOverviewTooltip
+        content={<p className="text-xs">{getWarningMessage(severity, errorPercentage)}</p>}
       >
-        <div className={cn("transition-opacity", hasErrors ? "opacity-100" : "opacity-0")}>
-          {getWarningIcon(severity)}
-        </div>
-      </KeyTooltip>
+        {isNavigating ? (
+          <div className="size-[12px] items-center justify-center flex">
+            <AnimatedLoadingSpinner />
+          </div>
+        ) : (
+          <div className={cn("transition-opacity", hasErrors ? "opacity-100" : "opacity-0")}>
+            {getWarningIcon(severity)}
+          </div>
+        )}
+      </RatelimitOverviewTooltip>
       <Link
         title={`View details for ${log.key_id}`}
         className="font-mono group-hover:underline decoration-dotted"
         href={`/apis/${apiId}/keys/${log.key_details?.key_auth_id}/${log.key_id}`}
+        onClick={handleLinkClick}
       >
-        <div className="font-mono font-medium truncate">
+        <div className="font-mono font-medium truncate flex items-center">
           {log.key_id.substring(0, 8)}...
           {log.key_id.substring(log.key_id.length - 4)}
         </div>

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx

@@ -36,7 +36,9 @@ export const KeysOverviewLogsTable = ({ apiId, setSelectedLog, log: selectedLog
         header: "ID",
         width: "15%",
         headerClassName: "pl-11",
-        render: (log) => <KeyIdentifierColumn log={log} apiId={apiId} />,
+        render: (log) => (
+          <KeyIdentifierColumn log={log} apiId={apiId} onNavigate={() => setSelectedLog(null)} />
+        ),
       },
       {
         key: "name",

apps/dashboard/app/(app)/apis/[apiId]/actions.ts

@@ -1,5 +1,7 @@
 import { getAuth } from "@/lib/auth";
 import { and, db, eq, isNull } from "@/lib/db";
+import { getAllKeys } from "@/lib/trpc/routers/api/keys/query-api-keys/get-all-keys";
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { apis } from "@unkey/db/src/schema";
 import { notFound } from "next/navigation";
 
@@ -64,3 +66,26 @@ export const fetchApiAndWorkspaceDataFromDb = async (apiId: string): Promise<Api
     workspaceApis,
   };
 };
+
+export async function getKeyDetails(
+  keyId: string,
+  keyspaceId: string,
+  workspaceId: string,
+): Promise<KeyDetails | null> {
+  const result = await getAllKeys({
+    keyspaceId,
+    workspaceId,
+    filters: {
+      keyIds: [{ operator: "is", value: keyId }],
+    },
+    limit: 1,
+  });
+
+  // If no keys found, return null
+  if (result.keys.length === 0) {
+    return null;
+  }
+
+  // Return the first (and only) key
+  return result.keys[0];
+}