feat(services): update ServiceUnitCard with background color for FramePanel

- Added `bg-muted` class to FramePanel in ServiceUnitCard for improved visual consistency. - Updated documentation to reflect the new background color setting for FramePanel, enhancing clarity on component usage.
feat(services): add load balancing mode and active IPs to service view
2026-08-19 23:13:58 +07:00 · 2026-08-19 23:00:21 +07:00 · 2026-08-19 22:37:54 +07:00
9 changed files with 289 additions and 112 deletions
@@ -312,6 +312,14 @@ async function buildView(db: Db, serviceId: number): Promise<ServiceView> {
    };
  });

+  const activeIps = new Set<string>();
+  for (const binding of bindings) {
+    const { config, rows } = getBindingLbState(db, binding.id);
+    for (const ip of selectActiveIpsByMode(config, rows)) {
+      activeIps.add(ip);
+    }
+  }
+
  return {
    id: service.id,
    name: service.name,
@@ -330,6 +338,8 @@ async function buildView(db: Db, serviceId: number): Promise<ServiceView> {
    health_status: "unknown",
    health_latency_ms: null,
    ip_health: [],
+    lb_mode: bindings[0]?.lb_mode ?? "round_robin",
+    active_ips: [...activeIps],
  };
 }

@@ -123,11 +123,12 @@ describe("create service then list groups", () => {
    expect(httpParsed.success, JSON.stringify(httpParsed.error?.issues)).toBe(
      true,
    );
-    expect(
-      httpParsed.data!.groups
-        .find((g) => g.id === group.id)
-        ?.services.some((s) => s.id === created.id),
-    ).toBe(true);
+    const listed = httpParsed.data!.groups
+      .find((g) => g.id === group.id)
+      ?.services.find((s) => s.id === created.id);
+    expect(listed).toBeDefined();
+    expect(listed?.lb_mode).toBe("round_robin");
+    expect(listed?.active_ips).toEqual(["1.2.3.4"]);

    await app.close();
  });
@@ -2,12 +2,20 @@ import { CheckIcon, CopyIcon } from 'lucide-react'
 import { toast } from 'sonner'

 import { HealthCheckBadge } from '@/components/health-check-badge'
+import { StatusBadge } from '@/components/status-badge'
 import { Badge } from '@/components/reui/badge'
 import { TruncatedText } from '@/components/truncated-text'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { serviceDisplayFqdns } from '@/lib/service-utils'
 import type { ServiceView } from '@/lib/schemas'
 import { Button } from '@cfdm/ui/components/button'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+} from '@cfdm/ui/components/item'
 import { Switch } from '@cfdm/ui/components/switch'
 import {
  Tooltip,
@@ -17,6 +25,9 @@ import {
 } from '@cfdm/ui/components/tooltip'
 import { cn } from '@cfdm/ui/lib/utils'

+/** Matches `Button size="icon-sm"` so Switch columns align with the card menu. */
+const MENU_SLOT_CLASS = 'size-7 shrink-0'
+
 export function CopyFqdnButton({
  value,
  className,
@@ -126,6 +137,11 @@ interface ServiceIpListProps {
  togglingIp?: string | null
  ipToggleDisabled?: boolean
  onToggleIp?: (ip: string, enabled: boolean) => void
+  /** Invisible icon-sm slot so IP Switch lines up with the card overflow menu. */
+  alignWithMenu?: boolean
+  lbMode?: ServiceView['lb_mode']
+  activeIps?: string[]
+  ipWeights?: Record<string, number>
  className?: string
  emptyLabel?: string
  copyable?: boolean
@@ -139,6 +155,10 @@ export function ServiceIpList({
  togglingIp = null,
  ipToggleDisabled = false,
  onToggleIp,
+  alignWithMenu = false,
+  lbMode,
+  activeIps = [],
+  ipWeights = {},
  className,
  emptyLabel = 'Нет IP',
  copyable = false,
@@ -155,49 +175,83 @@ export function ServiceIpList({
  const healthByIp = new Map(ipHealth.map((row) => [row.ip, row]))
  const visible = onToggleIp ? ips : ips.slice(0, VISIBLE_IP_LIMIT)
  const extraCount = ips.length - visible.length
+  const showMenuSlot = Boolean(onToggleIp && alignWithMenu)
+  const markActive = lbMode === 'failover' || lbMode === 'weighted'
+  const activeSet = new Set(activeIps)

  return (
-    <div className={cn('flex min-w-0 flex-col gap-1', className)}>
+    <ItemGroup className={cn('gap-1', className)}>
      {visible.map((ip) => {
        const health = healthByIp.get(ip)
        const enabled = ipEnabled[ip] !== false
        return (
-          <div key={ip} className="flex min-w-0 items-center gap-1.5">
-            <HealthCheckBadge
-              status={health?.status ?? 'unknown'}
-              latencyMs={health?.latency_ms}
-              lastCheckedAt={health?.last_checked_at}
-              lastError={health?.last_error}
-              colo={health?.colo}
-              provider={health?.provider}
-              size="xs"
-            />
-            <TruncatedText
-              className={cn(
-                'min-w-0 font-mono text-xs',
-                enabled ? 'text-muted-foreground' : 'text-muted-foreground/60',
-                textClassName,
-              )}
-            >
-              {ip}
-            </TruncatedText>
-            {copyable ? <CopyFqdnButton value={ip} /> : null}
-            {onToggleIp ? (
-              <Switch
-                size="sm"
-                className="ml-auto shrink-0"
-                checked={enabled}
-                disabled={ipToggleDisabled || togglingIp === ip}
-                onClick={(event) => {
-                  event.stopPropagation()
-                }}
-                onCheckedChange={(checked) => onToggleIp(ip, Boolean(checked))}
-                aria-label={
-                  enabled ? `Выключить IP ${ip}` : `Включить IP ${ip}`
-                }
+          <Item
+            key={ip}
+            size="sm"
+            className="w-full min-w-0 flex-nowrap border-0 p-0"
+          >
+            <ItemMedia>
+              <HealthCheckBadge
+                status={health?.status ?? 'unknown'}
+                latencyMs={health?.latency_ms}
+                lastCheckedAt={health?.last_checked_at}
+                lastError={health?.last_error}
+                colo={health?.colo}
+                provider={health?.provider}
+                size="xs"
              />
+            </ItemMedia>
+            <ItemContent className="min-w-0 gap-0">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <TruncatedText
+                  className={cn(
+                    'min-w-0 font-mono text-xs',
+                    enabled
+                      ? 'text-muted-foreground'
+                      : 'text-muted-foreground/60',
+                    textClassName,
+                  )}
+                >
+                  {ip}
+                </TruncatedText>
+                {copyable ? <CopyFqdnButton value={ip} /> : null}
+                {markActive && activeSet.has(ip) ? (
+                  <StatusBadge status="active" className="shrink-0" />
+                ) : null}
+                {lbMode === 'weighted' ? (
+                  <Badge
+                    variant="outline"
+                    size="xs"
+                    className="shrink-0 tabular-nums"
+                  >
+                    w{ipWeights[ip] ?? 1}
+                  </Badge>
+                ) : null}
+              </div>
+            </ItemContent>
+            {onToggleIp ? (
+              <ItemActions className="ml-auto shrink-0 gap-1">
+                <Switch
+                  size="sm"
+                  className="shrink-0"
+                  checked={enabled}
+                  disabled={ipToggleDisabled || togglingIp === ip}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                  }}
+                  onCheckedChange={(checked) =>
+                    onToggleIp(ip, Boolean(checked))
+                  }
+                  aria-label={
+                    enabled ? `Выключить IP ${ip}` : `Включить IP ${ip}`
+                  }
+                />
+                {showMenuSlot ? (
+                  <span className={MENU_SLOT_CLASS} aria-hidden="true" />
+                ) : null}
+              </ItemActions>
            ) : null}
-          </div>
+          </Item>
        )
      })}
      {extraCount > 0 ? (
@@ -224,6 +278,6 @@ export function ServiceIpList({
          </Tooltip>
        </TooltipProvider>
      ) : null}
-    </div>
+    </ItemGroup>
  )
 }
@@ -1,11 +1,17 @@
 import { Link } from '@tanstack/react-router'
-import { MoreHorizontalIcon, ServerIcon } from 'lucide-react'
+import {
+  GitForkIcon,
+  MoreHorizontalIcon,
+  Repeat2Icon,
+  ScaleIcon,
+  ServerIcon,
+  type LucideIcon,
+} from 'lucide-react'

 import { Badge } from '@/components/reui/badge'
 import {
  Frame,
  FrameDescription,
-  FrameHeader,
  FramePanel,
  FrameTitle,
 } from '@/components/reui/frame'
@@ -23,6 +29,12 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '@cfdm/ui/components/dropdown-menu'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+} from '@cfdm/ui/components/item'
 import { Switch } from '@cfdm/ui/components/switch'
 import {
  Tooltip,
@@ -30,6 +42,63 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from '@cfdm/ui/components/tooltip'
+import { cn } from '@cfdm/ui/lib/utils'
+
+/**
+ * Compact service card — settings-8 DNA (Badge + copy + Switch + menu).
+ * Preview: https://reui.io/preview/base/settings-8
+ * Frame: https://reui.io/docs/components/base/frame
+ * IconTile: https://reui.io/docs/components/base/icon-tile
+ * Header fill: FramePanel `bg-muted` (overrides `--frame-panel-bg`; see frame.tsx).
+ */
+
+type LbMode = ServiceView['lb_mode']
+
+const LB_MODE_META: Record<
+  LbMode,
+  { icon: LucideIcon; className: string; label: string }
+> = {
+  round_robin: {
+    icon: Repeat2Icon,
+    className: 'text-info',
+    label: 'Round Robin',
+  },
+  failover: {
+    icon: GitForkIcon,
+    className: 'text-warning',
+    label: 'Failover (приоритет)',
+  },
+  weighted: {
+    icon: ScaleIcon,
+    className: 'text-info',
+    label: 'Weighted (веса)',
+  },
+}
+
+function LbModeTile({ mode }: { mode: LbMode }) {
+  const meta = LB_MODE_META[mode]
+  const Icon = meta.icon
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <IconTile
+              variant="elevated"
+              size="xs"
+              className={cn('shrink-0', meta.className)}
+              aria-label={meta.label}
+            />
+          }
+        >
+          <Icon aria-hidden="true" />
+        </TooltipTrigger>
+        <TooltipContent>{meta.label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

 interface ServiceUnitCardProps {
  service: ServiceView
@@ -55,27 +124,32 @@ export function ServiceUnitCard({
  const extraCount = Math.max(0, fqdns.length - 1)

  return (
-    <Frame dense spacing="sm" className="h-full min-w-0 overflow-hidden">
-      <FrameHeader className="flex-row items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <IconTile
-            variant="elevated"
-            size="sm"
-            className="text-muted-foreground"
-            aria-hidden="true"
-          >
-            <ServerIcon />
-          </IconTile>
-          <div className="flex min-w-0 flex-col gap-px">
-            <FrameTitle className="min-w-0 truncate text-sm">
-              <Link
-                to="/services/$serviceId"
-                params={{ serviceId: String(service.id) }}
-                className="hover:underline"
-              >
-                {service.name}
-              </Link>
-            </FrameTitle>
+    <Frame stacked spacing="sm" className="h-full min-w-0">
+      <FramePanel fit className="bg-muted">
+        <Item size="sm" className="w-full min-w-0 flex-nowrap border-0 p-0">
+          <ItemMedia>
+            <IconTile
+              variant="elevated"
+              size="sm"
+              className="text-foreground"
+              aria-hidden="true"
+            >
+              <ServerIcon />
+            </IconTile>
+          </ItemMedia>
+          <ItemContent className="min-w-0 gap-px">
+            <div className="flex min-w-0 items-center gap-1.5">
+              <FrameTitle className="min-w-0 truncate text-base font-semibold">
+                <Link
+                  to="/services/$serviceId"
+                  params={{ serviceId: String(service.id) }}
+                  className="hover:underline"
+                >
+                  {service.name}
+                </Link>
+              </FrameTitle>
+              <LbModeTile mode={service.lb_mode} />
+            </div>
            <div className="flex min-w-0 items-center gap-1">
              <FrameDescription className="min-w-0 truncate font-mono text-xs">
                {primaryDomain}
@@ -108,66 +182,70 @@ export function ServiceUnitCard({
                <CopyFqdnButton value={fqdns.join('\n')} />
              ) : null}
            </div>
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center gap-1">
-          <Switch
-            size="sm"
-            checked={service.enabled}
-            disabled={togglingId === service.id}
-            onCheckedChange={(checked) =>
-              onToggleService(service.id, Boolean(checked))
-            }
-            aria-label={
-              service.enabled ? 'Выключить сервис' : 'Включить сервис'
-            }
-          />
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={`Действия ${service.name}`}
-                />
+          </ItemContent>
+          <ItemActions className="ml-auto shrink-0 gap-1">
+            <Switch
+              size="sm"
+              checked={service.enabled}
+              disabled={togglingId === service.id}
+              onCheckedChange={(checked) =>
+                onToggleService(service.id, Boolean(checked))
              }
-            >
-              <MoreHorizontalIcon aria-hidden />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
+              aria-label={
+                service.enabled ? 'Выключить сервис' : 'Включить сервис'
+              }
+            />
+            <DropdownMenu>
+              <DropdownMenuTrigger
                render={
-                  <Link
-                    to="/services/$serviceId"
-                    params={{ serviceId: String(service.id) }}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={`Действия ${service.name}`}
                  />
                }
              >
-                Обзор
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onEditService(service)}>
-                Изменить
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                variant="destructive"
-                onClick={() => onDeleteService(service)}
-              >
-                Удалить
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </FrameHeader>
+                <MoreHorizontalIcon aria-hidden />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  render={
+                    <Link
+                      to="/services/$serviceId"
+                      params={{ serviceId: String(service.id) }}
+                    />
+                  }
+                >
+                  Обзор
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onEditService(service)}>
+                  Изменить
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  variant="destructive"
+                  onClick={() => onDeleteService(service)}
+                >
+                  Удалить
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </ItemActions>
+        </Item>
+      </FramePanel>

-      <FramePanel className="flex min-w-0 flex-col gap-1 pt-0 shadow-none!">
+      <FramePanel className="flex min-w-0 flex-col">
        <ServiceIpList
          copyable
+          alignWithMenu
          ips={service.ips ?? []}
          ipHealth={service.ip_health ?? []}
          ipEnabled={service.ip_enabled ?? {}}
          ipToggleDisabled={togglingId === service.id}
          togglingIp={togglingIp}
+          lbMode={service.lb_mode}
+          activeIps={service.active_ips}
+          ipWeights={service.domains[0]?.target_ip_weights}
          onToggleIp={(ip, enabled) =>
            onToggleServiceIp(service.id, ip, enabled)
          }
@@ -133,6 +133,8 @@ export const serviceViewSchema = serviceSchema.extend({
  health_latency_ms: z.number().nullable().default(null),
  ip_health: z.array(serviceIpHealthSchema).default([]),
  ip_enabled: z.record(z.string(), z.boolean()).default({}),
+  lb_mode: z.enum(['round_robin', 'failover', 'weighted']).catch('round_robin'),
+  active_ips: z.array(z.string()).default([]),
 })

 export const serviceGroupViewSchema = serviceGroupSchema.extend({
@@ -176,6 +176,8 @@ interface ServiceView$1 {
    health_latency_ms: number | null;
    ip_health: ServiceIpHealth$1[];
    ip_enabled: Record<string, boolean>;
+    lb_mode: LbMode;
+    active_ips: string[];
 }
 interface SyncJob {
    id: string;
@@ -824,6 +826,12 @@ declare const serviceViewSchema: z.ZodObject<{
        colo: z.ZodOptional<z.ZodNullable<z.ZodString>>;
    }, z.core.$strip>>>;
    ip_enabled: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodBoolean>>;
+    lb_mode: z.ZodCatch<z.ZodEnum<{
+        round_robin: "round_robin";
+        failover: "failover";
+        weighted: "weighted";
+    }>>;
+    active_ips: z.ZodDefault<z.ZodArray<z.ZodString>>;
 }, z.core.$strip>;
 declare const serviceGroupViewSchema: z.ZodObject<{
    id: z.ZodNumber;
@@ -1013,6 +1021,12 @@ declare const serviceGroupViewSchema: z.ZodObject<{
            colo: z.ZodOptional<z.ZodNullable<z.ZodString>>;
        }, z.core.$strip>>>;
        ip_enabled: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodBoolean>>;
+        lb_mode: z.ZodCatch<z.ZodEnum<{
+            round_robin: "round_robin";
+            failover: "failover";
+            weighted: "weighted";
+        }>>;
+        active_ips: z.ZodDefault<z.ZodArray<z.ZodString>>;
    }, z.core.$strip>>>;
    health_status: z.ZodDefault<z.ZodEnum<{
        unknown: "unknown";
@@ -1211,6 +1225,12 @@ declare const serviceGroupsResponseSchema: z.ZodObject<{
                colo: z.ZodOptional<z.ZodNullable<z.ZodString>>;
            }, z.core.$strip>>>;
            ip_enabled: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodBoolean>>;
+            lb_mode: z.ZodCatch<z.ZodEnum<{
+                round_robin: "round_robin";
+                failover: "failover";
+                weighted: "weighted";
+            }>>;
+            active_ips: z.ZodDefault<z.ZodArray<z.ZodString>>;
        }, z.core.$strip>>>;
        health_status: z.ZodDefault<z.ZodEnum<{
            unknown: "unknown";
@@ -1360,6 +1380,12 @@ declare const serviceGroupsResponseSchema: z.ZodObject<{
            colo: z.ZodOptional<z.ZodNullable<z.ZodString>>;
        }, z.core.$strip>>>;
        ip_enabled: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodBoolean>>;
+        lb_mode: z.ZodCatch<z.ZodEnum<{
+            round_robin: "round_robin";
+            failover: "failover";
+            weighted: "weighted";
+        }>>;
+        active_ips: z.ZodDefault<z.ZodArray<z.ZodString>>;
    }, z.core.$strip>>>;
 }, z.core.$strip>;
 declare const domainSchema: z.ZodObject<{
@@ -409,7 +409,9 @@ var serviceViewSchema = serviceSchema.extend({
  health_status: ipHealthStateSchema.default("unknown"),
  health_latency_ms: z.number().nullable().default(null),
  ip_health: z.array(serviceIpHealthSchema).default([]),
-  ip_enabled: z.record(z.string(), z.boolean()).default({})
+  ip_enabled: z.record(z.string(), z.boolean()).default({}),
+  lb_mode: lbModeSchema.catch("round_robin"),
+  active_ips: z.array(z.string()).default([])
 });
 var serviceGroupViewSchema = serviceGroupSchema.extend({
  services: z.array(serviceViewSchema).default([]),
@@ -205,6 +205,8 @@ export const serviceViewSchema = serviceSchema.extend({
  health_latency_ms: z.number().nullable().default(null),
  ip_health: z.array(serviceIpHealthSchema).default([]),
  ip_enabled: z.record(z.string(), z.boolean()).default({}),
+  lb_mode: lbModeSchema.catch('round_robin'),
+  active_ips: z.array(z.string()).default([]),
 })

 export const serviceGroupViewSchema = serviceGroupSchema.extend({
@@ -222,6 +222,8 @@ export interface ServiceView {
  health_latency_ms: number | null;
  ip_health: ServiceIpHealth[];
  ip_enabled: Record<string, boolean>;
+  lb_mode: LbMode;
+  active_ips: string[];
 }

 export interface GroupWithStats extends Group {
Author	SHA1	Message	Date
Denozordec	d8fc4ac949	feat(services): update ServiceUnitCard with background color for FramePanel quality / commitlint (push) Skipped Details CD / update-wiki (push) Successful in 5s Details quality / changes (push) Successful in 8s Details quality / api (push) Skipped Details quality / docker-check (push) Skipped Details quality / web (push) Successful in 52s Details CD / quality (push) Successful in 1m3s Details CD / publish (push) Successful in 1m36s Details - Added `bg-muted` class to FramePanel in ServiceUnitCard for improved visual consistency. - Updated documentation to reflect the new background color setting for FramePanel, enhancing clarity on component usage.	2026-08-19 23:13:58 +07:00
Denozordec	d063323402	feat(services): add load balancing mode and active IPs to service view quality / commitlint (push) Skipped Details CD / update-wiki (push) Successful in 7s Details quality / changes (push) Successful in 9s Details quality / docker-check (push) Skipped Details quality / web (push) Successful in 1m15s Details quality / api (push) Successful in 49s Details CD / quality (push) Successful in 2m17s Details CD / publish (push) Successful in 1m41s Details - Introduced `lb_mode` to specify the load balancing strategy for services, supporting options like round robin, failover, and weighted. - Added `active_ips` to track currently active IPs for each service, enhancing visibility into service health and configuration. - Updated relevant components to display load balancing mode and active IPs, improving user experience and service management capabilities.	2026-08-19 23:00:21 +07:00
Denozordec	6bced71037	feat(ui): refactor ServiceIpList and ServiceUnitCard components for improved layout and functionality quality / commitlint (push) Skipped Details quality / changes (push) Successful in 10s Details quality / api (push) Skipped Details quality / docker-check (push) Skipped Details CD / update-wiki (push) Successful in 4s Details quality / web (push) Successful in 53s Details CD / quality (push) Successful in 1m9s Details CD / publish (push) Successful in 1m37s Details - Replaced div elements with Item components in ServiceIpList for better alignment and structure. - Introduced alignWithMenu prop to align IP Switch with the card menu. - Updated ServiceUnitCard to utilize Item components, enhancing the visual consistency and responsiveness of the service card layout. - Improved overall user experience by streamlining component structure and ensuring proper alignment of UI elements.	2026-08-19 22:37:54 +07:00