queen-mq 0.1.0 → 0.1.2

package/src/utils/uuid.js

@@ -1,5 +1,5 @@
-import { v4 as uuidv4 } from 'uuid';
+import { v7 as uuidv7 } from 'uuid';
 
 export const generateUUID = () => {
-  return uuidv4();
+  return uuidv7();
 };

package/src/websocket/wsServer.js

@@ -191,10 +191,17 @@ export const createWebSocketServer = (app, eventManager) => {
     try {
       const result = await pool.query(`
         SELECT
-          (SELECT COUNT(*) FROM queen.messages_status WHERE status = 'pending' AND consumer_group IS NULL) as pending,
-          (SELECT COUNT(*) FROM queen.messages_status WHERE status = 'processing' AND consumer_group IS NULL) as processing,
+          (SELECT COALESCE(SUM(pending_estimate), 0)::integer FROM queen.partition_consumers 
+           WHERE consumer_group = '__QUEUE_MODE__') as pending,
+          (SELECT COUNT(*) FROM queen.partition_consumers 
+           WHERE consumer_group = '__QUEUE_MODE__' 
+           AND lease_expires_at IS NOT NULL 
+           AND lease_expires_at > NOW()) as processing,
           (SELECT COUNT(*) FROM queen.messages WHERE created_at > NOW() - INTERVAL '1 minute') as recent_created,
-          (SELECT COUNT(*) FROM queen.messages_status WHERE completed_at > NOW() - INTERVAL '1 minute' AND consumer_group IS NULL) as recent_completed
+          (SELECT COALESCE(SUM(CASE WHEN last_consumed_at > NOW() - INTERVAL '1 minute' 
+                                    THEN total_batches_consumed ELSE 0 END), 0)::integer 
+           FROM queen.partition_consumers 
+           WHERE consumer_group = '__QUEUE_MODE__') as recent_completed
       `);
       
       const stats = result.rows[0];

package/test-keepalive-v2.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Better connection monitoring for macOS
+echo "Monitoring HTTP connections to Queen servers..."
+echo "Press Ctrl+C to stop"
+echo ""
+
+while true; do
+  # Use lsof instead of netstat for more reliable results on macOS
+  CONN_6632=$(lsof -nP -iTCP:6632 -sTCP:ESTABLISHED 2>/dev/null | grep -v COMMAND | wc -l | tr -d ' ')
+  CONN_6633=$(lsof -nP -iTCP:6633 -sTCP:ESTABLISHED 2>/dev/null | grep -v COMMAND | wc -l | tr -d ' ')
+  
+  # Also check all states to see if connections exist at all
+  ALL_6632=$(lsof -nP -iTCP:6632 2>/dev/null | grep -v COMMAND | wc -l | tr -d ' ')
+  ALL_6633=$(lsof -nP -iTCP:6633 2>/dev/null | grep -v COMMAND | wc -l | tr -d ' ')
+  
+  # Clear line and print
+  echo -ne "\r[6632] EST: $CONN_6632 (Total: $ALL_6632) | [6633] EST: $CONN_6633 (Total: $ALL_6633)    "
+  
+  sleep 0.5  # Check twice per second
+done
+

package/webapp/COLOR_GUIDE.md

@@ -0,0 +1,118 @@
+# Color Customization Guide
+
+## Quick Color Change
+
+To change the entire app's color scheme, edit **ONE FILE**:
+
+### **File:** `src/utils/colors.js`
+
+```javascript
+export const colors = {
+  // PRIMARY COLORS - Change these!
+  primary: {
+    name: 'Rose',
+    hex: '#f43f5e',      // Change to your color
+    rgb: 'rgb(244, 63, 94)',
+    rgba: (opacity) => `rgba(244, 63, 94, ${opacity})`,
+  },
+  secondary: {
+    name: 'Purple', 
+    hex: '#a855f7',      // Change to your color
+    rgb: 'rgb(168, 85, 247)',
+    rgba: (opacity) => `rgba(168, 85, 247, ${opacity})`,
+  },
+  // ... rest of config
+};
+```
+
+## Current Color Scheme
+
+**Primary (Charts - Ingested):** Rose (#f43f5e)  
+**Secondary (Charts - Processed):** Purple (#a855f7)
+
+## Where Colors Are Used
+
+### **Primary (Rose)**
+- Dashboard throughput chart - "Ingested" line
+- Analytics message flow - "Ingested" line
+- Accent colors
+
+### **Secondary (Purple)**
+- Dashboard throughput chart - "Processed" line
+- Analytics message flow - "Processed" line
+- Top queues bar chart
+- Accent elements
+
+### **Status Colors** (Fixed)
+- Success/Completed: Green
+- Warning/Pending: Yellow
+- Danger/Failed: Red
+- Info: Blue
+- Dead Letter: Gray
+
+## How to Change
+
+### Example: Switch to Blue & Cyan
+
+```javascript
+// In src/utils/colors.js
+primary: {
+  name: 'Blue',
+  hex: '#3b82f6',
+  rgb: 'rgb(59, 130, 246)',
+  rgba: (opacity) => `rgba(59, 130, 246, ${opacity})`,
+},
+secondary: {
+  name: 'Cyan', 
+  hex: '#06b6d4',
+  rgb: 'rgb(6, 182, 212)',
+  rgba: (opacity) => `rgba(6, 182, 212, ${opacity})`,
+},
+```
+
+### Example: Switch to Orange & Pink
+
+```javascript
+primary: {
+  name: 'Orange',
+  hex: '#f97316',
+  rgb: 'rgb(249, 115, 22)',
+  rgba: (opacity) => `rgba(249, 115, 22, ${opacity})`,
+},
+secondary: {
+  name: 'Pink', 
+  hex: '#ec4899',
+  rgb: 'rgb(236, 72, 153)',
+  rgba: (opacity) => `rgba(236, 72, 153, ${opacity})`,
+},
+```
+
+## Tailwind Config
+
+Also update `tailwind.config.js` for consistency:
+
+```javascript
+colors: {
+  'queen-primary': '#f43f5e',    // Match primary
+  'queen-secondary': '#a855f7',  // Match secondary
+  'queen-accent': '#ec4899',     // Optional third color
+},
+```
+
+## Current Implementation
+
+✅ **Centralized**: All chart colors in one place  
+✅ **Easy to change**: Edit one file  
+✅ **Consistent**: Used across all charts  
+✅ **Type-safe**: Helper functions for opacity  
+
+## Files Using Color System
+
+1. `src/components/dashboard/ThroughputChart.vue`
+2. `src/components/analytics/MessageFlowChart.vue`
+3. `src/components/analytics/TopQueuesChart.vue`
+4. `src/components/analytics/MessageDistributionChart.vue`
+5. `tailwind.config.js` (for CSS utilities)
+
+Change `src/utils/colors.js` and all charts update automatically! 🎨
+

package/webapp/README.md

@@ -0,0 +1,143 @@
+# Queen Message Queue - Web Application
+
+Modern web interface for managing and monitoring the Queen Message Queue system.
+
+## Prerequisites
+
+- Node.js 18+ 
+- npm or yarn
+- Queen Message Queue server running on `http://localhost:6632`
+
+## Installation
+
+Install dependencies:
+
+```bash
+npm install vue@latest vue-router@latest axios@latest
+npm install chart.js@latest vue-chartjs@latest
+npm install -D vite@latest @vitejs/plugin-vue@latest
+npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
+```
+
+Or all at once:
+
+```bash
+npm install vue vue-router axios chart.js vue-chartjs && npm install -D vite @vitejs/plugin-vue tailwindcss postcss autoprefixer
+```
+
+## Configuration
+
+The application connects to the Queen API at `http://localhost:6632` by default.
+
+To change this, create a `.env` file:
+
+```
+VITE_API_BASE_URL=http://your-api-url:port
+```
+
+## Development
+
+Start the development server on port 4000:
+
+```bash
+npm run dev
+```
+
+The application will be available at `http://localhost:4000`
+
+## Build for Production
+
+```bash
+npm run build
+```
+
+Output will be in the `dist/` directory.
+
+## Features
+
+### ✅ Implemented (Dashboard)
+- Real-time health monitoring
+- System metrics and statistics
+- Message throughput visualization
+- Performance monitoring
+- Top queues overview
+- Dark/light theme support
+
+### 🚧 Coming Soon
+- Queues management
+- Queue detail views
+- Consumer groups monitoring
+- Message browser
+- Analytics and insights
+
+## Architecture
+
+### Technology Stack
+- **Vue 3** - Composition API
+- **Vue Router** - Client-side routing
+- **Axios** - HTTP client
+- **Chart.js** - Data visualization
+- **Tailwind CSS** - Styling
+- **Vite** - Build tool
+
+### Project Structure
+
+```
+webapp/
+├── public/          # Static assets
+├── src/
+│   ├── api/         # API client modules
+│   ├── assets/      # Styles and fonts
+│   ├── components/  # Vue components
+│   │   ├── common/      # Reusable components
+│   │   ├── dashboard/   # Dashboard-specific
+│   │   └── layout/      # Layout components
+│   ├── composables/ # Vue composables
+│   ├── router/      # Router configuration
+│   ├── utils/       # Utility functions
+│   └── views/       # Page components
+```
+
+## API Integration
+
+The application integrates with the following Queen API endpoints:
+
+**Dashboard:**
+- `GET /health` - Server health
+- `GET /metrics` - System metrics
+- `GET /api/v1/resources/overview` - System overview
+- `GET /api/v1/status` - Status with throughput
+- `GET /api/v1/resources/queues` - Queue list
+
+All API calls use real data - no mocking!
+
+## Development Notes
+
+- **No WebSocket** - Currently using manual refresh only
+- **No Auto-refresh** - User-controlled data updates
+- **Clean Design** - Minimal animations, focus on clarity
+- **Responsive** - Works on desktop and tablet
+- **Theme Support** - Full light/dark mode
+
+## Troubleshooting
+
+**CORS Errors:**
+Ensure the Queen server has CORS enabled. The server should include:
+```
+Access-Control-Allow-Origin: *
+```
+
+**API Connection:**
+Check that the Queen server is running on port 6632:
+```bash
+curl http://localhost:6632/health
+```
+
+**Port 4000 in use:**
+Change the port in `vite.config.js`:
+```javascript
+server: {
+  port: 4001, // or another port
+}
+```
+

package/webapp/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/queen-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Queen Message Queue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+