Adding InfluxDB test connection

Author: haoruizhou

flight-recorder/public/pwa-192x192.svg

@@ -1,21 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import { 
-  Circle, 
-  Square, 
-  CloudUpload, 
-  Trash2, 
-  Database, 
+import {
+  Circle,
+  Square,
+  CloudUpload,
+  Trash2,
+  Database,
   AlertCircle,
   CheckCircle2,
   Activity,
-  Settings,
   Globe,
   RefreshCw,
   Wifi,
-  WifiOff
+  WifiOff,
+  FlaskConical
 } from 'lucide-react';
 import { loggingService } from './services/LoggingService';
 import { syncService } from './services/SyncService';
+import type { ConnectionTestResult } from './services/SyncService';
 import { webSocketService } from './services/WebSocketService';
 import type { ConnectionStatus } from './services/WebSocketService';
 import { loggingHandler } from './services/LoggingHandler';
@@ -26,6 +27,8 @@ const FlightDataRecorder: React.FC = () => {
   const [totalCount, setTotalCount] = useState(0);
   const [isSyncing, setIsSyncing] = useState(syncService.isSyncing());
   const [syncProgress, setSyncProgress] = useState({ processed: 0, total: 0 });
+  const [connTest, setConnTest] = useState<ConnectionTestResult | null>(null);
+  const [isTesting, setIsTesting] = useState(false);
 
   // Connection state
   const [wsStatus, setWsStatus] = useState<ConnectionStatus>({ 
@@ -36,13 +39,17 @@ const FlightDataRecorder: React.FC = () => {
 
   // Settings for InfluxDB
   const [influxSettings, setInfluxSettings] = useState({
-    url: localStorage.getItem('influx-url') || 'http://localhost:8181',
+    url: localStorage.getItem('influx-url') || 'https://influxdb3.westernformularacing.org',
     token: localStorage.getItem('influx-token') || '',
     org: localStorage.getItem('influx-org') || 'WFR',
-    bucket: localStorage.getItem('influx-bucket') || 'WFR25'
+    bucket: localStorage.getItem('influx-bucket') || 'WFR26',
   });
 
   useEffect(() => {
+    // Legacy cleanup: SSO-cookie mode no longer uses CF service-token fields.
+    localStorage.removeItem('influx-cfClientId');
+    localStorage.removeItem('influx-cfClientSecret');
+
     // Initialize standard handlers
     loggingHandler.initialize();
     webSocketService.initialize();
@@ -119,6 +126,18 @@ const FlightDataRecorder: React.FC = () => {
     localStorage.setItem(`influx-${key}`, value);
   };
 
+  const handleTestConnection = async () => {
+    setIsTesting(true);
+    setConnTest(null);
+    const result = await syncService.testConnection(
+      influxSettings.url,
+      influxSettings.token,
+      influxSettings.bucket
+    );
+    setConnTest(result);
+    setIsTesting(false);
+  };
+
   const saveWsUrl = () => {
     if (customWsUrl) {
       localStorage.setItem('custom-ws-url', customWsUrl);
@@ -138,7 +157,7 @@ const FlightDataRecorder: React.FC = () => {
             </div>
             WFR Flight Recorder
           </h1>
-          <p className="text-slate-400 mt-1 font-medium italic">High-Fidelity Telemetry Logging</p>
+          <p className="text-slate-400 mt-1 font-medium italic">ehh we will get our antenna figured out soon</p>
         </div>
 
         <div className="flex items-center gap-3">
@@ -286,10 +305,23 @@ const FlightDataRecorder: React.FC = () => {
                   className="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 font-mono text-sm focus:ring-2 focus:ring-blue-500 outline-none"
                 />
               </div>
+              <p className="text-[10px] text-slate-500 leading-relaxed border border-slate-700/60 rounded-xl px-3 py-2 bg-slate-900/60">
+                Cloudflare Access uses your browser SSO session. Sync requests include cookies automatically.
+              </p>
             </div>
           </div>
 
           <div className="mt-auto pt-6 border-t border-slate-700/50">
+            {connTest && (
+              <div className={`mb-4 flex items-start gap-2 px-4 py-3 rounded-xl text-sm font-mono border ${
+                connTest.ok
+                  ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
+                  : 'bg-red-500/10 border-red-500/30 text-red-400'
+              }`}>
+                {connTest.ok ? <CheckCircle2 size={16} className="mt-0.5 shrink-0" /> : <AlertCircle size={16} className="mt-0.5 shrink-0" />}
+                <span>{connTest.message}</span>
+              </div>
+            )}
             {isSyncing && (
               <div className="mb-4">
                 <div className="flex justify-between text-[10px] font-black text-emerald-400 uppercase tracking-widest mb-2">
@@ -305,14 +337,24 @@ const FlightDataRecorder: React.FC = () => {
               </div>
             )}
 
-            <button 
-              disabled={isSyncing || unsyncedCount === 0}
-              onClick={handleSync}
-              className="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-black py-5 rounded-2xl flex items-center justify-center gap-3 transition-all shadow-xl shadow-emerald-900/20 uppercase tracking-widest text-lg"
-            >
-              {isSyncing ? <Activity className="animate-spin" size={24} /> : <CloudUpload size={24} />}
-              {isSyncing ? 'Synchronizing...' : 'Upload Data to InfluxDB'}
-            </button>
+            <div className="flex gap-3">
+              <button
+                disabled={isTesting || isSyncing}
+                onClick={handleTestConnection}
+                className="flex items-center justify-center gap-2 px-5 py-5 rounded-2xl font-black text-sm uppercase tracking-widest border-2 border-slate-600 hover:border-blue-500 text-slate-400 hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              >
+                {isTesting ? <Activity className="animate-spin" size={18} /> : <FlaskConical size={18} />}
+                Test
+              </button>
+              <button
+                disabled={isSyncing || unsyncedCount === 0}
+                onClick={handleSync}
+                className="flex-1 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-black py-5 rounded-2xl flex items-center justify-center gap-3 transition-all shadow-xl shadow-emerald-900/20 uppercase tracking-widest text-lg"
+              >
+                {isSyncing ? <Activity className="animate-spin" size={24} /> : <CloudUpload size={24} />}
+                {isSyncing ? 'Synchronizing...' : 'Upload to InfluxDB'}
+              </button>
+            </div>
           </div>
         </div>
       </div>

flight-recorder/public/pwa-512x512.svg

@@ -1,6 +1,11 @@
-import { loggingService, type CanFrame } from './LoggingService';
+import { loggingService } from './LoggingService';
 import { createCanProcessor } from '../utils/canProcessor';
 
+export interface ConnectionTestResult {
+  ok: boolean;
+  message: string;
+}
+
 export class SyncService {
   private syncing = false;
   private processor: any = null;
@@ -57,7 +62,13 @@ export class SyncService {
         }
 
         if (lineProtocolBatch.length > 0) {
-          await this.uploadToInflux(url, token, org, bucket, lineProtocolBatch);
+          await this.uploadToInflux(
+            url,
+            token,
+            org,
+            bucket,
+            lineProtocolBatch
+          );
         }
 
         const ids = frames.map(f => f.id!).filter(id => id !== undefined);
@@ -78,6 +89,52 @@ export class SyncService {
     }
   }
 
+  public async testConnection(
+    url: string,
+    token: string,
+    bucket: string
+  ): Promise<ConnectionTestResult> {
+    try {
+      const response = await fetch(`${url}/api/v3/query_sql`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ db: bucket, q: 'SELECT 1' }),
+      });
+
+      if (response.ok) {
+        return { ok: true, message: `Connected to ${bucket}` };
+      } else {
+        const redirectedToAccess = response.redirected && /cdn-cgi\/access\/login/i.test(response.url);
+        if (redirectedToAccess) {
+          return {
+            ok: false,
+            message: `Cloudflare Access login required. Open ${url} in this browser and sign in with Google, then test again.`,
+          };
+        }
+
+        const text = await response.text();
+        const accessHint = response.status === 401 || response.status === 403
+          ? ' Cloudflare Access session may be missing; sign in to Access in this browser.'
+          : '';
+        return { ok: false, message: `${response.status} ${response.statusText}: ${text.slice(0, 120)}${accessHint}` };
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      // "Load failed" / "Failed to fetch" means network-level failure (no server, CORS, etc.)
+      const isNetworkErr = /load failed|failed to fetch|network/i.test(msg);
+      return {
+        ok: false,
+        message: isNetworkErr
+          ? `Cannot reach ${url} — check URL/network. If this endpoint is behind Cloudflare Access, sign in to Access in this browser first.`
+          : msg,
+      };
+    }
+  }
+
   private escapeTag(val: string): string {
     return val.replace(/ /g, '\\ ').replace(/,/g, '\\,').replace(/=/g, '\\=');
   }
@@ -94,6 +151,7 @@ export class SyncService {
 
     const response = await fetch(writeUrl, {
       method: 'POST',
+      credentials: 'include',
       headers: {
         'Authorization': `Token ${token}`,
         'Content-Type': 'text/plain; charset=utf-8',

flight-recorder/src/App.tsx

@@ -61,6 +61,7 @@ export async function decodeAndIngestUsingDbc(params: {
 // Use local.dbc for development, example.dbc for production
 let dbcFile = import.meta.env.DEV ? localDbc : exampleDbc;
 let usingCache = false;
+const dbcDebugSeen = new Set<number>();
 
 // Simple type definitions for our use, align with InfluxDB3 schema for consistency
 // InfluxDB3 Schema: id -> canId, name -> messageName, signalName, sensorReading, time
@@ -377,7 +378,10 @@ export function decodeCanMessage(
     }
 
     if (canId === 0x18FF50E5 || canId > 0x7FF || (decoded === null && canId !== 1999)) {
-       console.debug(`[DBC Debug] rawId=${canId} (0x${canId.toString(16)}), dbcId=${dbcId} (0x${dbcId.toString(16)}), decodedName=${decoded?.name ?? 'null'}`);
+      if (!dbcDebugSeen.has(canId)) {
+        dbcDebugSeen.add(canId);
+        console.debug(`[DBC Debug] rawId=${canId} (0x${canId.toString(16)}), dbcId=${dbcId} (0x${dbcId.toString(16)}), decodedName=${decoded?.name ?? 'null'}`);
+      }
     }
 
     const rawDataStr = messageData

flight-recorder/src/services/SyncService.ts

@@ -9,22 +9,25 @@ export default defineConfig({
     tailwindcss(),
     VitePWA({
       registerType: 'autoUpdate',
-      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
+      includeAssets: ['pwa-192x192.svg', 'pwa-512x512.svg'],
       manifest: {
         name: 'WFR Flight Data Recorder',
         short_name: 'FDR',
         description: 'Standalone High-Fidelity Data Logging for WFR DAQ',
         theme_color: '#0f172a',
+        background_color: '#0f172a',
+        display: 'standalone',
         icons: [
           {
-            src: 'pwa-192x192.png',
+            src: 'pwa-192x192.svg',
             sizes: '192x192',
-            type: 'image/png'
+            type: 'image/svg+xml'
           },
           {
-            src: 'pwa-512x512.png',
+            src: 'pwa-512x512.svg',
             sizes: '512x512',
-            type: 'image/png'
+            type: 'image/svg+xml',
+            purpose: 'any maskable'
           }
         ]
       }

flight-recorder/src/utils/canProcessor.ts

@@ -105,6 +105,7 @@ export async function decodeAndIngestUsingDbc(params: {
 // Use local.dbc for development, example.dbc for production
 let dbcFile = import.meta.env.DEV ? localDbc : exampleDbc;
 let usingCache = false;
+const dbcDebugSeen = new Set<number>();
 
 // Simple type definitions for our use, align with InfluxDB3 schema for consistency
 // InfluxDB3 Schema: id -> canId, name -> messageName, signalName, sensorReading, time
@@ -421,7 +422,10 @@ export function decodeCanMessage(
     }
 
     if (canId === 0x18FF50E5 || canId > 0x7FF || (decoded === null && canId !== 1999)) {
-       console.debug(`[DBC Debug] rawId=${canId} (0x${canId.toString(16)}), dbcId=${dbcId} (0x${dbcId.toString(16)}), decodedName=${decoded?.name ?? 'null'}`);
+      if (!dbcDebugSeen.has(canId)) {
+        dbcDebugSeen.add(canId);
+        console.debug(`[DBC Debug] rawId=${canId} (0x${canId.toString(16)}), dbcId=${dbcId} (0x${dbcId.toString(16)}), decodedName=${decoded?.name ?? 'null'}`);
+      }
     }
 
     const rawDataStr = messageData