fix(ff): le panneau API FF Nancy affichait une coquille vide + URL configurable

Deux problèmes distincts, dont un mal diagnostiqué au départ. 1. FORMAT DE RÉPONSE — cause réelle du « test ne donne rien ». Le serveur fonctionne (vérifié : HTTP 200, synchro du jour, 33 tables), mais il renvoie { sync: [{ table_name, last_sync, rows_synced, status, error_msg }] } alors que l'application lisait { lastSync, tables: [{ nom, derniereSync, nbLignes }] }. Les champs n'existaient pas : le panneau s'affichait vide sans erreur, la requête HTTP ayant réussi. normalizeSyncStatus() traduit désormais les deux formes, et le tableau expose l'état par table (une table en erreur est justement l'information qu'on vient chercher). 2. URL NON CONFIGURABLE. FF_API_BASE était figée au chargement du module depuis process.env, sans champ dans l'interface : impossible de corriger l'adresse sans redéployer. Elle est maintenant résolue à l'appel — réglage enregistré, puis variable d'environnement, puis défaut — avec un champ, un bouton Enregistrer et un test dans Paramètres. Le test distingue désormais DNS, connexion refusée, délai dépassé et code HTTP, et affiche l'adresse réellement appelée : un « HTTP 503 » nu ne permettait pas de séparer une mauvaise URL d'une panne. /api/ff-status renvoie le même détail. Ajout au passage du paramètre `compute` dans la doc API des Paramètres. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y26nRZxTR57K7h8yqsF675
2026-10-11 17:26:32 +02:00 · 2026-08-06 10:56:29 +00:00
1 parent 18edda7167
commit 94e82aa404
@@ -5,7 +5,7 @@ import { Save, Eye, EyeOff, CheckCircle, AlertCircle, Loader2, RefreshCw, Sun, M
 import { useTheme } from "next-themes";
 import { useGridStore } from "@/features/grid/store/use-grid-store";
 import { useDbSettingsStore } from "@/features/settings/store/use-db-settings-store";
-import { testDatabaseConnection, saveDatabaseSettings, getSavedDatabaseConfig, saveQlikSettings, testQlikConnection } from "@/features/settings/actions";
+import { testDatabaseConnection, saveDatabaseSettings, getSavedDatabaseConfig, saveQlikSettings, testQlikConnection, saveFfApiSettings, testFfApiConnection } from "@/features/settings/actions";
 import { useEffect } from "react";
 import { UserManagement } from "@/features/admin/components/user-management";
 import { ApiKeyManagement } from "@/features/admin/components/api-key-management";
@@ -38,40 +38,92 @@ function Field({ label, hint, children }: { label: string; hint?: string; childr
    );
 }

-interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; }
+interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; statut?: string; erreur?: string | null; }
 interface FfSyncStatus { lastSync: string; tables: FfSyncTable[]; }

 function FfApiStatusSection() {
    const [status, setStatus] = useState<FfSyncStatus | null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
+    const [url, setUrl] = useState("");
+    const [savedUrl, setSavedUrl] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [testedUrl, setTestedUrl] = useState<string | null>(null);

-    const fetchStatus = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const res = await fetch("/api/ff-status");
-            if (!res.ok) throw new Error(`HTTP ${res.status}`);
-            setStatus(await res.json());
-        } catch (e) {
-            setError(e instanceof Error ? e.message : "Erreur inconnue");
-        } finally {
-            setLoading(false);
-        }
+    // Charge l'URL enregistrée pour la préremplir (vide = valeur par défaut).
+    useEffect(() => {
+        getSavedDatabaseConfig()
+            .then((cfg) => {
+                setSavedUrl(cfg?.ffApiBaseUrl ?? null);
+                if (cfg?.ffApiBaseUrl) setUrl(cfg.ffApiBaseUrl);
+            })
+            .catch(() => { /* réglage optionnel : on laisse le champ vide */ });
    }, []);

-    useEffect(() => { fetchStatus(); }, [fetchStatus]);
+    const runTest = useCallback((candidate?: string) => {
+        setLoading(true);
+        setError(null);
+        setStatus(null);
+        testFfApiConnection(candidate)
+            .then((res) => {
+                setTestedUrl(res.url);
+                if (res.success) setStatus(res.status as FfSyncStatus);
+                else setError(res.error ?? "Échec inconnu");
+            })
+            .catch((e) => setError(e instanceof Error ? e.message : "Erreur inconnue"))
+            .finally(() => setLoading(false));
+    }, []);
+
+    useEffect(() => { runTest(); }, [runTest]);
+
+    const save = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            const res = await saveFfApiSettings(url);
+            if (!res.success) { setError(res.error ?? "Enregistrement impossible"); return; }
+            setSavedUrl(url.trim() || null);
+            runTest(url);
+        } finally {
+            setSaving(false);
+        }
+    };

    return (
        <Section title="API FF Nancy" subtitle="Source des données produits — synchronisation nuit depuis SQL Server (données J-1)">
-            <div className="flex items-center gap-3">
-                <button onClick={fetchStatus} disabled={loading} className="apple-btn-secondary h-9 px-4">
-                    {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
-                    Vérifier le statut
+            <Field label="URL de l'API" hint="Laisser vide pour utiliser la valeur par défaut (https://api.ffnancy.fr)">
+                <input
+                    type="text"
+                    placeholder="https://api.ffnancy.fr"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") void save(); }}
+                    className="apple-input w-full"
+                />
+            </Field>
+
+            <div className="flex items-center gap-3 flex-wrap">
+                <button onClick={save} disabled={saving} className="apple-btn h-9 px-4">
+                    {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                    Enregistrer
                </button>
-                {error && <span className="text-[12px] text-red-400">{error}</span>}
+                <button onClick={() => runTest(url)} disabled={loading} className="apple-btn-secondary h-9 px-4">
+                    {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
+                    Tester
+                </button>
+                {status && <span className="text-[12px] text-emerald-400 flex items-center gap-1"><CheckCircle className="w-3.5 h-3.5" /> Connexion OK</span>}
+                {error && <span className="text-[12px] text-red-400 flex items-center gap-1"><AlertCircle className="w-3.5 h-3.5" /> {error}</span>}
            </div>

+            {/* L'URL réellement appelée : évite de croire qu'on teste celle du champ
+                alors que le réglage enregistré ou la variable d'environnement prime. */}
+            {testedUrl && (
+                <p className="text-[11px] text-[var(--text-muted)]">
+                    Adresse testée : <span className="font-mono">{testedUrl}</span>
+                    {!savedUrl && <> — valeur par défaut, aucun réglage enregistré</>}
+                </p>
+            )}
+
            {status && (
                <div className="space-y-2 mt-2">
                    <p className="text-[12px] text-[var(--text-secondary)]">
@@ -85,6 +137,7 @@ function FfApiStatusSection() {
                                        <th className="text-left px-3 py-2 font-medium text-[var(--text-secondary)]">Table</th>
                                        <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Sync</th>
                                        <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Lignes</th>
+                                        <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">État</th>
                                    </tr>
                                </thead>
                                <tbody>
@@ -97,6 +150,12 @@ function FfApiStatusSection() {
                                            <td className="px-3 py-2 text-right text-[var(--text-muted)]">
                                                {t.nbLignes?.toLocaleString("fr-FR") ?? "—"}
                                            </td>
+                                            {/* Une table en erreur est précisément ce qu'on vient chercher ici. */}
+                                            <td className="px-3 py-2 text-right">
+                                                {t.statut === "ok"
+                                                    ? <span className="text-emerald-400">ok</span>
+                                                    : <span className="text-red-400" title={t.erreur ?? undefined}>{t.statut ?? "—"}</span>}
+                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
@@ -1,10 +1,24 @@
 import { NextResponse } from "next/server";
-import { getSyncStatus } from "@/lib/api-ff-client";
+import { testFfApiConnection } from "@/features/settings/actions";

+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/ff-status — état de l'API REST FF Nancy.
+ *
+ * S'appuie sur le même diagnostic que le bouton « Tester » des Paramètres, afin
+ * qu'un échec dise *pourquoi* (DNS, connexion refusée, délai dépassé, code HTTP)
+ * et *quelle adresse* a été appelée. L'ancienne version renvoyait un 503 sans
+ * détail, impossible à distinguer d'une simple erreur d'URL.
+ */
 export async function GET() {
-    const status = await getSyncStatus();
-    if (!status) {
-        return NextResponse.json({ error: "API FF Nancy non disponible" }, { status: 503 });
+    const res = await testFfApiConnection();
+    if (!res.success) {
+        return NextResponse.json(
+            { error: "API FF Nancy non disponible", url: res.url, detail: res.error },
+            { status: 503 },
+        );
    }
-    return NextResponse.json(status);
+    return NextResponse.json(res.status);
 }