feat: initial work on codegate version check widget

src/components/Dashboard.tsx

@@ -23,7 +23,7 @@ import { Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
 import { useSearchParams } from "react-router-dom";
 import { AlertConversation } from "@/api/generated";
 import { getMaliciousPackage } from "@/lib/utils";
-import { CardCodegateStatus } from "@/features/dashboard/components/card-codegate-status";
+import { CodegateStatus } from "@/features/dashboard-codegate-status/components/codegate-status";
 import { Search } from "lucide-react";
 import {
  useAlertsData,
@@ -132,7 +132,7 @@ export function Dashboard() {
  return (
  <div className="flex-col">
  <div className="grid 2xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 items-stretch gap-4 w-full">
- <CardCodegateStatus />
+ <CodegateStatus />
  <BarChart data={alerts} loading={isLoading} />
  <PieChart data={maliciousPackages} loading={isLoading} />
  <LineChart data={alerts} loading={isLoading} />

src/features/dashboard-codegate-status/components/__tests__/codegate-status.test.tsx

@@ -0,0 +1,134 @@
+import { server } from "@/mocks/msw/node";
+import { http, HttpResponse } from "msw";
+import { expect } from "vitest";
+import { CodegateStatus } from "../codegate-status";
+import { render, waitFor } from "@/lib/test-utils";
+
+const renderComponent = () => render(<CodegateStatus />);
+
+describe("CardCodegateStatus", () => {
+ test("renders 'healthy' state", async () => {
+ server.use(
+ http.get("*/health", () => HttpResponse.json({ status: "healthy" })),
+ );
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/healthy/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'unhealthy' state", async () => {
+ server.use(http.get("*/health", () => HttpResponse.json({ status: null })));
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/unhealthy/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'error' state when health check request fails", async () => {
+ server.use(http.get("*/health", () => HttpResponse.error()));
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/an error occurred/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'error' state when version check request fails", async () => {
+ server.use(http.get("*/dashboard/version", () => HttpResponse.error()));
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/an error occurred/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'latest version' state", async () => {
+ server.use(
+ http.get("*/dashboard/version", () =>
+ HttpResponse.json({
+ current_version: "foo",
+ latest_version: "foo",
+ is_latest: true,
+ error: null,
+ }),
+ ),
+ );
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/latest/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'update available' state", async () => {
+ server.use(
+ http.get("*/dashboard/version", () =>
+ HttpResponse.json({
+ current_version: "foo",
+ latest_version: "bar",
+ is_latest: false,
+ error: null,
+ }),
+ ),
+ );
+
+ const { getByRole } = renderComponent();
+
+ await waitFor(
+ () => {
+ const role = getByRole("link", { name: /update available/i });
+ expect(role).toBeVisible();
+ expect(role).toHaveAttribute(
+ "href",
+ "https://docs.codegate.ai/how-to/install#upgrade-codegate",
+ );
+ },
+ { timeout: 10_000 },
+ );
+ });
+
+ test("renders 'version check error' state", async () => {
+ server.use(
+ http.get("*/dashboard/version", () =>
+ HttpResponse.json({
+ current_version: "foo",
+ latest_version: "bar",
+ is_latest: false,
+ error: "foo",
+ }),
+ ),
+ );
+
+ const { getByText } = renderComponent();
+
+ await waitFor(
+ () => {
+ expect(getByText(/error checking version/i)).toBeVisible();
+ },
+ { timeout: 10_000 },
+ );
+ });
+});

src/features/dashboard-codegate-status/components/codegate-status-error-ui.tsx

@@ -0,0 +1,32 @@
+import { XCircle } from "lucide-react";
+
+export function CodegateStatusErrorUI() {
+ return (
+ <div className="flex flex-col items-center justify-center py-8">
+ <XCircle className="text-red-600 mb-2 size-8" />
+ <div className="text-base font-semibold text-secondary text-center">
+ An error occurred
+ </div>
+ <div className="text-sm text-secondary text-center text-balance">
+ If this issue persists, please reach out to us on{" "}
+ <a
+ className="underline text-secondary"
+ href="https://discord.gg/stacklok"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ Discord
+ </a>{" "}
+ or open a new{" "}
+ <a
+ className="underline text-secondary"
+ href="https://github.com/stacklok/codegate/issues/new"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ Github issue
+ </a>
+ </div>
+ </div>
+ );
+}

src/features/dashboard-codegate-status/components/codegate-status-health.tsx

@@ -0,0 +1,36 @@
+import { LoaderCircle, CheckCircle2, XCircle } from "lucide-react";
+import { HealthStatus } from "../lib/get-codegate-health";
+
+export const CodegateStatusHealth = ({
+ data: data,
+ isPending,
+}: {
+ data: HealthStatus | null;
+ isPending: boolean;
+}) => {
+ if (isPending || data === null) {
+ return (
+ <div className="flex gap-2 items-center text-secondary justify-end overflow-hidden">
+ Checking <LoaderCircle className="size-4 shrink-0 animate-spin" />
+ </div>
+ );
+ }
+
+ switch (data) {
+ case HealthStatus.HEALTHY:
+ return (
+ <div className="flex gap-2 items-center text-primary justify-end">
+ {HealthStatus.HEALTHY} <CheckCircle2 className="size-4 shrink-0" />
+ </div>
+ );
+ case HealthStatus.UNHEALTHY:
+ return (
+ <div className="flex gap-2 items-center text-primary justify-end overflow-hidden">
+ {HealthStatus.UNHEALTHY} <XCircle className="size-4 shrink-0" />
+ </div>
+ );
+ default: {
+ data satisfies never;
+ }
+ }
+};

src/features/dashboard-codegate-status/components/codegate-status-polling-control.tsx

@@ -0,0 +1,54 @@
+import { Dispatch, SetStateAction } from "react";
+import {
+ Label,
+ Select,
+ SelectButton,
+ TDropdownItemOrSection,
+} from "@stacklok/ui-kit";
+
+// NOTE: We don't poll more than once per minute, as the server depends on
+// Github's public API, which is rate limited to 60reqs per hour.
+export const POLLING_INTERVAl = {
+ "1_MIN": { value: 60_000, name: "1 minute" },
+ "5_MIN": { value: 300_000, name: "5 minutes" },
+ "10_MIN": { value: 600_000, name: "10 minutes" },
+} as const;
+
+export const INTERVAL_SELECT_ITEMS: TDropdownItemOrSection[] = Object.entries(
+ POLLING_INTERVAl,
+).map(([key, { name }]) => {
+ return { textValue: name, id: key };
+});
+
+export const DEFAULT_INTERVAL: PollingInterval = "5_MIN";
+
+export type PollingInterval = keyof typeof POLLING_INTERVAl;
+
+export function PollIntervalControl({
+ className,
+ pollingInterval,
+ setPollingInterval,
+}: {
+ className?: string;
+ pollingInterval: PollingInterval;
+ setPollingInterval: Dispatch<SetStateAction<PollingInterval>>;
+}) {
+ return (
+ <Select
+ className={className}
+ onSelectionChange={(v) =>
+ setPollingInterval(v.toString() as PollingInterval)
+ }
+ items={INTERVAL_SELECT_ITEMS}
+ defaultSelectedKey={pollingInterval}
+ >
+ <Label className="w-full text-right font-semibold text-secondary -mb-1">
+ Check for updates
+ </Label>
+ <SelectButton
+ isBorderless
+ className="h-7 max-w-36 pr-0 [&>span>span]:text-right [&>span>span]:justify-end !gap-0 text-secondary"
+ />
+ </Select>
+ );
+}

src/features/dashboard-codegate-status/components/codegate-status-refresh-button.tsx

@@ -0,0 +1,41 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { PollingInterval } from "./codegate-status-polling-control";
+import { getQueryOptionsCodeGateStatus } from "../hooks/use-codegate-status";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@stacklok/ui-kit";
+import { RefreshCcw } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+export function CodeGateStatusRefreshButton({
+ pollingInterval,
+ className,
+}: {
+ pollingInterval: PollingInterval;
+ className?: string;
+}) {
+ const queryClient = useQueryClient();
+ const { queryKey } = getQueryOptionsCodeGateStatus(pollingInterval);
+
+ const [refreshed, setRefreshed] = useState<boolean>(false);
+
+ useEffect(() => {
+ const id = setTimeout(() => setRefreshed(false), 500);
+ return () => clearTimeout(id);
+ }, [refreshed]);
+
+ const handleRefresh = useCallback(() => {
+ setRefreshed(true);
+ return queryClient.invalidateQueries({ queryKey, refetchType: "all" });
+ }, [queryClient, queryKey]);
+
+ return (
+ <Button
+ onPress={handleRefresh}
+ variant="tertiary"
+ className={twMerge("size-7", className)}
+ isDisabled={refreshed}
+ >
+ <RefreshCcw className={refreshed ? "animate-spin-once" : undefined} />
+ </Button>
+ );
+}

src/features/dashboard-codegate-status/components/codegate-status-version.tsx

@@ -0,0 +1,61 @@
+import { LoaderCircle, CheckCircle2, CircleAlert, XCircle } from "lucide-react";
+import { VersionResponse } from "../lib/get-version-status";
+import { Link, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
+
+export const CodegateStatusVersion = ({
+ data,
+ isPending,
+}: {
+ data: VersionResponse | null;
+ isPending: boolean;
+}) => {
+ if (isPending || data === null) {
+ return (
+ <div className="flex gap-2 items-center text-secondary justify-end overflow-hidden">
+ Checking <LoaderCircle className="size-4 shrink-0 animate-spin" />
+ </div>
+ );
+ }
+
+ const { current_version, is_latest, latest_version, error } = data || {};
+
+ if (error !== null || is_latest === null) {
+ return (
+ <div className="flex gap-2 items-center text-primary justify-end overflow-hidden">
+ Error checking version <XCircle className="size-4 shrink-0" />
+ </div>
+ );
+ }
+
+ switch (is_latest) {
+ case true:
+ return (
+ <div className="flex gap-2 items-center text-primary justify-end">
+ Latest <CheckCircle2 className="size-4 shrink-0" />
+ </div>
+ );
+ case false:
+ return (
+ <div>
+ <TooltipTrigger delay={0}>
+ <Link
+ className="flex gap-2 items-center text-primary justify-end overflow-hidden"
+ variant="secondary"
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://docs.codegate.ai/how-to/install#upgrade-codegate"
+ >
+ Update available <CircleAlert className="size-4 shrink-0" />
+ </Link>
+ <Tooltip className="text-right">
+ <span className="block">Current version: {current_version}</span>
+ <span className="block">Latest version: {latest_version}</span>
+ </Tooltip>
+ </TooltipTrigger>
+ </div>
+ );
+ default: {
+ is_latest satisfies never;
+ }
+ }
+};