astro-tractstack 2.2.4 → 2.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -8,6 +8,7 @@ import DashboardActivity from './Dashboard_Activity';
 import SankeyDiagram from '../codehooks/SankeyDiagram';
 import EpinetDurationSelector from '../codehooks/EpinetDurationSelector';
 import FetchAnalytics from './state/FetchAnalytics';
+import type { PulseMetrics, SystemMetrics } from './state/FetchAnalytics';
 import type { FullContentMapItem } from '@/types/tractstack';
 
 interface StoryKeepDashboardAnalyticsProps {
@@ -15,12 +16,16 @@ interface StoryKeepDashboardAnalyticsProps {
   initializing?: boolean;
 }
 
-// Helper component for error boundary
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback: ReactNode;
+}
+
 class ErrorBoundary extends Component<
-  { children: ReactNode; fallback: ReactNode },
+  ErrorBoundaryProps,
   { hasError: boolean }
 > {
-  constructor(props: any) {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false };
   }
@@ -37,6 +42,70 @@ class ErrorBoundary extends Component<
   }
 }
 
+// Types derived from Dashboard_Activity.tsx
+interface ActivitySeries {
+  id: string;
+  data: Array<{ x: any; y: number }>;
+}
+
+interface DashboardData {
+  stats: {
+    daily: number;
+    weekly: number;
+    monthly: number;
+  };
+  line: ActivitySeries[];
+  dailyAnonymous: number;
+  dailyKnown: number;
+  weeklyAnonymous: number;
+  weeklyKnown: number;
+  monthlyAnonymous: number;
+  monthlyKnown: number;
+  status?: string;
+}
+
+interface LeadsData {
+  totalLeads: number;
+  status?: string;
+}
+
+// Types derived from SankeyDiagram.tsx
+interface SankeyNode {
+  name: string;
+  id: string;
+}
+
+interface SankeyLink {
+  source: number;
+  target: number;
+  value: number;
+}
+
+interface EpinetData {
+  nodes: SankeyNode[];
+  links: SankeyLink[];
+  status?: string;
+}
+
+// Types derived from EpinetDurationSelector.tsx usage
+interface UserCountItem {
+  id: string;
+  count: number;
+}
+
+interface AnalyticsState {
+  dashboard: DashboardData | null;
+  leads: LeadsData | null;
+  epinet: EpinetData | null;
+  userCounts: UserCountItem[];
+  hourlyNodeActivity: Record<string, number>;
+  pulse: PulseMetrics | null;
+  system: SystemMetrics | null;
+  isLoading: boolean;
+  status: string;
+  error: string | null;
+}
+
 const DurationSelector = ({
   currentDurationHelper,
   setStandardDuration,
@@ -83,22 +152,14 @@ export default function StoryKeepDashboard_Analytics({
   const $epinetCustomFilters = useStore(epinetCustomFilters);
   const [isDownloading, setIsDownloading] = useState(false);
 
-  // Analytics data state
-  const [analytics, setAnalytics] = useState<{
-    dashboard: any;
-    leads: any;
-    epinet: any;
-    userCounts: any[];
-    hourlyNodeActivity: any;
-    isLoading: boolean;
-    status: string;
-    error: string | null;
-  }>({
+  const [analytics, setAnalytics] = useState<AnalyticsState>({
     dashboard: null,
     leads: null,
     epinet: null,
     userCounts: [],
     hourlyNodeActivity: {},
+    pulse: null,
+    system: null,
     isLoading: false,
     status: 'idle',
     error: null,
@@ -128,7 +189,6 @@ export default function StoryKeepDashboard_Analytics({
     });
   };
 
-  // Duration helper for UI
   const currentDurationHelper = useMemo(():
     | 'daily'
     | 'weekly'
@@ -151,7 +211,6 @@ export default function StoryKeepDashboard_Analytics({
     return 'monthly';
   }, [$epinetCustomFilters.startTimeUTC, $epinetCustomFilters.endTimeUTC]);
 
-  // Standard duration setter helper
   const setStandardDuration = useCallback(
     (newValue: 'daily' | 'weekly' | 'monthly') => {
       const nowUTC = new Date();
@@ -171,7 +230,6 @@ export default function StoryKeepDashboard_Analytics({
     [$epinetCustomFilters]
   );
 
-  // Download leads CSV
   const downloadLeadsCSV = async () => {
     if (isDownloading) return;
     try {
@@ -212,12 +270,10 @@ export default function StoryKeepDashboard_Analytics({
     }
   };
 
-  // Helper function for number formatting
   const formatNumber = (num: number) => {
     return new Intl.NumberFormat().format(num);
   };
 
-  // Prepare stats data for display
   const stats = [
     {
       name: 'Past 24 Hours',
@@ -263,6 +319,72 @@ export default function StoryKeepDashboard_Analytics({
         </div>
       )}
 
+      {/* Live Operations Row */}
+      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+        {/* Card 1: Active Visitors */}
+        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-green-500"></span>
+            </span>
+            <dt className="text-sm font-bold text-gray-800">Active Visitors</dt>
+          </div>
+          <dd className="mt-2">
+            <div className="text-2xl font-bold tracking-tight text-cyan-700">
+              {analytics.pulse
+                ? formatNumber(analytics.pulse.activeVisitors)
+                : '-'}
+            </div>
+          </dd>
+        </div>
+
+        {/* Card 2: Traffic Velocity */}
+        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
+          <dt className="text-sm font-bold text-gray-800">Traffic Velocity</dt>
+          <dd className="mt-2">
+            <div className="text-2xl font-bold tracking-tight text-cyan-700">
+              {analytics.pulse ? formatNumber(analytics.pulse.velocity) : '-'}{' '}
+              <span className="text-sm font-normal text-gray-500">/ Hr</span>
+            </div>
+            <div className="mt-1 text-xs text-gray-600">
+              Events (Last Full Hour)
+            </div>
+          </dd>
+        </div>
+
+        {/* Card 3: System Health */}
+        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
+          <dt className="text-sm font-bold text-gray-800">System Health</dt>
+          <dd className="mt-2">
+            {analytics.system ? (
+              <>
+                <div className="flex items-baseline gap-2">
+                  <span
+                    className={`text-2xl font-bold tracking-tight ${analytics.system.waitCount > 0 ? 'text-yellow-600' : 'text-green-600'}`}
+                  >
+                    {analytics.system.waitCount > 0 ? 'Busy' : 'Healthy'}
+                  </span>
+                </div>
+                <div className="mt-1 text-xs text-gray-600">
+                  DB Load:{' '}
+                  {analytics.system.maxOpenConns > 0
+                    ? Math.round(
+                        (analytics.system.openConns /
+                          analytics.system.maxOpenConns) *
+                          100
+                      )
+                    : 0}
+                  %
+                </div>
+              </>
+            ) : (
+              <div className="text-2xl font-bold text-gray-300">-</div>
+            )}
+          </dd>
+        </div>
+      </div>
+
       {/* Stats Cards Grid */}
       <div className="mb-6 grid grid-cols-3 gap-4">
         {stats.map((item) => {
@@ -305,7 +427,6 @@ export default function StoryKeepDashboard_Analytics({
               <hr className="my-1.5 border-gray-100 md:my-3.5" />
 
               <dd>
-                {/* Desktop: side-by-side layout */}
                 <div className="hidden items-end justify-between md:flex">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">
@@ -327,7 +448,6 @@ export default function StoryKeepDashboard_Analytics({
                   </div>
                 </div>
 
-                {/* Mobile: stacked layout */}
                 <div className="md:hidden">
                   <div className="mb-1.5">
                     <div className="text-sm text-gray-600">
@@ -353,7 +473,6 @@ export default function StoryKeepDashboard_Analytics({
           );
         })}
 
-        {/* Total Leads Card */}
         <div className="col-span-3 rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
           <div className="flex items-center justify-between">
             <dt className="text-sm font-bold text-gray-800">Total Leads</dt>
@@ -381,13 +500,11 @@ export default function StoryKeepDashboard_Analytics({
         </div>
       </div>
 
-      {/* Duration Selector */}
       <DurationSelector
         currentDurationHelper={currentDurationHelper}
         setStandardDuration={setStandardDuration}
       />
 
-      {/* Dashboard Activity Chart */}
       <div className="mb-6 overflow-hidden">
         <h3 className="mb-4 text-lg font-bold text-gray-900">
           Activity Over Time
@@ -412,12 +529,10 @@ export default function StoryKeepDashboard_Analytics({
         )}
       </div>
 
-      {/* Separator */}
       <div className="my-8">
         <hr className="border-gray-200" />
       </div>
 
-      {/* User Journey Section */}
       <div className="mb-6 overflow-visible">
         <h3 className="mb-4 text-lg font-bold text-gray-900">
           User Journey Analytics
@@ -466,7 +581,6 @@ export default function StoryKeepDashboard_Analytics({
                     analytics.isLoading || analytics.status === 'loading'
                   }
                   hourlyNodeActivity={analytics.hourlyNodeActivity}
-                  // MODIFICATION: Read availableFilters from the store, not local state
                   availableFilters={$epinetCustomFilters.availableFilters}
                   appliedFilters={$epinetCustomFilters.appliedFilters}
                   onBeliefFilterChange={handleBeliefFilterChange}
@@ -485,7 +599,6 @@ export default function StoryKeepDashboard_Analytics({
                   analytics.isLoading || analytics.status === 'loading'
                 }
                 hourlyNodeActivity={analytics.hourlyNodeActivity}
-                // MODIFICATION: Read availableFilters from the store, not local state
                 availableFilters={$epinetCustomFilters.availableFilters}
                 appliedFilters={$epinetCustomFilters.appliedFilters}
                 onBeliefFilterChange={handleBeliefFilterChange}
@@ -502,7 +615,6 @@ export default function StoryKeepDashboard_Analytics({
               fullContentMap={fullContentMap}
               isLoading={analytics.isLoading || analytics.status === 'loading'}
               hourlyNodeActivity={analytics.hourlyNodeActivity}
-              // MODIFICATION: Read availableFilters from the store, not local state
               availableFilters={$epinetCustomFilters.availableFilters}
               appliedFilters={$epinetCustomFilters.appliedFilters}
               onBeliefFilterChange={handleBeliefFilterChange}

package/templates/src/components/storykeep/state/FetchAnalytics.tsx

@@ -5,12 +5,29 @@ import { TractStackAPI } from '@/utils/api';
 
 const VERBOSE = false;
 
+export interface PulseMetrics {
+  activeVisitors: number;
+  velocity: number;
+}
+
+export interface SystemMetrics {
+  available: boolean;
+  openConns: number;
+  inUse: number;
+  idle: number;
+  waitCount: number;
+  waitDuration: string;
+  maxOpenConns: number;
+}
+
 interface AnalyticsState {
   dashboard: any;
   leads: any;
   epinet: any;
   userCounts: any[];
   hourlyNodeActivity: any;
+  pulse: PulseMetrics | null;
+  system: SystemMetrics | null;
   isLoading: boolean;
   status: string;
   error: string | null;
@@ -127,7 +144,6 @@ class AnalyticsService {
       if (filters.selectedUserId)
         params.append('userId', filters.selectedUserId);
 
-      // MODIFICATION: Properly format appliedFilters for the backend
       if (filters.appliedFilters && filters.appliedFilters.length > 0) {
         params.append('appliedFilters', JSON.stringify(filters.appliedFilters));
       }
@@ -145,6 +161,8 @@ class AnalyticsService {
         epinet: null,
         userCounts: [],
         hourlyNodeActivity: {},
+        pulse: null,
+        system: null,
         isLoading: true,
         status: 'loading',
         error: null,
@@ -153,13 +171,31 @@ class AnalyticsService {
       const api = new TractStackAPI(
         window.TRACTSTACK_CONFIG?.tenantId || 'default'
       );
+
       const endpoint = `/api/v1/analytics/all${params.toString() ? `?${params.toString()}` : ''}`;
-      if (VERBOSE) console.log('🔥 Making API request', { endpoint });
 
-      const response = await api.get(endpoint);
-      if (!response.success)
-        throw new Error(response.error || 'Failed to fetch analytics data');
-      const data = response.data;
+      if (VERBOSE) {
+        console.log('🔥 Making API requests', {
+          analytics: endpoint,
+          pulse: '/api/v1/admin/pulse',
+          system: '/api/v1/admin/db/stats',
+        });
+      }
+
+      const [analyticsResponse, pulseResponse, systemResponse] =
+        await Promise.all([
+          api.get(endpoint),
+          api.get('/api/v1/admin/pulse'),
+          api.get('/api/v1/admin/db/stats'),
+        ]);
+
+      if (!analyticsResponse.success) {
+        throw new Error(
+          analyticsResponse.error || 'Failed to fetch analytics data'
+        );
+      }
+
+      const data = analyticsResponse.data;
 
       const isStillLoading =
         data?.status === 'loading' ||
@@ -173,12 +209,15 @@ class AnalyticsService {
 
       if (isStillLoading) {
         if (VERBOSE) console.log('⏳ Backend data still loading, will poll...');
+
         const partialAnalytics = {
           dashboard: data.dashboard,
           leads: data.leads,
           epinet: data.epinet,
           userCounts: data.userCounts || [],
           hourlyNodeActivity: data.hourlyNodeActivity || {},
+          pulse: pulseResponse.success ? pulseResponse.data?.pulse : null,
+          system: systemResponse.success ? systemResponse.data : null,
           status: 'loading',
           error: null,
           isLoading: true,
@@ -203,6 +242,8 @@ class AnalyticsService {
         epinet: data.epinet,
         userCounts: data.userCounts || [],
         hourlyNodeActivity: data.hourlyNodeActivity || {},
+        pulse: pulseResponse.success ? pulseResponse.data?.pulse : null,
+        system: systemResponse.success ? systemResponse.data : null,
         status: 'complete',
         error: null,
         isLoading: false,
@@ -211,13 +252,12 @@ class AnalyticsService {
       this.setCachedResponse(cacheKey, analyticsData);
       onUpdate(analyticsData);
 
-      // MODIFICATION: Correctly extract top-level availableFilters and update the store
       epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
         ...filters,
         availableFilters: data.availableFilters || [],
       });
 
-      if (VERBOSE) console.log('✅ Analytics request completed successfully');
+      if (VERBOSE) console.log('✅ Analytics requests completed successfully');
       this.activeRequest = null;
     } catch (error) {
       if (error instanceof Error && error.name === 'AbortError') {
@@ -231,6 +271,8 @@ class AnalyticsService {
         epinet: null,
         userCounts: [],
         hourlyNodeActivity: {},
+        pulse: null,
+        system: null,
         status: 'error',
         error:
           error instanceof Error ? error.message : 'Unknown error occurred',