@cybermem/dashboard 0.1.0

package/lib/prometheus/timeseries.ts

@@ -0,0 +1,305 @@
+import { queryRange } from './client'
+import { getAllActiveClients } from './metrics'
+import { chooseStep, formatRangeSeriesByClient, parseDuration } from './utils'
+
+export async function getRequestsTimeSeries(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number | string }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  // Use sum (Cumulative) to show total requests over time
+  const result = await queryRange(
+    `sum by (client_name) (openmemory_requests_total)`,
+    start,
+    now,
+    step
+  )
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds)
+}
+
+export async function getRequestsTimeSeriesByMethod(method: string, duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number | string }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const result = await queryRange(
+    `sum by (client_name) (openmemory_requests_total{operation="${method}"})`,
+    start,
+    now,
+    step
+  )
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds)
+}
+
+export async function getResponseTimeTimeSeries(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number | string }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+
+  const result = await queryRange(
+    'sum by (client_name) (rate(openmemory_request_duration_seconds_sum[5m])) / sum by (client_name) (rate(openmemory_request_duration_seconds_count[5m]))',
+    start,
+    now,
+    '1m'
+  )
+
+  const timeSeries: Array<{ time: number, [client: string]: number }> = []
+  const timeMap = new Map<number, Record<string, number>>()
+
+  result.data.result.forEach((series) => {
+    const clientId = series.metric.client_name || 'unknown'
+    series.values?.forEach(([timestamp, value]) => {
+      if (!timeMap.has(timestamp)) {
+        timeMap.set(timestamp, {})
+      }
+      timeMap.get(timestamp)![clientId] = parseFloat(value) * 1000 // convert to ms
+    })
+  })
+
+  Array.from(timeMap.entries())
+    .sort((a, b) => a[0] - b[0])
+    .forEach(([timestamp, clients]) => {
+      timeSeries.push({
+        time: timestamp,
+        ...clients
+      })
+    })
+
+  return timeSeries
+}
+
+export async function getSuccessRateTimeSeries(duration: string = '1h'): Promise<Array<{ time: number, value: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+
+  const step = chooseStep(duration)
+
+  const result = await queryRange(
+    'sum(rate(openmemory_requests_total{status=~"2.."}[5m])) / sum(rate(openmemory_requests_total[5m]))',
+    start,
+    now,
+    step
+  )
+
+  const series = result.data.result[0]
+  const values = series?.values || []
+
+  // Fill gaps
+  const timeSeries: Array<{ time: number, value: number }> = []
+  const valueMap = new Map<number, number>()
+  values.forEach(([t, v]) => valueMap.set(t, parseFloat(v) * 100))
+
+  const stepSeconds = parseDuration(chooseStep(duration))
+  for (let t = start; t <= now; t += stepSeconds) {
+    // Find closest value
+    let val = 100 // Default to 100% if no data
+    for (let offset = -1; offset <= 1; offset++) {
+      if (valueMap.has(t + offset)) {
+        val = valueMap.get(t + offset)!
+        break
+      }
+    }
+    timeSeries.push({ time: t, value: val })
+  }
+
+  return timeSeries
+}
+
+export async function getSuccessRateTimeSeriesByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number | string }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+
+  // Formula: (requests - errors) / requests * 100
+  // Use raw counters instead of rate() to avoid 0% when no new requests
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+  const [allClients, totalResult, errorResult] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (openmemory_requests_total)`,
+      start,
+      now,
+      step
+    ),
+    queryRange(
+      `sum by (client_name) (openmemory_errors_total)`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  const timeMap = new Map<number, Record<string, { total: number, errors: number }>>()
+
+  // Initialize all timestamps
+  for (let t = start; t <= now; t += stepSeconds) {
+    timeMap.set(t, {})
+    allClients.forEach(client => {
+      timeMap.get(t)![client] = { total: 0, errors: 0 }
+    })
+  }
+
+  // Collect totals
+  totalResult.data.result.forEach((series) => {
+    const clientId = series.metric.client_name || 'unknown'
+
+    series.values?.forEach(([timestamp, value]) => {
+      // Find closest timestamp
+      let targetTs = timestamp
+      if (!timeMap.has(timestamp)) {
+        for (let offset = -1; offset <= 1; offset++) {
+          if (timeMap.has(timestamp + offset)) {
+            targetTs = timestamp + offset
+            break
+          }
+        }
+      }
+
+      if (timeMap.has(targetTs)) {
+        const clients = timeMap.get(targetTs)!
+        if (!clients[clientId]) clients[clientId] = { total: 0, errors: 0 }
+        clients[clientId].total = parseFloat(value)
+      }
+    })
+  })
+
+  // Collect errors
+  errorResult.data.result.forEach((series) => {
+    const clientId = series.metric.client_name || 'unknown'
+
+    series.values?.forEach(([timestamp, value]) => {
+      // Find closest timestamp
+      let targetTs = timestamp
+      if (!timeMap.has(timestamp)) {
+        for (let offset = -1; offset <= 1; offset++) {
+          if (timeMap.has(timestamp + offset)) {
+            targetTs = timestamp + offset
+            break
+          }
+        }
+      }
+
+      if (timeMap.has(targetTs)) {
+        const clients = timeMap.get(targetTs)!
+        if (!clients[clientId]) clients[clientId] = { total: 0, errors: 0 }
+        clients[clientId].errors = parseFloat(value)
+      }
+    })
+  })
+
+  // Calculate success rate percentages: (total - errors) / total * 100
+  const timeSeries: Array<{ time: number, [client: string]: number }> = []
+  Array.from(timeMap.entries())
+    .sort((a, b) => a[0] - b[0])
+    .forEach(([timestamp, clients]) => {
+      const dataPoint: any = {
+        time: timestamp
+      }
+      Object.keys(clients).forEach((client) => {
+        const { total, errors } = clients[client]
+        dataPoint[client] = total > 0 ? ((total - errors) / total) * 100 : 100
+      })
+      timeSeries.push(dataPoint)
+    })
+
+  return timeSeries
+}
+
+// CRUD operation time series
+export async function getCreatesByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const [allClients, result] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (increase(openmemory_requests_total{operation="create"}[${step}]))`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds, allClients, 'client_name', false, true)
+}
+
+export async function getReadsByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const [allClients, result] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (increase(openmemory_requests_total{operation="read"}[${step}]))`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds, allClients, 'client_name', false, true)
+}
+
+export async function getUpdatesByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const [allClients, result] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (increase(openmemory_requests_total{operation="update"}[${step}]))`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds, allClients, 'client_name', false, true)
+}
+
+export async function getDeletesByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const [allClients, result] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (increase(openmemory_requests_total{operation="delete"}[${step}]))`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds, allClients, 'client_name', false, true)
+}
+
+export async function getErrorsByClient(duration: string = '1h'): Promise<Array<{ time: number, [client: string]: number }>> {
+  const now = Math.floor(Date.now() / 1000)
+  const start = now - parseDuration(duration)
+  const step = chooseStep(duration)
+  const stepSeconds = parseDuration(step)
+
+  const [allClients, result] = await Promise.all([
+    getAllActiveClients(duration),
+    queryRange(
+      `sum by (client_name) (increase(openmemory_errors_total[${step}]))`,
+      start,
+      now,
+      step
+    )
+  ])
+
+  return formatRangeSeriesByClient(result, start, now, stepSeconds, allClients, 'client_name', false, true)
+}

package/lib/prometheus/utils.ts

@@ -0,0 +1,176 @@
+import { PrometheusQueryResult } from './client'
+
+export function parseDuration(duration: string): number {
+  const match = duration.match(/^(\d+)([smhdwMYy])$/)
+  if (!match) return 3600
+
+  const [, amount, unit] = match
+  const multipliers: Record<string, number> = {
+    s: 1,
+    m: 60,
+    h: 3600,
+    d: 86400,
+    w: 604800,      // 7 days
+    M: 2592000,     // 30 days (approximation)
+    Y: 31536000,    // 365 days
+    y: 31536000
+  }
+
+  return parseInt(amount) * (multipliers[unit] || 3600)
+}
+
+export function chooseStep(duration: string): string {
+  const seconds = parseDuration(duration)
+  if (seconds <= 3600) return '4m'      // 1h -> 4m (15 pts). More reliable than 2m.
+  if (seconds <= 6 * 3600) return '5m' // 6h -> 5m (72 pts)
+  if (seconds <= 24 * 3600) return '15m' // 24h -> 15m (96 pts)
+  if (seconds <= 7 * 86400) return '1h'  // 7d -> 1h (168 pts)
+  return '4h'                            // >7d -> 4h (e.g. 90d -> 540 pts)
+}
+
+// PromQL doesn't support M/Y, map them to days so query_range stays valid
+export function toPromDuration(duration: string): string {
+  const match = duration.match(/^(\d+)([smhdwMyY])$/)
+  if (!match) return duration
+  const amount = parseInt(match[1])
+  const unit = match[2]
+  if (unit === 'M') return `${amount * 30}d`
+  if (unit === 'Y' || unit === 'y') return `${amount * 365}d`
+  return `${amount}${unit}`
+}
+
+// Improved version that handles the map lookup correctly
+export function fillSparklineData(values: Array<[number, string]>, start: number, end: number, step: number, defaultValue: number = 0): number[] {
+  const map = new Map<number, number>()
+  values.forEach(([t, v]) => map.set(t, parseFloat(v)))
+
+  const result: number[] = []
+
+  for (let t = start; t <= end; t += step) {
+    // Allow for small jitter (1s)
+    let val = defaultValue
+    for (let offset = -1; offset <= 1; offset++) {
+      if (map.has(t + offset)) {
+        val = map.get(t + offset)!
+        break
+      }
+    }
+    result.push(val)
+  }
+  return result
+}
+
+// Format range query results (already aggregated) into series by client
+export function formatRangeSeriesByClient(
+  result: PrometheusQueryResult,
+  start: number,
+  end: number,
+  stepSeconds: number,
+  allClients?: string[],
+  labelKey: string = 'client_name',
+  isCumulative: boolean = true,
+  integrate: boolean = false
+): Array<{ time: number, [client: string]: number }> {
+  const timeMap = new Map<number, Record<string, number>>()
+
+  // Initialize all timestamps with 0s
+  for (let t = start; t <= end; t += stepSeconds) {
+    timeMap.set(t, {})
+    if (allClients) {
+      allClients.forEach(client => {
+        timeMap.get(t)![client] = 0
+      })
+    }
+  }
+
+  result.data.result.forEach((series) => {
+    const clientName = series.metric[labelKey] || 'unknown'
+    const values = series.values || []
+    values.forEach(([timestamp, value]) => {
+      // Find closest timestamp in our map (to handle slight jitter)
+      let targetTs = timestamp
+      if (!timeMap.has(timestamp)) {
+        // Try to find within 1 second
+        for (let offset = -1; offset <= 1; offset++) {
+          if (timeMap.has(timestamp + offset)) {
+            targetTs = timestamp + offset
+            break
+          }
+        }
+      }
+
+      if (timeMap.has(targetTs)) {
+        timeMap.get(targetTs)![clientName] = parseFloat(value)
+      }
+    })
+  })
+
+  // Fill in zeros for all clients at all timestamps
+  if (allClients && allClients.length > 0) {
+    // Iterate over all timestamps in the map
+    Array.from(timeMap.keys()).forEach((timestamp) => {
+      const timestampData = timeMap.get(timestamp)!
+      allClients.forEach((client) => {
+        if (!(client in timestampData)) {
+          timestampData[client] = 0
+        }
+      })
+    })
+  }
+
+  const sortedSeries = Array.from(timeMap.entries())
+    .sort((a, b) => a[0] - b[0])
+    .map(([timestamp, clients]) => ({
+      time: timestamp,
+      ...clients
+    }))
+
+  // "Tare" logic: Subtract the initial value (at t=0 of the graph) from all subsequent values
+  // This ensures the graph starts at 0 and shows cumulative growth relative to the start of the period.
+  if (isCumulative && sortedSeries.length > 0) {
+    const initialValues: Record<string, number> = {}
+    // Initialize with the values from the first point
+    const firstPoint = sortedSeries[0] as Record<string, any>
+    Object.keys(firstPoint).forEach(key => {
+      if (key !== 'time') {
+        initialValues[key] = firstPoint[key] as number
+      }
+    })
+
+    // Subtract initial values from all points
+    return sortedSeries.map(point => {
+      const p = point as Record<string, any>
+      const newPoint: any = { time: p.time }
+      Object.keys(p).forEach(key => {
+        if (key !== 'time') {
+          const rawValue = p[key] as number
+          const startValue = initialValues[key] || 0
+          // Ensure we don't go below zero (in case of resets)
+          newPoint[key] = Math.max(0, rawValue - startValue)
+        }
+      })
+      return newPoint
+    })
+  }
+
+  // Integration logic: Accumulate values over time
+  if (integrate && sortedSeries.length > 0) {
+      const runningTotals: Record<string, number> = {}
+
+      return sortedSeries.map(point => {
+         const p = point as Record<string, any>
+         const newPoint: any = { time: p.time }
+
+         Object.keys(p).forEach(key => {
+            if (key !== 'time') {
+               const delta = p[key] as number
+               runningTotals[key] = (runningTotals[key] || 0) + delta
+               newPoint[key] = Math.round(runningTotals[key])
+            }
+         })
+         return newPoint
+      })
+  }
+
+  return sortedSeries
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/next.config.mjs

@@ -0,0 +1,36 @@
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+  output: 'standalone',
+  transpilePackages: ['recharts'],
+  serverExternalPackages: ['dockerode', 'ssh2'],
+  experimental: {
+  },
+  webpack: (config) => {
+    config.externals = [...(config.externals || []), 'ssh2', 'dockerode'];
+    return config;
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/docs',
+        destination: '/docs/index.html',
+      },
+      {
+        source: '/docs/:slug',
+        destination: '/docs/:slug.html',
+      },
+    ]
+  },
+}
+
+export default nextConfig

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@cybermem/dashboard",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "next build --webpack",
+    "dev": "next dev",
+    "lint": "eslint .",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@types/mdx": "^2.0.13",
+    "@vercel/analytics": "1.3.1",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "d3-format": "^3.1.0",
+    "d3-path": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "d3-time": "^3.1.0",
+    "d3-time-format": "^4.1.0",
+    "date-fns": "4.1.0",
+    "dockerode": "^4.0.9",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next": "16.0.10",
+    "next-themes": "^0.4.6",
+    "react": "19.2.0",
+    "react-day-picker": "9.8.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.60.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.4",
+    "recharts-scale": "^0.4.5",
+    "sonner": "^1.7.4",
+    "ssh2": "^1.17.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.9",
+    "@types/dockerode": "^3.3.47",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8.5",
+    "tailwindcss": "^4.1.9",
+    "tw-animate-css": "1.3.3",
+    "typescript": "^5"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config