diff --git a/apps/docs/docs/advanced/environment-variables/index.mdx b/apps/docs/docs/advanced/environment-variables/index.mdx index 4048512a1..ff53193e4 100644 --- a/apps/docs/docs/advanced/environment-variables/index.mdx +++ b/apps/docs/docs/advanced/environment-variables/index.mdx @@ -58,12 +58,12 @@ A random secret can be generated by using the following command: `openssl rand - ## Docker -| Environment Variable | Description | Possible values | Default | -| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | -| `DOCKER_ENDPOINTS` | JSON array of named, capability-scoped Docker or Podman endpoints. Supports socket, explicitly insecure TCP, and TLS transports. See the [Docker and Podman integration guide](/docs/integrations/docker) | A JSON array of endpoint descriptors | - | -| `DOCKER_HOSTNAMES` | Legacy comma-separated list of plaintext TCP hostnames. Ignored when `DOCKER_ENDPOINTS` is set | For example `localhost,docker.example.com` | - | -| `DOCKER_PORTS` | Legacy comma-separated list of plaintext TCP ports. Ignored when `DOCKER_ENDPOINTS` is set | For example `2375,2376` | - | -| `DOCKER_SOCKET_PATHS` | Legacy comma-separated list of mounted Docker-compatible socket paths. Ignored when `DOCKER_ENDPOINTS` is set | For example `/var/run/docker.sock,/var/run/podman.sock` | - | +| Environment Variable | Description | Possible values | Default | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | +| `DOCKER_ENDPOINTS` | JSON array of named, capability-scoped Docker or Podman endpoints. Each stable `id` can be selected in Docker widgets. Supports socket, explicitly insecure TCP, and TLS transports. See the [Docker and Podman integration guide](/docs/integrations/docker) | A JSON array of endpoint descriptors | - | +| `DOCKER_HOSTNAMES` | Legacy comma-separated list of plaintext TCP hostnames. Ignored when `DOCKER_ENDPOINTS` is set | For example `localhost,docker.example.com` | - | +| `DOCKER_PORTS` | Legacy comma-separated list of plaintext TCP ports. Ignored when `DOCKER_ENDPOINTS` is set | For example `2375,2376` | - | +| `DOCKER_SOCKET_PATHS` | Legacy comma-separated list of mounted Docker-compatible socket paths. Ignored when `DOCKER_ENDPOINTS` is set | For example `/var/run/docker.sock,/var/run/podman.sock` | - | ## Database diff --git a/apps/docs/docs/integrations/docker/index.mdx b/apps/docs/docs/integrations/docker/index.mdx index 2b83460dc..f547ded1d 100644 --- a/apps/docs/docs/integrations/docker/index.mdx +++ b/apps/docs/docs/integrations/docker/index.mdx @@ -167,12 +167,37 @@ Supported transports are: Plaintext Docker TCP can grant unauthenticated control of the Docker host. Prefer a local socket, a least-privilege socket proxy, or TLS. The structured configuration refuses TCP unless `allowInsecure` is explicitly set to `true`. ::: +For example, two socket proxies can be configured as separate environments: + +```yaml +environment: + DOCKER_ENDPOINTS: >- + [ + { + "id": "home", + "name": "Home Docker", + "kind": "docker", + "transport": { "type": "tcp", "host": "docker-proxy-home", "port": 2375, "allowInsecure": true }, + "capabilities": ["inventory", "logs", "lifecycle"] + }, + { + "id": "lab", + "name": "Lab Docker", + "kind": "docker", + "transport": { "type": "tcp", "host": "docker-proxy-lab", "port": 2375, "allowInsecure": true }, + "capabilities": ["inventory", "logs"] + } + ] +``` + +Homarr must be attached to the Docker network of each proxy, and every configured host must be reachable from the Homarr container. + When `DOCKER_ENDPOINTS` is set, it takes precedence over the legacy `DOCKER_SOCKET_PATHS`, `DOCKER_HOSTNAMES`, and `DOCKER_PORTS` variables. ### Managing your Docker containers within Homarr Homarr allows you to interact with Docker containers running on your system. -The **Service setup** section compares the visible containers with your existing Homarr apps and integrations. It keeps every service distinct by Docker endpoint and container ID, including multiple containers that use the same integration type. +The collapsed **Assisted Docker setup** helper optionally compares visible containers with your existing Homarr apps and integrations. Open it only when you want setup suggestions; it never blocks normal container management. Every service stays distinct by Docker endpoint and container ID, including multiple containers that use the same integration type. Homarr can show a service as: @@ -187,7 +212,7 @@ Suggested addresses are ranked and explain where they came from. A published add Service discovery is read-only. Homarr never creates or changes an app or integration automatically; use the action on an individual suggestion to review and confirm its setup. ::: -Use the inbox filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same panel. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically. +Suggestions appear as a compact task list. Expand an item only when you want to inspect its address, match confidence, or observed health layers. Use the filters to focus on services that need attention or those already represented in Homarr. Refresh runs discovery again. Dismissed suggestions are stored in the current browser using their endpoint-qualified service identity and can be restored from the same helper. If multiple existing items could match, Homarr marks the result as ambiguous and does not choose one automatically. The health badges are an evidence-based projection across Docker, integration configuration, app representation, and persisted widget links. Authentication, API request success, and widget query execution are labeled **Not observed** because Homarr does not currently retain trustworthy last-run results for these layers. Use the suggested integration test or board action to diagnose them live; **Not observed** is never presented as healthy. @@ -216,6 +241,10 @@ This opens a dedicated page with an xterm.js terminal that streams the container The Docker management table supports optional **CPU usage** and **Memory usage** columns. These columns are hidden by default and can be toggled on from the table column visibility settings. +#### Choosing Docker environments in the widget + +The Docker widget can show one or more configured Docker environments. Leave **Docker environments** empty to include every endpoint, which is also the default for existing widgets. Selecting one or more entries limits container and statistics requests to those endpoints. + #### Add apps from containers Homarr also lets you add apps from containers. You can simply select all containers you want to add an app for and then click the `Add to Homarr` button. diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx index bd2ab1363..44181afe8 100644 --- a/apps/docs/docs/management/api/index.mdx +++ b/apps/docs/docs/management/api/index.mdx @@ -110,6 +110,10 @@ Pass those pairs unchanged to `docker.startAll`, `docker.stopAll`, `docker.resta names use underscores, such as `docker_restartAll`. Endpoint qualification prevents identical container IDs on different Docker or Podman endpoints from targeting the wrong service. +`docker.getContainers` also accepts an optional `endpointIds` array. Omit it or pass an empty array to query every configured +Docker environment, or pass one or more IDs returned by `docker.getEndpoints` to query only those Dockerode clients. The +Docker widget uses the same behavior for its environment selector. + ## Partial integration failures Multi-integration widget queries keep data from integrations that remain available. Calendar and media-server results include 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 index 55c85523a..c8b9b592b 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx +++ b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-reconciliation.tsx @@ -1,22 +1,34 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useId, useState } from "react"; import { + ActionIcon, Alert, Avatar, Badge, Button, - Card, + Collapse, + Divider, Group, + Paper, SegmentedControl, Select, SimpleGrid, Stack, Text, TextInput, + ThemeIcon, + Tooltip, } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; -import { IconAlertTriangle, IconArrowRight, IconEyeOff, IconPlugConnected, IconRefresh } from "@tabler/icons-react"; +import { + IconAlertTriangle, + IconArrowRight, + IconChevronDown, + IconEyeOff, + IconRefresh, + IconSparkles, +} from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; @@ -39,8 +51,13 @@ type ServiceHealth = RouterOutputs["docker"]["getServiceHealth"]["services"][num export const DockerReconciliation = () => { const t = useScopedI18n("docker.reconciliation"); const utils = clientApi.useUtils(); + const panelId = useId(); + const [isOpen, setIsOpen] = useLocalStorage({ + key: "homarr-docker-reconciliation-open", + defaultValue: false, + }); const reconciliation = clientApi.docker.reconcileServices.useQuery(); - const health = clientApi.docker.getServiceHealth.useQuery(); + const health = clientApi.docker.getServiceHealth.useQuery(undefined, { enabled: isOpen }); const refreshInventory = clientApi.docker.refreshInventory.useMutation({ async onSuccess() { await Promise.all([ @@ -79,86 +96,112 @@ export const DockerReconciliation = () => { 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 attentionCount = reconciliation.data.candidates.filter( + ({ candidateKey, state }) => + ["newRecognized", "newApp", "moved"].includes(state) && !dismissedCandidateKeys.includes(candidateKey), + ).length; const isRefreshing = refreshInventory.isPending || reconciliation.isFetching || health.isFetching; + const toggleLabel = isOpen ? t("action.hide") : t("action.review"); 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 && ( - - )} - + + + + +
+ + {t("title")} + 0 ? "blue" : "gray"} aria-live="polite"> + {t("suggestions", { count: String(attentionCount) })} + + + + {t("description")} + +
+ - {unavailableEndpoints.length > 0 && ( - }> - {t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })} - - )} - - {candidates.length === 0 ? ( - - {reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")} - - ) : ( - - {candidates.map((candidate) => ( - key === candidate.candidateKey)} - onDismiss={() => - setDismissedCandidateKeys((current) => - dismissDockerReconciliationCandidate(current, candidate.candidateKey), - ) - } + + + + + 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 && ( + + )} + + + + + {unavailableEndpoints.length > 0 && ( + }> + {t("endpointUnavailable", { names: unavailableEndpoints.map(({ name }) => name).join(", ") })} + + )} + + {candidates.length === 0 ? ( + + {reconciliation.data.candidates.length === 0 ? t("empty") : t("emptyFilter")} + + ) : ( + + {candidates.map((candidate) => ( + key === candidate.candidateKey)} + onDismiss={() => + setDismissedCandidateKeys((current) => + dismissDockerReconciliationCandidate(current, candidate.candidateKey), + ) + } + /> + ))} + + )} + + - + ); }; @@ -185,6 +228,9 @@ const DockerReconciliationCandidate = ({ const target = getCandidateTarget(candidate, validatedUrl ?? ""); const actionNeedsUrl = target.kind === "createApp" || target.kind === "setupIntegration"; const isActionDisabled = actionNeedsUrl && validatedUrl === null; + const detailsId = useId(); + const [detailsOpen, setDetailsOpen] = useState(isActionDisabled || candidate.representation.signals.ambiguous); + const detailsLabel = detailsOpen ? t("action.hideDetails") : t("action.showDetails"); useEffect(() => { setSelectedCandidateId(initialUrlCandidate?.id ?? null); @@ -192,114 +238,151 @@ const DockerReconciliationCandidate = ({ }, [initialUrlCandidate?.id, initialUrlCandidate?.url]); return ( - - - - - + + + + + {candidate.container.name.at(0)?.toUpperCase()} -
- - {candidate.container.name} - +
+ + + {candidate.container.name} + + + {t(`state.${candidate.state}`)} + + {candidate.endpointName}
- - {t(`state.${candidate.state}`)} - - - - {candidate.match && ( - - {candidate.match.kind} - - {t("match", { confidence: t(`confidence.${candidate.match.confidence}`) })} - - - )} - - {candidate.representation.signals.ambiguous && ( - }> - {t("ambiguous")} - - )} - - {health && ( -
- - {t("health.title")} - - - {health.layers.map((layer) => ( - - {t(`health.layer.${layer.layer}`)}: {t(`health.status.${layer.status}`)} - - ))} - -
- )} - - ({ + value: item.id, + label: item.url || t("url.manual"), + }))} + onChange={(value) => { + setSelectedCandidateId(value); + setUrl(candidate.urlCandidates.find(({ id }) => id === value)?.url ?? ""); + }} + /> + setUrl(event.currentTarget.value)} + /> + + )} + + - + ); }; diff --git a/packages/api/src/router/docker/docker-router.ts b/packages/api/src/router/docker/docker-router.ts index a3ec241e1..1e4934cd2 100644 --- a/packages/api/src/router/docker/docker-router.ts +++ b/packages/api/src/router/docker/docker-router.ts @@ -65,12 +65,14 @@ export const dockerRouter = createTRPCRouter({ .meta({ mcp: { enabled: true, - description: "List all Docker containers with their state, image, CPU/memory usage, and ports", + description: + "List Docker containers with their state, image, CPU/memory usage, and ports. Optionally filter by endpoint IDs; omitted or empty means all endpoints.", }, }) .concat(dockerMiddleware()) - .query(async () => { - const innerHandler = dockerContainersRequestHandler.handler({}); + .input(z.object({ endpointIds: z.array(z.string().min(1)).max(100).optional() }).optional()) + .query(async ({ input }) => { + const innerHandler = dockerContainersRequestHandler.handler(input ?? {}); const result = await innerHandler.getDataAsync(); const { data, timestamp } = result; diff --git a/packages/request-handler/src/docker.ts b/packages/request-handler/src/docker.ts index 8a0a9fe5b..437906a59 100644 --- a/packages/request-handler/src/docker.ts +++ b/packages/request-handler/src/docker.ts @@ -196,7 +196,7 @@ const mockContainers: { ]; export const dockerContainersRequestHandler = createWidgetRequestHandler({ - async requestAsync() { + async requestAsync({ endpointIds }: { endpointIds?: string[] }) { if (isDemoMode()) { return { containers: mockContainers.map((container) => ({ @@ -219,7 +219,7 @@ export const dockerContainersRequestHandler = createWidgetRequestHandler({ ] satisfies DockerEndpointStatus[], }; } - return await getContainersWithStatsAsync(); + return await getContainersWithStatsAsync(dockerWidgetEndpointTimeoutMs, endpointIds); }, }); @@ -331,9 +331,18 @@ export const getDockerEndpointsAsync = (): DockerEndpointStatus[] => { ]; }; -export async function getContainersWithStatsAsync(timeoutMs = dockerWidgetEndpointTimeoutMs) { - const dockerInstances = DockerSingleton.getInstances(); - const initializationFailures = DockerSingleton.getInitializationFailures(); +export async function getContainersWithStatsAsync( + timeoutMs = dockerWidgetEndpointTimeoutMs, + endpointIds: string[] = [], +) { + const selectedEndpointIds = new Set(endpointIds); + const includesAllEndpoints = selectedEndpointIds.size === 0; + const dockerInstances = DockerSingleton.getInstances().filter( + ({ endpointId }) => includesAllEndpoints || selectedEndpointIds.has(endpointId), + ); + const initializationFailures = DockerSingleton.getInitializationFailures().filter( + ({ descriptor }) => includesAllEndpoints || selectedEndpointIds.has(descriptor.id), + ); const results = await Promise.allSettled( dockerInstances.map(async ({ instance, host, endpointId, endpointName }) => { const instanceContainers = await withDockerTimeoutAsync( diff --git a/packages/request-handler/src/test/docker.spec.ts b/packages/request-handler/src/test/docker.spec.ts index 50d717313..777c5fbed 100644 --- a/packages/request-handler/src/test/docker.spec.ts +++ b/packages/request-handler/src/test/docker.spec.ts @@ -127,6 +127,31 @@ describe("calculateMemoryUsage", () => { }); describe("getContainersWithStatsAsync", () => { + test("queries only selected Docker endpoints and leaves an empty selection as all", async () => { + const firstListContainers = vi.fn(async () => []); + const secondListContainers = vi.fn(async () => []); + vi.spyOn(DockerSingleton, "getInstances").mockReturnValue([ + createDockerInstance("first", firstListContainers), + createDockerInstance("second", secondListContainers), + ] as never); + vi.spyOn(DockerSingleton, "getInitializationFailures").mockReturnValue([]); + + try { + const selectedResult = await getContainersWithStatsAsync(50, ["second"]); + + expect(firstListContainers).not.toHaveBeenCalled(); + expect(secondListContainers).toHaveBeenCalledOnce(); + expect(selectedResult.endpoints.map(({ id }) => id)).toEqual(["second"]); + + await getContainersWithStatsAsync(50, []); + + expect(firstListContainers).toHaveBeenCalledOnce(); + expect(secondListContainers).toHaveBeenCalledTimes(2); + } finally { + vi.restoreAllMocks(); + } + }); + test("marks a timed-out endpoint unavailable without blocking healthy endpoints", async () => { vi.useFakeTimers(); try { diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 91e4178c5..e7608d348 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -3737,6 +3737,11 @@ "name": "Docker stats", "description": "Stats of your containers (This widget can only be added with administrator privileges)", "option": { + "endpointIds": { + "label": "Docker environments", + "description": "Leave empty to show containers from every Docker environment", + "placeholder": "All Docker environments" + }, "columns": { "label": "Columns to show" }, @@ -5685,6 +5690,7 @@ }, "dynamicSelect": { "noResults": "No results found", + "loading": "Loading...", "loadError": "Failed to load options" }, "assistant": { @@ -7072,8 +7078,9 @@ "docker": { "title": "Containers", "reconciliation": { - "title": "Service setup", - "description": "Docker services are compared with your apps and integrations. Review every suggestion before Homarr changes anything.", + "title": "Assisted Docker setup", + "description": "Optional suggestions to connect Docker services with Homarr apps and integrations.", + "suggestions": "{count, plural, =0 {No suggestions} one {# suggestion} other {# suggestions}}", "attention": "{count} need attention", "endpointUnavailable": "Some services could not be checked because these endpoints are unavailable: {names}", "empty": "No visible Docker services were found.", @@ -7131,6 +7138,10 @@ } }, "action": { + "review": "Review", + "hide": "Hide", + "showDetails": "Details", + "hideDetails": "Hide details", "refresh": "Refresh", "retry": "Try again", "dismiss": "Dismiss", @@ -7141,7 +7152,7 @@ "viewRepresentation": "View setup" }, "loadError": { - "title": "Service setup could not be loaded", + "title": "Docker setup assistant could not be loaded", "message": "Docker service information is unavailable. Try again without leaving this page." }, "refreshError": { diff --git a/packages/widgets/src/_inputs/index.ts b/packages/widgets/src/_inputs/index.ts index d05510232..e5f439dde 100644 --- a/packages/widgets/src/_inputs/index.ts +++ b/packages/widgets/src/_inputs/index.ts @@ -4,6 +4,7 @@ import { WidgetAppInput } from "./widget-app-input"; import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input"; import { WidgetCustomWidgetConfigurationInput } from "./widget-custom-widget-configuration-input"; import { WidgetDynamicSelectInput } from "./widget-dynamic-select-input"; +import { WidgetDynamicMultiSelectInput } from "./widget-dynamic-multiselect-input"; import { WidgetLocationInput } from "./widget-location-input"; import { WidgetMultiTextInput } from "./widget-multi-text-input"; import { WidgetMultiReleasesRepositoriesInput } from "./widget-multiReleasesRepositories-input"; @@ -36,6 +37,7 @@ const mapping = { sortableItemList: WidgetSortedItemListInput, multiReleasesRepositories: WidgetMultiReleasesRepositoriesInput, dynamicSelect: WidgetDynamicSelectInput, + dynamicMultiSelect: WidgetDynamicMultiSelectInput, umamiEventName: WidgetUmamiEventInput, umamiEventNames: WidgetUmamiEventNamesInput, umamiWebsite: WidgetUmamiWebsiteInput, diff --git a/packages/widgets/src/_inputs/widget-dynamic-multiselect-input.tsx b/packages/widgets/src/_inputs/widget-dynamic-multiselect-input.tsx new file mode 100644 index 000000000..acaa0de7f --- /dev/null +++ b/packages/widgets/src/_inputs/widget-dynamic-multiselect-input.tsx @@ -0,0 +1,44 @@ +"use client"; + +import { Loader, MultiSelect } from "@mantine/core"; + +import { useScopedI18n } from "@homarr/translation/client"; + +import type { CommonWidgetInputProps } from "./common"; +import { useWidgetInputTranslation } from "./common"; +import { useFormContext } from "./form"; + +export const WidgetDynamicMultiSelectInput = ({ + property, + kind, + options, +}: CommonWidgetInputProps<"dynamicMultiSelect">) => { + const t = useScopedI18n("widget.dynamicSelect"); + const tInput = useWidgetInputTranslation(kind, property); + const form = useFormContext(); + const inputProps = form.getInputProps(`options.${property}`); + const selectedValues = (inputProps.value as string[] | undefined) ?? []; + const { data: selectData, isPending, isError } = options.useOptions(); + const data = [ + ...selectData, + ...selectedValues + .filter((selectedValue) => !selectData.some((option) => option.value === selectedValue)) + .map((selectedValue) => ({ value: selectedValue, label: selectedValue })), + ]; + + return ( + : undefined} + searchable + clearable + nothingFoundMessage={t("noResults")} + data={data} + disabled={isError} + error={isError ? t("loadError") : inputProps.error} + /> + ); +}; diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx index 45322531d..1b06aafd4 100644 --- a/packages/widgets/src/docker/component.tsx +++ b/packages/widgets/src/docker/component.tsx @@ -248,7 +248,7 @@ export default function DockerWidget({ const isAdvanced = displayMode === "advanced"; const utils = clientApi.useUtils(); - const containersQuery = clientApi.docker.getContainers.useQuery(); + const containersQuery = clientApi.docker.getContainers.useQuery({ endpointIds: options.endpointIds }); const data = getUsableWidgetQueryData(containersQuery); const { isFetching } = containersQuery; const refreshInventory = clientApi.docker.refreshInventory.useMutation({ diff --git a/packages/widgets/src/docker/index.ts b/packages/widgets/src/docker/index.ts index bc229fed5..bcdae6508 100644 --- a/packages/widgets/src/docker/index.ts +++ b/packages/widgets/src/docker/index.ts @@ -1,6 +1,7 @@ import { IconBrandDocker, IconServerOff } from "@tabler/icons-react"; import type { RouterOutputs } from "@homarr/api"; +import { clientApi } from "@homarr/api/client"; import { createWidgetDefinition } from "../definition"; import { optionsBuilder } from "../options"; @@ -30,6 +31,18 @@ export const { definition, componentLoader } = createWidgetDefinition("dockerCon createOptions() { return optionsBuilder.from( (factory) => ({ + endpointIds: factory.dynamicMultiSelect({ + defaultValue: [], + withDescription: true, + useOptions: () => { + const { data = [], isPending, isError } = clientApi.docker.getEndpoints.useQuery(); + return { + data: data.map((endpoint) => ({ value: endpoint.id, label: endpoint.name })), + isPending, + isError, + }; + }, + }), columns: factory.multiSelect({ defaultValue: [...allColumnsList], options: allColumnsList.map((value) => ({ diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts index adb9770f8..1423de4d0 100644 --- a/packages/widgets/src/options.ts +++ b/packages/widgets/src/options.ts @@ -69,6 +69,14 @@ interface DynamicSelectInput extends CommonInput { }; } +interface DynamicMultiSelectInput extends CommonInput { + useOptions: () => { + data: DynamicSelectOption[]; + isPending: boolean; + isError: boolean; + }; +} + interface IntegrationSelectInput extends CommonInput { clearable?: boolean; searchable?: boolean; @@ -141,6 +149,12 @@ const optionsFactory = { useOptions: input.useOptions, withDescription: input.withDescription ?? false, }), + dynamicMultiSelect: (input: DynamicMultiSelectInput) => ({ + type: "dynamicMultiSelect" as const, + defaultValue: input.defaultValue ?? [], + useOptions: input.useOptions, + withDescription: input.withDescription ?? false, + }), select: (input: SelectInput) => ({ type: "select" as const, defaultValue: (input.defaultValue ?? input.options[0]) as inferSelectOptionValue,