queen-mq 0.1.0

package/dashboard/src/services/api.js

@@ -0,0 +1,187 @@
+import { API_BASE_URL, API_VERSION } from '../utils/constants.js'
+
+class ApiService {
+  constructor() {
+    this.baseUrl = `${API_BASE_URL}${API_VERSION}`
+    this.headers = {
+      'Content-Type': 'application/json'
+    }
+  }
+
+  async request(endpoint, options = {}) {
+    const url = endpoint.startsWith('http') ? endpoint : `${this.baseUrl}${endpoint}`
+    
+    try {
+      const response = await fetch(url, {
+        ...options,
+        headers: {
+          ...this.headers,
+          ...options.headers
+        }
+      })
+
+      if (response.status === 204) {
+        return null // No content
+      }
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP error! status: ${response.status}`)
+      }
+
+      return data
+    } catch (error) {
+      console.error('API request failed:', error)
+      throw error
+    }
+  }
+
+  // GET request
+  async get(endpoint, params = {}) {
+    const queryString = new URLSearchParams(params).toString()
+    const url = queryString ? `${endpoint}?${queryString}` : endpoint
+    return this.request(url, { method: 'GET' })
+  }
+
+  // POST request
+  async post(endpoint, data = {}) {
+    return this.request(endpoint, {
+      method: 'POST',
+      body: JSON.stringify(data)
+    })
+  }
+
+  // PUT request
+  async put(endpoint, data = {}) {
+    return this.request(endpoint, {
+      method: 'PUT',
+      body: JSON.stringify(data)
+    })
+  }
+
+  // DELETE request
+  async delete(endpoint) {
+    return this.request(endpoint, { method: 'DELETE' })
+  }
+
+  // Health & Metrics
+  async getHealth() {
+    return this.request(`${API_BASE_URL}/health`)
+  }
+
+  async getMetrics() {
+    return this.request(`${API_BASE_URL}/metrics`)
+  }
+
+  // Resources
+  async getSystemOverview() {
+    return this.get('/resources/overview')
+  }
+
+  async getQueues(params = {}) {
+    return this.get('/resources/queues', params)
+  }
+
+  async getQueueDetail(queueName) {
+    return this.get(`/resources/queues/${encodeURIComponent(queueName)}`)
+  }
+
+  async getPartitions(params = {}) {
+    return this.get('/resources/partitions', params)
+  }
+
+  async getNamespaces() {
+    return this.get('/resources/namespaces')
+  }
+
+  async getTasks() {
+    return this.get('/resources/tasks')
+  }
+
+  // Analytics
+  async getQueueAnalytics(queueName, params = {}) {
+    return this.get(`/analytics/queue/${encodeURIComponent(queueName)}`, params)
+  }
+
+  async getAllQueuesAnalytics(params = {}) {
+    return this.get('/analytics/queues', params)
+  }
+
+  async getQueueDepths() {
+    return this.get('/analytics/queue-depths')
+  }
+
+  async getThroughput() {
+    return this.get('/analytics/throughput')
+  }
+
+  async getQueueStats(params = {}) {
+    return this.get('/analytics/queue-stats', params)
+  }
+
+  async getQueueLag(params = {}) {
+    return this.get('/analytics/queue-lag', params)
+  }
+
+  // Messages
+  async getMessages(params = {}) {
+    return this.get('/messages', params)
+  }
+
+  async getMessage(transactionId) {
+    return this.get(`/messages/${transactionId}`)
+  }
+
+  async getRelatedMessages(transactionId) {
+    return this.get(`/messages/${transactionId}/related`)
+  }
+
+  async deleteMessage(transactionId) {
+    return this.delete(`/messages/${transactionId}`)
+  }
+
+  async retryMessage(transactionId) {
+    return this.post(`/messages/${transactionId}/retry`)
+  }
+
+  async moveMessageToDLQ(transactionId) {
+    return this.post(`/messages/${transactionId}/dlq`)
+  }
+
+  async clearQueue(queueName, partition = null) {
+    const params = partition ? { partition } : {}
+    return this.delete(`/queues/${encodeURIComponent(queueName)}/clear`, params)
+  }
+
+  // Push & Pop
+  async pushMessages(items) {
+    return this.post('/push', { items })
+  }
+
+  async popMessages(queue, partition = null, options = {}) {
+    const endpoint = partition 
+      ? `/pop/queue/${encodeURIComponent(queue)}/partition/${encodeURIComponent(partition)}`
+      : `/pop/queue/${encodeURIComponent(queue)}`
+    return this.get(endpoint, options)
+  }
+
+  // Acknowledge
+  async acknowledgeMessage(transactionId, status, error = null) {
+    const data = { transactionId, status }
+    if (error) data.error = error
+    return this.post('/ack', data)
+  }
+
+  async acknowledgeBatch(acknowledgments) {
+    return this.post('/ack/batch', { acknowledgments })
+  }
+
+  // Configuration
+  async configurePartition(queue, partition = 'Default', options = {}) {
+    return this.post('/configure', { queue, partition, options })
+  }
+}
+
+// Export singleton instance
+export default new ApiService()

package/dashboard/src/services/websocket.js

@@ -0,0 +1,167 @@
+import { WS_URL } from '../utils/constants.js'
+
+class WebSocketService {
+  constructor() {
+    this.ws = null
+    this.reconnectAttempts = 0
+    this.maxReconnectAttempts = 5
+    this.reconnectDelay = 1000
+    this.listeners = new Map()
+    this.isConnected = false
+    this.pingInterval = null
+  }
+
+  connect() {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        this.ws = new WebSocket(WS_URL)
+
+        this.ws.onopen = () => {
+          console.log('WebSocket connected')
+          this.isConnected = true
+          this.reconnectAttempts = 0
+          this.startPing()
+          this.emit('connected')
+          resolve()
+        }
+
+        this.ws.onmessage = (event) => {
+          if (event.data === 'pong') {
+            return // Ignore pong messages
+          }
+
+          try {
+            const data = JSON.parse(event.data)
+            this.handleMessage(data)
+          } catch (error) {
+            console.error('Failed to parse WebSocket message:', error)
+          }
+        }
+
+        this.ws.onerror = (error) => {
+          console.error('WebSocket error:', error)
+          this.emit('error', error)
+        }
+
+        this.ws.onclose = () => {
+          console.log('WebSocket disconnected')
+          this.isConnected = false
+          this.stopPing()
+          this.emit('disconnected')
+          this.reconnect()
+        }
+      } catch (error) {
+        reject(error)
+      }
+    })
+  }
+
+  disconnect() {
+    this.stopPing()
+    if (this.ws) {
+      this.ws.close()
+      this.ws = null
+    }
+    this.isConnected = false
+  }
+
+  reconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.error('Max reconnection attempts reached')
+      this.emit('reconnect_failed')
+      return
+    }
+
+    this.reconnectAttempts++
+    const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1)
+    
+    console.log(`Reconnecting in ${delay}ms... (attempt ${this.reconnectAttempts})`)
+    
+    setTimeout(() => {
+      this.connect()
+    }, delay)
+  }
+
+  startPing() {
+    this.pingInterval = setInterval(() => {
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send('ping')
+      }
+    }, 30000) // Ping every 30 seconds
+  }
+
+  stopPing() {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval)
+      this.pingInterval = null
+    }
+  }
+
+  handleMessage(data) {
+    const { event, data: eventData, timestamp } = data
+    
+    // Emit event to all listeners
+    this.emit(event, { ...eventData, timestamp })
+    
+    // Also emit a general 'message' event
+    this.emit('message', data)
+  }
+
+  subscribe(queues = []) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({
+        type: 'subscribe',
+        queues
+      }))
+    }
+  }
+
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, [])
+    }
+    this.listeners.get(event).push(callback)
+    
+    // Return unsubscribe function
+    return () => this.off(event, callback)
+  }
+
+  off(event, callback) {
+    if (!this.listeners.has(event)) return
+    
+    const callbacks = this.listeners.get(event)
+    const index = callbacks.indexOf(callback)
+    
+    if (index > -1) {
+      callbacks.splice(index, 1)
+    }
+    
+    if (callbacks.length === 0) {
+      this.listeners.delete(event)
+    }
+  }
+
+  emit(event, data = {}) {
+    if (!this.listeners.has(event)) return
+    
+    const callbacks = this.listeners.get(event)
+    callbacks.forEach(callback => {
+      try {
+        callback(data)
+      } catch (error) {
+        console.error(`Error in WebSocket listener for event ${event}:`, error)
+      }
+    })
+  }
+
+  getConnectionStatus() {
+    return this.isConnected
+  }
+}
+
+// Export singleton instance
+export default new WebSocketService()

package/dashboard/src/utils/constants.js

@@ -0,0 +1,56 @@
+// API Configuration
+export const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:6632'
+export const API_VERSION = '/api/v1'
+export const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:6632/ws/dashboard'
+
+// Refresh intervals (in milliseconds)
+export const REFRESH_INTERVALS = {
+  DASHBOARD: 5000,      // 5 seconds
+  ANALYTICS: 30000,     // 30 seconds
+  QUEUE_DEPTH: 5000,    // 5 seconds
+  SYSTEM_STATS: 10000   // 10 seconds
+}
+
+// Message statuses
+export const MESSAGE_STATUS = {
+  PENDING: 'pending',
+  PROCESSING: 'processing',
+  COMPLETED: 'completed',
+  FAILED: 'failed',
+  DEAD_LETTER: 'dead_letter'
+}
+
+// Status colors for UI
+export const STATUS_COLORS = {
+  [MESSAGE_STATUS.PENDING]: '#f59e0b',      // amber
+  [MESSAGE_STATUS.PROCESSING]: '#3b82f6',   // blue
+  [MESSAGE_STATUS.COMPLETED]: '#10b981',    // green
+  [MESSAGE_STATUS.FAILED]: '#ef4444',       // red
+  [MESSAGE_STATUS.DEAD_LETTER]: '#6b7280'   // gray
+}
+
+// Chart configuration
+export const CHART_COLORS = [
+  '#3b82f6', // blue
+  '#10b981', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#14b8a6', // teal
+  '#f97316', // orange
+  '#06b6d4', // cyan
+  '#84cc16'  // lime
+]
+
+// Pagination
+export const DEFAULT_PAGE_SIZE = 20
+export const PAGE_SIZE_OPTIONS = [10, 20, 50, 100]
+
+// Date formats
+export const DATE_FORMAT = {
+  SHORT: 'MMM DD, HH:mm',
+  LONG: 'MMM DD, YYYY HH:mm:ss',
+  TIME_ONLY: 'HH:mm:ss',
+  DATE_ONLY: 'MMM DD, YYYY'
+}

package/dashboard/src/utils/helpers.js

@@ -0,0 +1,118 @@
+// Format numbers with abbreviations (1.2K, 3.4M, etc.)
+export function formatNumber(num) {
+  if (num === null || num === undefined) return '0'
+  
+  const absNum = Math.abs(num)
+  if (absNum >= 1e9) return (num / 1e9).toFixed(1) + 'B'
+  if (absNum >= 1e6) return (num / 1e6).toFixed(1) + 'M'
+  if (absNum >= 1e3) return (num / 1e3).toFixed(1) + 'K'
+  return num.toString()
+}
+
+// Format bytes to human readable
+export function formatBytes(bytes, decimals = 2) {
+  if (!bytes) return '0 Bytes'
+  
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+// Format date to relative time (e.g., "2 hours ago")
+export function formatRelativeTime(date) {
+  if (!date) return ''
+  
+  const now = new Date()
+  const then = new Date(date)
+  const seconds = Math.floor((now - then) / 1000)
+  
+  if (seconds < 60) return 'just now'
+  if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)} days ago`
+  
+  return then.toLocaleDateString()
+}
+
+// Format date to local string
+export function formatDate(date, format = 'long') {
+  if (!date) return ''
+  
+  const d = new Date(date)
+  
+  switch (format) {
+    case 'short':
+      return d.toLocaleString('en-US', { 
+        month: 'short', 
+        day: 'numeric', 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      })
+    case 'time':
+      return d.toLocaleTimeString('en-US', { 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+      })
+    case 'date':
+      return d.toLocaleDateString('en-US', { 
+        year: 'numeric', 
+        month: 'short', 
+        day: 'numeric' 
+      })
+    default:
+      return d.toLocaleString('en-US', { 
+        year: 'numeric', 
+        month: 'short', 
+        day: 'numeric', 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+      })
+  }
+}
+
+// Calculate percentage
+export function calculatePercentage(value, total) {
+  if (!total || total === 0) return 0
+  return Math.round((value / total) * 100)
+}
+
+// Get status severity for PrimeVue components
+export function getStatusSeverity(status) {
+  const severityMap = {
+    'pending': 'warn',
+    'processing': 'info',
+    'completed': 'success',
+    'failed': 'danger',
+    'dead_letter': 'secondary'
+  }
+  return severityMap[status] || 'secondary'
+}
+
+// Debounce function for search inputs
+export function debounce(func, wait) {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+// Deep clone object
+export function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj))
+}
+
+// Generate unique ID
+export function generateId() {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}