+
{error.name}: {error.message}
{"\n"}
{causeArray
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/types.ts b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/types.ts
index 7ca7f281c..1549b70cb 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/types.ts
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/test-connection/types.ts
@@ -1,6 +1,8 @@
import type { RouterOutputs } from "@homarr/api";
-export type AnyMappedTestConnectionError = Exclude["error"];
+type IntegrationCreateErrorResult = Extract;
+
+export type AnyMappedTestConnectionError = IntegrationCreateErrorResult["error"];
export type MappedTestConnectionCertificateError = Extract;
export type MappedCertificate = MappedTestConnectionCertificateError["data"]["certificate"];
export type MappedError = Exclude;
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
index d04b5389e..ecf066e56 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from "react";
+import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
@@ -25,8 +25,10 @@ import { SecretKindsSegmentedControl } from "../../_components/secrets/integrati
import { IntegrationTestConnectionError } from "../../_components/test-connection/integration-test-connection-error";
import type { AnyMappedTestConnectionError } from "../../_components/test-connection/types";
-interface EditIntegrationForm {
+interface EditIntegrationFormProps {
integration: RouterOutputs["integration"]["byId"];
+ embedded?: boolean;
+ onSuccess?: () => void;
}
const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
@@ -42,7 +44,7 @@ const formSchema = integrationUpdateSchema.omit({ id: true, appId: true }).and(
}),
);
-export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
+export const EditIntegrationForm = ({ integration, embedded = false, onSuccess }: EditIntegrationFormProps) => {
const t = useI18n();
const { openConfirmModal } = useConfirmModal();
const allSecretKinds = getAllSecretKindOptions(integration.kind);
@@ -67,53 +69,65 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
app: integration.app ?? null,
},
});
- const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
+ const { mutateAsync, isPending } = clientApi.integration.update.useMutation({
+ onError() {
+ showErrorNotification({
+ title: t("integration.page.edit.notification.error.title"),
+ message: t("integration.page.edit.notification.error.message"),
+ });
+ },
+ });
const [error, setError] = useState(null);
+ const errorRef = useRef(null);
const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
const handleSubmitAsync = async ({ app, ...values }: FormType) => {
- const url = hasUrlSecret
- ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
- : values.url;
- await mutateAsync(
- {
- id: integration.id,
- ...values,
- url,
- secrets: values.secrets.map((secret) => ({
- kind: secret.kind,
- value: secret.value === "" ? null : secret.value,
- })),
- appId: app?.id ?? null,
- },
- {
- onSuccess: (data) => {
- // We do it this way as we are unable to send a typesafe error through onError
- if (data?.error) {
- setError(data.error);
- showErrorNotification({
- title: t("integration.page.edit.notification.error.title"),
- message: t("integration.page.edit.notification.error.message"),
- });
- return;
- }
+ setError(null);
+ let url: string;
+ try {
+ url = hasUrlSecret
+ ? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
+ : values.url;
+ } catch {
+ showErrorNotification({
+ title: t("integration.page.edit.notification.error.title"),
+ message: t("integration.page.edit.notification.error.message"),
+ });
+ return;
+ }
- showSuccessNotification({
- title: t("integration.page.edit.notification.success.title"),
- message: t("integration.page.edit.notification.success.message"),
- });
- void utils.integration.invalidate();
- void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
- },
- onError: () => {
- showErrorNotification({
- title: t("integration.page.edit.notification.error.title"),
- message: t("integration.page.edit.notification.error.message"),
- });
- },
- },
- );
+ const data = await mutateAsync({
+ id: integration.id,
+ ...values,
+ url,
+ secrets: values.secrets.map((secret) => ({
+ kind: secret.kind,
+ value: secret.value === "" ? null : secret.value,
+ })),
+ appId: app?.id ?? null,
+ });
+
+ // We do it this way as we are unable to send a typesafe error through onError
+ if (data?.error) {
+ setError(data.error);
+ showErrorNotification({
+ title: t("integration.page.edit.notification.error.title"),
+ message: t("integration.page.edit.notification.error.message"),
+ });
+ requestAnimationFrame(() => errorRef.current?.focus());
+ return;
+ }
+
+ showSuccessNotification({
+ title: t("integration.page.edit.notification.success.title"),
+ message: t("integration.page.edit.notification.success.message"),
+ });
+ void Promise.allSettled([utils.integration.invalidate(), utils.widget.invalidate()]);
+ onSuccess?.();
+ if (!embedded) {
+ void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
+ }
};
const isInitialSecretKinds =
@@ -190,12 +204,18 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
form.setFieldValue("app", app)} />
- {error !== null &&
-
+ {!embedded && (
+
+ )}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
index e48ae9df5..b226653f9 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -19,6 +19,7 @@ import {
import { IconCheck, IconExternalLink, IconInfoCircle, IconKey } from "@tabler/icons-react";
import { z } from "zod/v4";
+import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
import { revalidatePathActionAsync } from "@homarr/common/client";
@@ -49,10 +50,12 @@ interface NewIntegrationFormProps {
kind: IntegrationKind;
initialUrl?: string;
initialName?: string;
- onSuccess: () => void;
+ onSuccess: (result?: CreatedIntegrationResult) => void;
onCancel?: () => void;
}
+export type CreatedIntegrationResult = Extract;
+
const formSchema = integrationCreateSchema.omit({ kind: true, app: true }).and(
z.object({
hasApp: z.boolean(),
@@ -67,12 +70,18 @@ export const NewIntegrationForm = ({ kind, initialUrl, initialName, onSuccess, o
const hasUrlSecret = secretKinds.some((kinds) => kinds.includes("url"));
const { data: session } = useSession();
const canCreateApps = session?.user.permissions.includes("app-create") ?? false;
+ const validationSchema = canCreateApps
+ ? formSchema
+ : formSchema.superRefine((values, context) => {
+ if (!values.hasApp || values.appId !== null) return;
+ context.addIssue({ code: "custom", message: t("common.zod.errors.required"), path: ["appId"] });
+ });
let url = initialUrl ?? getIntegrationDefaultUrl(kind) ?? "";
if (hasUrlSecret) {
url = "http://localhost";
}
- const form = useZodForm(formSchema, {
+ const form = useZodForm(validationSchema, {
initialValues: {
name: initialName ?? getIntegrationName(kind),
url,
@@ -81,7 +90,7 @@ export const NewIntegrationForm = ({ kind, initialUrl, initialName, onSuccess, o
value: "",
})),
attemptSearchEngineCreation: true,
- hasApp: true,
+ hasApp: canCreateApps,
appHref: url,
appId: null,
},
@@ -101,7 +110,9 @@ export const NewIntegrationForm = ({ kind, initialUrl, initialName, onSuccess, o
? new URL(values.secrets.find((secret) => secret.kind === "url")?.value ?? values.url).origin
: values.url;
- const onMutationSuccess = (data: { error?: AnyMappedTestConnectionError } | undefined | void) => {
+ const onMutationSuccess = (
+ data: CreatedIntegrationResult | { error?: AnyMappedTestConnectionError } | undefined | void,
+ ) => {
if (data && "error" in data && data.error) {
setError(data.error);
showErrorNotification({
@@ -116,7 +127,7 @@ export const NewIntegrationForm = ({ kind, initialUrl, initialName, onSuccess, o
message: t("integration.page.create.notification.success.message"),
});
- onSuccess();
+ onSuccess(data && "integration" in data ? data : undefined);
};
const onMutationError = () => {
@@ -131,13 +142,15 @@ export const NewIntegrationForm = ({ kind, initialUrl, initialName, onSuccess, o
const app = hasApp
? appId !== null
? { id: appId }
- : {
- name: values.name,
- href: hasCustomHref ? appHref : url,
- iconUrl: getIconUrl(kind),
- description: null,
- pingUrl: url,
- }
+ : canCreateApps
+ ? {
+ name: values.name,
+ href: hasCustomHref ? appHref : url,
+ iconUrl: getIconUrl(kind),
+ description: null,
+ pingUrl: url,
+ }
+ : undefined
: undefined;
await createIntegrationAsync(
@@ -229,8 +242,10 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType; c
checkboxInputProps.onChange(event);
});
}}
- label={t("integration.field.createApp.label")}
- description={t("integration.field.createApp.description")}
+ label={t(canCreateApps ? "integration.field.createApp.label" : "integration.field.linkApp.label")}
+ description={t(
+ canCreateApps ? "integration.field.createApp.description" : "integration.field.linkApp.description",
+ )}
/>
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.spec.ts b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.spec.ts
new file mode 100644
index 000000000..d82948438
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.spec.ts
@@ -0,0 +1,45 @@
+import { describe, expect, test } from "vitest";
+
+import {
+ dismissDockerReconciliationCandidate,
+ filterDockerReconciliationInbox,
+ getValidDockerServiceUrl,
+} from "./docker-reconciliation-inbox";
+
+const candidates = [
+ { candidateKey: "home:new", state: "newRecognized" as const },
+ { candidateKey: "home:new-app", state: "newApp" as const },
+ { candidateKey: "remote:moved", state: "moved" as const },
+ { candidateKey: "home:linked", state: "linked" as const },
+ { candidateKey: "home:represented", state: "represented" as const },
+];
+
+describe("Docker reconciliation inbox", () => {
+ test("separates attention items from represented services", () => {
+ expect(
+ filterDockerReconciliationInbox(candidates, "attention", []).map(({ candidateKey }) => candidateKey),
+ ).toEqual(["home:new", "home:new-app", "remote:moved"]);
+ expect(
+ filterDockerReconciliationInbox(candidates, "represented", []).map(({ candidateKey }) => candidateKey),
+ ).toEqual(["home:linked", "home:represented"]);
+ });
+
+ test("dismisses only the endpoint-qualified candidate key and remains idempotent", () => {
+ const dismissed = dismissDockerReconciliationCandidate([], "home:new");
+
+ expect(
+ filterDockerReconciliationInbox(candidates, "all", dismissed).map(({ candidateKey }) => candidateKey),
+ ).not.toContain("home:new");
+ expect(filterDockerReconciliationInbox(candidates, "all", dismissed)).toContainEqual({
+ candidateKey: "remote:moved",
+ state: "moved",
+ });
+ expect(dismissDockerReconciliationCandidate(dismissed, "home:new")).toBe(dismissed);
+ });
+
+ test("accepts only HTTP service URLs", () => {
+ expect(getValidDockerServiceUrl("https://service.example.com")).toBe("https://service.example.com/");
+ expect(getValidDockerServiceUrl("ftp://service.example.com")).toBeNull();
+ expect(getValidDockerServiceUrl("service.example.com")).toBeNull();
+ });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.ts b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.ts
new file mode 100644
index 000000000..c6101abdc
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation-inbox.ts
@@ -0,0 +1,34 @@
+export type DockerReconciliationInboxFilter = "attention" | "represented" | "all";
+
+interface DockerReconciliationInboxCandidate {
+ candidateKey: string;
+ state: "newRecognized" | "newApp" | "represented" | "linked" | "moved";
+}
+
+const attentionStates = new Set(["newRecognized", "newApp", "moved"]);
+
+export const filterDockerReconciliationInbox = (
+ candidates: Candidate[],
+ filter: DockerReconciliationInboxFilter,
+ dismissedCandidateKeys: string[],
+) => {
+ const dismissed = new Set(dismissedCandidateKeys);
+ return candidates.filter((candidate) => {
+ if (dismissed.has(candidate.candidateKey)) return false;
+ if (filter === "attention") return attentionStates.has(candidate.state);
+ if (filter === "represented") return candidate.state === "represented" || candidate.state === "linked";
+ return true;
+ });
+};
+
+export const dismissDockerReconciliationCandidate = (dismissedCandidateKeys: string[], candidateKey: string) =>
+ dismissedCandidateKeys.includes(candidateKey) ? dismissedCandidateKeys : [...dismissedCandidateKeys, candidateKey];
+
+export const getValidDockerServiceUrl = (value: string) => {
+ try {
+ const url = new URL(value);
+ return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : null;
+ } catch {
+ return null;
+ }
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx
new file mode 100644
index 000000000..55c85523a
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+ Alert,
+ Avatar,
+ Badge,
+ Button,
+ Card,
+ Group,
+ SegmentedControl,
+ Select,
+ SimpleGrid,
+ Stack,
+ Text,
+ TextInput,
+} from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { IconAlertTriangle, IconArrowRight, IconEyeOff, IconPlugConnected, IconRefresh } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { getIntegrationName } from "@homarr/definitions";
+import { useModalAction } from "@homarr/modals";
+import { AddDockerAppToHomarr } from "@homarr/modals-collection";
+import { showErrorNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
+import type { DockerReconciliationInboxFilter } from "./docker-reconciliation-inbox";
+import {
+ dismissDockerReconciliationCandidate,
+ filterDockerReconciliationInbox,
+ getValidDockerServiceUrl,
+} from "./docker-reconciliation-inbox";
+
+type ReconciliationCandidate = RouterOutputs["docker"]["reconcileServices"]["candidates"][number];
+type ServiceHealth = RouterOutputs["docker"]["getServiceHealth"]["services"][number];
+
+export const DockerReconciliation = () => {
+ const t = useScopedI18n("docker.reconciliation");
+ const utils = clientApi.useUtils();
+ const reconciliation = clientApi.docker.reconcileServices.useQuery();
+ const health = clientApi.docker.getServiceHealth.useQuery();
+ const refreshInventory = clientApi.docker.refreshInventory.useMutation({
+ async onSuccess() {
+ await Promise.all([
+ utils.docker.getContainers.invalidate(),
+ utils.docker.reconcileServices.invalidate(),
+ utils.docker.getServiceHealth.invalidate(),
+ ]);
+ },
+ onError() {
+ showErrorNotification({
+ title: t("refreshError.title"),
+ message: t("refreshError.message"),
+ });
+ },
+ });
+ const [filter, setFilter] = useState("attention");
+ const [dismissedCandidateKeys, setDismissedCandidateKeys] = useLocalStorage({
+ key: "homarr-docker-reconciliation-dismissed",
+ defaultValue: [],
+ });
+
+ if (reconciliation.isError) {
+ return (
+
+ {t("loadError.message")}
+
+
+
+ );
+ }
+
+ if (!reconciliation.data) return null;
+
+ const unavailableEndpoints = reconciliation.data.endpoints.filter(({ status }) => status === "unavailable");
+ const candidates = filterDockerReconciliationInbox(reconciliation.data.candidates, filter, dismissedCandidateKeys);
+ const attentionCount = health.data
+ ? health.data.services.filter(
+ ({ key, status }) =>
+ ["newRecognized", "newApp", "moved"].includes(status) && !dismissedCandidateKeys.includes(key),
+ ).length
+ : 0;
+ const isRefreshing = refreshInventory.isPending || reconciliation.isFetching || health.isFetching;
+
+ return (
+
+
+
+
+
+ {t("title")}
+
+
+ {t("description")}
+
+
+ {health.data && {t("attention", { count: String(attentionCount) })} }
+
+
+
+ setFilter(value as DockerReconciliationInboxFilter)}
+ data={[
+ { value: "attention", label: t("filter.attention") },
+ { value: "represented", label: t("filter.represented") },
+ { value: "all", label: t("filter.all") },
+ ]}
+ />
+
+ {dismissedCandidateKeys.length > 0 && (
+
+ )}
+ }
+ onClick={() => refreshInventory.mutate()}
+ >
+ {t("action.refresh")}
+
+
+
+
+ {unavailableEndpoints.length > 0 && (
+
+ {reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")}
+
+ ) : (
+
+ {candidates.map((candidate) => (
+ key === candidate.candidateKey)}
+ onDismiss={() =>
+ setDismissedCandidateKeys((current) =>
+ dismissDockerReconciliationCandidate(current, candidate.candidateKey),
+ )
+ }
+ />
+ ))}
+
+ )}
+
+
+ );
+};
+
+const DockerReconciliationCandidate = ({
+ candidate,
+ health,
+ onDismiss,
+}: {
+ candidate: ReconciliationCandidate;
+ health: ServiceHealth | undefined;
+ onDismiss: () => void;
+}) => {
+ const t = useScopedI18n("docker.reconciliation");
+ const { openModal } = useModalAction(AddDockerAppToHomarr);
+ const initialUrlCandidate =
+ candidate.urlCandidates.find(
+ ({ url, scopes }) => url.length > 0 && (candidate.match ? true : scopes.includes("browser")),
+ ) ?? candidate.urlCandidates.find(({ source }) => source === "manual");
+ const [selectedCandidateId, setSelectedCandidateId] = useState(initialUrlCandidate?.id ?? null);
+ const [url, setUrl] = useState(initialUrlCandidate?.url ?? "");
+ const selectedCandidate = candidate.urlCandidates.find(({ id }) => id === selectedCandidateId);
+ const validatedUrl = getValidDockerServiceUrl(url);
+ const isInvalidUrl = url.length > 0 && validatedUrl === null;
+ const target = getCandidateTarget(candidate, validatedUrl ?? "");
+ const actionNeedsUrl = target.kind === "createApp" || target.kind === "setupIntegration";
+ const isActionDisabled = actionNeedsUrl && validatedUrl === null;
+
+ useEffect(() => {
+ setSelectedCandidateId(initialUrlCandidate?.id ?? null);
+ setUrl(initialUrlCandidate?.url ?? "");
+ }, [initialUrlCandidate?.id, initialUrlCandidate?.url]);
+
+ return (
+
+
+
+
+
+ {candidate.container.name.at(0)?.toUpperCase()}
+
+
+
+ {candidate.container.name}
+
+
+ {candidate.endpointName}
+
+
+
+
+ {t(`state.${candidate.state}`)}
+
+
+
+ {candidate.match && (
+
+ {candidate.match.kind}
+
+ {t("match", { confidence: t(`confidence.${candidate.match.confidence}`) })}
+
+
+ )}
+
+ {candidate.representation.signals.ambiguous && (
+
+ {t("health.title")}
+
+
+ {health.layers.map((layer) => (
+
+ {t(`health.layer.${layer.layer}`)}: {t(`health.status.${layer.status}`)}
+
+ ))}
+
+
+ )}
+
+
+
+ );
+};
+
+const getCandidateTarget = (candidate: ReconciliationCandidate, url: string) => {
+ if (candidate.representation.signals.ambiguous) {
+ if (candidate.nextAction === "reviewIntegration" && candidate.match) {
+ const params = new URLSearchParams({ search: getIntegrationName(candidate.match.kind) });
+ return { kind: "reviewIntegration" as const, href: `/manage/integrations?${params.toString()}` };
+ }
+ return { kind: "viewRepresentation" as const, href: "/manage/apps" };
+ }
+ if (candidate.state === "newRecognized" && candidate.match) {
+ const params = new URLSearchParams({ kind: candidate.match.kind, name: candidate.container.name });
+ if (url) params.set("url", url);
+ return { kind: "setupIntegration" as const, href: `/manage/integrations/new?${params.toString()}` };
+ }
+
+ if (candidate.state === "newApp") return { kind: "createApp" as const };
+ if (candidate.representation.integration) {
+ return {
+ kind: candidate.state === "moved" ? ("reviewIntegration" as const) : ("viewRepresentation" as const),
+ href: `/manage/integrations/edit/${candidate.representation.integration.id}`,
+ };
+ }
+ if (candidate.representation.app) {
+ return { kind: "viewRepresentation" as const, href: `/manage/apps/edit/${candidate.representation.app.id}` };
+ }
+
+ return { kind: "createApp" as const };
+};
+
+const stateColor = (state: ReconciliationCandidate["state"]) => {
+ if (state === "linked" || state === "represented") return "green";
+ if (state === "moved") return "yellow";
+ return "blue";
+};
+
+const healthStatusColor = (status: ServiceHealth["layers"][number]["status"]) => {
+ if (["available", "configured", "linked"].includes(status)) return "green";
+ if (["missing", "changed", "unused"].includes(status)) return "yellow";
+ return "gray";
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
index eef2c78b5..ce277fe07 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
@@ -1,10 +1,10 @@
"use client";
-import { useCallback } from "react";
import { useRouter } from "next/navigation";
import type { MantineColor } from "@mantine/core";
-import { ActionIcon, Avatar, Badge, Box, Button, Group, Menu, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Alert, Avatar, Badge, Box, Button, Group, Menu, Stack, Text, Tooltip } from "@mantine/core";
import {
+ IconAlertTriangle,
IconCategoryPlus,
IconDots,
IconFileText,
@@ -20,10 +20,10 @@ import { MantineReactTable } from "mantine-react-table";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
import { formatBytes, useTimeAgo } from "@homarr/common";
-import type { ContainerState } from "@homarr/docker";
+import type { ContainerState, DockerEndpointCapability } from "@homarr/docker";
import { containerStateColorMap, cpuUsageColor, memoryUsageColor, safeValue } from "@homarr/docker/shared";
import { useModalAction } from "@homarr/modals";
-import { AddDockerAppToHomarr } from "@homarr/modals-collection";
+import { AddDockerAppToHomarr, useDockerContainerRemovalConfirmation } from "@homarr/modals-collection";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import type { TranslationFunction } from "@homarr/translation";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
@@ -32,9 +32,41 @@ import { OverflowBadge } from "@homarr/ui";
import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
type DockerContainer = RouterOutputs["docker"]["getContainers"]["containers"][number];
+type DockerEndpoint = RouterOutputs["docker"]["getContainers"]["endpoints"][number];
-const createContainerLogsPath = (container: Pick) =>
- `/manage/tools/docker/logs/${container.id}?name=${encodeURIComponent(container.name)}`;
+const createContainerLogsPath = (container: Pick) =>
+ `/manage/tools/docker/logs/${container.id}?name=${encodeURIComponent(container.name)}&endpointId=${encodeURIComponent(container.endpointId)}`;
+
+const getContainerTarget = ({ endpointId, id }: DockerContainer) => ({ endpointId, id });
+
+const showContainerActionResult = (
+ action: "start" | "stop" | "restart" | "remove",
+ containers: DockerContainer[],
+ results: RouterOutputs["docker"]["startAll"],
+ t: TranslationFunction,
+) => {
+ const failures = results.filter((result) => !result.success);
+ if (failures.length === 0) {
+ showSuccessNotification({
+ title: t(`docker.action.${action}.notification.success.title`),
+ message: t(`docker.action.${action}.notification.success.message`),
+ });
+ return;
+ }
+
+ const failedNames = failures.map(
+ ({ target }) =>
+ containers.find(({ endpointId, id }) => endpointId === target.endpointId && id === target.id)?.name ?? target.id,
+ );
+ showErrorNotification({
+ title: t("docker.action.result.failure.title"),
+ message: t("docker.action.result.failure.message", {
+ failed: String(failures.length),
+ total: String(results.length),
+ names: failedNames.join(", "),
+ }),
+ });
+};
const createColumns = (t: TranslationFunction): MRT_ColumnDef[] => [
{
@@ -157,32 +189,39 @@ interface DockerTableProps {
export function DockerTable({ initialData }: DockerTableProps) {
const t = useI18n();
const tDocker = useScopedI18n("docker");
- const { data, isFetching, refetch } = clientApi.docker.getContainers.useQuery(undefined, {
+ const utils = clientApi.useUtils();
+ const { data, isFetching } = clientApi.docker.getContainers.useQuery(undefined, {
initialData,
refetchOnMount: false,
});
+ const refreshInventory = clientApi.docker.refreshInventory.useMutation({
+ async onSuccess() {
+ await Promise.all([
+ utils.docker.getContainers.invalidate(),
+ utils.docker.reconcileServices.invalidate(),
+ utils.docker.getServiceHealth.invalidate(),
+ ]);
+ showSuccessNotification({
+ title: tDocker("action.refresh.notification.success.title"),
+ message: tDocker("action.refresh.notification.success.message"),
+ });
+ },
+ onError() {
+ showErrorNotification({
+ title: tDocker("action.refresh.notification.error.title"),
+ message: tDocker("action.refresh.notification.error.message"),
+ });
+ },
+ });
const relativeTime = useTimeAgo(data?.timestamp ?? new Date());
- const mutate = useCallback(() => {
- void refetch().then((result) => {
- if (result.isError) {
- showErrorNotification({
- title: tDocker("action.refresh.notification.error.title"),
- message: tDocker("action.refresh.notification.error.message"),
- });
- } else {
- showSuccessNotification({
- title: tDocker("action.refresh.notification.success.title"),
- message: tDocker("action.refresh.notification.success.message"),
- });
- }
- });
- }, [refetch, tDocker]);
const containers = data?.containers ?? [];
+ const unavailableEndpoints = data?.endpoints.filter(({ status }) => status === "unavailable") ?? [];
const table = useTranslatedMantineReactTable({
data: containers,
- state: { isLoading: isFetching },
+ getRowId: (row) => row.resourceId,
+ state: { isLoading: isFetching || refreshInventory.isPending },
enableDensityToggle: false,
enableColumnActions: false,
enableColumnFilters: false,
@@ -207,13 +246,18 @@ export function DockerTable({ initialData }: DockerTableProps) {
initialState: { density: "xs", showGlobalFilter: true, columnVisibility: { cpuUsage: false, memoryUsage: false } },
mantineTableBodyCellProps: { style: { padding: "4px 8px" } },
mantineTableHeadCellProps: { style: { padding: "4px 8px" } },
- renderRowActions: ({ row }: { row: MRT_Row }) => }) => (
+ id === row.original.endpointId)}
+ />
+ ),
renderTopToolbarCustomActions: () => (
}
- onClick={() => mutate()}
- loading={isFetching}
+ onClick={() => refreshInventory.mutate()}
+ loading={isFetching || refreshInventory.isPending}
>
{tDocker("action.refresh.label")}
@@ -229,7 +273,7 @@ export function DockerTable({ initialData }: DockerTableProps) {
totalCount: String(table.getRowCount()),
})}
-
);
},
@@ -238,10 +282,18 @@ export function DockerTable({ initialData }: DockerTableProps) {
});
return (
- <>
+
+ {unavailableEndpoints.length > 0 && (
+ {tDocker("table.updated", { when: relativeTime })}
);
}
@@ -252,22 +304,21 @@ const containerActions: { action: "start" | "stop" | "restart" | "remove"; icon:
{ action: "remove", icon: IconTrash, color: "red" },
];
-const ContainerRowMenu = ({ container }: { container: DockerContainer }) => {
+const ContainerRowMenu = ({ container, endpoint }: { container: DockerContainer; endpoint?: DockerEndpoint }) => {
const t = useScopedI18n("docker.action");
+ const tAll = useI18n();
const router = useRouter();
const utils = clientApi.useUtils();
const { openModal } = useModalAction(AddDockerAppToHomarr);
+ const confirmRemoval = useDockerContainerRemovalConfirmation();
const useContainerAction = (action: "start" | "stop" | "restart" | "remove") =>
clientApi.docker[`${action}All`].useMutation({
async onSettled() {
await utils.docker.getContainers.invalidate();
},
- onSuccess() {
- showSuccessNotification({
- title: t(`${action}.notification.success.title`),
- message: t(`${action}.notification.success.message`),
- });
+ onSuccess(results) {
+ showContainerActionResult(action, [container], results, tAll);
},
onError() {
showErrorNotification({
@@ -294,6 +345,7 @@ const ContainerRowMenu = ({ container }: { container: DockerContainer }) => {
{containerActions.map(({ action, icon, color }) => (
-
-
);
}
+
+const getOnlyDockerEndpointIdAsync = async () => {
+ try {
+ const endpoints = await api.docker.getEndpoints();
+ return endpoints.length === 1 ? endpoints[0]?.id : undefined;
+ } catch {
+ return undefined;
+ }
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx
index a8d0e1fa8..c919a7b21 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx
@@ -11,10 +11,11 @@ import { clientApi } from "@homarr/api/client";
import classes from "./terminal.module.css";
interface DockerLogsTerminalProps {
+ endpointId: string;
containerId: string;
}
-export const DockerLogsTerminal = ({ containerId }: DockerLogsTerminalProps) => {
+export const DockerLogsTerminal = ({ endpointId, containerId }: DockerLogsTerminalProps) => {
const ref = useRef(null);
const terminalRef = useRef(null);
const pendingLogsRef = useRef([]);
@@ -31,7 +32,7 @@ export const DockerLogsTerminal = ({ containerId }: DockerLogsTerminalProps) =>
}, []);
clientApi.docker.subscribeLogs.useSubscription(
- { id: containerId, tail: 200 },
+ { endpointId, id: containerId, tail: 200 },
{
onData: writeToTerminal,
onError(err) {
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
index 97544314d..44453878d 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx
@@ -7,6 +7,7 @@ import { env } from "@homarr/docker/env";
import { getScopedI18n } from "@homarr/translation/server";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { DockerReconciliation } from "./docker-reconciliation";
import { DockerTable } from "./docker-table";
export default async function DockerPage() {
@@ -15,7 +16,7 @@ export default async function DockerPage() {
notFound();
}
- const { containers, timestamp } = await api.docker.getContainers();
+ const { containers, endpoints, timestamp } = await api.docker.getContainers();
const tDocker = await getScopedI18n("docker");
return (
@@ -23,7 +24,8 @@ export default async function DockerPage() {
{tDocker("title")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/cluster-dashboard.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/cluster-dashboard.tsx
index b6aa8cd9e..366c84e67 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/cluster-dashboard.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/cluster-dashboard.tsx
@@ -1,31 +1,38 @@
"use client";
-import { SimpleGrid, Skeleton, Stack, Title } from "@mantine/core";
+import { Alert, SimpleGrid, Skeleton, Stack, Title } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { createId } from "@homarr/common";
import type { KubernetesLabelResourceType } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
import KubernetesErrorPage from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/error";
import { HeaderCard } from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/header-card/header-card";
import { ResourceGauge } from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-gauge/resource-gauge";
import { ResourceTile } from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile";
+import { useSelectedKubernetesContextId } from "../kubernetes-context-selector";
export function ClusterDashboard() {
const t = useI18n();
+ const tCluster = useScopedI18n("kubernetes.cluster");
+ const contextId = useSelectedKubernetesContextId();
const {
data: clusterData,
isLoading: isClusterLoading,
isError: isClusterError,
- } = clientApi.kubernetes.cluster.getCluster.useQuery();
+ } = clientApi.kubernetes.cluster.getCluster.useQuery({ contextId: contextId ?? "" }, { enabled: Boolean(contextId) });
const {
data: resourceCountsData,
isLoading: isResourceCountsLoading,
isError: isResourceCountsError,
- } = clientApi.kubernetes.cluster.getClusterResourceCounts.useQuery();
+ } = clientApi.kubernetes.cluster.getClusterResourceCounts.useQuery(
+ { contextId: contextId ?? "" },
+ { enabled: Boolean(contextId) },
+ );
return (
@@ -46,6 +53,12 @@ export function ClusterDashboard() {
{t("kubernetes.cluster.capacity.title")}
+ {clusterData?.metricsAvailable === false && (
+
{isClusterError
? Array.from({ length: 3 }).map(() =>
+
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/configmaps-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/configmaps-table.tsx
index 9723171eb..47360ef15 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/configmaps-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/configmaps-table.tsx
@@ -16,6 +16,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface ConfigMapsTableComponentProps {
+ contextId: string;
initialConfigMaps: RouterOutputs["kubernetes"]["configMaps"]["getConfigMaps"];
}
@@ -39,15 +40,19 @@ const createColumns = (
},
];
-export function ConfigmapsTable(initialData: ConfigMapsTableComponentProps) {
+export function ConfigmapsTable({ contextId, initialConfigMaps }: ConfigMapsTableComponentProps) {
const tConfigMaps = useScopedI18n("kubernetes.configmaps");
- const { data } = clientApi.kubernetes.configMaps.getConfigMaps.useQuery(undefined, {
- initialData: initialData.initialConfigMaps,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.configMaps.getConfigMaps.useQuery(
+ { contextId },
+ {
+ initialData: initialConfigMaps,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/page.tsx
index ef49e5f21..fb6f5732f 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/configmaps/page.tsx
@@ -8,14 +8,24 @@ import { getScopedI18n } from "@homarr/translation/server";
import { ConfigmapsTable } from "~/app/[locale]/manage/tools/kubernetes/configmaps/configmaps-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function ConfigMapsPage() {
+export default async function ConfigMapsPage({
+ searchParams,
+}: {
+ searchParams: Promise;
+}) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const configMaps = await api.kubernetes.configMaps.getConfigMaps();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const configMaps =
+ context.status === "unavailable"
+ ? []
+ : await api.kubernetes.configMaps.getConfigMaps({ contextId: context.contextId });
const tConfigMaps = await getScopedI18n("kubernetes.configmaps");
return (
@@ -23,7 +33,7 @@ export default async function ConfigMapsPage() {
{tConfigMaps("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/ingresses/ingresses-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/ingresses/ingresses-table.tsx
index 3787bbe8b..8f1bca890 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/ingresses/ingresses-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/ingresses/ingresses-table.tsx
@@ -16,9 +16,12 @@ import type { ScopedTranslationFunction } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
+import KubernetesErrorPage from "../cluster-dashboard/error";
+
dayjs.extend(relativeTime);
interface IngressesTableComponentProps {
+ contextId: string;
initialIngresses: RouterOutputs["kubernetes"]["ingresses"]["getIngresses"];
}
@@ -72,15 +75,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.ingresses">): MR
},
];
-export function IngressesTable(initialData: IngressesTableComponentProps) {
+export function IngressesTable({ contextId, initialIngresses }: IngressesTableComponentProps) {
const tIngresses = useScopedI18n("kubernetes.ingresses");
- const { data } = clientApi.kubernetes.ingresses.getIngresses.useQuery(undefined, {
- initialData: initialData.initialIngresses,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data, isError } = clientApi.kubernetes.ingresses.getIngresses.useQuery(
+ { contextId },
+ {
+ initialData: initialIngresses,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
@@ -103,5 +110,9 @@ export function IngressesTable(initialData: IngressesTableComponentProps) {
columns: createColumns(tIngresses),
});
+ if (isError) {
+ return ;
+}) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const ingresses = await api.kubernetes.ingresses.getIngresses();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const ingresses =
+ context.status === "unavailable"
+ ? []
+ : await api.kubernetes.ingresses.getIngresses({ contextId: context.contextId });
const tIngresses = await getScopedI18n("kubernetes.ingresses");
return (
<>
{tIngresses("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/kubernetes-context-selector.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/kubernetes-context-selector.tsx
new file mode 100644
index 000000000..16b49af77
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/kubernetes-context-selector.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Alert, Badge, Button, Group, Select, Stack, Text } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
+
+export const KubernetesContextSelector = () => {
+ const t = useScopedI18n("kubernetes.context");
+ const pathname = usePathname();
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const { data, isError, refetch } = clientApi.kubernetes.contexts.getContexts.useQuery(undefined, {
+ refetchInterval: 30_000,
+ refetchOnMount: "always",
+ refetchOnReconnect: true,
+ refetchOnWindowFocus: true,
+ });
+ const [storedContextId, setStoredContextId] = useLocalStorage({
+ key: "homarr-kubernetes-context",
+ defaultValue: null,
+ });
+ const requestedContextId = searchParams.get("context");
+ const contextId =
+ data?.contexts.find((context) => context.contextId === requestedContextId)?.contextId ??
+ data?.contexts.find((context) => context.contextId === storedContextId)?.contextId ??
+ data?.contexts.find((context) => context.contextId === data.defaultContextId)?.contextId ??
+ data?.contexts[0]?.contextId ??
+ null;
+ const context = data?.contexts.find((item) => item.contextId === contextId);
+
+ useEffect(() => {
+ if (!contextId || requestedContextId === contextId) return;
+ const next = new URLSearchParams(searchParams);
+ next.set("context", contextId);
+ router.replace(`${pathname}?${next.toString()}`);
+ }, [contextId, pathname, requestedContextId, router, searchParams]);
+
+ if (isError) {
+ return (
+
+ {t("loadError.message")}
+
+
+
+ );
+ }
+
+ if (!data || !contextId) return null;
+
+ const selectContext = (value: string | null) => {
+ if (!value) return;
+ setStoredContextId(value);
+ const next = new URLSearchParams(searchParams);
+ next.set("context", value);
+ router.replace(`${pathname}?${next.toString()}`);
+ };
+
+ return (
+ <>
+
+
+ {context?.status === "unavailable" && (
+ ) => {
+ const [{ context }, result] = await Promise.all([searchParams, api.kubernetes.contexts.getContexts()]);
+ const requestedContextId = Array.isArray(context) ? context[0] : context;
+ const selected =
+ result.contexts.find(({ contextId }) => contextId === requestedContextId) ??
+ result.contexts.find(({ contextId }) => contextId === result.defaultContextId) ??
+ result.contexts[0];
+ if (!selected) throw new Error("No Kubernetes context is configured");
+ return selected;
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/layout.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/layout.tsx
new file mode 100644
index 000000000..e3fd6c49a
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/layout.tsx
@@ -0,0 +1,15 @@
+import { Suspense } from "react";
+import { Stack } from "@mantine/core";
+
+import { KubernetesContextSelector } from "./kubernetes-context-selector";
+
+export default function KubernetesLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ {children}
+
+ );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/namespaces-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/namespaces-table.tsx
index 2486a4ad0..df1e3b9ea 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/namespaces-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/namespaces-table.tsx
@@ -18,6 +18,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface NamespacesTableComponentProps {
+ contextId: string;
initialNamespaces: RouterOutputs["kubernetes"]["namespaces"]["getNamespaces"];
}
@@ -56,15 +57,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.namespaces">): M
},
];
-export function NamespacesTable(initialData: NamespacesTableComponentProps) {
+export function NamespacesTable({ contextId, initialNamespaces }: NamespacesTableComponentProps) {
const tNamespaces = useScopedI18n("kubernetes.namespaces");
- const { data } = clientApi.kubernetes.namespaces.getNamespaces.useQuery(undefined, {
- initialData: initialData.initialNamespaces,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.namespaces.getNamespaces.useQuery(
+ { contextId },
+ {
+ initialData: initialNamespaces,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/page.tsx
index 14b48f757..72dd362ca 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/namespaces/page.tsx
@@ -8,21 +8,31 @@ import { getScopedI18n } from "@homarr/translation/server";
import { NamespacesTable } from "~/app/[locale]/manage/tools/kubernetes/namespaces/namespaces-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function NamespacesPage() {
+export default async function NamespacesPage({
+ searchParams,
+}: {
+ searchParams: Promise;
+}) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const namespaces = await api.kubernetes.namespaces.getNamespaces();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const namespaces =
+ context.status === "unavailable"
+ ? []
+ : await api.kubernetes.namespaces.getNamespaces({ contextId: context.contextId });
const tNamespaces = await getScopedI18n("kubernetes.namespaces");
return (
<>
{tNamespaces("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/nodes/nodes-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/nodes/nodes-table.tsx
index 2fc69d51f..c0e054f5c 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/nodes/nodes-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/nodes/nodes-table.tsx
@@ -15,9 +15,12 @@ import type { ScopedTranslationFunction } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
+import KubernetesErrorPage from "../cluster-dashboard/error";
+
dayjs.extend(relativeTime);
interface NodesListComponentProps {
+ contextId: string;
initialNodes: RouterOutputs["kubernetes"]["nodes"]["getNodes"];
}
@@ -49,14 +52,14 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.nodes">): MRT_Co
accessorKey: "allocatableCpuPercentage",
header: t("field.cpu.label"),
Cell({ cell }) {
- return getRingProgress(cell.row.original.allocatableCpuPercentage);
+ return getRingProgress(cell.row.original.allocatableCpuPercentage, t("field.metricsUnavailable"));
},
},
{
accessorKey: "allocatableRamPercentage",
header: t("field.memory.label"),
Cell({ cell }) {
- return getRingProgress(cell.row.original.allocatableRamPercentage);
+ return getRingProgress(cell.row.original.allocatableRamPercentage, t("field.metricsUnavailable"));
},
},
{
@@ -82,15 +85,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.nodes">): MRT_Co
},
];
-export function NodesTable(initialData: NodesListComponentProps) {
+export function NodesTable({ contextId, initialNodes }: NodesListComponentProps) {
const tNodes = useScopedI18n("kubernetes.nodes");
- const { data } = clientApi.kubernetes.nodes.getNodes.useQuery(undefined, {
- initialData: initialData.initialNodes,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data, isError } = clientApi.kubernetes.nodes.getNodes.useQuery(
+ { contextId },
+ {
+ initialData: initialNodes,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
@@ -112,10 +119,18 @@ export function NodesTable(initialData: NodesListComponentProps) {
columns: createColumns(tNodes),
});
+ if (isError) {
+ return {unavailableLabel} ;
+ }
+
return (
}) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const nodes = await api.kubernetes.nodes.getNodes();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const nodes =
+ context.status === "unavailable" ? [] : await api.kubernetes.nodes.getNodes({ contextId: context.contextId });
const tNodes = await getScopedI18n("kubernetes.nodes");
return (
<>
{tNodes("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/page.tsx
index b261bf4e2..654cc107f 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/page.tsx
@@ -8,21 +8,25 @@ import { getScopedI18n } from "@homarr/translation/server";
import { PodsTable } from "~/app/[locale]/manage/tools/kubernetes/pods/pods-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function PodsPage() {
+export default async function PodsPage({ searchParams }: { searchParams: Promise }) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const pods = await api.kubernetes.pods.getPods();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const pods =
+ context.status === "unavailable" ? [] : await api.kubernetes.pods.getPods({ contextId: context.contextId });
const tPods = await getScopedI18n("kubernetes.pods");
return (
<>
{tPods("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/pods-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/pods-table.tsx
index dd600b387..2afbec470 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/pods-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/pods/pods-table.tsx
@@ -16,6 +16,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface PodsTableComponentProps {
+ contextId: string;
initialPods: RouterOutputs["kubernetes"]["pods"]["getPods"];
}
@@ -47,15 +48,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.pods">): MRT_Col
},
];
-export function PodsTable(initialData: PodsTableComponentProps) {
+export function PodsTable({ contextId, initialPods }: PodsTableComponentProps) {
const tPods = useScopedI18n("kubernetes.pods");
- const { data } = clientApi.kubernetes.pods.getPods.useQuery(undefined, {
- initialData: initialData.initialPods,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.pods.getPods.useQuery(
+ { contextId },
+ {
+ initialData: initialPods,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/page.tsx
index b52b1ea41..a8a3e57ac 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/page.tsx
@@ -8,21 +8,25 @@ import { getScopedI18n } from "@homarr/translation/server";
import { SecretsTable } from "~/app/[locale]/manage/tools/kubernetes/secrets/secrets-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function SecretsPage() {
+export default async function SecretsPage({ searchParams }: { searchParams: Promise }) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const secrets = await api.kubernetes.secrets.getSecrets();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const secrets =
+ context.status === "unavailable" ? [] : await api.kubernetes.secrets.getSecrets({ contextId: context.contextId });
const tSecrets = await getScopedI18n("kubernetes.secrets");
return (
<>
{tSecrets("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/secrets-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/secrets-table.tsx
index d0a902f22..fe66f05e3 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/secrets-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/secrets/secrets-table.tsx
@@ -16,6 +16,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface SecretsTableComponentProps {
+ contextId: string;
initialSecrets: RouterOutputs["kubernetes"]["secrets"]["getSecrets"];
}
@@ -42,15 +43,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.secrets">): MRT_
},
];
-export function SecretsTable(initialData: SecretsTableComponentProps) {
+export function SecretsTable({ contextId, initialSecrets }: SecretsTableComponentProps) {
const tSecrets = useScopedI18n("kubernetes.secrets");
- const { data } = clientApi.kubernetes.secrets.getSecrets.useQuery(undefined, {
- initialData: initialData.initialSecrets,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.secrets.getSecrets.useQuery(
+ { contextId },
+ {
+ initialData: initialSecrets,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/page.tsx
index d50467aa8..ed3571e8b 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/page.tsx
@@ -8,21 +8,25 @@ import { getScopedI18n } from "@homarr/translation/server";
import { ServicesTable } from "~/app/[locale]/manage/tools/kubernetes/services/services-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function ServicesPage() {
+export default async function ServicesPage({ searchParams }: { searchParams: Promise }) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const services = await api.kubernetes.services.getServices();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const services =
+ context.status === "unavailable" ? [] : await api.kubernetes.services.getServices({ contextId: context.contextId });
const tServices = await getScopedI18n("kubernetes.services");
return (
<>
{tServices("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/services-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/services-table.tsx
index 05a7f3cb9..2cdfd5800 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/services-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/services/services-table.tsx
@@ -17,6 +17,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface ServicesTableComponentProps {
+ contextId: string;
initialServices: RouterOutputs["kubernetes"]["services"]["getServices"];
}
@@ -61,15 +62,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.services">): MRT
},
];
-export function ServicesTable(initialData: ServicesTableComponentProps) {
+export function ServicesTable({ contextId, initialServices }: ServicesTableComponentProps) {
const tServices = useScopedI18n("kubernetes.services");
- const { data } = clientApi.kubernetes.services.getServices.useQuery(undefined, {
- initialData: initialData.initialServices,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.services.getServices.useQuery(
+ { contextId },
+ {
+ initialData: initialServices,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/page.tsx
index 301371dab..623e688ec 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/page.tsx
@@ -8,21 +8,25 @@ import { getScopedI18n } from "@homarr/translation/server";
import { VolumesTable } from "~/app/[locale]/manage/tools/kubernetes/volumes/volumes-table";
import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import type { KubernetesContextSearchParams } from "../kubernetes-context";
+import { getSelectedKubernetesContextAsync } from "../kubernetes-context";
-export default async function VolumesPage() {
+export default async function VolumesPage({ searchParams }: { searchParams: Promise }) {
const session = await auth();
if (!(session?.user.permissions.includes("admin") && env.ENABLE_KUBERNETES)) {
notFound();
}
- const volumes = await api.kubernetes.volumes.getVolumes();
+ const context = await getSelectedKubernetesContextAsync(searchParams);
+ const volumes =
+ context.status === "unavailable" ? [] : await api.kubernetes.volumes.getVolumes({ contextId: context.contextId });
const tVolumes = await getScopedI18n("kubernetes.volumes");
return (
<>
{tVolumes("label")}
-
);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/volumes-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/volumes-table.tsx
index e911ee7a6..9cad0a017 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/volumes-table.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/kubernetes/volumes/volumes-table.tsx
@@ -16,6 +16,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
dayjs.extend(relativeTime);
interface VolumesTableComponentProps {
+ contextId: string;
initialVolumes: RouterOutputs["kubernetes"]["volumes"]["getVolumes"];
}
@@ -66,15 +67,19 @@ const createColumns = (t: ScopedTranslationFunction<"kubernetes.volumes">): MRT_
},
];
-export function VolumesTable(initialData: VolumesTableComponentProps) {
+export function VolumesTable({ contextId, initialVolumes }: VolumesTableComponentProps) {
const tVolumes = useScopedI18n("kubernetes.volumes");
- const { data } = clientApi.kubernetes.volumes.getVolumes.useQuery(undefined, {
- initialData: initialData.initialVolumes,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
- refetchOnReconnect: false,
- });
+ const { data } = clientApi.kubernetes.volumes.getVolumes.useQuery(
+ { contextId },
+ {
+ initialData: initialVolumes,
+ refetchOnMount: "always",
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ refetchInterval: (query) => (query.state.status === "error" ? 30_000 : false),
+ },
+ );
const table = useTranslatedMantineReactTable({
data,
diff --git a/apps/nextjs/src/app/api/mcp/_handler.ts b/apps/nextjs/src/app/api/mcp/_handler.ts
index c94317299..d1fe6f5ac 100644
--- a/apps/nextjs/src/app/api/mcp/_handler.ts
+++ b/apps/nextjs/src/app/api/mcp/_handler.ts
@@ -246,7 +246,7 @@ If \`hasUseAccess\` is false, the API key owner lacks permission for that integr
**"Check Beszel systems"** → Call \`integration_all\` to get Beszel integrationIds, then use \`beszel_getSystems\` to list all monitored systems with CPU/memory/disk/network status. Use \`beszel_getAlerts\` for active alerts and history. Use \`beszel_getSystemStats\` for historical metrics of a specific system (requires systemId from \`beszel_getSystems\`).
-**"Manage Docker containers"** → Use \`docker_getContainers\` to list containers with status/CPU/memory, then \`docker_startAll\`/\`docker_stopAll\`/\`docker_restartAll\` with container IDs.
+**"Manage Docker containers"** → Use \`docker_getContainers\` to list containers with status/CPU/memory, then \`docker_startAll\`/\`docker_stopAll\`/\`docker_restartAll\` with \`targets\` containing the endpointId and id returned for each container.
**"Control smart home"** → Use \`smartHome_entityState\` to check a Home Assistant entity, \`smartHome_switchEntity\` to toggle it, or \`smartHome_executeAutomation\` to trigger an automation.
diff --git a/apps/nextjs/src/components/assistant/assistant-widget-tool.spec.ts b/apps/nextjs/src/components/assistant/assistant-widget-tool.spec.ts
index 252a0fa99..704829201 100644
--- a/apps/nextjs/src/components/assistant/assistant-widget-tool.spec.ts
+++ b/apps/nextjs/src/components/assistant/assistant-widget-tool.spec.ts
@@ -46,7 +46,7 @@ describe("getAssistantWidgetConfiguration", () => {
boardName: "Home",
kind: "audioStats",
summary: "Show audio statistics",
- integrationIds: ["navidrome-1", "audiobookshelf-1", "plex-1"],
+ integrationIds: ["navidrome-private", "navidrome-1", "audiobookshelf-1", "plex-1"],
},
settings,
[
@@ -55,28 +55,28 @@ describe("getAssistantWidgetConfiguration", () => {
name: "Navidrome",
kind: "navidrome",
url: "https://music.example.com",
- permissions: { hasUseAccess: true },
+ permissions: { hasUseAccess: true, hasInteractAccess: true, hasFullAccess: true },
},
{
id: "audiobookshelf-1",
name: "Audiobookshelf",
kind: "audiobookshelf",
url: "https://books.example.com",
- permissions: { hasUseAccess: true },
+ permissions: { hasUseAccess: true, hasInteractAccess: true, hasFullAccess: true },
},
{
id: "plex-1",
name: "Plex",
kind: "plex",
url: "https://plex.example.com",
- permissions: { hasUseAccess: true },
+ permissions: { hasUseAccess: true, hasInteractAccess: true, hasFullAccess: true },
},
{
id: "navidrome-private",
name: "Private Navidrome",
kind: "navidrome",
url: "https://private.example.com",
- permissions: { hasUseAccess: false },
+ permissions: { hasUseAccess: false, hasInteractAccess: false, hasFullAccess: false },
},
],
);
diff --git a/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx b/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
index 1ad4552d2..cdd00d62e 100644
--- a/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
+++ b/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
@@ -6,6 +6,7 @@ import { Alert, Box, Button, Group, Skeleton, Stack, Text, ThemeIcon } from "@ma
import { IconAlertTriangle, IconCheck, IconSettings } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
import type { IntegrationKind } from "@homarr/definitions";
import { useModalAction } from "@homarr/modals";
import type { SettingsContextProps } from "@homarr/settings/creator";
@@ -20,9 +21,10 @@ import { useAssistantAutomaticAction } from "./assistant-auto-approval";
import { AssistantAutomaticActionProgress } from "./assistant-automatic-action-progress";
import { hasCompleteAssistantToolArguments, hasFailedAssistantToolArguments } from "./assistant-human-tool-status";
import type { ConfigureWidgetArgs, ConfigureWidgetResult } from "./assistant-tool-contracts";
+import { IntegrationSelectModal } from "../integration/integration-select-modal";
interface AssistantIntegration extends IntegrationSelectOption {
- permissions: { hasUseAccess: boolean };
+ permissions: NonNullable;
}
export const getAssistantWidgetConfiguration = (
@@ -66,6 +68,7 @@ export const AssistantConfigureWidgetTool = ({
}: ToolCallMessagePartProps) => {
const t = useScopedI18n("common.assistant.configureWidget");
const fullT = useI18n();
+ const { data: session } = useSession();
const settings = useSettings();
const hasCompleteArguments = hasCompleteAssistantToolArguments(status);
const definition = args?.kind ? widgetImports[args.kind].definition : undefined;
@@ -80,10 +83,11 @@ export const AssistantConfigureWidgetTool = ({
}, [args, hasCompleteArguments, integrations.data, needsIntegrations, settings]);
const missingRequiredIntegration =
configuration?.integrationsRequired === true && configuration.value.integrationIds.length === 0;
- const { openModal } = useModalAction(WidgetEditModal);
+ const { openModal: openWidgetModal } = useModalAction(WidgetEditModal);
+ const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
const autoConfirming = useAssistantAutomaticAction({
toolCallId,
- ready: result === undefined && configuration !== null,
+ ready: result === undefined && configuration !== null && !missingRequiredIntegration,
completed: result !== undefined,
confirm: () => {
if (!args || !configuration) return;
@@ -154,6 +158,26 @@ export const AssistantConfigureWidgetTool = ({
if (!configuration) return null;
+ const openConfigurationModal = (
+ value = configuration.value,
+ integrationData: IntegrationSelectOption[] = configuration.integrationData,
+ ) =>
+ openWidgetModal(
+ {
+ kind: args.kind,
+ definition: widgetImports[args.kind].definition,
+ value,
+ integrationData,
+ integrationSupport: configuration.integrationSupport,
+ settings,
+ onSuccessfulEdit: ({ options, integrationIds }) =>
+ addResult({ boardId: args.boardId, kind: args.kind, options, integrationIds }),
+ },
+ {
+ title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${args.kind}.name`)}`,
+ },
+ );
+
if (autoConfirming) {
return (
@@ -168,9 +192,32 @@ export const AssistantConfigureWidgetTool = ({
{t("noIntegrationDescription")}
-
+ {session?.user.permissions.includes("integration-create") ? (
+
+ ) : (
+
+ )}
- }
- onClick={() =>
- openModal(
- {
- kind: args.kind,
- definition: widgetImports[args.kind].definition,
- value: configuration.value,
- integrationData: configuration.integrationData,
- integrationSupport: configuration.integrationSupport,
- settings,
- onSuccessfulEdit: ({ options, integrationIds }) =>
- addResult({ boardId: args.boardId, kind: args.kind, options, integrationIds }),
- },
- {
- title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${args.kind}.name`)}`,
- },
- )
- }
- >
+ } onClick={() => openConfigurationModal()}>
{t("review")}
+
+
+
+
+
+
+ {t("title")}
+
+
+ {t("description")}
+
+
+
+ } onClick={addWidget}>
+ {t("addWidget")}
+
+ } onClick={addApp}>
+ {t("addApp")}
+
+ {canConnectService && (
+ } onClick={connectService}>
+ {t("connectService")}
+
+ )}
+
+
+
+
+ );
+};
diff --git a/apps/nextjs/src/components/board/board-setup-checklist.module.css b/apps/nextjs/src/components/board/board-setup-checklist.module.css
new file mode 100644
index 000000000..5ca1a0159
--- /dev/null
+++ b/apps/nextjs/src/components/board/board-setup-checklist.module.css
@@ -0,0 +1,17 @@
+.root {
+ pointer-events: auto;
+ max-width: min(24rem, calc(100vw - 2rem));
+}
+
+.panel {
+ width: min(24rem, calc(100vw - 2rem));
+}
+
+.step {
+ border-radius: var(--mantine-radius-md);
+ padding: var(--mantine-spacing-xs);
+}
+
+.step[data-complete] {
+ background: light-dark(var(--mantine-color-green-0), rgba(47, 158, 68, 0.1));
+}
diff --git a/apps/nextjs/src/components/board/board-setup-checklist.module.d.css.ts b/apps/nextjs/src/components/board/board-setup-checklist.module.d.css.ts
new file mode 100644
index 000000000..eed717d4c
--- /dev/null
+++ b/apps/nextjs/src/components/board/board-setup-checklist.module.d.css.ts
@@ -0,0 +1,6 @@
+declare const classes: {
+ readonly panel: string;
+ readonly root: string;
+ readonly step: string;
+};
+export default classes;
diff --git a/apps/nextjs/src/components/board/board-setup-checklist.tsx b/apps/nextjs/src/components/board/board-setup-checklist.tsx
new file mode 100644
index 000000000..ee468136f
--- /dev/null
+++ b/apps/nextjs/src/components/board/board-setup-checklist.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { ActionIcon, Affix, Button, Group, Paper, Progress, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { IconCheck, IconChevronDown, IconChecklist } from "@tabler/icons-react";
+
+import { useIntegrationsWithUseAccess } from "@homarr/auth/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { useSetupAnalytics } from "~/components/create/setup-analytics";
+import { getBoardSetupProgress } from "./board-setup-progress";
+import { useBoardAddActions } from "./use-board-add-actions";
+import classes from "./board-setup-checklist.module.css";
+
+export const BoardSetupChecklist = () => {
+ const board = useRequiredBoard();
+ const [isEditMode] = useEditMode();
+ const integrations = useIntegrationsWithUseAccess();
+ const { addWidget, addApp, connectService, canConnectService } = useBoardAddActions();
+ const [collapsed, setCollapsed] = useLocalStorage({
+ key: `homarr-board-setup-checklist-${board.id}`,
+ defaultValue: false,
+ });
+ const t = useScopedI18n("board.setupChecklist");
+ const trackSetup = useSetupAnalytics();
+ const progress = getBoardSetupProgress({
+ itemKinds: board.items.map((item) => item.kind),
+ usableIntegrationCount: integrations.length,
+ });
+
+ if (!isEditMode || progress.isComplete) return null;
+
+ if (collapsed) {
+ return (
+
+ {t("title")}
+
+ {t("description")}
+
+
+ -
+
+
+ {t("integration.completion.recipes.title")}
+
+
+ {t("integration.completion.recipes.description")}
+
+
+
+
+ First
+
+
+ Disabled
+
+
+ Last
+
+
+