feat: expand advanced widget experiences

2026-08-13 19:54:55 +02:00
1 parent 55226842f9
commit 65a7e84bea
@@ -1,17 +1,26 @@
 "use client";

-import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Badge, Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";

 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";

-import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
-import { createWidgetKey } from "./coolify-utils";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { WidgetEmptyState } from "../common/empty-state";
+import type { WidgetComponentProps } from "../definition";
+import { createWidgetKey, getCoolifySectionVisibility } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
+import type { InstanceData } from "./types";

-export default function CoolifyWidget({ options, integrationIds, width, height }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"coolify">) {
  const t = useScopedI18n("widget.coolify");

  if (integrationIds.length === 0) {
@@ -22,7 +31,18 @@ export default function CoolifyWidget({ options, integrationIds, width, height }
    );
  }

-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} height={height} />;
+  const isAdvanced = displayMode === "advanced";
+  const sectionVisibility = getCoolifySectionVisibility(options, displayMode);
+
+  return (
+    <CoolifyContent
+      integrationIds={integrationIds}
+      options={{ ...options, ...sectionVisibility }}
+      width={width}
+      height={height}
+      isAdvanced={isAdvanced}
+    />
+  );
 }

 interface CoolifyContentProps {
@@ -30,19 +50,24 @@ interface CoolifyContentProps {
  options: WidgetComponentProps<"coolify">["options"];
  width: number;
  height: number;
+  isAdvanced: boolean;
 }

-function CoolifyContent({ integrationIds, options, width, height }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
  const t = useScopedI18n("common");
  const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
    integrationIds,
  });
  const instancesData = getUsableWidgetQueryData(instancesQuery) ?? [];
  const { isPending } = instancesQuery;
+  const successfulInstances = instancesData.filter(
+    (instance): instance is InstanceData => instance.instanceInfo !== null,
+  );
+  const failedInstances = instancesData.filter((instance) => instance.instanceInfo === null);

  const isTiny = width < 256 || height < 144;
  const hideFooter = height < 112;
-  const [firstInstance] = instancesData;
+  const [firstInstance] = successfulInstances;
  const widgetKey = createWidgetKey(integrationIds);

  if (isPending) {
@@ -54,33 +79,77 @@ function CoolifyContent({ integrationIds, options, width, height }: CoolifyConte
      </Stack>
    );
  }
-
-  if (instancesData.length === 1 && firstInstance) {
+  if (successfulInstances.length === 0) {
    return (
-      <SingleInstanceLayout
-        instance={firstInstance}
-        options={options}
-        isTiny={isTiny}
-        widgetKey={widgetKey}
-        hideFooter={hideFooter}
-      />
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <Box style={{ minHeight: 0, flex: 1 }}>
+          <WidgetEmptyState />
+        </Box>
+      </Stack>
+    );
+  }
+
+  if (successfulInstances.length === 1 && firstInstance) {
+    return (
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <div style={{ minHeight: 0, flex: 1 }}>
+          <SingleInstanceLayout
+            instance={firstInstance}
+            options={options}
+            isTiny={!isAdvanced && isTiny}
+            isAdvanced={isAdvanced}
+            widgetKey={widgetKey}
+            hideFooter={!isAdvanced && hideFooter}
+          />
+        </div>
+      </Stack>
    );
  }

  return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
-        {instancesData.map((instance) => (
-          <InstanceCard
-            key={instance.integrationId}
-            instance={instance}
-            options={options}
-            isTiny={isTiny}
-            widgetKey={widgetKey}
-            hideFooter={hideFooter}
-          />
-        ))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Stack h="100%" gap={0}>
+      <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+      <ScrollArea style={{ minHeight: 0, flex: 1 }}>
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
+          {successfulInstances.map((instance) => (
+            <InstanceCard
+              key={instance.integrationId}
+              instance={instance}
+              options={options}
+              isTiny={!isAdvanced && isTiny}
+              isAdvanced={isAdvanced}
+              widgetKey={widgetKey}
+              hideFooter={!isAdvanced && hideFooter}
+            />
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+    </Stack>
  );
 }
+
+const FailedSourceBadges = ({
+  sources,
+  queryError,
+}: {
+  sources: { integrationId: string; integrationName: string }[];
+  queryError: unknown;
+}) => {
+  const t = useScopedI18n("widget.coolify");
+  if (sources.length === 0 && !queryError) return null;
+
+  return (
+    <Group gap={4} p="xs" pb={0} wrap="wrap">
+      {sources.map((source) => (
+        <Badge key={source.integrationId} color="red" variant="light" size="xs">
+          {t("source.unavailable", { source: source.integrationName })}
+        </Badge>
+      ))}
+      <Box ml="auto">
+        <WidgetQueryErrorIndicator error={queryError} label={t("name")} />
+      </Box>
+    </Group>
+  );
+};
@@ -2,7 +2,13 @@ import dayjs from "dayjs";
 import frenchLocale from "dayjs/locale/fr";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import { formatRelativeTime, getResourceTimestamp } from "./coolify-utils";
+import {
+  formatRelativeTime,
+  getCoolifySectionVisibility,
+  getCoolifyServerState,
+  getResourceTimestamp,
+  isCoolifyServerOnline,
+} from "./coolify-utils";

 describe("Coolify time formatting", () => {
  beforeEach(() => {
@@ -27,3 +33,51 @@ describe("Coolify time formatting", () => {
    expect(getResourceTimestamp({ status: "running", updated_at: "2026-08-02T11:00:00Z" }, "service")).toBeUndefined();
  });
 });
+
+describe("Coolify advanced display", () => {
+  it("forces every non-sensitive section without changing compact settings", () => {
+    const options = { showServers: false, showApplications: true, showServices: false };
+
+    expect(getCoolifySectionVisibility(options, "compact")).toEqual(options);
+    expect(getCoolifySectionVisibility(options, "advanced")).toEqual({
+      showServers: true,
+      showApplications: true,
+      showServices: true,
+    });
+  });
+
+  it("uses top-level server state before the settings fallback", () => {
+    const server = {
+      id: null,
+      uuid: "server-1",
+      name: "Build server",
+      ip: null,
+      is_reachable: false,
+      is_usable: null,
+      settings: {
+        server_id: null,
+        is_build_server: null,
+        is_reachable: true,
+        is_usable: true,
+      },
+    };
+
+    expect(getCoolifyServerState(server, "is_reachable")).toBe(false);
+    expect(getCoolifyServerState(server, "is_usable")).toBe(true);
+  });
+
+  it("does not count unknown reachability as online", () => {
+    const server = {
+      id: null,
+      uuid: "server-unknown",
+      name: "Unknown server",
+      ip: null,
+      is_reachable: null,
+      is_usable: null,
+      settings: null,
+    };
+
+    expect(getCoolifyServerState(server, "is_reachable")).toBeUndefined();
+    expect(isCoolifyServerOnline(server)).toBe(false);
+  });
+});
@@ -110,3 +110,26 @@ export function createStorageKey(widgetKey: string, integrationId: string, type:
  const cardKey = widgetKey.includes("-") ? `${widgetKey}-${integrationId}` : widgetKey;
  return `coolify-${type}-${cardKey}`;
 }
+
+interface CoolifySectionOptions {
+  showServers: boolean;
+  showApplications: boolean;
+  showServices: boolean;
+}
+
+export function getCoolifySectionVisibility(
+  options: CoolifySectionOptions,
+  displayMode?: "compact" | "advanced",
+): CoolifySectionOptions {
+  if (displayMode === "advanced") {
+    return { showServers: true, showApplications: true, showServices: true };
+  }
+  return options;
+}
+
+export function getCoolifyServerState(server: CoolifyServer, field: "is_reachable" | "is_usable"): boolean | undefined {
+  return server[field] ?? server.settings?.[field] ?? undefined;
+}
+
+export const isCoolifyServerOnline = (server: CoolifyServer): boolean =>
+  getCoolifyServerState(server, "is_reachable") === true;
@@ -4,7 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
-  supportsAdvancedFocus: false,
+  supportsAdvancedFocus: true,
  icon: IconCloud,
  createOptions() {
    return optionsBuilder.from((factory) => ({
@@ -1,20 +1,28 @@
 "use client";

 import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
-import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import {
+  IconCircleCheckFilled,
+  IconCircleFilled,
+  IconCircleXFilled,
+  IconEye,
+  IconEyeOff,
+  IconServer,
+} from "@tabler/icons-react";

 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

 import actionTargetClasses from "../common/action-target.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { getBadgeColor } from "./coolify-utils";
+import { getBadgeColor, getCoolifyServerState, isCoolifyServerOnline } from "./coolify-utils";

 interface ServersSectionProps {
  servers: CoolifyServer[];
  serverResourceCounts: Map<number, { apps: number; services: number }>;
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
  onToggleIp: () => void;
 }
@@ -24,12 +32,13 @@ export function ServersSection({
  serverResourceCounts,
  baseUrl,
  isTiny,
+  isAdvanced,
  showIp,
  onToggleIp,
 }: ServersSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
-  const onlineServers = servers.filter((server) => server.is_reachable !== false).length;
+  const onlineServers = servers.filter(isCoolifyServerOnline).length;

  return (
    <Accordion.Item value="servers">
@@ -67,6 +76,7 @@ export function ServersSection({
                }
                baseUrl={baseUrl}
                isTiny={isTiny}
+                isAdvanced={isAdvanced}
                showIp={showIp}
              />
            ))}
@@ -86,23 +96,28 @@ interface ServerRowProps {
  counts: { apps: number; services: number };
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
 }

-function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps) {
+function ServerRow({ server, counts, baseUrl, isTiny, isAdvanced, showIp }: ServerRowProps) {
  const t = useScopedI18n("widget.coolify");
  const isBuildServer = server.settings?.is_build_server === true;
-  const isOnline = server.is_reachable !== false;
+  const reachability = getCoolifyServerState(server, "is_reachable");
+  const usability = getCoolifyServerState(server, "is_usable");
  const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
-  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
+  const status = reachability === true ? "online" : reachability === false ? "offline" : "unknown";
+  const StatusIcon =
+    reachability === true ? IconCircleCheckFilled : reachability === false ? IconCircleXFilled : IconCircleFilled;
+  const statusColor = reachability === true ? "green" : reachability === false ? "red" : "gray";

  return (
    <Stack gap={0}>
      <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
        <StatusIcon
-          aria-label={t(isOnline ? "status.online" : "status.offline")}
+          aria-label={t(`status.${status}`)}
          size={isTiny ? 12 : 16}
-          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
+          color={`var(--mantine-color-${statusColor}-6)`}
        />
        <Anchor
          className={actionTargetClasses.root}
@@ -129,9 +144,30 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
      </Group>
      <Group wrap="nowrap" gap={4} ml={16}>
        <Text fz="10px" c="dimmed">
-          {showIp ? server.ip : "***.***.***.***"}
+          {showIp ? (server.ip ?? "—") : "***.***.***.***"}
        </Text>
      </Group>
+      {isAdvanced && (
+        <Group gap={4} ml={16} wrap="wrap">
+          <ServerStateBadge field="reachability" value={reachability} />
+          <ServerStateBadge field="usability" value={usability} />
+        </Group>
+      )}
    </Stack>
  );
 }
+
+const ServerStateBadge = ({ field, value }: { field: "reachability" | "usability"; value: boolean | undefined }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status =
+    value === undefined
+      ? t("status.unknown")
+      : field === "reachability"
+        ? t(value ? "status.reachable" : "status.unreachable")
+        : t(value ? "status.usable" : "status.unusable");
+  return (
+    <Badge size="xs" variant="light" color={value === true ? "green" : value === false ? "red" : "gray"}>
+      {t(`server.${field}`)}: {status}
+    </Badge>
+  );
+};
@@ -1,21 +1,24 @@
 "use client";

-import { Accordion, Badge, Group, Stack, Text } from "@mantine/core";
+import { Accordion, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
 import { IconStack2 } from "@tabler/icons-react";

 import type { CoolifyServiceWithContext } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

-import { getBadgeColor, parseStatus } from "./coolify-utils";
+import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { cleanFqdn, getBadgeColor, getStatusColor, parseStatus } from "./coolify-utils";
 import { ResourceRow } from "./resource-row";

 interface ServicesSectionProps {
  services: CoolifyServiceWithContext[];
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
 }

-export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionProps) {
+export function ServicesSection({ services, baseUrl, isTiny, isAdvanced }: ServicesSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
  const runningServices = services.filter((svc) => parseStatus(svc.status ?? "") === "running").length;
@@ -34,7 +37,19 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
        {services.length > 0 ? (
          <Stack gap={4}>
            {services.map((service) => (
-              <ResourceRow key={service.uuid} item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+              <Stack key={service.uuid} gap={2}>
+                <ResourceRow item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+                {isAdvanced && service.applications && service.applications.length > 0 && (
+                  <Stack gap={2} ml="lg">
+                    <Text fz="10px" c="dimmed">
+                      {tCommon("applications")}
+                    </Text>
+                    {service.applications.map((application) => (
+                      <ServiceApplicationRow key={application.uuid} application={application} />
+                    ))}
+                  </Stack>
+                )}
+              </Stack>
            ))}
          </Stack>
        ) : (
@@ -46,3 +61,45 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
    </Accordion.Item>
  );
 }
+
+type ServiceApplication = NonNullable<CoolifyServiceWithContext["applications"]>[number];
+
+const ServiceApplicationRow = ({ application }: { application: ServiceApplication }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status = parseStatus(application.status ?? "");
+  const publicUrl = getSafeApplicationUrl(cleanFqdn(application.fqdn));
+  const statusLabel =
+    status === "running" ||
+    status === "stopped" ||
+    status === "exited" ||
+    status === "starting" ||
+    status === "restarting"
+      ? t(`status.${status}`)
+      : t("status.unknown");
+
+  return (
+    <Group gap={4} wrap="nowrap">
+      <Badge size="xs" variant="dot" color={getStatusColor(status)}>
+        {statusLabel}
+      </Badge>
+      {publicUrl ? (
+        <Anchor
+          className={actionTargetClasses.root}
+          href={publicUrl}
+          target="_blank"
+          rel={SAFE_NEW_TAB_REL}
+          fz="xs"
+          c="inherit"
+          truncate="end"
+          style={{ textDecoration: "none" }}
+        >
+          {application.name}
+        </Anchor>
+      ) : (
+        <Text fz="xs" truncate="end">
+          {application.name}
+        </Text>
+      )}
+    </Group>
+  );
+};