Skip to content

feat: allow clicking on keyid on overview #2990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ogzhanolguncu wants to merge 1 commit into from
Closed

feat: allow clicking on keyid on overview #2990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion ...apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Button } from "@unkey/ui";
import { TimestampInfo } from "@/components/timestamp-info";
import { Clone } from "@unkey/icons";
import { isValid, parse, parseISO } from "date-fns";
import Link from "next/link";

const TIME_KEYWORDS = [
"created",
Expand All @@ -28,9 +29,13 @@ const TIME_KEYWORDS = [
export const LogSection = ({
details,
title,
keyAuthId,
apiId,
}: {
details: string | string[];
title: string;
apiId?: string;
keyAuthId?: string;
}) => {
const handleClick = () => {
navigator.clipboard
Expand Down Expand Up @@ -73,7 +78,19 @@ export const LogSection = ({
<TimestampInfo value={value} />
</span>
) : (
<span className="ml-2 text-xs text-accent-12 truncate">{value}</span>
<span className="ml-2 text-xs text-accent-12 truncate">
{key === "ID" ? (
<Link
title="Link to the key details"
className="font-mono underline decoration-dotted"
href={`/apis/${apiId}/keys/${keyAuthId}/${value}`}
>
{value}
</Link>
) : (
value
)}
</span>
)}
</div>
);
Expand Down
8 changes: 7 additions & 1 deletion ...hboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const createPanelStyle = (distanceToTop: number): StyleObject => ({
type KeysOverviewLogDetailsProps = {
distanceToTop: number;
log: KeysOverviewLog | null;
apiId: string;
setSelectedLog: (data: KeysOverviewLog | null) => void;
};

Expand Down Expand Up @@ -96,7 +97,12 @@ export const KeysOverviewLogDetails = ({
<LogSection title="Usage" details={usage} />
{log.outcome_counts && <OutcomeDistributionSection outcomeCounts={log.outcome_counts} />}
<LogSection title="Limits" details={limits} />
<LogSection title="Identifiers" details={identifiers} />
<LogSection
title="Identifiers"
details={identifiers}
keyAuthId={log.key_details.key_auth_id}
apiId={log.key_id}
/>
Comment on lines +100 to +105
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Enhanced LogSection with navigational capabilities.

The LogSection is now correctly enhanced with keyAuthId and apiId props, enabling navigation to key details. However, I noticed that apiId is being set to log.key_id, which seems incorrect as apiId typically refers to the API identifier, not a key ID.

The value passed to apiId should probably be the actual API ID from the props. Please verify this value:

<LogSection
  title="Identifiers"
  details={identifiers}
  keyAuthId={log.key_details.key_auth_id}
-  apiId={log.key_id}
+  apiId={apiId}
/>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<LogSection
title="Identifiers"
details={identifiers}
keyAuthId={log.key_details.key_auth_id}
apiId={log.key_id}
/>
<LogSection
title="Identifiers"
details={identifiers}
keyAuthId={log.key_details.key_auth_id}
apiId={apiId}
/>

<LogSection title="Identity" details={identity} />
<RolesSection roles={log.key_details.roles || []} />
<PermissionsSection permissions={log.key_details.permissions || []} />
Expand Down
18 changes: 13 additions & 5 deletions ...board/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ 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 Link from "next/link";
import { getErrorPercentage, getErrorSeverity } from "../utils/calculate-blocked-percentage";

export const KeyTooltip = ({
Expand All @@ -29,6 +30,7 @@ export const KeyTooltip = ({

type KeyIdentifierColumnProps = {
log: KeysOverviewLog;
apiId: string;
};

// Get warning icon based on error severity
Expand Down Expand Up @@ -59,7 +61,7 @@ const getWarningMessage = (severity: string, errorRate: number) => {
}
};

export const KeyIdentifierColumn = ({ log }: KeyIdentifierColumnProps) => {
export const KeyIdentifierColumn = ({ log, apiId }: KeyIdentifierColumnProps) => {
const errorPercentage = getErrorPercentage(log);
const severity = getErrorSeverity(log);
const hasErrors = severity !== "none";
Expand All @@ -73,10 +75,16 @@ export const KeyIdentifierColumn = ({ log }: KeyIdentifierColumnProps) => {
{getWarningIcon(severity)}
</div>
</KeyTooltip>
<div className="font-mono font-medium truncate">
{log.key_id.substring(0, 8)}...
{log.key_id.substring(log.key_id.length - 4)}
</div>
<Link
title="Link to the key details"
className="font-mono group-hover:underline decoration-dotted"
href={`/apis/${apiId}/keys/${log.key_details?.key_auth_id}/${log.key_id}`}
>
<div className="font-mono font-medium truncate">
{log.key_id.substring(0, 8)}...
{log.key_id.substring(log.key_id.length - 4)}
</div>
</Link>
</div>
);
};
2 changes: 1 addition & 1 deletion apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const KeysOverviewLogsTable = ({ apiId, setSelectedLog, log: selectedLog
header: "ID",
width: "15%",
headerClassName: "pl-11",
render: (log) => <KeyIdentifierColumn log={log} />,
render: (log) => <KeyIdentifierColumn log={log} apiId={apiId} />,
},
{
key: "name",
Expand Down
1 change: 1 addition & 0 deletions apps/dashboard/app/(app)/apis/[apiId]/_overview/logs-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const LogsClient = ({ apiId }: { apiId: string }) => {
<KeysOverviewLogsCharts apiId={apiId} onMount={handleDistanceToTop} />
<KeysOverviewLogsTable apiId={apiId} setSelectedLog={handleSelectedLog} log={selectedLog} />
<KeysOverviewLogDetails
apiId={apiId}
distanceToTop={tableDistanceToTop}
setSelectedLog={handleSelectedLog}
log={selectedLog}
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/lib/trpc/routers/utils/granularity.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const getTimeseriesGranularity = <TContext extends TimeseriesContext>(
} else if (timeRange >= MONTH_IN_MS) {
granularity = "per3Days";
} else if (timeRange >= WEEK_IN_MS * 2) {
granularity = "perHour";
granularity = "per6Hours";
} else if (timeRange >= WEEK_IN_MS) {
granularity = "perHour";
} else {
Expand Down
Loading