);
}
/**
- * How much of an install key's allowance is spent. An unlimited key shows a count rather than a
- * bar, since there is nothing to fill.
+ * How much of an install key's allowance is spent, and how much of it is claimed by devices still
+ * awaiting a decision. An unlimited key shows a count rather than a bar, since there is nothing
+ * to fill.
*/
export default function UsageMeter({
installKey,
@@ -56,18 +93,49 @@ export default function UsageMeter({
const usage = getUsageInfo(installKey);
const { inert, overused, revoked, disabled } = getKeyBlockers(installKey);
const reached = overused && !revoked && !disabled;
+ const { waiting, beyondLimit, oversubscribed } = getWaitingInfo(installKey);
return (
-
-
- {formatLabel(usage)}
-
-
+
+ {waiting > 0 ? (
+
+
+
+ ) : (
+
+ {formatLabel(usage)}
+
+ )}
+
+ {waiting > 0 && (
+
+ {formatLabel(usage)} used
+ {oversubscribed && ` · ${beyondLimit} over`}
+
+ )}
);
}
diff --git a/ui/apps/console/src/pages/install-keys/__tests__/InstallKeys.test.tsx b/ui/apps/console/src/pages/install-keys/__tests__/InstallKeys.test.tsx
new file mode 100644
index 00000000000..957323e0f87
--- /dev/null
+++ b/ui/apps/console/src/pages/install-keys/__tests__/InstallKeys.test.tsx
@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import { createTestWrapper } from "@/tests/wrapper";
+import { mockInstallKey } from "@/tests/factories";
+import { paginatedResponse } from "@/tests/sdk";
+import { seedAuthStore } from "@/tests/seedAuthStore";
+import InstallKeys from "../index";
+
+const sdk = vi.hoisted(() =>
+ mockSdkGen({
+ installKeyList: vi.fn(),
+ }),
+);
+
+function renderPage() {
+ return render(
, {
+ wrapper: createTestWrapper({ initialEntries: ["/install-keys"] }),
+ });
+}
+
+async function keyRow(name: string) {
+ return within(await screen.findByRole("row", { name: new RegExp(name) }));
+}
+
+beforeEach(() => {
+ vi.clearAllMocks();
+ seedAuthStore();
+ sdk.installKeyList.mockResolvedValue(
+ paginatedResponse([
+ mockInstallKey({
+ id: "waiting-digest",
+ name: "fleet-key",
+ pending_devices: 2,
+ }),
+ mockInstallKey({
+ id: "settled-digest",
+ name: "auto-key",
+ mode: "automatic",
+ pending_devices: 0,
+ }),
+ mockInstallKey({
+ id: "capped-digest",
+ name: "edge-fleet",
+ usage_limit: 4,
+ used_times: 3,
+ pending_devices: 3,
+ }),
+ ]),
+ );
+});
+
+describe("Install keys", () => {
+ it("says how many devices a key has waiting for a decision", async () => {
+ renderPage();
+
+ expect((await keyRow("fleet-key")).getByText("2 waiting")).toBeInTheDocument();
+ });
+
+ it("says nothing about waiting when a key has nothing pending", async () => {
+ renderPage();
+
+ expect((await keyRow("auto-key")).queryByText(/waiting/)).not.toBeInTheDocument();
+ });
+
+ it("keeps the spend readable while devices wait", async () => {
+ renderPage();
+
+ expect((await keyRow("fleet-key")).getByText(/0 \/ ∞ used/)).toBeInTheDocument();
+ });
+
+ it("warns when accepting everything waiting would pass the key's limit", async () => {
+ renderPage();
+
+ expect((await keyRow("edge-fleet")).getByText(/3 \/ 4 used · 2 over/)).toBeInTheDocument();
+ });
+});
diff --git a/ui/apps/console/src/pages/install-keys/__tests__/helpers.test.ts b/ui/apps/console/src/pages/install-keys/__tests__/helpers.test.ts
index a3f4e4370f7..69fc59b5024 100644
--- a/ui/apps/console/src/pages/install-keys/__tests__/helpers.test.ts
+++ b/ui/apps/console/src/pages/install-keys/__tests__/helpers.test.ts
@@ -4,6 +4,7 @@ import {
getExpiryInfo,
getKeyBlockers,
getUsageInfo,
+ getWaitingInfo,
installKeyDisplayName,
isPairingKey,
isWebhookUrl,
@@ -237,3 +238,26 @@ describe("enrollment source", () => {
expect(installKeyDisplayName(real)).toBe("fleet");
});
});
+
+describe("getWaitingInfo", () => {
+ it.each([
+ { usage_limit: 0, used_times: 40, pending_devices: 3, beyondLimit: 0 },
+ { usage_limit: 5, used_times: 1, pending_devices: 2, beyondLimit: 0 },
+ { usage_limit: 5, used_times: 3, pending_devices: 2, beyondLimit: 0 },
+ { usage_limit: 4, used_times: 3, pending_devices: 3, beyondLimit: 2 },
+ { usage_limit: 1, used_times: 1, pending_devices: 1, beyondLimit: 1 },
+ ])(
+ "leaves $beyondLimit of $pending_devices waiting beyond a limit of $usage_limit already $used_times spent",
+ ({ beyondLimit, ...rest }) => {
+ const info = getWaitingInfo(key(rest));
+
+ expect(info.waiting).toBe(rest.pending_devices);
+ expect(info.beyondLimit).toBe(beyondLimit);
+ expect(info.oversubscribed).toBe(beyondLimit > 0);
+ },
+ );
+
+ it("counts nothing waiting when the API omits the field", () => {
+ expect(getWaitingInfo(key({})).waiting).toBe(0);
+ });
+});
diff --git a/ui/apps/console/src/pages/install-keys/helpers.ts b/ui/apps/console/src/pages/install-keys/helpers.ts
index 67223c421e0..37a12019390 100644
--- a/ui/apps/console/src/pages/install-keys/helpers.ts
+++ b/ui/apps/console/src/pages/install-keys/helpers.ts
@@ -191,6 +191,28 @@ export interface UsageInfo {
exhausted: boolean;
}
+/**
+ * The devices a key registered that still await a decision, and how many of them its allowance
+ * cannot take: accepting the queue spends the same budget an accepted device spent, so a key can
+ * hold more waiting devices than it can still admit.
+ */
+export interface WaitingInfo {
+ waiting: number;
+ beyondLimit: number;
+ oversubscribed: boolean;
+}
+
+/** Reads a key's waiting queue against its remaining allowance. */
+export function getWaitingInfo(key: InstallKey): WaitingInfo {
+ const waiting = key.pending_devices ?? 0;
+ const beyondLimit =
+ key.usage_limit > 0
+ ? Math.max(0, key.used_times + waiting - key.usage_limit)
+ : 0;
+
+ return { waiting, beyondLimit, oversubscribed: beyondLimit > 0 };
+}
+
/**
* Decode a key's enrollment budget for the usage meter. `usage_limit` is the
* source of truth the API derives reusability from: 0 unlimited, 1 single-use,
diff --git a/ui/apps/docs/src/pages/manage/devices/device-not-appearing.mdx b/ui/apps/docs/src/pages/manage/devices/device-not-appearing.mdx
index c711feae7d3..1c588599654 100644
--- a/ui/apps/docs/src/pages/manage/devices/device-not-appearing.mdx
+++ b/ui/apps/docs/src/pages/manage/devices/device-not-appearing.mdx
@@ -11,10 +11,11 @@ import Callout from "../../../components/Callout.astro";
The agent is installed and the device is not where you expect. Work down this page in order — it
goes from most to least common.
-## Is it in Pending?
+## Is it waiting to be accepted?
-Check the **Pending** tab before anything else. A device enrolled with only a tenant ID lands
-there and waits to be accepted. It is not broken; it is queued.
+Check **Install Keys** before anything else. A device enrolled with only a tenant ID waits for a
+decision on the key that registered it, and each key's row says how many are waiting. It is not
+broken; it is queued.
Accept it and it comes online. To stop needing to, use an
[install key](/manage/devices/install-keys). See
diff --git a/ui/apps/docs/src/pages/manage/devices/install-keys.mdx b/ui/apps/docs/src/pages/manage/devices/install-keys.mdx
index ece5367c107..5e6647b1f53 100644
--- a/ui/apps/docs/src/pages/manage/devices/install-keys.mdx
+++ b/ui/apps/docs/src/pages/manage/devices/install-keys.mdx
@@ -124,7 +124,8 @@ ran.
## Reviewing a pending enrollment
A key in manual mode, and a key whose webhook deferred, leaves devices waiting. They are reviewed
-on the key's activity page rather than in the device list.
+on the key's activity page rather than in the device list. The keys list marks every key that has
+devices waiting, and the dashboard's pending count links to it.
diff --git a/ui/packages/design-system/css/base.css b/ui/packages/design-system/css/base.css
index 2237ba1a907..7d43e1d1a59 100644
--- a/ui/packages/design-system/css/base.css
+++ b/ui/packages/design-system/css/base.css
@@ -222,6 +222,14 @@
);
}
+ .usage-oversubscribed {
+ background-image: repeating-linear-gradient(
+ -45deg,
+ currentColor 0 4px,
+ transparent 4px 8px
+ );
+ }
+
/* Page transition fade */
.page-enter {
animation: pageEnter 1s ease-out;