feat(services): заменить один общий FQDN списком и убрать Другие FQDN

Каждый общий домен смотрит на весь пул IP; CNAME без UI сохраняются.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/service-address-block.tsx

@@ -1,8 +1,7 @@
-import { useState, type KeyboardEvent } from 'react'
-import { PlusIcon, ServerIcon, Trash2Icon } from 'lucide-react'
+import { useState, type KeyboardEvent, type ReactNode } from 'react'
+import { ServerIcon, Trash2Icon } from 'lucide-react'
 
 import { EmptyState } from '@/components/empty-state'
-import { ServiceBindingIpInput } from '@/components/service-binding-ip-input'
 import { isValidIpv4 } from '@/components/tagged-input'
 import { Badge } from '@/components/reui/badge'
 import {
@@ -16,15 +15,15 @@ import { IconTile } from '@/components/reui/icon-tile'
 import { parseFqdn } from '@/lib/parse-fqdn'
 import {
   addAddressNode,
-  emptyBindingDraft,
+  addCommonFqdn,
+  addressHasFqdn,
   removeAddressNode,
-  withPoolIps,
+  removeCommonFqdn,
+  updateCommonFqdn,
   type AddressBlockState,
-  type ServiceBindingDraft,
 } from '@/lib/service-address'
 import { Button } from '@cfdm/ui/components/button'
 import { Field, FieldLabel } from '@cfdm/ui/components/field'
-import { Input } from '@cfdm/ui/components/input'
 import {
   InputGroup,
   InputGroupAddon,
@@ -39,16 +38,36 @@ import {
   ItemMedia,
   ItemTitle,
 } from '@cfdm/ui/components/item'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@cfdm/ui/components/select'
+
+function ZoneAddon({
+  fqdn,
+  zoneHints,
+  trailing,
+}: {
+  fqdn: string
+  zoneHints: string[]
+  trailing?: ReactNode
+}) {
+  const parsed = parseFqdn(fqdn, zoneHints)
+  if (!parsed && !fqdn.trim() && !trailing) return null
+  return (
+    <InputGroupAddon align="inline-end">
+      {parsed ? (
+        <Badge variant="outline" size="xs" className="font-mono">
+          {parsed.zoneName}
+        </Badge>
+      ) : fqdn.trim() ? (
+        <Badge variant="warning-light" size="xs">
+          зона не найдена
+        </Badge>
+      ) : null}
+      {trailing}
+    </InputGroupAddon>
+  )
+}
 
 /**
- * Единый блок адресов сервиса: общий FQDN + пул IP с опциональным доп. доменом.
+ * Единый блок адресов сервиса: список общих FQDN на весь пул + IP с доп. доменом.
  * Preview: https://reui.io/preview/base/settings-3
  * Preview: https://reui.io/preview/base/list-9
  * Preview: https://reui.io/preview/base/form-7
@@ -67,17 +86,30 @@ export function ServiceAddressBlock({
 }) {
   const [pendingIp, setPendingIp] = useState('')
   const [ipInvalid, setIpInvalid] = useState(false)
-  const [otherOpen, setOtherOpen] = useState(value.otherBindings.length > 0)
+  const [pendingFqdn, setPendingFqdn] = useState('')
+  const [fqdnInvalid, setFqdnInvalid] = useState(false)
 
   const pool = value.nodes.map((node) => node.ip)
-  const parsedCommon = parseFqdn(value.commonFqdn, zoneHints)
-  const showOthers = otherOpen || value.otherBindings.length > 0
-  const pendingTrimmed = pendingIp.trim()
-  const pendingInvalid =
-    ipInvalid && pendingTrimmed.length > 0 && !isValidIpv4(pendingTrimmed)
+  const pendingIpTrimmed = pendingIp.trim()
+  const pendingFqdnTrimmed = pendingFqdn.trim()
+  const pendingIpInvalid =
+    ipInvalid && pendingIpTrimmed.length > 0 && !isValidIpv4(pendingIpTrimmed)
+  const pendingFqdnInvalid =
+    fqdnInvalid && pendingFqdnTrimmed.length > 0
 
-  function handleCommonFqdn(next: string) {
-    onChange({ ...value, commonFqdn: next })
+  function tryAddFqdn(raw: string) {
+    const trimmed = raw.trim()
+    if (!trimmed) {
+      setFqdnInvalid(false)
+      return
+    }
+    if (addressHasFqdn(value, trimmed)) {
+      setFqdnInvalid(true)
+      return
+    }
+    onChange(addCommonFqdn(value, trimmed))
+    setPendingFqdn('')
+    setFqdnInvalid(false)
   }
 
   function tryAddIp(raw: string) {
@@ -95,7 +127,14 @@ export function ServiceAddressBlock({
     setIpInvalid(false)
   }
 
-  function handlePendingKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+  function handleFqdnKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      tryAddFqdn(pendingFqdn)
+    }
+  }
+
+  function handleIpKeyDown(event: KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') {
       event.preventDefault()
       tryAddIp(pendingIp)
@@ -111,64 +150,69 @@ export function ServiceAddressBlock({
     })
   }
 
-  function handleRemoveIp(ip: string) {
-    onChange(removeAddressNode(value, ip))
-  }
-
-  function handleAddOther() {
-    setOtherOpen(true)
-    onChange({
-      ...value,
-      otherBindings: [...value.otherBindings, withPoolIps(emptyBindingDraft(), pool)],
-    })
-  }
-
-  function handleOtherChange(index: number, next: ServiceBindingDraft) {
-    onChange({
-      ...value,
-      otherBindings: value.otherBindings.map((item, i) => (i === index ? next : item)),
-    })
-  }
-
-  function handleRemoveOther(index: number) {
-    const otherBindings = value.otherBindings.filter((_, i) => i !== index)
-    onChange({ ...value, otherBindings })
-    if (otherBindings.length === 0) setOtherOpen(false)
-  }
-
   return (
     <Frame stacked dense spacing="sm" className="w-full min-w-0">
       <FramePanel fit className="flex flex-col gap-3">
         <FrameHeader className="px-0 pt-0">
           <FrameTitle>Адреса</FrameTitle>
           <FrameDescription>
-            Общий FQDN на весь пул · у каждого IP свой доп. домен
+            Общие FQDN — на весь пул · у IP свой доп. домен
           </FrameDescription>
         </FrameHeader>
         <Field>
-          <FieldLabel htmlFor="service-common-fqdn">Общий домен (FQDN)</FieldLabel>
-          <InputGroup>
-            <InputGroupInput
-              id="service-common-fqdn"
-              className="font-mono"
-              value={value.commonFqdn}
-              placeholder={zoneHints[0] ? `gw.${zoneHints[0]}` : 'gw.ivx.su'}
-              onChange={(event) => handleCommonFqdn(event.target.value)}
-            />
-            {parsedCommon ? (
-              <InputGroupAddon align="inline-end">
-                <Badge variant="outline" size="xs" className="font-mono">
-                  {parsedCommon.zoneName}
-                </Badge>
-              </InputGroupAddon>
-            ) : value.commonFqdn.trim() ? (
-              <InputGroupAddon align="inline-end">
-                <Badge variant="warning-light" size="xs">
-                  зона не найдена
-                </Badge>
-              </InputGroupAddon>
-            ) : null}
-          </InputGroup>
+          <FieldLabel htmlFor="service-common-fqdn-add">Общие домены (FQDN)</FieldLabel>
+          <div className="flex w-full flex-col gap-2">
+            {value.commonFqdns.map((fqdn, index) => (
+              <InputGroup key={`common-fqdn-${index}`}>
+                <InputGroupInput
+                  id={`service-common-fqdn-${index}`}
+                  className="font-mono"
+                  value={fqdn}
+                  placeholder={zoneHints[0] ? `gw.${zoneHints[0]}` : 'gw.ivx.su'}
+                  onChange={(event) =>
+                    onChange(updateCommonFqdn(value, index, event.target.value))
+                  }
+                />
+                <ZoneAddon
+                  fqdn={fqdn}
+                  zoneHints={zoneHints}
+                  trailing={
+                    <InputGroupButton
+                      size="icon-xs"
+                      aria-label={`Удалить ${fqdn || 'FQDN'}`}
+                      onClick={() => onChange(removeCommonFqdn(value, index))}
+                    >
+                      <Trash2Icon />
+                    </InputGroupButton>
+                  }
+                />
+              </InputGroup>
+            ))}
+            <InputGroup>
+              <InputGroupInput
+                id="service-common-fqdn-add"
+                className="font-mono"
+                value={pendingFqdn}
+                placeholder={zoneHints[0] ? `gw.${zoneHints[0]}` : 'gw.ivx.su'}
+                aria-invalid={pendingFqdnInvalid || undefined}
+                onChange={(event) => {
+                  setPendingFqdn(event.target.value)
+                  setFqdnInvalid(false)
+                }}
+                onKeyDown={handleFqdnKeyDown}
+                onBlur={() => tryAddFqdn(pendingFqdn)}
+              />
+              <ZoneAddon
+                fqdn={pendingFqdn}
+                zoneHints={zoneHints}
+                trailing={
+                  <InputGroupButton size="sm" onClick={() => tryAddFqdn(pendingFqdn)}>
+                    Добавить
+                  </InputGroupButton>
+                }
+              />
+            </InputGroup>
+          </div>
         </Field>
       </FramePanel>
 
@@ -187,7 +231,6 @@ export function ServiceAddressBlock({
         ) : (
           <ItemGroup className="gap-2">
             {value.nodes.map((node) => {
-              const parsedExtra = parseFqdn(node.extraFqdn, zoneHints)
               return (
                 <Item
                   key={node.ip}
@@ -214,7 +257,7 @@ export function ServiceAddressBlock({
                           variant="ghost"
                           size="icon-sm"
                           aria-label={`Удалить ${node.ip}`}
-                          onClick={() => handleRemoveIp(node.ip)}
+                          onClick={() => onChange(removeAddressNode(value, node.ip))}
                         >
                           <Trash2Icon />
                         </Button>
@@ -241,19 +284,7 @@ export function ServiceAddressBlock({
                             handleNodeFqdn(node.ip, event.target.value)
                           }
                         />
-                        {parsedExtra ? (
-                          <InputGroupAddon align="inline-end">
-                            <Badge variant="outline" size="xs" className="font-mono">
-                              {parsedExtra.zoneName}
-                            </Badge>
-                          </InputGroupAddon>
-                        ) : node.extraFqdn.trim() ? (
-                          <InputGroupAddon align="inline-end">
-                            <Badge variant="warning-light" size="xs">
-                              зона не найдена
-                            </Badge>
-                          </InputGroupAddon>
-                        ) : null}
+                        <ZoneAddon fqdn={node.extraFqdn} zoneHints={zoneHints} />
                       </InputGroup>
                     </Field>
                   </ItemContent>
@@ -268,12 +299,12 @@ export function ServiceAddressBlock({
             className="font-mono"
             value={pendingIp}
             placeholder="192.168.1.1"
-            aria-invalid={pendingInvalid || undefined}
+            aria-invalid={pendingIpInvalid || undefined}
             onChange={(event) => {
               setPendingIp(event.target.value)
               setIpInvalid(false)
             }}
-            onKeyDown={handlePendingKeyDown}
+            onKeyDown={handleIpKeyDown}
             onBlur={() => tryAddIp(pendingIp)}
           />
           <InputGroupAddon align="inline-end">
@@ -282,156 +313,7 @@ export function ServiceAddressBlock({
             </InputGroupButton>
           </InputGroupAddon>
         </InputGroup>
-        {showOthers ? null : (
-          <div className="flex justify-end">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={handleAddOther}
-            >
-              <PlusIcon data-icon="inline-start" />
-              Другой FQDN
-            </Button>
-          </div>
-        )}
       </FramePanel>
-
-      {showOthers ? (
-        <FramePanel fit className="flex flex-col gap-3">
-          <FrameHeader className="flex flex-row items-start justify-between gap-2 px-0 pt-0">
-            <div className="flex min-w-0 flex-col gap-1">
-              <FrameTitle>Другие FQDN</FrameTitle>
-              <FrameDescription>CNAME и A не 1:1 с IP пула</FrameDescription>
-            </div>
-            <Button type="button" variant="outline" size="sm" onClick={handleAddOther}>
-              <PlusIcon data-icon="inline-start" />
-              Добавить
-            </Button>
-          </FrameHeader>
-          {value.otherBindings.length === 0 ? (
-            <p className="text-muted-foreground text-sm">Нет дополнительных FQDN</p>
-          ) : (
-            <ItemGroup className="gap-2">
-              {value.otherBindings.map((binding, index) => {
-                const parsedZone = parseFqdn(binding.fqdn, zoneHints)
-                return (
-                  <Item
-                    key={`other-binding-${index}`}
-                    variant="outline"
-                    size="sm"
-                    className="items-stretch"
-                  >
-                    <ItemContent className="flex w-full min-w-0 flex-col gap-2">
-                      <div className="flex items-center gap-2">
-                        {parsedZone ? (
-                          <Badge variant="outline" size="xs" className="font-mono">
-                            {parsedZone.zoneName}
-                          </Badge>
-                        ) : binding.fqdn.trim() ? (
-                          <Badge variant="warning-light" size="xs">
-                            зона не найдена
-                          </Badge>
-                        ) : (
-                          <span className="text-muted-foreground text-xs">FQDN</span>
-                        )}
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon-sm"
-                          className="ml-auto shrink-0"
-                          aria-label="Удалить FQDN"
-                          onClick={() => handleRemoveOther(index)}
-                        >
-                          <Trash2Icon />
-                        </Button>
-                      </div>
-                      <div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_7.5rem]">
-                        <Input
-                          id={`other-fqdn-${index}`}
-                          className="font-mono"
-                          value={binding.fqdn}
-                          onChange={(event) =>
-                            handleOtherChange(index, {
-                              ...binding,
-                              fqdn: event.target.value,
-                            })
-                          }
-                          placeholder={
-                            zoneHints[0] ? `api.${zoneHints[0]}` : 'api.ivx.su'
-                          }
-                        />
-                        <Select
-                          items={[
-                            { label: 'A (IP)', value: 'A' },
-                            { label: 'CNAME', value: 'CNAME' },
-                          ]}
-                          value={binding.record_type}
-                          onValueChange={(next) => {
-                            const recordType = (next ?? 'A') as 'A' | 'CNAME'
-                            handleOtherChange(index, {
-                              ...binding,
-                              record_type: recordType,
-                              target_ips: recordType === 'A' ? binding.target_ips : [],
-                              target_cname:
-                                recordType === 'CNAME' ? binding.target_cname : '',
-                            })
-                          }}
-                        >
-                          <SelectTrigger id={`other-type-${index}`} className="w-full">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="A">A (IP)</SelectItem>
-                            <SelectItem value="CNAME">CNAME</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      {binding.record_type === 'CNAME' ? (
-                        <Input
-                          id={`other-cname-${index}`}
-                          value={binding.target_cname}
-                          placeholder="mmsk.rkns.top"
-                          onChange={(event) =>
-                            handleOtherChange(index, {
-                              ...binding,
-                              target_cname: event.target.value,
-                            })
-                          }
-                        />
-                      ) : (
-                        <ServiceBindingIpInput
-                          id={`other-ip-${index}`}
-                          value={binding.target_ips}
-                          pool={pool}
-                          onChange={(targetIps) =>
-                            handleOtherChange(index, {
-                              ...binding,
-                              target_ips: targetIps,
-                              target_ip_weights: Object.fromEntries(
-                                targetIps.map((ip) => [
-                                  ip,
-                                  binding.target_ip_weights[ip] ?? 1,
-                                ]),
-                              ),
-                              target_ip_priorities: Object.fromEntries(
-                                targetIps.map((ip) => [
-                                  ip,
-                                  binding.target_ip_priorities[ip] ?? 1,
-                                ]),
-                              ),
-                            })
-                          }
-                        />
-                      )}
-                    </ItemContent>
-                  </Item>
-                )
-              })}
-            </ItemGroup>
-          )}
-        </FramePanel>
-      ) : null}
     </Frame>
   )
 }

apps/web/src/components/service-edit-sheet.tsx

@@ -218,8 +218,8 @@ export function ServiceEditSheet({
         <SheetHeader className="shrink-0 border-b pb-4">
           <SheetTitle>{isCreate ? 'Новый сервис' : 'Редактирование сервиса'}</SheetTitle>
           <SheetDescription>
-            Общий домен и пул IP — в одном блоке. У каждого адреса можно указать
-            свой доп. FQDN.
+            Общие FQDN на весь пул IP. У каждого адреса можно указать свой доп.
+            FQDN.
           </SheetDescription>
         </SheetHeader>