feat(uptime-chart): enhance tooltip functionality and refactor delta display

- Added useEffect to set tooltip portal for improved rendering.
- Introduced UptimeDelta component to streamline delta display logic.
- Updated ChartTooltip to utilize ChartTooltipContent for better formatting of tooltip data.
- Refactored chart margin and overflow properties for improved layout consistency.

apps/api/src/routes/service-bindings.ts

@@ -1,6 +1,6 @@
 import type { FastifyInstance } from "fastify";
 import { z } from "zod";
-import { changeIpSchema } from "@cfdm/shared";
+import { certMonitoringSchema, changeIpSchema } from "@cfdm/shared";
 import * as bindingService from "../services/binding-service.js";
 import * as changeIp from "../services/change-ip-service.js";
 import { recordAudit } from "../lib/audit.js";
@@ -17,6 +17,7 @@ export async function serviceBindingRoutes(app: FastifyInstance) {
     service_id: z.number().optional(),
     hostname: z.string().optional(),
     target_ip: z.string().optional(),
+    cert_monitoring: certMonitoringSchema.optional(),
   });
 
   app.get("/service-bindings", async (request) => {

apps/api/src/routes/services.ts

@@ -12,6 +12,7 @@ import { repos } from "@cfdm/db";
 import * as serviceConfig from "../services/service-config-service.js";
 import * as nodeService from "../services/node-service.js";
 import * as changeDomain from "../services/change-domain-service.js";
+import * as certificateService from "../services/certificate-service.js";
 import { recordAudit } from "../lib/audit.js";
 
 export async function serviceRoutes(app: FastifyInstance) {
@@ -77,6 +78,23 @@ export async function serviceRoutes(app: FastifyInstance) {
     };
   });
 
+  app.get("/services/:id/certificates", async (request) => {
+    const { id } = request.params as { id: string };
+    return certificateService.listServiceCertificates(
+      request.server.db,
+      Number(id),
+    );
+  });
+
+  app.post("/services/:id/certificates/check", async (request) => {
+    const { id } = request.params as { id: string };
+    const checked = await certificateService.runServiceChecks(
+      request.server.db,
+      Number(id),
+    );
+    return { checked };
+  });
+
   app.get("/services/:id/overview", async (request) => {
     const { id } = request.params as { id: string };
     return nodeService.getOverview(request.server.db, Number(id));

apps/api/src/services/binding-service.ts

@@ -15,6 +15,7 @@ export interface UpdateBindingRequest {
   service_id?: number;
   hostname?: string;
   target_ip?: string;
+  cert_monitoring?: string;
 }
 
 function normalizeHostname(hostname?: string): string {
@@ -92,6 +93,20 @@ export async function update(
   req: UpdateBindingRequest,
 ): Promise<ServiceBindingView> {
   const existing = repos.getBinding(db, id);
+  if (req.cert_monitoring !== undefined) {
+    repos.updateBindingLbConfig(db, id, {
+      cert_monitoring: req.cert_monitoring,
+    });
+  }
+
+  const hasIdentityPatch =
+    req.service_id !== undefined ||
+    req.hostname !== undefined ||
+    req.target_ip !== undefined;
+  if (!hasIdentityPatch) {
+    return repos.getBindingView(db, id);
+  }
+
   const serviceId = req.service_id ?? existing.service_id;
   if (req.service_id) repos.getService(db, req.service_id);
   const hostname = req.hostname

apps/api/src/services/certificate-service.ts

@@ -2,7 +2,7 @@ import { connect } from "node:net";
 import { connect as tlsConnect } from "node:tls";
 import type { Db } from "@cfdm/db";
 import { repos } from "@cfdm/db";
-import type { Certificate, Domain, Subdomain } from "@cfdm/shared";
+import type { Certificate, ServiceCertificateRow, Subdomain } from "@cfdm/shared";
 import {
   CERT_ERROR,
   CERT_MONITOR_AUTO,
@@ -11,13 +11,13 @@ import {
   CERT_UNKNOWN,
   certStatusFromExpiry,
   fqdnToDisplay,
-  parseFqdn,
   shouldMonitorService,
 } from "@cfdm/shared";
 
 export interface CertificateTarget {
   domainId: number;
   subdomainId: number | null;
+  serviceId: number;
   hostname: string;
 }
 
@@ -41,6 +41,34 @@ export function getCertificate(db: Db, id: number): Certificate {
   return repos.getCertificate(db, id);
 }
 
+export function listServiceCertificates(
+  db: Db,
+  serviceId: number,
+): ServiceCertificateRow[] {
+  repos.getService(db, serviceId);
+  const certsByHost = new Map(
+    repos.listCertificates(db).map((cert) => [cert.hostname, cert]),
+  );
+  return repos.listBindingsByService(db, serviceId).map((binding) => {
+    const hostname = fqdnToDisplay(binding.hostname, binding.zone_name);
+    const cert = certsByHost.get(hostname);
+    return {
+      binding_id: binding.id,
+      domain_id: binding.domain_id,
+      service_id: binding.service_id,
+      hostname,
+      cert_monitoring:
+        (binding.cert_monitoring as ServiceCertificateRow["cert_monitoring"]) ??
+        "auto",
+      id: cert?.id ?? null,
+      status: cert?.status ?? "unknown",
+      expires_at: cert?.expires_at ?? null,
+      last_checked_at: cert?.last_checked_at ?? null,
+      last_error: cert?.last_error ?? null,
+    };
+  });
+}
+
 export async function checkHostname(
   hostname: string,
 ): Promise<{ expiresAt: Date | null; error: string | null }> {
@@ -78,6 +106,7 @@ export async function checkAndStore(
   domainId: number,
   subdomainId: number | null,
   hostname: string,
+  serviceId: number | null = null,
 ): Promise<Certificate> {
   const { expiresAt, error } = await checkHostname(hostname);
 
@@ -90,6 +119,7 @@ export async function checkAndStore(
       null,
       CERT_ERROR,
       error,
+      serviceId,
     );
   }
 
@@ -105,6 +135,7 @@ export async function checkAndStore(
       expiresAt.toISOString(),
       certStatusFromExpiry(days),
       null,
+      serviceId,
     );
   }
 
@@ -116,23 +147,10 @@ export async function checkAndStore(
     null,
     CERT_UNKNOWN,
     "unknown expiry",
+    serviceId,
   );
 }
 
-function resolveMonitoringMode(
-  domain: Domain,
-  subdomain: Subdomain | null,
-  fqdn: string,
-): string {
-  if (subdomain) {
-    return subdomain.cert_monitoring;
-  }
-  if (fqdn === domain.zone_name) {
-    return domain.cert_monitoring;
-  }
-  return CERT_MONITOR_AUTO;
-}
-
 function bindingSubdomain(
   db: Db,
   domainId: number,
@@ -165,10 +183,9 @@ function hasSslHealthGate(
   return false;
 }
 
-export function buildServiceCertificateFqdns(
-  db: Db,
-): Map<string, CertificateTarget> {
-  const result = new Map<string, CertificateTarget>();
+export function resolveCertificateTargets(db: Db): CertificateTarget[] {
+  const targets: CertificateTarget[] = [];
+  const seen = new Set<string>();
 
   for (const binding of repos.listAllBindings(db)) {
     const service = repos.getService(db, binding.service_id);
@@ -176,98 +193,40 @@ export function buildServiceCertificateFqdns(
       ? repos.getServiceGroup(db, service.service_group_id)
       : null;
     if (!shouldMonitorService(service, group)) continue;
-    if (
-      !hasSslHealthGate(
-        {
-          health_check_enabled: binding.health_check_enabled,
-          health_check_verify_tls: binding.health_check_verify_tls,
-        },
-        group,
-      )
-    ) {
-      continue;
-    }
 
     const subdomain = bindingSubdomain(db, binding.domain_id, binding.hostname);
     if (subdomain && !subdomain.enabled) continue;
 
+    const mode = binding.cert_monitoring ?? CERT_MONITOR_AUTO;
+    if (mode === CERT_MONITOR_SKIPPED) continue;
+    if (mode === CERT_MONITOR_AUTO) {
+      if (
+        !hasSslHealthGate(
+          {
+            health_check_enabled: binding.health_check_enabled,
+            health_check_verify_tls: binding.health_check_verify_tls,
+          },
+          group,
+        )
+      ) {
+        continue;
+      }
+    } else if (mode !== CERT_MONITOR_REQUIRED) {
+      continue;
+    }
+
     const fqdn = fqdnToDisplay(binding.hostname, binding.zone_name);
-    result.set(fqdn, {
+    if (seen.has(fqdn)) continue;
+    seen.add(fqdn);
+    targets.push({
       domainId: binding.domain_id,
       subdomainId: subdomain?.id ?? null,
+      serviceId: binding.service_id,
       hostname: fqdn,
     });
   }
 
-  const knownZones = repos.listAllDomains(db).map((d) => d.zone_name);
-  for (const group of repos.listServiceGroups(db)) {
-    if (!group.enabled || !group.domain?.trim()) continue;
-    if (!group.health_check_enabled || !group.health_check_verify_tls) continue;
-
-    const parsed = parseFqdn(group.domain, knownZones);
-    if (!parsed) continue;
-
-    const domain = repos.findDomainByZoneName(db, parsed.zoneName);
-    if (!domain) continue;
-
-    const subdomain =
-      parsed.hostname === "@"
-        ? null
-        : bindingSubdomain(db, domain.id, parsed.hostname);
-    if (subdomain && !subdomain.enabled) continue;
-
-    result.set(parsed.fqdn, {
-      domainId: domain.id,
-      subdomainId: subdomain?.id ?? null,
-      hostname: parsed.fqdn,
-    });
-  }
-
-  return result;
-}
-
-export function resolveCertificateTargets(db: Db): CertificateTarget[] {
-  const serviceFqdns = buildServiceCertificateFqdns(db);
-  const targets = new Map<string, CertificateTarget>();
-
-  for (const domain of repos.listAllDomains(db)) {
-    if (domain.cert_monitoring === CERT_MONITOR_SKIPPED) continue;
-    if (domain.cert_monitoring === CERT_MONITOR_REQUIRED) {
-      targets.set(domain.zone_name, {
-        domainId: domain.id,
-        subdomainId: null,
-        hostname: domain.zone_name,
-      });
-    }
-  }
-
-  for (const sub of repos.listAllSubdomains(db)) {
-    if (sub.cert_monitoring === CERT_MONITOR_SKIPPED) continue;
-    if (sub.cert_monitoring === CERT_MONITOR_REQUIRED) {
-      targets.set(sub.fqdn, {
-        domainId: sub.domain_id,
-        subdomainId: sub.id,
-        hostname: sub.fqdn,
-      });
-    }
-  }
-
-  for (const [fqdn, meta] of serviceFqdns) {
-    const domain = repos.getDomain(db, meta.domainId);
-    const subdomain = meta.subdomainId
-      ? repos.getSubdomain(db, meta.subdomainId)
-      : null;
-    const monitoring = resolveMonitoringMode(domain, subdomain, fqdn);
-    if (monitoring === CERT_MONITOR_SKIPPED) continue;
-    if (
-      monitoring === CERT_MONITOR_AUTO ||
-      monitoring === CERT_MONITOR_REQUIRED
-    ) {
-      targets.set(fqdn, meta);
-    }
-  }
-
-  return [...targets.values()];
+  return targets;
 }
 
 export async function runAllChecks(db: Db): Promise<number> {
@@ -278,6 +237,7 @@ export async function runAllChecks(db: Db): Promise<number> {
       target.domainId,
       target.subdomainId,
       target.hostname,
+      target.serviceId,
     );
   }
   repos.deleteCertificatesNotIn(
@@ -287,6 +247,26 @@ export async function runAllChecks(db: Db): Promise<number> {
   return targets.length;
 }
 
+export async function runServiceChecks(
+  db: Db,
+  serviceId: number,
+): Promise<number> {
+  repos.getService(db, serviceId);
+  const targets = resolveCertificateTargets(db).filter(
+    (target) => target.serviceId === serviceId,
+  );
+  for (const target of targets) {
+    await checkAndStore(
+      db,
+      target.domainId,
+      target.subdomainId,
+      target.hostname,
+      target.serviceId,
+    );
+  }
+  return targets.length;
+}
+
 export function statusSummary(db: Db): Array<[string, number]> {
   pruneStaleCertificates(db);
   return repos.countCertificatesByStatus(db);

apps/api/src/services/service-config-service.ts

@@ -308,6 +308,7 @@ async function buildView(db: Db, serviceId: number): Promise<ServiceView> {
         binding.health_check_provider ?? "local",
       ],
       health_check_aggregate: binding.health_check_aggregate ?? "majority",
+      cert_monitoring: binding.cert_monitoring ?? "auto",
       sync_status: aggregateSyncStatus(statuses),
     };
   });

apps/api/test/certificates.test.ts

@@ -208,7 +208,7 @@ describe("certificates", () => {
     await testApp.close();
   });
 
-  it("required apex is monitored without bindings", async () => {
+  it("required binding is monitored without TLS health gate", async () => {
     const testApp = await buildApp({
       config: { ...loadConfig(), staticDir: null },
       memory: true,
@@ -221,10 +221,18 @@ describe("certificates", () => {
       "required.example.com",
       "cf-zone-req",
     );
-    repos.updateDomain(testApp.db, domain.id, {
-      group_id: null,
-      status: "active",
+    const service = repos.createService(testApp.db, "Req", "req");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "@",
+      null,
+    );
+    repos.updateBindingLbConfig(testApp.db, binding.id, {
       cert_monitoring: CERT_MONITOR_REQUIRED,
+      health_check_enabled: false,
     });
 
     vi.spyOn(certificateService, "checkHostname").mockResolvedValue({
@@ -247,7 +255,7 @@ describe("certificates", () => {
     await testApp.close();
   });
 
-  it("skipped apex removes stale certificate on check", async () => {
+  it("skipped binding removes stale certificate on check", async () => {
     const testApp = await buildApp({
       config: { ...loadConfig(), staticDir: null },
       memory: true,
@@ -260,6 +268,20 @@ describe("certificates", () => {
       "skipped.example.com",
       "cf-zone-skip",
     );
+    const service = repos.createService(testApp.db, "Skip", "skip");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "@",
+      null,
+    );
+    repos.updateBindingLbConfig(testApp.db, binding.id, {
+      cert_monitoring: CERT_MONITOR_SKIPPED,
+      health_check_enabled: true,
+      health_check_verify_tls: true,
+    });
     repos.upsertCertificateCheck(
       testApp.db,
       domain.id,
@@ -268,12 +290,8 @@ describe("certificates", () => {
       null,
       CERT_ERROR,
       "stale",
+      service.id,
     );
-    repos.updateDomain(testApp.db, domain.id, {
-      group_id: null,
-      status: "active",
-      cert_monitoring: CERT_MONITOR_SKIPPED,
-    });
 
     vi.spyOn(certificateService, "checkHostname").mockResolvedValue({
       expiresAt: null,
@@ -305,9 +323,16 @@ describe("certificates", () => {
       "broken.example.com",
       "cf-zone-broken",
     );
-    repos.updateDomain(testApp.db, domain.id, {
-      group_id: null,
-      status: "active",
+    const service = repos.createService(testApp.db, "Broken", "broken");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "@",
+      null,
+    );
+    repos.updateBindingLbConfig(testApp.db, binding.id, {
       cert_monitoring: CERT_MONITOR_REQUIRED,
     });
 
@@ -424,7 +449,7 @@ describe("certificates", () => {
     });
 
     const certs = repos.listCertificates(testApp.db);
-    expect(certs.some((c) => c.hostname === "lb.ok.example.com")).toBe(true);
+    expect(certs.some((c) => c.hostname === "lb.ok.example.com")).toBe(false);
     expect(certs.some((c) => c.hostname === "edge.ok.example.com")).toBe(true);
 
     await testApp.close();
@@ -443,12 +468,7 @@ describe("certificates", () => {
       "force.example.com",
       "cf-zone-force",
     );
-    repos.updateDomain(testApp.db, domain.id, {
-      group_id: null,
-      status: "active",
-      cert_monitoring: CERT_MONITOR_REQUIRED,
-    });
-    repos.createServiceGroup(
+    const group = repos.createServiceGroup(
       testApp.db,
       "Proxy",
       "vpn",
@@ -459,6 +479,19 @@ describe("certificates", () => {
         health_check_verify_tls: false,
       },
     );
+    const service = repos.createService(testApp.db, "Force", "force");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    repos.setServiceGroup(testApp.db, service.id, group.id);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "@",
+      null,
+    );
+    repos.updateBindingLbConfig(testApp.db, binding.id, {
+      cert_monitoring: CERT_MONITOR_REQUIRED,
+    });
 
     vi.spyOn(certificateService, "checkHostname").mockResolvedValue({
       expiresAt: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000),
@@ -540,4 +573,137 @@ describe("certificates", () => {
 
     await testApp.close();
   });
+
+  it("GET /services/:id/certificates lists binding FQDNs", async () => {
+    const testApp = await buildApp({
+      config: { ...loadConfig(), staticDir: null },
+      memory: true,
+    });
+    const headers = await authHeaders(testApp);
+
+    const domain = repos.createDomain(
+      testApp.db,
+      null,
+      "svc.example.com",
+      "cf-zone-svc",
+    );
+    const service = repos.createService(testApp.db, "Api", "api");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    repos.insertBinding(testApp.db, domain.id, service.id, "www", null);
+
+    const res = await testApp.inject({
+      method: "GET",
+      url: `/api/v1/services/${service.id}/certificates`,
+      headers,
+    });
+    expect(res.statusCode).toBe(200);
+    const rows = res.json() as Array<{
+      hostname: string;
+      cert_monitoring: string;
+      status: string;
+    }>;
+    expect(rows).toHaveLength(1);
+    expect(rows[0]?.hostname).toBe("www.svc.example.com");
+    expect(rows[0]?.cert_monitoring).toBe("auto");
+    expect(rows[0]?.status).toBe("unknown");
+
+    await testApp.close();
+  });
+
+  it("PATCH /service-bindings/:id updates cert_monitoring", async () => {
+    const testApp = await buildApp({
+      config: { ...loadConfig(), staticDir: null },
+      memory: true,
+    });
+    const headers = await authHeaders(testApp);
+
+    const domain = repos.createDomain(
+      testApp.db,
+      null,
+      "patch.example.com",
+      "cf-zone-patch",
+    );
+    const service = repos.createService(testApp.db, "Patch", "patch");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "api",
+      null,
+    );
+
+    const res = await testApp.inject({
+      method: "PATCH",
+      url: `/api/v1/service-bindings/${binding.id}`,
+      headers,
+      payload: { cert_monitoring: CERT_MONITOR_REQUIRED },
+    });
+    expect(res.statusCode).toBe(200);
+    expect((res.json() as { cert_monitoring: string }).cert_monitoring).toBe(
+      CERT_MONITOR_REQUIRED,
+    );
+    expect(repos.getBinding(testApp.db, binding.id).cert_monitoring).toBe(
+      CERT_MONITOR_REQUIRED,
+    );
+
+    await testApp.close();
+  });
+
+  it("POST /services/:id/certificates/check only checks that service", async () => {
+    const testApp = await buildApp({
+      config: { ...loadConfig(), staticDir: null },
+      memory: true,
+    });
+    const headers = await authHeaders(testApp);
+
+    const domain = repos.createDomain(
+      testApp.db,
+      null,
+      "check.example.com",
+      "cf-zone-check",
+    );
+    const service = repos.createService(testApp.db, "One", "one");
+    const other = repos.createService(testApp.db, "Two", "two");
+    repos.setServiceEnabled(testApp.db, service.id, true);
+    repos.setServiceEnabled(testApp.db, other.id, true);
+    const binding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      service.id,
+      "one",
+      null,
+    );
+    const otherBinding = repos.insertBinding(
+      testApp.db,
+      domain.id,
+      other.id,
+      "two",
+      null,
+    );
+    repos.updateBindingLbConfig(testApp.db, binding.id, {
+      cert_monitoring: CERT_MONITOR_REQUIRED,
+    });
+    repos.updateBindingLbConfig(testApp.db, otherBinding.id, {
+      cert_monitoring: CERT_MONITOR_REQUIRED,
+    });
+
+    vi.spyOn(certificateService, "checkHostname").mockResolvedValue({
+      expiresAt: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000),
+      error: null,
+    });
+
+    const res = await testApp.inject({
+      method: "POST",
+      url: `/api/v1/services/${service.id}/certificates/check`,
+      headers,
+    });
+    expect(res.statusCode).toBe(200);
+    expect((res.json() as { checked: number }).checked).toBe(1);
+    const certs = repos.listCertificates(testApp.db);
+    expect(certs.some((c) => c.hostname === "one.check.example.com")).toBe(true);
+    expect(certs.some((c) => c.hostname === "two.check.example.com")).toBe(false);
+
+    await testApp.close();
+  });
 });

apps/web/src/components/columns/certificates-columns.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
-import { GlobeIcon, SearchIcon } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+import { GlobeIcon, SearchIcon, ServerIcon } from 'lucide-react'
 
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
@@ -9,6 +10,7 @@ import { StatusBadge } from '@/components/status-badge'
 import { renderSingleSelectedLabel } from '@/components/reui-kit/filter-utils'
 import type { Certificate } from '@/lib/schemas'
 import { formatDate, formatRelative } from '@/lib/format'
+import { Button } from '@cfdm/ui/components/button'
 
 export const CERT_TABS = [
   { id: 'all', label: 'Все' },
@@ -41,6 +43,7 @@ export function certTabFilter(item: Certificate, tabId: string) {
 export function createDefaultCertFilters() {
   return [
     createFilter('hostname', 'contains', ['']),
+    createFilter('service', 'contains', ['']),
     createFilter('status', 'is', ['']),
   ]
 }
@@ -56,6 +59,14 @@ export function useCertFilterFields() {
         className: 'w-52',
         placeholder: 'Поиск по хосту…',
       },
+      {
+        key: 'service',
+        label: 'Сервис',
+        icon: <ServerIcon className="size-3.5" aria-hidden />,
+        type: 'text',
+        className: 'w-52',
+        placeholder: 'Поиск по сервису…',
+      },
       {
         key: 'status',
         label: 'Статус',
@@ -75,6 +86,8 @@ export function certFilterFieldValue(item: Certificate, field: string) {
   switch (field) {
     case 'hostname':
       return `${item.hostname} ${item.status}`.toLowerCase()
+    case 'service':
+      return (item.service_name ?? '').toLowerCase()
     case 'status':
       return item.status
     default:
@@ -82,7 +95,7 @@ export function certFilterFieldValue(item: Certificate, field: string) {
   }
 }
 
-function certRelativeBadge(status: string, expiresAt: string | null) {
+export function certRelativeBadge(status: string, expiresAt: string | null) {
   const relative = formatRelative(expiresAt)
   if (!expiresAt) {
     return <span className="text-muted-foreground tabular-nums">—</span>
@@ -112,6 +125,39 @@ export function useCertificateColumns() {
           <span className="truncate font-medium">{row.original.hostname}</span>
         ),
       },
+      {
+        id: 'service',
+        accessorFn: (row) => row.service_name ?? '',
+        header: ({ column }) => (
+          <DataGridColumnHeader
+            column={column}
+            title="Сервис"
+            icon={<ServerIcon className="size-3.5" />}
+          />
+        ),
+        cell: ({ row }) => {
+          const serviceId = row.original.service_id
+          const name = row.original.service_name
+          if (serviceId == null || !name) {
+            return <span className="text-muted-foreground">—</span>
+          }
+          return (
+            <Button
+              variant="link"
+              className="h-auto max-w-full truncate p-0 font-medium"
+              nativeButton={false}
+              render={
+                <Link
+                  to="/services/$serviceId"
+                  params={{ serviceId: String(serviceId) }}
+                />
+              }
+            >
+              {name}
+            </Button>
+          )
+        },
+      },
       {
         id: 'status',
         header: 'Статус',

apps/web/src/components/health/health-timeline.tsx

@@ -29,15 +29,21 @@ export interface HealthTimelineEvent {
 
 interface HealthTimelineProps {
   events: HealthTimelineEvent[]
+  emptyTitle?: string
+  emptyDescription?: string
 }
 
-export function HealthTimeline({ events }: HealthTimelineProps) {
+export function HealthTimeline({
+  events,
+  emptyTitle = 'Нет событий',
+  emptyDescription = 'Результаты проверок появятся после первого прогона',
+}: HealthTimelineProps) {
   if (events.length === 0) {
     return (
       <EmptyState
         icon={Link2Icon}
-        title="Нет событий"
-        description="Результаты проверок появятся после первого прогона"
+        title={emptyTitle}
+        description={emptyDescription}
         centered={false}
       />
     )

apps/web/src/components/layout/site-header.tsx

@@ -36,6 +36,13 @@ function getBreadcrumbs(
     return [{ label: 'Панель управления', href: '/' }]
   }
 
+  if (pathname.match(/^\/services\/\d+$/)) {
+    return [
+      { label: 'Сервисы', href: '/services' },
+      { label: dynamicLabels[pathname] ?? 'Сервис', href: pathname },
+    ]
+  }
+
   if (pathname.match(/^\/groups\/\d+$/)) {
     return [
       { label: 'Группы доменов', href: '/groups' },

apps/web/src/components/reui-kit/health-source-tiles.tsx

@@ -12,8 +12,10 @@ import {
   ItemMedia,
   ItemTitle,
 } from '@cfdm/ui/components/item'
+import { HealthCheckBadge } from '@/components/health-check-badge'
 import { cn } from '@cfdm/ui/lib/utils'
 import type { HealthCheckAggregate, HealthCheckProvider } from '@cfdm/shared'
+import type { HealthLogStatus } from '@/lib/health-log'
 
 export type HealthProvider = HealthCheckProvider
 export type HealthAggregate = HealthCheckAggregate
@@ -48,7 +50,7 @@ function GlobalpingMark() {
   )
 }
 
-const PROVIDER_ITEMS: Array<{
+export const HEALTH_PROVIDER_ITEMS: Array<{
   id: HealthProvider
   title: string
   description: string
@@ -118,6 +120,7 @@ function ChoicePanel({
   icon,
   iconClassName,
   role,
+  trailing,
   onActivate,
 }: {
   selected: boolean
@@ -126,6 +129,7 @@ function ChoicePanel({
   icon: ReactNode
   iconClassName?: string
   role: 'checkbox' | 'radio'
+  trailing?: ReactNode
   onActivate: () => void
 }) {
   return (
@@ -157,12 +161,8 @@ function ChoicePanel({
           <ItemTitle className="w-full min-w-0">{title}</ItemTitle>
           <ItemDescription>{description}</ItemDescription>
         </ItemContent>
-        {selected ? (
-          <ItemActions className="shrink-0">
-            <Badge variant="outline" size="sm">
-              Выбрано
-            </Badge>
-          </ItemActions>
+        {trailing ? (
+          <ItemActions className="shrink-0">{trailing}</ItemActions>
         ) : null}
       </Item>
     </FramePanel>
@@ -202,7 +202,7 @@ export function HealthSourceTiles({
 
   return (
     <ChoiceFrame>
-      {PROVIDER_ITEMS.map((item) => (
+      {HEALTH_PROVIDER_ITEMS.map((item) => (
         <ChoicePanel
           key={item.id}
           selected={selected.includes(item.id)}
@@ -211,6 +211,13 @@ export function HealthSourceTiles({
           icon={item.icon}
           iconClassName={item.iconClassName}
           role="checkbox"
+          trailing={
+            selected.includes(item.id) ? (
+              <Badge variant="outline" size="sm">
+                Выбрано
+              </Badge>
+            ) : null
+          }
           onActivate={() => toggle(item.id)}
         />
       ))}
@@ -240,9 +247,71 @@ export function HealthAggregateTiles({
           description={item.description}
           icon={item.icon}
           role="radio"
+          trailing={
+            selected === item.id ? (
+              <Badge variant="outline" size="sm">
+                Выбрано
+              </Badge>
+            ) : null
+          }
           onActivate={() => onChange(item.id)}
         />
       ))}
     </ChoiceFrame>
   )
 }
+
+/**
+ * Read-only status tiles for enabled probe sources; click filters the monitor.
+ * Preview: https://reui.io/preview/base/list-9 · https://reui.io/preview/base/stats-12
+ * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile
+ */
+export function HealthProviderStatusTiles({
+  enabled,
+  selected,
+  statuses,
+  onChange,
+}: {
+  enabled: HealthProvider[]
+  selected: HealthProvider[]
+  statuses: Partial<Record<HealthProvider, HealthLogStatus>>
+  onChange: (next: HealthProvider[]) => void
+}) {
+  const visible = HEALTH_PROVIDER_ITEMS.filter((item) => enabled.includes(item.id))
+  if (visible.length === 0) return null
+
+  const active = selected.length > 0 ? selected : enabled
+
+  function toggle(id: HealthProvider) {
+    if (active.includes(id)) {
+      if (active.length === 1) return
+      onChange(active.filter((item) => item !== id))
+      return
+    }
+    onChange([...active, id])
+  }
+
+  return (
+    <ChoiceFrame>
+      {visible.map((item) => (
+        <ChoicePanel
+          key={item.id}
+          selected={active.includes(item.id)}
+          title={item.title}
+          description={item.description}
+          icon={item.icon}
+          iconClassName={item.iconClassName}
+          role="checkbox"
+          trailing={
+            <HealthCheckBadge
+              status={statuses[item.id] ?? 'unknown'}
+              provider={item.id}
+              size="xs"
+            />
+          }
+          onActivate={() => toggle(item.id)}
+        />
+      ))}
+    </ChoiceFrame>
+  )
+}

apps/web/src/components/reui-kit/index.ts

@@ -1,4 +1,5 @@
-export { UptimeChart, type UptimeProbe } from './uptime-chart'
+export { UptimeChart, type UptimeProbe, type UptimePeriodKey } from './uptime-chart'
+export { ServiceHealthMonitor } from './service-health-monitor'
 export { applyFiltersToData, getActiveFilters, renderSingleSelectedLabel } from './filter-utils'
 export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
 export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
@@ -22,6 +23,7 @@ export { SettingsShell, type SettingsTabConfig } from './settings-shell'
 export {
   HealthSourceTiles,
   HealthAggregateTiles,
+  HealthProviderStatusTiles,
   type HealthProvider,
   type HealthAggregate,
 } from './health-source-tiles'

apps/web/src/components/reui-kit/service-health-monitor.tsx

@@ -0,0 +1,79 @@
+import { useMemo, useState } from 'react'
+
+import { HealthTimeline } from '@/components/health/health-timeline'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { UptimeChart, UPTIME_PERIODS, type UptimePeriodKey } from '@/components/reui-kit/uptime-chart'
+import {
+  collapseStatusChanges,
+  filterByPeriod,
+  filterByProviders,
+  type HealthLogProbe,
+} from '@/lib/health-log'
+import type { HealthCheckProvider } from '@cfdm/shared'
+
+/**
+ * Combined uptime chart + status-change timeline (solution-analytics-8 DNA).
+ * Preview: https://reui.io/preview/base/solution-analytics-8 · https://reui.io/preview/base/chart-17
+ * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/timeline
+ */
+export function ServiceHealthMonitor({
+  items,
+  selectedProviders,
+  isLoading = false,
+}: {
+  items: HealthLogProbe[]
+  selectedProviders: readonly HealthCheckProvider[]
+  isLoading?: boolean
+}) {
+  const [period, setPeriod] = useState<UptimePeriodKey>('5D')
+  const days = UPTIME_PERIODS.find((entry) => entry.key === period)?.days ?? 5
+
+  const filtered = useMemo(
+    () => filterByProviders(filterByPeriod(items, days), selectedProviders),
+    [items, days, selectedProviders],
+  )
+
+  const changes = useMemo(() => collapseStatusChanges(filtered), [filtered])
+
+  return (
+    <Frame stacked spacing="sm" className="min-w-0 w-full">
+      <UptimeChart
+        items={filtered}
+        isLoading={isLoading}
+        period={period}
+        onPeriodChange={setPeriod}
+        skipPeriodFilter
+        embedded
+      />
+      <FramePanel className="flex flex-col gap-3">
+        <FrameHeader className="px-0 py-0">
+          <FrameTitle>Смены статуса</FrameTitle>
+          <FrameDescription>
+            Только переходы up / degraded / down · Cloudflare = Worker, не Health Checks API
+          </FrameDescription>
+        </FrameHeader>
+        <HealthTimeline
+          events={changes.map((row) => ({
+            id: row.id,
+            hostname: row.ip,
+            type: row.provider,
+            status: row.status,
+            latency_ms: row.latency_ms,
+            error: row.error,
+            checked_at: row.checked_at,
+            colo: row.colo,
+            provider: row.provider,
+          }))}
+          emptyTitle="Нет смен статуса"
+          emptyDescription="События появятся при переходе up / degraded / down"
+        />
+      </FramePanel>
+    </Frame>
+  )
+}

apps/web/src/components/reui-kit/uptime-chart.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import { ActivityIcon, InfoIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
 import { Area, AreaChart, XAxis } from 'recharts'
 
@@ -6,11 +6,13 @@ import { EmptyState } from '@/components/empty-state'
 import { Badge } from '@/components/reui/badge'
 import { Frame, FramePanel } from '@/components/reui/frame'
 import { IconTile } from '@/components/reui/icon-tile'
-import { formatDate, sqliteUtcToIso } from '@/lib/format'
+import { filterByPeriod, probeTime } from '@/lib/health-log'
+import { formatDate } from '@/lib/format'
 import { Button } from '@cfdm/ui/components/button'
 import {
   ChartContainer,
   ChartTooltip,
+  ChartTooltipContent,
   type ChartConfig,
 } from '@cfdm/ui/components/chart'
 import { Tabs, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
@@ -38,7 +40,7 @@ export interface UptimeProbe {
 
 export type UptimePeriodKey = '5D' | '2W' | '1M'
 
-const PERIODS: { key: UptimePeriodKey; label: string; days: number }[] = [
+export const UPTIME_PERIODS: { key: UptimePeriodKey; label: string; days: number }[] = [
   { key: '5D', label: '5D', days: 5 },
   { key: '2W', label: '2W', days: 14 },
   { key: '1M', label: '1M', days: 30 },
@@ -59,17 +61,6 @@ interface ChartPoint {
   status: UptimeProbe['status']
 }
 
-function probeTime(checkedAt: string): number {
-  const iso = sqliteUtcToIso(checkedAt) ?? checkedAt
-  const time = new Date(iso).getTime()
-  return Number.isNaN(time) ? 0 : time
-}
-
-function filterByPeriod(items: UptimeProbe[], days: number): UptimeProbe[] {
-  const cutoff = Date.now() - days * 86_400_000
-  return items.filter((item) => probeTime(item.checked_at) >= cutoff)
-}
-
 function toSeries(items: UptimeProbe[]): ChartPoint[] {
   return [...items]
     .sort((a, b) => probeTime(a.checked_at) - probeTime(b.checked_at))
@@ -97,46 +88,73 @@ function deltaPercent(points: ChartPoint[]): number | null {
   return next - prev
 }
 
-interface UptimeTooltipProps {
-  active?: boolean
-  payload?: Array<{ payload: ChartPoint }>
-}
+function UptimeDelta({ delta }: { delta: number }) {
+  if (Math.abs(delta) < 0.05) {
+    return <span className="text-muted-foreground">без изменений за период</span>
+  }
+
+  if (delta > 0) {
+    return (
+      <>
+        <TrendingUpIcon className="text-success size-4" aria-hidden="true" />
+        <span className="text-success font-medium">+{delta.toFixed(1)} п.п.</span>
+        <span className="text-muted-foreground">с начала периода</span>
+      </>
+    )
+  }
 
-function UptimeTooltip({ active, payload }: UptimeTooltipProps) {
-  if (!active || !payload?.[0]) return null
-  const point = payload[0].payload
   return (
-    <div className="bg-popover text-popover-foreground rounded-md px-3 py-2 text-sm shadow-md">
-      <p className="font-medium tabular-nums">
-        {point.latency} мс · {point.ok ? 'OK' : 'Down'}
-      </p>
-      <p className="text-muted-foreground text-xs">{point.period}</p>
-    </div>
+    <>
+      <TrendingDownIcon className="text-destructive size-4" aria-hidden="true" />
+      <span className="text-destructive font-medium">{delta.toFixed(1)} п.п.</span>
+      <span className="text-muted-foreground">с начала периода</span>
+    </>
   )
 }
 
 interface UptimeChartProps {
   items: UptimeProbe[]
   isLoading?: boolean
+  period?: UptimePeriodKey
+  onPeriodChange?: (period: UptimePeriodKey) => void
+  skipPeriodFilter?: boolean
+  embedded?: boolean
 }
 
-export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
+export function UptimeChart({
+  items,
+  isLoading = false,
+  period: periodProp,
+  onPeriodChange,
+  skipPeriodFilter = false,
+  embedded = false,
+}: UptimeChartProps) {
   const gradientId = useId().replace(/:/g, '')
-  const [period, setPeriod] = useState<UptimePeriodKey>('5D')
-  const days = PERIODS.find((entry) => entry.key === period)?.days ?? 5
+  const [internalPeriod, setInternalPeriod] = useState<UptimePeriodKey>('5D')
+  const [tooltipPortal, setTooltipPortal] = useState<HTMLElement | null>(null)
+  const period = periodProp ?? internalPeriod
+  const days = UPTIME_PERIODS.find((entry) => entry.key === period)?.days ?? 5
+
+  useEffect(() => {
+    setTooltipPortal(document.body)
+  }, [])
+
+  function handlePeriodChange(next: UptimePeriodKey) {
+    onPeriodChange?.(next)
+    if (periodProp == null) setInternalPeriod(next)
+  }
 
   const points = useMemo(
-    () => toSeries(filterByPeriod(items, days)),
-    [items, days],
+    () => toSeries(skipPeriodFilter ? items : filterByPeriod(items, days)),
+    [items, days, skipPeriodFilter],
   )
   const uptime = uptimePercent(points)
   const delta = deltaPercent(points)
   const lastOk = points.at(-1)?.ok ?? true
   const tileClass = lastOk ? 'text-success' : 'text-destructive'
 
-  return (
-    <Frame spacing="sm" className="min-w-0 w-full">
-      <FramePanel className="flex flex-col gap-6">
+  const panel = (
+    <FramePanel className="flex flex-col gap-6">
         <div className="border-border flex items-center justify-between gap-2 border-b border-dashed pb-4">
           <div className="flex items-center gap-2.5">
             <IconTile
@@ -196,35 +214,21 @@ export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
                   <Badge variant="outline" size="sm">
                     {points.length} проб
                   </Badge>
-                ) : delta >= 0 ? (
-                  <>
-                    <TrendingUpIcon className="text-success size-4" aria-hidden="true" />
-                    <span className="text-success font-medium">
-                      +{delta.toFixed(1)} п.п.
-                    </span>
-                    <span className="text-muted-foreground">к первой половине окна</span>
-                  </>
                 ) : (
-                  <>
-                    <TrendingDownIcon className="text-destructive size-4" aria-hidden="true" />
-                    <span className="text-destructive font-medium">
-                      {delta.toFixed(1)} п.п.
-                    </span>
-                    <span className="text-muted-foreground">к первой половине окна</span>
-                  </>
+                  <UptimeDelta delta={delta} />
                 )}
               </div>
             </div>
 
-            <div className="h-40 w-full">
+            <div className="h-40 w-full overflow-visible">
               <ChartContainer
                 config={chartConfig}
-                className="h-full w-full overflow-hidden rounded-b-xl"
+                className="h-full w-full overflow-visible rounded-b-xl"
                 initialDimension={{ width: 320, height: 160 }}
               >
                 <AreaChart
                   data={points}
-                  margin={{ top: 10, left: 0, right: 0, bottom: 0 }}
+                  margin={{ top: 16, left: 8, right: 8, bottom: 4 }}
                 >
                   <defs>
                     <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
@@ -241,33 +245,56 @@ export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
                     </linearGradient>
                   </defs>
                   <XAxis dataKey="period" hide />
-                  <ChartTooltip content={<UptimeTooltip />} />
+                  <ChartTooltip
+                    cursor={{ stroke: 'var(--border)', strokeDasharray: '4 4' }}
+                    allowEscapeViewBox={{ x: true, y: true }}
+                    portal={tooltipPortal ?? undefined}
+                    wrapperStyle={{ zIndex: 50, pointerEvents: 'none' }}
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value, _name, item) => {
+                          const point = item.payload as ChartPoint | undefined
+                          const ping = Number(value)
+                          return (
+                            <div className="flex flex-1 items-center justify-between gap-4">
+                              <span className="text-muted-foreground">
+                                {point?.ok === false ? 'Down' : 'Пинг'}
+                              </span>
+                              <span className="text-foreground font-mono font-medium tabular-nums">
+                                {Number.isFinite(ping) ? `${ping} мс` : '—'}
+                              </span>
+                            </div>
+                          )
+                        }}
+                      />
+                    }
+                  />
                   <Area
                     dataKey="latency"
+                    name="latency"
                     type="natural"
                     fill={`url(#${gradientId})`}
                     stroke="var(--color-latency)"
                     strokeWidth={2}
+                    isAnimationActive={false}
                     dot={(dotProps) => {
-                      const { cx, cy, payload, index } = dotProps as {
-                        cx?: number
-                        cy?: number
-                        index?: number
-                        payload?: ChartPoint
-                      }
+                      const { cx, cy, payload, index } = dotProps
                       if (cx == null || cy == null) return <g key={index} />
-                      const fill = payload?.ok
-                        ? 'var(--color-latency)'
-                        : 'var(--destructive)'
+                      const point = payload as ChartPoint | undefined
                       return (
                         <circle
                           key={index}
                           cx={cx}
                           cy={cy}
                           r={4}
-                          fill={fill}
+                          fill={
+                            point?.ok
+                              ? 'var(--color-latency)'
+                              : 'var(--destructive)'
+                          }
                           stroke="var(--background)"
                           strokeWidth={2}
+                          pointerEvents="none"
                         />
                       )
                     }}
@@ -285,10 +312,10 @@ export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
 
         <Tabs
           value={period}
-          onValueChange={(value) => setPeriod(value as UptimePeriodKey)}
+          onValueChange={(value) => handlePeriodChange(value as UptimePeriodKey)}
         >
           <TabsList className="w-full">
-            {PERIODS.map((entry) => (
+            {UPTIME_PERIODS.map((entry) => (
               <TabsTrigger key={entry.key} value={entry.key} className="flex-1">
                 {entry.label}
               </TabsTrigger>
@@ -296,6 +323,13 @@ export function UptimeChart({ items, isLoading = false }: UptimeChartProps) {
           </TabsList>
         </Tabs>
       </FramePanel>
+  )
+
+  if (embedded) return panel
+
+  return (
+    <Frame spacing="sm" className="min-w-0 w-full">
+      {panel}
     </Frame>
   )
 }

apps/web/src/components/services/service-detail-grid.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type ReactNode } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
 import {
   GlobeIcon,
@@ -6,7 +7,9 @@ import {
   PlusIcon,
   SearchIcon,
   ServerIcon,
+  ShieldCheckIcon,
 } from 'lucide-react'
+import { toast } from 'sonner'
 
 import { HealthCheckBadge } from '@/components/health-check-badge'
 import { StatusBadge } from '@/components/status-badge'
@@ -15,9 +18,28 @@ import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-colu
 import { IconTile } from '@/components/reui/icon-tile'
 import { createFilter, type Filter, type FilterFieldConfig } from '@/components/reui/filters'
 import { ResourcePage } from '@/components/reui-kit'
-import type { ServiceView } from '@/lib/schemas'
+import { certRelativeBadge } from '@/components/columns/certificates-columns'
+import { certMonitoringOptions } from '@/lib/cert-monitoring'
+import { formatDate } from '@/lib/format'
+import type { ServiceCertificateRow, ServiceView } from '@/lib/schemas'
+import type { CertMonitoring } from '@cfdm/shared'
+import {
+  certKeys,
+  checkServiceCertificates,
+  patchBindingCertMonitoring,
+  serviceCertificatesQueryOptions,
+} from '@/queries'
 import { Button } from '@cfdm/ui/components/button'
 import { Switch } from '@cfdm/ui/components/switch'
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@cfdm/ui/components/toggle-group'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@cfdm/ui/components/tooltip'
 
 type HealthStatus = 'up' | 'down' | 'degraded' | 'unknown'
 
@@ -60,6 +82,7 @@ const TABS = [
   { id: 'ip', label: 'IP' },
   { id: 'fqdn', label: 'FQDN' },
   { id: 'nodes', label: 'Ноды' },
+  { id: 'ssl', label: 'SSL' },
 ] as const
 
 const HEALTH_OPTIONS = [
@@ -208,6 +231,57 @@ export function ServiceDetailGrid({
     createFilter('address', 'contains', ['']),
     createFilter('health_status', 'is', ['']),
   ])
+  const [sslFilters, setSslFilters] = useState<Filter[]>(() => [
+    createFilter('hostname', 'contains', ['']),
+  ])
+
+  const queryClient = useQueryClient()
+  const certQuery = useQuery(serviceCertificatesQueryOptions(service.id))
+  const sslRows = certQuery.data ?? []
+
+  const patchCertMonitoring = useMutation({
+    mutationFn: ({
+      bindingId,
+      mode,
+    }: {
+      bindingId: number
+      mode: CertMonitoring
+    }) => patchBindingCertMonitoring(bindingId, mode),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: certKeys.byService(service.id) }),
+        queryClient.invalidateQueries({ queryKey: certKeys.all }),
+        queryClient.invalidateQueries({ queryKey: certKeys.summary }),
+      ])
+      toast.success('Режим проверки SSL обновлён')
+    },
+    onError: (err) => {
+      toast.error(
+        err instanceof Error ? err.message : 'Не удалось обновить режим SSL',
+      )
+    },
+  })
+
+  const checkSsl = useMutation({
+    mutationFn: () => checkServiceCertificates(service.id),
+    onSuccess: async (result) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: certKeys.byService(service.id) }),
+        queryClient.invalidateQueries({ queryKey: certKeys.all }),
+        queryClient.invalidateQueries({ queryKey: certKeys.summary }),
+      ])
+      toast.success(
+        result.checked > 0
+          ? `Проверено FQDN: ${result.checked}`
+          : 'Нет FQDN для проверки SSL',
+      )
+    },
+    onError: (err) => {
+      toast.error(
+        err instanceof Error ? err.message : 'Не удалось проверить SSL',
+      )
+    },
+  })
 
   const ipRows = useMemo(() => buildIpRows(service), [service])
   const fqdnRows = useMemo(() => buildFqdnRows(service), [service])
@@ -221,7 +295,9 @@ export function ServiceDetailGrid({
         ? ipRows.length
         : entry.id === 'fqdn'
           ? fqdnRows.length
-          : nodeRows.length,
+          : entry.id === 'ssl'
+            ? sslRows.length
+            : nodeRows.length,
   }))
 
   const ipFilterFields = useMemo<FilterFieldConfig[]>(
@@ -282,6 +358,20 @@ export function ServiceDetailGrid({
     [],
   )
 
+  const sslFilterFields = useMemo<FilterFieldConfig[]>(
+    () => [
+      {
+        key: 'hostname',
+        label: 'FQDN',
+        icon: <SearchIcon className="size-3.5" aria-hidden />,
+        type: 'text',
+        className: 'w-52',
+        placeholder: 'Поиск по FQDN…',
+      },
+    ],
+    [],
+  )
+
   const ipColumns = useMemo<ColumnDef<ServiceIpRow>[]>(
     () => [
       {
@@ -473,6 +563,91 @@ export function ServiceDetailGrid({
     [onDeleteNode],
   )
 
+  const sslColumns = useMemo<ColumnDef<ServiceCertificateRow>[]>(
+    () => [
+      {
+        id: 'hostname',
+        accessorKey: 'hostname',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="FQDN" />
+        ),
+        cell: ({ row }) => (
+          <NameCell
+            icon={<ShieldCheckIcon />}
+            label={row.original.hostname}
+            iconClassName="text-foreground"
+          />
+        ),
+      },
+      {
+        id: 'status',
+        header: 'Статус',
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      },
+      {
+        id: 'expires_at',
+        accessorKey: 'expires_at',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Истекает" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground tabular-nums">
+            {formatDate(row.original.expires_at)}
+          </span>
+        ),
+      },
+      {
+        id: 'relative',
+        header: 'Срок',
+        cell: ({ row }) =>
+          certRelativeBadge(row.original.status, row.original.expires_at),
+      },
+      {
+        id: 'mode',
+        header: 'Режим',
+        cell: ({ row }) => (
+          <ToggleGroup
+            variant="outline"
+            size="sm"
+            value={[row.original.cert_monitoring]}
+            onValueChange={(next) => {
+              const value = Array.isArray(next) ? next[0] : next
+              if (
+                typeof value !== 'string' ||
+                value === row.original.cert_monitoring
+              ) {
+                return
+              }
+              patchCertMonitoring.mutate({
+                bindingId: row.original.binding_id,
+                mode: value as CertMonitoring,
+              })
+            }}
+          >
+            {certMonitoringOptions.map((option) => (
+              <ToggleGroupItem key={option.value} value={option.value}>
+                {option.label}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        ),
+      },
+      {
+        id: 'last_checked_at',
+        accessorKey: 'last_checked_at',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Проверка" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground tabular-nums">
+            {formatDate(row.original.last_checked_at)}
+          </span>
+        ),
+      },
+    ],
+    [patchCertMonitoring],
+  )
+
   const sharedTabs = {
     tabs,
     activeTab: tab,
@@ -544,6 +719,52 @@ export function ServiceDetailGrid({
     )
   }
 
+  if (tab === 'ssl') {
+    return (
+      <ResourcePage
+        title="Активы сервиса"
+        description="IP, FQDN, ноды и SSL этого сервиса"
+        {...sharedTabs}
+        filterFields={sslFilterFields}
+        filters={sslFilters}
+        onFiltersChange={setSslFilters}
+        onClearFilters={() =>
+          setSslFilters([createFilter('hostname', 'contains', [''])])
+        }
+        getFilterFieldValue={(item, field) =>
+          field === 'hostname' ? item.hostname : ''
+        }
+        columns={sslColumns}
+        data={sslRows}
+        getRowId={(row) => String(row.binding_id)}
+        isLoading={isLoading || certQuery.isLoading}
+        primaryAction={
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Проверить SSL"
+                  disabled={checkSsl.isPending || sslRows.length === 0}
+                  onClick={() => checkSsl.mutate()}
+                />
+              }
+            >
+              <ShieldCheckIcon className="size-4.5" aria-hidden />
+            </TooltipTrigger>
+            <TooltipContent>Проверить</TooltipContent>
+          </Tooltip>
+        }
+        emptyState={{
+          title: 'Нет FQDN',
+          description: 'Привяжите домен к сервису, чтобы мониторить SSL.',
+        }}
+      />
+    )
+  }
+
   return (
     <ResourcePage
       title="Активы сервиса"

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

@@ -3,10 +3,8 @@ import { useEffect, useMemo } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import type { CertMonitoring } from '@cfdm/shared'
 import type { ServiceView, SubdomainRecord } from '@/lib/schemas'
 import type { SubdomainServiceLink } from '@/hooks/use-domain-page'
-import { certMonitoringOptions } from '@/lib/cert-monitoring'
 import { formatServiceGroupLabel } from '@/lib/service-utils'
 import { FormSheet } from '@/components/form-sheet'
 import { FormFieldSimple } from '@/components/form-field'
@@ -30,7 +28,6 @@ import {
 const subdomainEditSchema = z.object({
   name: z.string().min(1, 'Укажите имя'),
   serviceId: z.string(),
-  certMonitoring: z.enum(['auto', 'required', 'skipped']),
 })
 
 export type SubdomainEditValues = z.infer<typeof subdomainEditSchema>
@@ -67,7 +64,6 @@ export function SubdomainEditSheet({
     defaultValues: {
       name: '',
       serviceId: 'none',
-      certMonitoring: 'auto',
     },
   })
 
@@ -85,42 +81,27 @@ export function SubdomainEditSheet({
     [services, serviceGroupById],
   )
 
-  const certMonitoringItems = useMemo(
-    () =>
-      certMonitoringOptions.map((option) => ({
-        label: option.label,
-        value: option.value,
-      })),
-    [],
-  )
-
   useEffect(() => {
     if (!open) return
     if (mode === 'edit' && subdomain) {
       form.reset({
         name: subdomain.name,
         serviceId: currentServiceId || 'none',
-        certMonitoring: subdomain.cert_monitoring,
       })
       return
     }
     form.reset({
       name: '',
       serviceId: 'none',
-      certMonitoring: 'auto',
     })
   }, [open, mode, subdomain, currentServiceId, form])
 
-  const certMonitoring = form.watch('certMonitoring')
-  const certHint =
-    certMonitoringOptions.find((o) => o.value === certMonitoring)?.description
   const hasMultipleServices = mode === 'edit' && serviceLinks.length > 1
 
   function handleSubmit(values: SubdomainEditValues) {
     onSubmit({
       name: values.name.trim(),
       serviceId: values.serviceId,
-      certMonitoring: values.certMonitoring as CertMonitoring,
     })
   }
 
@@ -218,39 +199,6 @@ export function SubdomainEditSheet({
                 )}
               />
             </FormFieldSimple>
-            <FormFieldSimple
-              label="Мониторинг SSL"
-              htmlFor="subdomain_cert_monitoring"
-              hint={certHint}
-            >
-              <Controller
-                control={form.control}
-                name="certMonitoring"
-                render={({ field }) => (
-                  <Select
-                    items={certMonitoringItems}
-                    value={field.value}
-                    onValueChange={(value) =>
-                      field.onChange((value ?? 'auto') as CertMonitoring)
-                    }
-                  >
-                    <SelectTrigger
-                      id="subdomain_cert_monitoring"
-                      className="w-full"
-                    >
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {certMonitoringOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-            </FormFieldSimple>
           </>
         ) : null}
       </FieldGroup>

apps/web/src/hooks/use-domain-page.ts

@@ -13,7 +13,6 @@ import {
   serviceGroupsQueryOptions,
   servicesQueryOptions,
   subdomainsListQueryOptions,
-  updateDomain,
   updateSubdomain,
 } from '@/queries'
 import type { CertMonitoring } from '@cfdm/shared'
@@ -172,21 +171,6 @@ export function useDomainPage(domainId: number) {
     },
   })
 
-  const updateDomainCertMonitoringMutation = useMutation({
-    mutationFn: (certMonitoring: CertMonitoring) =>
-      updateDomain(domainId, { cert_monitoring: certMonitoring }),
-    onSuccess: () => {
-      invalidate()
-      void queryClient.invalidateQueries({ queryKey: ['domains'] })
-      toast.success('Режим мониторинга SSL обновлён')
-    },
-    onError: (err) => {
-      toast.error(
-        err instanceof Error ? err.message : 'Не удалось обновить мониторинг SSL',
-      )
-    },
-  })
-
   const deleteSubdomainMutation = useMutation({
     mutationFn: (id: number) => deleteSubdomain(id),
     onSuccess: () => {
@@ -249,7 +233,6 @@ export function useDomainPage(domainId: number) {
     syncMutation,
     createSubdomainMutation,
     updateSubdomainMutation,
-    updateDomainCertMonitoringMutation,
     deleteSubdomainMutation,
     linkServiceMutation,
   }

apps/web/src/lib/cert-monitoring.ts

@@ -8,17 +8,17 @@ export const certMonitoringOptions: Array<{
   {
     value: 'auto',
     label: 'Авто',
-    description: 'Проверять, если хост обслуживается активным сервисом',
+    description: 'Проверять, если health-check сервиса с verify TLS',
   },
   {
     value: 'required',
     label: 'Обязательно',
-    description: 'Всегда проверять SSL, даже без привязок',
+    description: 'Всегда проверять SSL для этого FQDN',
   },
   {
     value: 'skipped',
     label: 'Не проверять',
-    description: 'Исключить из мониторинга сертификатов',
+    description: 'Исключить FQDN из мониторинга сертификатов',
   },
 ]
 

apps/web/src/lib/health-log.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  collapseStatusChanges,
+  enabledHealthProviders,
+  providerHealthStatuses,
+  worstHealthStatus,
+  type HealthLogProbe,
+} from '@/lib/health-log'
+
+function probe(
+  overrides: Partial<HealthLogProbe> & Pick<HealthLogProbe, 'id' | 'status' | 'checked_at'>,
+): HealthLogProbe {
+  return {
+    ip: '1.1.1.1',
+    provider: 'local',
+    ok: overrides.status === 'up',
+    latency_ms: 12,
+    colo: null,
+    error: null,
+    ...overrides,
+  }
+}
+
+describe('collapseStatusChanges', () => {
+  it('keeps only status transitions per ip+provider', () => {
+    const items = [
+      probe({ id: 1, status: 'up', checked_at: '2026-01-01T00:00:00Z' }),
+      probe({ id: 2, status: 'up', checked_at: '2026-01-01T00:01:00Z' }),
+      probe({ id: 3, status: 'down', checked_at: '2026-01-01T00:02:00Z' }),
+      probe({ id: 4, status: 'down', checked_at: '2026-01-01T00:03:00Z' }),
+      probe({ id: 5, status: 'up', checked_at: '2026-01-01T00:04:00Z' }),
+    ]
+    const changes = collapseStatusChanges(items)
+    expect(changes.map((item) => item.id)).toEqual([5, 3, 1])
+  })
+
+  it('tracks series independently by provider', () => {
+    const items = [
+      probe({ id: 1, provider: 'local', status: 'up', checked_at: '2026-01-01T00:00:00Z' }),
+      probe({
+        id: 2,
+        provider: 'cloudflare',
+        status: 'up',
+        checked_at: '2026-01-01T00:00:00Z',
+      }),
+      probe({ id: 3, provider: 'local', status: 'up', checked_at: '2026-01-01T00:01:00Z' }),
+      probe({
+        id: 4,
+        provider: 'cloudflare',
+        status: 'down',
+        checked_at: '2026-01-01T00:01:00Z',
+      }),
+    ]
+    const changes = collapseStatusChanges(items)
+    expect(changes.map((item) => item.id).sort()).toEqual([1, 2, 4])
+  })
+})
+
+describe('enabledHealthProviders', () => {
+  it('unions bindings in registry order', () => {
+    expect(
+      enabledHealthProviders([
+        { health_check_providers: ['globalping'] },
+        { health_check_providers: ['local', 'cloudflare'] },
+      ]),
+    ).toEqual(['local', 'cloudflare', 'globalping'])
+  })
+
+  it('falls back to local', () => {
+    expect(enabledHealthProviders([])).toEqual(['local'])
+  })
+})
+
+describe('providerHealthStatuses', () => {
+  it('uses worst latest-per-ip status', () => {
+    const items = [
+      probe({ id: 1, ip: '1.1.1.1', status: 'up', checked_at: '2026-01-01T00:02:00Z' }),
+      probe({ id: 2, ip: '2.2.2.2', status: 'down', checked_at: '2026-01-01T00:01:00Z' }),
+      probe({
+        id: 3,
+        ip: '2.2.2.2',
+        status: 'up',
+        checked_at: '2026-01-01T00:00:00Z',
+      }),
+    ]
+    expect(providerHealthStatuses(items, ['local']).local).toBe('down')
+  })
+})
+
+describe('worstHealthStatus', () => {
+  it('ranks down over degraded over up', () => {
+    expect(worstHealthStatus(['up', 'degraded'])).toBe('degraded')
+    expect(worstHealthStatus(['degraded', 'down'])).toBe('down')
+    expect(worstHealthStatus([])).toBe('unknown')
+  })
+})

apps/web/src/lib/health-log.ts

@@ -0,0 +1,127 @@
+import type { HealthCheckProvider } from '@cfdm/shared'
+import { HEALTH_CHECK_PROVIDERS, uniqueHealthProviders } from '@cfdm/shared'
+
+import { sqliteUtcToIso } from '@/lib/format'
+import type { IpHealthStatus } from '@/lib/schemas'
+
+export type HealthLogStatus = IpHealthStatus['status']
+
+export interface HealthLogProbe {
+  id: number
+  ip: string
+  provider: HealthCheckProvider
+  status: HealthLogStatus
+  ok: boolean
+  latency_ms: number | null
+  colo: string | null
+  error: string | null
+  checked_at: string
+}
+
+const STATUS_RANK: Record<HealthLogStatus, number> = {
+  unknown: 0,
+  up: 1,
+  degraded: 2,
+  down: 3,
+}
+
+export function probeTime(checkedAt: string): number {
+  const iso = sqliteUtcToIso(checkedAt) ?? checkedAt
+  const time = new Date(iso).getTime()
+  return Number.isNaN(time) ? 0 : time
+}
+
+export function filterByPeriod<T extends { checked_at: string }>(
+  items: T[],
+  days: number,
+): T[] {
+  const cutoff = Date.now() - days * 86_400_000
+  return items.filter((item) => probeTime(item.checked_at) >= cutoff)
+}
+
+export function filterByProviders<T extends { provider: string }>(
+  items: T[],
+  providers: readonly HealthCheckProvider[],
+): T[] {
+  if (providers.length === 0) return items
+  const allowed = new Set(providers)
+  return items.filter((item) => allowed.has(item.provider as HealthCheckProvider))
+}
+
+/**
+ * Keep the first probe of each ip+provider series and every later probe
+ * whose status differs from the previous one. Newest first.
+ */
+export function collapseStatusChanges<T extends HealthLogProbe>(items: T[]): T[] {
+  const byKey = new Map<string, T[]>()
+  for (const item of items) {
+    const key = `${item.ip}\0${item.provider}`
+    const list = byKey.get(key)
+    if (list) list.push(item)
+    else byKey.set(key, [item])
+  }
+
+  const changes: T[] = []
+  for (const list of byKey.values()) {
+    list.sort(
+      (a, b) => probeTime(a.checked_at) - probeTime(b.checked_at) || a.id - b.id,
+    )
+    let previous: HealthLogStatus | undefined
+    for (const item of list) {
+      if (item.status !== previous) {
+        changes.push(item)
+        previous = item.status
+      }
+    }
+  }
+
+  changes.sort(
+    (a, b) => probeTime(b.checked_at) - probeTime(a.checked_at) || b.id - a.id,
+  )
+  return changes
+}
+
+export function enabledHealthProviders(
+  domains: Array<{ health_check_providers?: readonly HealthCheckProvider[] | null }>,
+): HealthCheckProvider[] {
+  const collected = uniqueHealthProviders(
+    domains.flatMap((domain) => domain.health_check_providers ?? []),
+  )
+  if (collected.length === 0) return ['local']
+  return HEALTH_CHECK_PROVIDERS.filter((provider) => collected.includes(provider))
+}
+
+export function worstHealthStatus(statuses: readonly HealthLogStatus[]): HealthLogStatus {
+  if (statuses.length === 0) return 'unknown'
+  return statuses.reduce((worst, status) =>
+    STATUS_RANK[status] > STATUS_RANK[worst] ? status : worst,
+  )
+}
+
+/** Latest probe per IP for a provider, then worst among those IPs. */
+export function providerHealthStatuses(
+  items: readonly HealthLogProbe[],
+  providers: readonly HealthCheckProvider[],
+): Record<HealthCheckProvider, HealthLogStatus> {
+  const latestByIp = new Map<string, HealthLogProbe>()
+  const sorted = [...items].sort(
+    (a, b) => probeTime(b.checked_at) - probeTime(a.checked_at) || b.id - a.id,
+  )
+  for (const item of sorted) {
+    const key = `${item.provider}\0${item.ip}`
+    if (!latestByIp.has(key)) latestByIp.set(key, item)
+  }
+
+  const result = Object.fromEntries(
+    HEALTH_CHECK_PROVIDERS.map((provider) => [provider, 'unknown' as HealthLogStatus]),
+  ) as Record<HealthCheckProvider, HealthLogStatus>
+
+  for (const provider of providers) {
+    const statuses = [...latestByIp.values()]
+      .filter((item) => item.provider === provider)
+      .map((item) => item.status)
+    result[provider] = worstHealthStatus(statuses)
+  }
+
+  return result
+}

apps/web/src/lib/schemas.ts

@@ -82,6 +82,7 @@ export const serviceDomainBindingSchema = z
     health_check_provider: z.enum(['local', 'cloudflare', 'globalping']).catch('local'),
     health_check_providers: z.array(z.enum(['local', 'cloudflare', 'globalping'])).min(1).catch(['local']),
     health_check_aggregate: z.enum(['any', 'all', 'majority']).catch('majority'),
+    cert_monitoring: z.enum(['auto', 'required', 'skipped']).default('auto'),
     sync_status: z.string().nullable().default(null),
   })
   .transform((binding) => ({
@@ -197,6 +198,7 @@ export const serviceBindingSchema = z
     health_check_provider: z.enum(['local', 'cloudflare', 'globalping']).catch('local'),
     health_check_providers: z.array(z.enum(['local', 'cloudflare', 'globalping'])).min(1).catch(['local']),
     health_check_aggregate: z.enum(['any', 'all', 'majority']).catch('majority'),
+    cert_monitoring: z.enum(['auto', 'required', 'skipped']).default('auto'),
     sync_status: z.string().nullable().default(null),
     created_at: z.string(),
     updated_at: z.string(),
@@ -234,6 +236,8 @@ export const certificateSchema = z.object({
   id: z.number(),
   domain_id: z.number(),
   subdomain_id: z.number().nullable(),
+  service_id: z.number().nullable().optional().default(null),
+  service_name: z.string().nullable().optional().default(null),
   hostname: z.string(),
   expires_at: z.string().nullable(),
   last_checked_at: z.string().nullable(),
@@ -243,6 +247,19 @@ export const certificateSchema = z.object({
   updated_at: z.string(),
 })
 
+export const serviceCertificateRowSchema = z.object({
+  binding_id: z.number(),
+  domain_id: z.number(),
+  service_id: z.number(),
+  hostname: z.string(),
+  cert_monitoring: z.enum(['auto', 'required', 'skipped']),
+  id: z.number().nullable(),
+  status: z.string(),
+  expires_at: z.string().nullable(),
+  last_checked_at: z.string().nullable(),
+  last_error: z.string().nullable(),
+})
+
 export type Group = z.infer<typeof groupSchema>
 export type GroupWithStats = z.infer<typeof groupWithStatsSchema>
 export type Service = z.infer<typeof serviceSchema>
@@ -256,6 +273,7 @@ export type DomainListItem = z.infer<typeof domainListItemSchema>
 export type ServiceBinding = z.infer<typeof serviceBindingSchema>
 export type DnsRecord = z.infer<typeof dnsRecordSchema>
 export type Certificate = z.infer<typeof certificateSchema>
+export type ServiceCertificateRow = z.infer<typeof serviceCertificateRowSchema>
 
 export const createGroupSchema = z.object({
   name: z.string().min(1, '╨г╨║╨░╨╢╨╕╤В╨╡ ╨╜╨░╨╖╨▓╨░╨╜╨╕╨╡'),

apps/web/src/queries/certificates.ts

@@ -1,11 +1,14 @@
 import { queryOptions } from '@tanstack/react-query'
 import { api } from '@/lib/api-client'
-import { certificateSchema } from '@/lib/schemas'
+import { certificateSchema, serviceCertificateRowSchema } from '@/lib/schemas'
+import type { CertMonitoring } from '@cfdm/shared'
 import { z } from 'zod'
 
 export const certKeys = {
   all: ['certificates'] as const,
   summary: ['certificates', 'summary'] as const,
+  byService: (serviceId: number) =>
+    [...certKeys.all, 'service', serviceId] as const,
 }
 
 export const certificatesQueryOptions = () =>
@@ -23,3 +26,29 @@ export const certSummaryQueryOptions = () =>
     queryKey: certKeys.summary,
     queryFn: () => api.get<[string, number][]>('/api/v1/certificates/summary'),
   })
+
+export const serviceCertificatesQueryOptions = (serviceId: number) =>
+  queryOptions({
+    queryKey: certKeys.byService(serviceId),
+    queryFn: async () => {
+      const data = await api.get<unknown[]>(
+        `/api/v1/services/${serviceId}/certificates`,
+      )
+      return z.array(serviceCertificateRowSchema).parse(data)
+    },
+  })
+
+export async function patchBindingCertMonitoring(
+  bindingId: number,
+  certMonitoring: CertMonitoring,
+) {
+  return api.patch(`/api/v1/service-bindings/${bindingId}`, {
+    cert_monitoring: certMonitoring,
+  })
+}
+
+export async function checkServiceCertificates(serviceId: number) {
+  return api.post<{ checked: number }>(
+    `/api/v1/services/${serviceId}/certificates/check`,
+  )
+}

apps/web/src/routes/_auth/certificates.tsx

@@ -74,7 +74,7 @@ function CertificatesPage() {
     <PageShell>
       <PageHeader
         title="Сертификаты"
-        description="Мониторинг SSL: health-check с проверкой TLS, либо режим «Обязательно»"
+        description="Сводка SSL флота: FQDN сервисов. Строка ведёт на деталку сервиса."
         actions={primaryAction}
       />
       <CertKpiStats
@@ -86,7 +86,7 @@ function CertificatesPage() {
       />
       <ResourcePage
         title="Сертификаты"
-        description="Мониторинг SSL: health-check с проверкой TLS, либо режим «Обязательно»"
+        description="Сводка SSL флота: FQDN сервисов. Строка ведёт на деталку сервиса."
         hideHeader
         tabs={CERT_TABS.map((tab) => ({ ...tab }))}
         activeTab={activeTab}

apps/web/src/routes/_auth/domains/$domainId/index.tsx

@@ -6,11 +6,9 @@ import {
   GlobeIcon,
   Link2Icon,
   ServerIcon,
-  ShieldCheckIcon,
 } from 'lucide-react'
 import { toast } from 'sonner'
 import type { Filter } from '@/components/reui/filters'
-import type { CertMonitoring } from '@cfdm/shared'
 import {
   domainDetailQueryOptions,
   domainServiceBindingsQueryOptions,
@@ -41,19 +39,11 @@ import {
 import { DomainBindingsPanel } from '@/components/domain-bindings-panel'
 import { DomainAvailabilityPanel } from '@/components/domains/domain-availability-panel'
 import { StatusBadge } from '@/components/status-badge'
-import { certMonitoringLabel, certMonitoringOptions } from '@/lib/cert-monitoring'
 import { formatDate } from '@/lib/format'
 import { Badge } from '@/components/reui/badge'
 import { LoadingButton } from '@/components/loading-button'
 import { TableSkeleton } from '@/components/skeletons'
 import { Button } from '@cfdm/ui/components/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@cfdm/ui/components/select'
 import { TabsContent } from '@cfdm/ui/components/tabs'
 
 export const Route = createFileRoute('/_auth/domains/$domainId/')({
@@ -108,7 +98,6 @@ function DomainOverviewPage() {
     syncMutation,
     createSubdomainMutation,
     updateSubdomainMutation,
-    updateDomainCertMonitoringMutation,
     deleteSubdomainMutation,
     linkServiceMutation,
   } = useDomainPage(id)
@@ -167,20 +156,15 @@ function DomainOverviewPage() {
     if (!editTarget) return
 
     const nameChanged = values.name !== editTarget.subdomain.name
-    const certMonitoringChanged =
-      values.certMonitoring !== editTarget.subdomain.cert_monitoring
     const currentServiceId = resolveServiceId(editTarget)
     const serviceChanged = values.serviceId !== currentServiceId
     const targetServiceId =
       values.serviceId === 'none' ? null : Number(values.serviceId)
 
-    if (nameChanged || certMonitoringChanged) {
+    if (nameChanged) {
       await updateSubdomainMutation.mutateAsync({
         id: editTarget.subdomain.id,
-        ...(nameChanged ? { name: values.name } : {}),
-        ...(certMonitoringChanged
-          ? { cert_monitoring: values.certMonitoring }
-          : {}),
+        name: values.name,
       })
     }
 
@@ -209,11 +193,6 @@ function DomainOverviewPage() {
     updateSubdomainMutation.isPending ||
     linkServiceMutation.isPending
 
-  const certMonitoringItems = certMonitoringOptions.map((option) => ({
-    label: option.label,
-    value: option.value,
-  }))
-
   const metricCards = useMemo(() => {
     if (!domain) return []
     return [
@@ -344,40 +323,6 @@ function DomainOverviewPage() {
             >
               <TabsContent value="overview" className="flex flex-col gap-4">
                 <DetailPanel.Metrics cards={metricCards} />
-                <DetailPanel.Section
-                  title="Мониторинг SSL"
-                  description="Настройка проверки сертификата для apex-зоны"
-                >
-                  <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-3">
-                    <span className="text-muted-foreground flex items-center gap-2 text-sm">
-                      <ShieldCheckIcon className="size-4" aria-hidden="true" />
-                      Мониторинг SSL (apex):
-                    </span>
-                    <Select
-                      items={certMonitoringItems}
-                      value={domain.cert_monitoring}
-                      onValueChange={(value) =>
-                        updateDomainCertMonitoringMutation.mutate(
-                          (value ?? 'auto') as CertMonitoring,
-                        )
-                      }
-                      disabled={updateDomainCertMonitoringMutation.isPending}
-                    >
-                      <SelectTrigger className="w-full sm:w-56">
-                        <SelectValue>
-                          {certMonitoringLabel(domain.cert_monitoring)}
-                        </SelectValue>
-                      </SelectTrigger>
-                      <SelectContent>
-                        {certMonitoringOptions.map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </DetailPanel.Section>
               </TabsContent>
 
               <TabsContent value="availability" className="flex flex-col gap-4">

apps/web/src/routes/_auth/services/$serviceId/index.tsx

@@ -1,11 +1,10 @@
-import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
-import { useState } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import {
   ActivityIcon,
-  ArrowLeftIcon,
   GlobeIcon,
   NetworkIcon,
   PencilIcon,
@@ -19,7 +18,6 @@ import { FailoverTimeline } from '@/components/failover-timeline'
 import { FormFieldSimple } from '@/components/form-field'
 import { FormSheet } from '@/components/form-sheet'
 import { HealthCheckBadge } from '@/components/health-check-badge'
-import { HealthTimeline } from '@/components/health/health-timeline'
 import { LoadingButton } from '@/components/loading-button'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
@@ -29,7 +27,11 @@ import {
   type ServiceFqdnRow,
 } from '@/components/services/service-detail-grid'
 import { LbModeTile } from '@/components/services/service-unit-card'
-import { KpiStatGrid, UptimeChart } from '@/components/reui-kit'
+import {
+  HealthProviderStatusTiles,
+  KpiStatGrid,
+  ServiceHealthMonitor,
+} from '@/components/reui-kit'
 import {
   Frame,
   FrameDescription,
@@ -38,7 +40,12 @@ import {
   FrameTitle,
 } from '@/components/reui/frame'
 import { api } from '@/lib/api-client'
+import {
+  enabledHealthProviders,
+  providerHealthStatuses,
+} from '@/lib/health-log'
 import type { ServiceView, UpdateServiceConfigInput } from '@/lib/schemas'
+import type { HealthCheckProvider } from '@cfdm/shared'
 import {
   createServiceNode,
   deleteServiceNode,
@@ -56,6 +63,11 @@ import {
 } from '@/queries'
 import { Button } from '@cfdm/ui/components/button'
 import { Input } from '@cfdm/ui/components/input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@cfdm/ui/components/tooltip'
 
 export const Route = createFileRoute('/_auth/services/$serviceId/')({
   component: ServiceDetailPage,
@@ -92,11 +104,17 @@ function ServiceDetailPage() {
 
   const service = viewQuery.data
   const overview = overviewQuery.data as OverviewPayload | undefined
-  const logItems = logQuery.data?.items ?? []
+  const logItems = useMemo(
+    () => logQuery.data?.items ?? [],
+    [logQuery.data?.items],
+  )
   const nodes = (nodesQuery.data as OverviewPayload['nodes']) ?? []
 
   const [editOpen, setEditOpen] = useState(false)
   const [saving, setSaving] = useState(false)
+  const [selectedProviders, setSelectedProviders] = useState<
+    HealthCheckProvider[] | null
+  >(null)
   const [togglingIp, setTogglingIp] = useState<string | null>(null)
   const [changeIp, setChangeIp] = useState<{
     bindingId: number
@@ -212,6 +230,20 @@ function ServiceDetailPage() {
           : `fail ${node.consecutive_failures}`,
       }))
 
+  const enabledProviders = useMemo(
+    () => enabledHealthProviders(service?.domains ?? []),
+    [service],
+  )
+  const activeProviders =
+    selectedProviders?.filter((provider) => enabledProviders.includes(provider)) ??
+    enabledProviders
+  const effectiveProviders =
+    activeProviders.length > 0 ? activeProviders : enabledProviders
+  const providerStatuses = useMemo(
+    () => providerHealthStatuses(logItems, enabledProviders),
+    [logItems, enabledProviders],
+  )
+
   return (
     <QueryState
       isLoading={isLoading}
@@ -236,14 +268,22 @@ function ServiceDetailPage() {
               <>
                 <LbModeTile mode={service.lb_mode} />
                 <HealthCheckBadge status={service.health_status} />
-                <Button size="sm" onClick={() => setEditOpen(true)}>
-                  <PencilIcon className="size-4" aria-hidden />
-                  Изменить
-                </Button>
-                <Button variant="outline" size="sm" render={<Link to="/services" />}>
-                  <ArrowLeftIcon className="size-4" aria-hidden />
-                  К каталогу
-                </Button>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        aria-label="Изменить"
+                        onClick={() => setEditOpen(true)}
+                      />
+                    }
+                  >
+                    <PencilIcon aria-hidden="true" />
+                  </TooltipTrigger>
+                  <TooltipContent>Изменить</TooltipContent>
+                </Tooltip>
               </>
             }
           />
@@ -293,11 +333,22 @@ function ServiceDetailPage() {
             ]}
           />
 
+          <HealthProviderStatusTiles
+            enabled={enabledProviders}
+            selected={effectiveProviders}
+            statuses={providerStatuses}
+            onChange={setSelectedProviders}
+          />
+
           <section
             aria-label="Мониторинг"
             className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"
           >
-            <UptimeChart items={logItems} isLoading={logQuery.isLoading} />
+            <ServiceHealthMonitor
+              items={logItems}
+              selectedProviders={effectiveProviders}
+              isLoading={logQuery.isLoading}
+            />
             <Frame dense spacing="sm" className="min-w-0 w-full">
               <FrameHeader>
                 <FrameTitle>Failover</FrameTitle>
@@ -311,30 +362,6 @@ function ServiceDetailPage() {
             </Frame>
           </section>
 
-          <Frame dense spacing="sm" className="w-full">
-            <FrameHeader>
-              <FrameTitle>Журнал проб</FrameTitle>
-              <FrameDescription>
-                Cloudflare = Worker с edge, не Health Checks API
-              </FrameDescription>
-            </FrameHeader>
-            <FramePanel>
-              <HealthTimeline
-                events={logItems.map((row) => ({
-                  id: row.id,
-                  hostname: row.ip,
-                  type: row.provider,
-                  status: row.status,
-                  latency_ms: row.latency_ms,
-                  error: row.error,
-                  checked_at: row.checked_at,
-                  colo: row.colo,
-                  provider: row.provider,
-                }))}
-              />
-            </FramePanel>
-          </Frame>
-
           {service.ips.length === 0 && service.domains.length === 0 ? (
             <EmptyState
               title="Пустой сервис"

apps/web/src/routes/_auth/services/$serviceId/route.tsx

@@ -8,14 +8,15 @@ import {
 } from '@/queries'
 
 export const Route = createFileRoute('/_auth/services/$serviceId')({
-  loader: ({ context: { queryClient }, params }) => {
+  loader: async ({ context: { queryClient }, params }) => {
     const id = Number(params.serviceId)
-    return Promise.all([
+    const [view] = await Promise.all([
       queryClient.ensureQueryData(serviceViewQueryOptions(id)),
       queryClient.ensureQueryData(serviceOverviewQueryOptions(id)),
       queryClient.ensureQueryData(serviceHealthLogQueryOptions(id)),
       queryClient.ensureQueryData(serviceNodesQueryOptions(id)),
     ])
+    return { breadcrumb: view.name }
   },
   component: ServiceLayout,
 })

packages/db/migrations/024_service_cert_monitoring.sql

@@ -0,0 +1,37 @@
+ALTER TABLE service_bindings ADD COLUMN cert_monitoring TEXT NOT NULL DEFAULT 'auto'
+  CHECK (cert_monitoring IN ('auto', 'required', 'skipped'));
+
+ALTER TABLE certificates ADD COLUMN service_id INTEGER REFERENCES services(id) ON DELETE SET NULL;
+
+UPDATE service_bindings
+SET cert_monitoring = COALESCE(
+  (
+    SELECT d.cert_monitoring FROM domains d
+    WHERE d.id = service_bindings.domain_id
+  ),
+  'auto'
+)
+WHERE hostname = '@';
+
+UPDATE service_bindings
+SET cert_monitoring = COALESCE(
+  (
+    SELECT s.cert_monitoring FROM subdomains s
+    WHERE s.domain_id = service_bindings.domain_id
+      AND s.name = service_bindings.hostname
+  ),
+  'auto'
+)
+WHERE hostname != '@';
+
+UPDATE certificates
+SET service_id = (
+  SELECT sb.service_id
+  FROM service_bindings sb
+  JOIN domains d ON d.id = sb.domain_id
+  WHERE CASE
+    WHEN sb.hostname = '@' THEN d.zone_name
+    ELSE sb.hostname || '.' || d.zone_name
+  END = certificates.hostname
+  LIMIT 1
+);

packages/db/src/repos.ts

@@ -851,6 +851,7 @@ function mapServiceBinding(
     health_check_timeout_ms: row.health_check_timeout_ms,
     health_check_verify_tls: row.health_check_verify_tls,
     ...mapHealthFields(row),
+    cert_monitoring: row.cert_monitoring ?? "auto",
     routing_strategy: row.routing_strategy as LbMode,
     operation_version: row.operation_version,
     created_at: row.created_at,
@@ -1530,6 +1531,7 @@ export interface BindingLbPatch {
   health_check_provider?: HealthCheckProvider;
   health_check_providers?: HealthCheckProvider[];
   health_check_aggregate?: HealthCheckAggregate;
+  cert_monitoring?: string;
 }
 
 export function updateBindingLbConfig(
@@ -1560,6 +1562,8 @@ export function updateBindingLbConfig(
     update.health_check_timeout_ms = patch.health_check_timeout_ms;
   if (patch.health_check_verify_tls !== undefined)
     update.health_check_verify_tls = patch.health_check_verify_tls;
+  if (patch.cert_monitoring !== undefined)
+    update.cert_monitoring = patch.cert_monitoring;
   Object.assign(update, healthProviderColumns(patch));
   db.update(serviceBindings)
     .set(update)
@@ -1669,7 +1673,7 @@ const SERVICE_BINDING_SELECT_COLUMNS = `sb.id, sb.domain_id, sb.service_id, sb.h
   sb.lb_mode, sb.health_check_enabled, sb.health_check_type, sb.health_check_port,
   sb.health_check_path, sb.health_check_expected_status, sb.health_check_interval_sec,
   sb.health_check_timeout_ms, sb.health_check_verify_tls, sb.health_check_provider,
-  sb.health_check_providers, sb.health_check_aggregate, sb.cname_target,
+  sb.health_check_providers, sb.health_check_aggregate, sb.cert_monitoring, sb.cname_target,
   d.zone_name, d.group_id, g.name AS group_name,
   s.name AS service_name, s.slug AS service_slug,
   dr.content AS target_ip, dr.sync_status,
@@ -1733,6 +1737,7 @@ function enrichServiceBindingView(
   return {
     ...row,
     cname_target: row.cname_target ?? null,
+    cert_monitoring: row.cert_monitoring ?? "auto",
     ...mapHealthFields(row),
     target_ips,
     target_ip: target_ips[0] ?? null,
@@ -1914,26 +1919,69 @@ export function deleteBinding(db: Db, id: number): void {
 
 // --- Certificates ---
 
+const CERTIFICATE_SELECT = `c.id, c.domain_id, c.subdomain_id, c.service_id, c.hostname,
+  c.expires_at, c.last_checked_at, c.last_error, c.status, c.created_at, c.updated_at,
+  s.name AS service_name`;
+
+type CertificateRow = {
+  id: number;
+  domain_id: number;
+  subdomain_id: number | null;
+  service_id: number | null;
+  hostname: string;
+  expires_at: string | null;
+  last_checked_at: string | null;
+  last_error: string | null;
+  status: string;
+  created_at: string;
+  updated_at: string;
+  service_name: string | null;
+};
+
+function mapCertificate(row: CertificateRow): Certificate {
+  return {
+    id: row.id,
+    domain_id: row.domain_id,
+    subdomain_id: row.subdomain_id,
+    service_id: row.service_id ?? null,
+    service_name: row.service_name ?? null,
+    hostname: row.hostname,
+    expires_at: row.expires_at,
+    last_checked_at: row.last_checked_at,
+    last_error: row.last_error,
+    status: row.status,
+    created_at: row.created_at,
+    updated_at: row.updated_at,
+  };
+}
+
 export function listCertificates(db: Db, status?: string): Certificate[] {
-  if (status) {
-    return db
-      .select()
-      .from(certificates)
-      .where(eq(certificates.status, status))
-      .orderBy(asc(certificates.expires_at))
-      .all() as Certificate[];
-  }
-  return db
-    .select()
-    .from(certificates)
-    .orderBy(asc(certificates.expires_at))
-    .all() as Certificate[];
+  const rows = status
+    ? db.all<CertificateRow>(sql`
+        SELECT ${sql.raw(CERTIFICATE_SELECT)}
+        FROM certificates c
+        LEFT JOIN services s ON s.id = c.service_id
+        WHERE c.status = ${status}
+        ORDER BY c.expires_at ASC
+      `)
+    : db.all<CertificateRow>(sql`
+        SELECT ${sql.raw(CERTIFICATE_SELECT)}
+        FROM certificates c
+        LEFT JOIN services s ON s.id = c.service_id
+        ORDER BY c.expires_at ASC
+      `);
+  return rows.map(mapCertificate);
 }
 
 export function getCertificate(db: Db, id: number): Certificate {
-  const row = db.select().from(certificates).where(eq(certificates.id, id)).get();
+  const row = db.all<CertificateRow>(sql`
+    SELECT ${sql.raw(CERTIFICATE_SELECT)}
+    FROM certificates c
+    LEFT JOIN services s ON s.id = c.service_id
+    WHERE c.id = ${id}
+  `)[0];
   if (!row) throw new NotFoundError(`certificate ${id}`);
-  return row as Certificate;
+  return mapCertificate(row);
 }
 
 export function upsertCertificateCheck(
@@ -1944,6 +1992,7 @@ export function upsertCertificateCheck(
   expiresAt: string | null,
   status: string,
   lastError: string | null,
+  serviceId?: number | null,
 ): Certificate {
   const existing = db
     .select()
@@ -1956,6 +2005,7 @@ export function upsertCertificateCheck(
       .set({
         domain_id: domainId,
         subdomain_id: subdomainId,
+        service_id: serviceId === undefined ? existing.service_id : serviceId,
         expires_at: expiresAt,
         last_checked_at: sql`datetime('now')`,
         last_error: lastError,
@@ -1972,6 +2022,7 @@ export function upsertCertificateCheck(
     .values({
       domain_id: domainId,
       subdomain_id: subdomainId,
+      service_id: serviceId ?? null,
       hostname,
       expires_at: expiresAt,
       last_checked_at: sql`datetime('now')`,

packages/db/src/schema.ts

@@ -177,6 +177,7 @@ export const serviceBindings = sqliteTable(
     health_check_aggregate: text("health_check_aggregate")
       .notNull()
       .default("majority"),
+    cert_monitoring: text("cert_monitoring").notNull().default("auto"),
     routing_strategy: text("routing_strategy").notNull().default("round_robin"),
     operation_version: integer("operation_version").notNull().default(0),
     created_at: text("created_at")
@@ -324,6 +325,9 @@ export const certificates = sqliteTable("certificates", {
   subdomain_id: integer("subdomain_id").references(() => subdomains.id, {
     onDelete: "set null",
   }),
+  service_id: integer("service_id").references(() => services.id, {
+    onDelete: "set null",
+  }),
   hostname: text("hostname").notNull().unique(),
   expires_at: text("expires_at"),
   last_checked_at: text("last_checked_at"),

packages/shared/src/schemas.ts

@@ -178,6 +178,7 @@ export const serviceDomainBindingSchema = z
     health_check_provider: healthCheckProviderSchema.catch('local'),
     health_check_providers: healthCheckProvidersSchema.catch(['local']),
     health_check_aggregate: healthCheckAggregateSchema.catch('majority'),
+    cert_monitoring: certMonitoringSchema.default('auto'),
     sync_status: z.string().nullable().default(null),
   })
   .transform((binding) => ({
@@ -266,6 +267,7 @@ export const serviceBindingSchema = z
     health_check_interval_sec: z.number().default(30),
     health_check_timeout_ms: z.number().default(3000),
     health_check_verify_tls: z.coerce.boolean().default(false),
+    cert_monitoring: certMonitoringSchema.default('auto'),
     sync_status: z.string().nullable().default(null),
     created_at: z.string(),
     updated_at: z.string(),
@@ -303,6 +305,8 @@ export const certificateSchema = z.object({
   id: z.number(),
   domain_id: z.number(),
   subdomain_id: z.number().nullable(),
+  service_id: z.number().nullable().optional().default(null),
+  service_name: z.string().nullable().optional().default(null),
   hostname: z.string(),
   expires_at: z.string().nullable(),
   last_checked_at: z.string().nullable(),
@@ -312,6 +316,19 @@ export const certificateSchema = z.object({
   updated_at: z.string(),
 })
 
+export const serviceCertificateRowSchema = z.object({
+  binding_id: z.number(),
+  domain_id: z.number(),
+  service_id: z.number(),
+  hostname: z.string(),
+  cert_monitoring: certMonitoringSchema,
+  id: z.number().nullable(),
+  status: z.string(),
+  expires_at: z.string().nullable(),
+  last_checked_at: z.string().nullable(),
+  last_error: z.string().nullable(),
+})
+
 export type Group = z.infer<typeof groupSchema>
 export type GroupWithStats = z.infer<typeof groupWithStatsSchema>
 export type Service = z.infer<typeof serviceSchema>
@@ -324,6 +341,7 @@ export type Domain = z.infer<typeof domainSchema>
 export type DomainListItem = z.infer<typeof domainListItemSchema>
 export type DnsRecord = z.infer<typeof dnsRecordSchema>
 export type Certificate = z.infer<typeof certificateSchema>
+export type ServiceCertificateRow = z.infer<typeof serviceCertificateRowSchema>
 
 export const createGroupSchema = z.object({
   name: z.string().min(1, 'Укажите название'),

packages/shared/src/types.ts

@@ -111,6 +111,8 @@ export interface Certificate {
   id: number;
   domain_id: number;
   subdomain_id: number | null;
+  service_id: number | null;
+  service_name: string | null;
   hostname: string;
   expires_at: string | null;
   last_checked_at: string | null;
@@ -139,6 +141,7 @@ export interface ServiceBinding {
   health_check_provider: HealthCheckProvider;
   health_check_providers: HealthCheckProvider[];
   health_check_aggregate: HealthCheckAggregate;
+  cert_monitoring: string;
   routing_strategy: LbMode;
   operation_version: number;
   created_at: string;
@@ -173,6 +176,7 @@ export interface ServiceBindingView {
   health_check_provider: HealthCheckProvider;
   health_check_providers: HealthCheckProvider[];
   health_check_aggregate: HealthCheckAggregate;
+  cert_monitoring: string;
   sync_status: string | null;
   created_at: string;
   updated_at: string;
@@ -201,6 +205,7 @@ export interface ServiceDomainBindingView {
   health_check_provider: HealthCheckProvider;
   health_check_providers: HealthCheckProvider[];
   health_check_aggregate: HealthCheckAggregate;
+  cert_monitoring: string;
   sync_status: string | null;
 }