refactor: Simplify HealthCheckConfigFields component structure and enhance layout by integrating className prop for better styling flexibility, while maintaining functionality for load balancing and health check configurations

apps/web/src/components/health-check-config-fields.tsx

@@ -10,6 +10,7 @@ import {
 } from '@cfdm/ui/components/select'
 import { Switch } from '@cfdm/ui/components/switch'
 import { Label } from '@cfdm/ui/components/label'
+import { cn } from '@cfdm/ui/lib/utils'
 
 export type LbMode = 'round_robin' | 'failover' | 'weighted'
 export type HealthCheckType = 'tcp' | 'http'
@@ -46,6 +47,7 @@ interface HealthCheckConfigFieldsProps {
   lbModeOptions?: { value: string; label: string }[]
   idPrefix?: string
   showLbMode?: boolean
+  className?: string
 }
 
 export function HealthCheckConfigFields({
@@ -55,13 +57,16 @@ export function HealthCheckConfigFields({
   lbModeOptions = defaultLbModeOptions,
   idPrefix = 'health',
   showLbMode = true,
+  className,
 }: HealthCheckConfigFieldsProps) {
   function patch(next: Partial<LbAndHealthConfig>) {
     onChange({ ...value, ...next })
   }
 
+  const isHttp = value.type === 'http'
+
   return (
-    <AppFieldGroup>
+    <div className={cn('flex flex-col gap-4', className)}>
       {showLbMode && (
         <FormFieldSimple label={lbModeLabel} htmlFor={`${idPrefix}-lb-mode`}>
           <Select
@@ -95,6 +100,12 @@ export function HealthCheckConfigFields({
         </div>
       </FormFieldSimple>
 
+      {value.enabled && (
+        <div className="rounded-md border border-border bg-muted/30 p-4">
+          <p className="mb-3 text-sm font-medium text-foreground">
+            Параметры проверки
+          </p>
+          <AppFieldGroup>
             <FormFieldSimple label="Тип проверки" htmlFor={`${idPrefix}-type`}>
               <Select
                 value={value.type}
@@ -126,7 +137,11 @@ export function HealthCheckConfigFields({
               />
             </FormFieldSimple>
 
-      <FormFieldSimple label="HTTP path (для типа HTTP)" htmlFor={`${idPrefix}-path`}>
+            {isHttp && (
+              <FormFieldSimple
+                label="HTTP path"
+                htmlFor={`${idPrefix}-path`}
+              >
                 <AppInput
                   id={`${idPrefix}-path`}
                   placeholder="/health"
@@ -136,7 +151,9 @@ export function HealthCheckConfigFields({
                   }
                 />
               </FormFieldSimple>
+            )}
 
+            {isHttp && (
               <FormFieldSimple
                 label="Ожидаемый HTTP-статус"
                 htmlFor={`${idPrefix}-status`}
@@ -155,6 +172,7 @@ export function HealthCheckConfigFields({
                   }
                 />
               </FormFieldSimple>
+            )}
 
             <div className="grid grid-cols-2 gap-4">
               <FormFieldSimple label="Интервал, сек" htmlFor={`${idPrefix}-interval`}>
@@ -189,5 +207,8 @@ export function HealthCheckConfigFields({
               </FormFieldSimple>
             </div>
           </AppFieldGroup>
+        </div>
+      )}
+    </div>
   )
 }

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

@@ -295,12 +295,6 @@ export function ServiceEditSheet({
     )
   }
 
-  function handleBindingLbModeChange(index: number, lbMode: LbMode) {
-    setBindings((current) =>
-      current.map((item, i) => (i === index ? { ...item, lb_mode: lbMode } : item)),
-    )
-  }
-
   function handleBindingMetaChange(
     index: number,
     ip: string,
@@ -604,36 +598,12 @@ export function ServiceEditSheet({
                           )}
 
                           {showLbBlock && (
-                            <Accordion>
+                            <Accordion defaultValue={[`lb-${index}`]}>
                               <AccordionItem value={`lb-${index}`}>
                                 <AccordionTrigger>
                                   Балансировка и Health-check (multi-A)
                                 </AccordionTrigger>
                                 <AccordionContent>
-                                  <AppFieldGroup>
-                                    <AppField>
-                                      <AppFieldLabel htmlFor={`binding-lb-mode-${index}`}>
-                                        Режим балансировки
-                                      </AppFieldLabel>
-                                      <Select
-                                        value={binding.lb_mode}
-                                        onValueChange={(value) =>
-                                          handleBindingLbModeChange(
-                                            index,
-                                            (value ?? 'round_robin') as LbMode,
-                                          )
-                                        }
-                                      >
-                                        <SelectTrigger id={`binding-lb-mode-${index}`} className="w-full">
-                                          <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          <SelectItem value="round_robin">Round Robin</SelectItem>
-                                          <SelectItem value="failover">Failover (приоритет)</SelectItem>
-                                          <SelectItem value="weighted">Weighted (веса)</SelectItem>
-                                        </SelectContent>
-                                      </Select>
-                                    </AppField>
                                   <HealthCheckConfigFields
                                     value={{
                                       lb_mode: binding.lb_mode,
@@ -648,10 +618,9 @@ export function ServiceEditSheet({
                                     onChange={(next) =>
                                       handleBindingHealthChange(index, next)
                                     }
-                                      showLbMode={false}
+                                    lbModeLabel="Режим балансировки"
                                     idPrefix={`binding-${index}-health`}
                                   />
-                                  </AppFieldGroup>
                                 </AccordionContent>
                               </AccordionItem>
                             </Accordion>

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

@@ -29,7 +29,6 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@cfdm/ui/components/accordion'
-import { Separator } from '@cfdm/ui/components/separator'
 
 const groupTypes = [
   { value: 'vpn', label: 'VPN' },
@@ -201,9 +200,7 @@ export function ServiceGroupEditSheet({
       </AppFieldGroup>
 
       {hasDomain && (
-        <>
+        <Accordion defaultValue={['lb-health']}>
-          <Separator />
-          <Accordion>
           <AccordionItem value="lb-health">
             <AccordionTrigger>Балансировка и Health-check</AccordionTrigger>
             <AccordionContent>
@@ -216,7 +213,6 @@ export function ServiceGroupEditSheet({
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        </>
       )}
     </FormSheet>
   )