From fda1c851cf507ca7e309e80ff068444dfaab93c3 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 12 Oct 2025 13:42:24 +0000 Subject: feat: Add service dependency checks in the server overview page --- apps/web/components/admin/BasicStats.tsx | 112 +++++++++++++++++ apps/web/components/admin/ServerStats.tsx | 97 --------------- apps/web/components/admin/ServiceConnections.tsx | 150 +++++++++++++++++++++++ 3 files changed, 262 insertions(+), 97 deletions(-) create mode 100644 apps/web/components/admin/BasicStats.tsx delete mode 100644 apps/web/components/admin/ServerStats.tsx create mode 100644 apps/web/components/admin/ServiceConnections.tsx (limited to 'apps/web/components/admin') diff --git a/apps/web/components/admin/BasicStats.tsx b/apps/web/components/admin/BasicStats.tsx new file mode 100644 index 00000000..67352f66 --- /dev/null +++ b/apps/web/components/admin/BasicStats.tsx @@ -0,0 +1,112 @@ +"use client"; + +import { AdminCard } from "@/components/admin/AdminCard"; +import { useClientConfig } from "@/lib/clientConfig"; +import { useTranslation } from "@/lib/i18n/client"; +import { api } from "@/lib/trpc"; +import { useQuery } from "@tanstack/react-query"; + +const REPO_LATEST_RELEASE_API = + "https://api.github.com/repos/karakeep-app/karakeep/releases/latest"; +const REPO_RELEASE_PAGE = "https://github.com/karakeep-app/karakeep/releases"; + +function useLatestRelease() { + const { data } = useQuery({ + queryKey: ["latest-release"], + queryFn: async () => { + const res = await fetch(REPO_LATEST_RELEASE_API); + if (!res.ok) { + return undefined; + } + const data = (await res.json()) as { name: string }; + return data.name; + }, + staleTime: 60 * 60 * 1000, + enabled: !useClientConfig().disableNewReleaseCheck, + }); + return data; +} + +function ReleaseInfo() { + const currentRelease = useClientConfig().serverVersion ?? "NA"; + const latestRelease = useLatestRelease(); + + let newRelease; + if (latestRelease && currentRelease != latestRelease) { + newRelease = ( + // oxlint-disable-next-line no-html-link-for-pages + + ({latestRelease} ⬆️) + + ); + } + return ( +
+ {currentRelease} + {newRelease} +
+ ); +} + +function StatsSkeleton() { + return ( + +
+
+ {[1, 2, 3].map((i) => ( +
+
+
+
+ ))} +
+ + ); +} + +export default function BasicStats() { + const { t } = useTranslation(); + const { data: serverStats } = api.admin.stats.useQuery(undefined, { + refetchInterval: 5000, + }); + + if (!serverStats) { + return ; + } + + return ( + +
+ {t("admin.server_stats.server_stats")} +
+
+
+
+ {t("admin.server_stats.total_users")} +
+
{serverStats.numUsers}
+
+
+
+ {t("admin.server_stats.total_bookmarks")} +
+
+ {serverStats.numBookmarks} +
+
+
+
+ {t("admin.server_stats.server_version")} +
+ +
+
+ + ); +} diff --git a/apps/web/components/admin/ServerStats.tsx b/apps/web/components/admin/ServerStats.tsx deleted file mode 100644 index e60f0fbe..00000000 --- a/apps/web/components/admin/ServerStats.tsx +++ /dev/null @@ -1,97 +0,0 @@ -"use client"; - -import LoadingSpinner from "@/components/ui/spinner"; -import { useClientConfig } from "@/lib/clientConfig"; -import { useTranslation } from "@/lib/i18n/client"; -import { api } from "@/lib/trpc"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; - -const REPO_LATEST_RELEASE_API = - "https://api.github.com/repos/karakeep-app/karakeep/releases/latest"; -const REPO_RELEASE_PAGE = "https://github.com/karakeep-app/karakeep/releases"; - -function useLatestRelease() { - const { data } = useQuery({ - queryKey: ["latest-release"], - queryFn: async () => { - const res = await fetch(REPO_LATEST_RELEASE_API); - if (!res.ok) { - return undefined; - } - const data = (await res.json()) as { name: string }; - return data.name; - }, - staleTime: 60 * 60 * 1000, - enabled: !useClientConfig().disableNewReleaseCheck, - }); - return data; -} - -function ReleaseInfo() { - const currentRelease = useClientConfig().serverVersion ?? "NA"; - const latestRelease = useLatestRelease(); - - let newRelease; - if (latestRelease && currentRelease != latestRelease) { - newRelease = ( - // oxlint-disable-next-line no-html-link-for-pages - - ({latestRelease} ⬆️) - - ); - } - return ( -
- {currentRelease} - {newRelease} -
- ); -} - -export default function ServerStats() { - const { t } = useTranslation(); - const { data: serverStats } = api.admin.stats.useQuery(undefined, { - refetchInterval: 5000, - placeholderData: keepPreviousData, - }); - - if (!serverStats) { - return ; - } - - return ( -
-
- {t("admin.server_stats.server_stats")} -
-
-
-
- {t("admin.server_stats.total_users")} -
-
{serverStats.numUsers}
-
-
-
- {t("admin.server_stats.total_bookmarks")} -
-
- {serverStats.numBookmarks} -
-
-
-
- {t("admin.server_stats.server_version")} -
- -
-
-
- ); -} diff --git a/apps/web/components/admin/ServiceConnections.tsx b/apps/web/components/admin/ServiceConnections.tsx new file mode 100644 index 00000000..8d79d8bb --- /dev/null +++ b/apps/web/components/admin/ServiceConnections.tsx @@ -0,0 +1,150 @@ +"use client"; + +import { AdminCard } from "@/components/admin/AdminCard"; +import { useTranslation } from "@/lib/i18n/client"; +import { api } from "@/lib/trpc"; + +function ConnectionStatus({ + label, + configured, + connected, + pluginName, + error, +}: { + label: string; + configured: boolean; + connected: boolean; + pluginName?: string; + error?: string; +}) { + const { t } = useTranslation(); + + let statusText = t("admin.service_connections.status.not_configured"); + let badgeColor = + "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"; + let iconColor = "text-gray-400"; + let borderColor = "border-gray-200 dark:border-gray-700"; + + if (configured) { + if (connected) { + statusText = t("admin.service_connections.status.connected"); + badgeColor = + "bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"; + iconColor = "text-green-500"; + borderColor = "border-green-200 dark:border-green-800"; + } else { + statusText = t("admin.service_connections.status.disconnected"); + badgeColor = + "bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400"; + iconColor = "text-red-500"; + borderColor = "border-red-200 dark:border-red-800"; + } + } + + return ( +
+
+
+
{label}
+ {pluginName && ( +
+ {pluginName} +
+ )} +
+
+
+
+
+
+ + {statusText} + +
+ {error && ( +
+

+ {error.length > 60 ? `${error.substring(0, 60)}...` : error} +

+
+ )} +
+ ); +} + +function ConnectionsSkeleton() { + return ( + +
+
+ {[1, 2, 3].map((i) => ( +
+
+
+
+
+
+
+
+
+ ))} +
+ + ); +} + +export default function ServiceConnections() { + const { t } = useTranslation(); + const { data: connections } = api.admin.checkConnections.useQuery(undefined, { + refetchInterval: 10000, + }); + + if (!connections) { + return ; + } + + return ( + +
+ {t("admin.service_connections.title")} +
+

+ {t("admin.service_connections.description")} +

+
+ + + +
+ + ); +} -- cgit v1.2.3-70-g09d2