queen-mq 0.1.1 → 0.1.2

package/webapp/public/assets/queen-logo.svg

@@ -0,0 +1,263 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  
+  <!-- Decorative sparkles -->
+  <g id="sparkles">
+    <circle cx="25" cy="30" r="1" fill="url(#sparkleGradient)" opacity="0.8">
+      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="95" cy="35" r="1.5" fill="url(#sparkleGradient)" opacity="0.6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="90" cy="85" r="1" fill="url(#sparkleGradient)" opacity="0.7">
+      <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="30" cy="90" r="1.2" fill="url(#sparkleGradient)" opacity="0.5">
+      <animate attributeName="opacity" values="0.5;0.9;0.5" dur="2.8s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <!-- Queue lines flowing (messages being managed) -->
+  <g id="queue-lines">
+    <!-- Left side queues -->
+    <g opacity="0.8">
+      <rect x="15" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="15;20;15" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="18" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="18;23;18" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="12" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="12;17;12" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+    
+    <!-- Right side queues -->
+    <g opacity="0.8">
+      <rect x="85" y="65" width="20" height="3" rx="1.5" fill="url(#queueGradient1)">
+        <animate attributeName="x" values="85;80;85" dur="4s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="87" y="72" width="15" height="3" rx="1.5" fill="url(#queueGradient2)">
+        <animate attributeName="x" values="87;82;87" dur="3.5s" repeatCount="indefinite"/>
+      </rect>
+      <rect x="83" y="79" width="25" height="3" rx="1.5" fill="url(#queueGradient3)">
+        <animate attributeName="x" values="83;78;83" dur="4.5s" repeatCount="indefinite"/>
+      </rect>
+    </g>
+  </g>
+  
+  <!-- Main duck with crown -->
+  <g id="queen-duck" transform="translate(60, 60)">
+    <!-- Shadow -->
+    <ellipse cx="0" cy="35" rx="25" ry="8" fill="#000000" opacity="0.15"/>
+    
+    <!-- Body with elegant curves -->
+    <path d="M -20 5 Q -25 15 -22 28 Q -18 38 -5 40 L 5 40 Q 18 38 22 28 Q 25 15 20 5 Q 15 -2 8 -3 L -8 -3 Q -15 -2 -20 5 Z" 
+          fill="url(#bodyGradient)" stroke="url(#bodyStroke)" stroke-width="1.5"/>
+    
+    <!-- Chest highlight -->
+    <ellipse cx="0" cy="15" rx="12" ry="15" fill="url(#chestHighlight)" opacity="0.6"/>
+    
+    <!-- Wing detail left -->
+    <path d="M -18 8 Q -23 12 -22 20 Q -20 25 -15 22 Q -12 18 -13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Wing detail right -->
+    <path d="M 18 8 Q 23 12 22 20 Q 20 25 15 22 Q 12 18 13 12 Z" 
+          fill="url(#wingGradient)" stroke="url(#wingStroke)" stroke-width="0.8" opacity="0.9"/>
+    
+    <!-- Neck -->
+    <path d="M -5 -3 Q -6 -8 -5 -12 L 5 -12 Q 6 -8 5 -3" 
+          fill="url(#neckGradient)" stroke="none"/>
+    
+    <!-- Head with better proportions -->
+    <ellipse cx="0" cy="-18" rx="12" ry="13" fill="url(#headGradient)" stroke="url(#headStroke)" stroke-width="1.2"/>
+    
+    <!-- Head highlight -->
+    <ellipse cx="-2" cy="-20" rx="6" ry="7" fill="url(#headHighlight)" opacity="0.5"/>
+    
+      <!-- Beak with royal touch -->
+      <path d="M 8 -18 Q 14 -18 15 -17 Q 15 -15 14 -14 Q 13 -13 8 -14 Z" 
+            fill="url(#beakGradient)" stroke="#FCD34D" stroke-width="0.8"/>
+    
+    <!-- Eye with elegant details -->
+    <ellipse cx="4" cy="-19" rx="3" ry="3.5" fill="white"/>
+    <ellipse cx="4.5" cy="-19" rx="2" ry="2.5" fill="url(#eyeGradient)"/>
+    <circle cx="5" cy="-19.5" r="1" fill="#1F2937"/>
+    <circle cx="5.5" cy="-20" r="0.4" fill="white"/> <!-- Eye sparkle -->
+    
+    <!-- Eyelashes for feminine touch -->
+    <path d="M 6 -22 L 7 -23.5 M 7 -21.5 L 8.5 -22.5 M 7.5 -21 L 9 -21.5" 
+          stroke="#1F2937" stroke-width="0.4" fill="none" stroke-linecap="round"/>
+    
+    <!-- Cheek blush -->
+    <ellipse cx="1" cy="-15" rx="2.5" ry="1.5" fill="#FFB6C1" opacity="0.4"/>
+    
+    <!-- Crown - more elegant and detailed -->
+    <g id="crown" transform="translate(0, -32)">
+      <!-- Crown shadow -->
+      <ellipse cx="0" cy="2" rx="12" ry="3" fill="#000000" opacity="0.1"/>
+      
+      <!-- Main crown shape with better design -->
+      <path d="M -12 0 L -10 -8 L -6 -3 L -3 -10 L 0 -5 L 3 -10 L 6 -3 L 10 -8 L 12 0 Q 10 2 0 2 Q -10 2 -12 0 Z" 
+            fill="url(#crownGradient)" stroke="url(#crownStroke)" stroke-width="1.2" stroke-linejoin="round"/>
+      
+        <!-- Crown inner detail -->
+        <path d="M -10 0 L -8 -6 L -5 -2 L -2 -8 L 0 -4 L 2 -8 L 5 -2 L 8 -6 L 10 0" 
+              fill="none" stroke="#FEF3C7" stroke-width="0.5" opacity="0.6"/>
+      
+        <!-- Center jewel (main) -->
+        <circle cx="0" cy="-2" r="2.5" fill="url(#centerJewelGradient)" stroke="#10B981" stroke-width="0.5"/>
+        <circle cx="0" cy="-2" r="1.5" fill="url(#jewelSparkle)" opacity="0.8"/>
+        
+        <!-- Side jewels -->
+        <circle cx="-6" cy="-1" r="1.8" fill="url(#leftJewelGradient)" stroke="#059669" stroke-width="0.4"/>
+        <circle cx="6" cy="-1" r="1.8" fill="url(#rightJewelGradient)" stroke="#047857" stroke-width="0.4"/>
+        
+        <!-- Small decorative gems -->
+        <circle cx="-3" cy="-4" r="1" fill="#6EE7B7" opacity="0.9"/>
+        <circle cx="3" cy="-4" r="1" fill="#6EE7B7" opacity="0.9"/>
+      
+        <!-- Crown peaks -->
+        <circle cx="0" cy="-10" r="1.2" fill="#FEF3C7"/>
+        <circle cx="-6" cy="-8" r="1" fill="#FEF3C7"/>
+        <circle cx="6" cy="-8" r="1" fill="#FEF3C7"/>
+    </g>
+    
+    <!-- Tail feathers -->
+    <g id="tail" transform="translate(-22, 25)">
+      <path d="M 0 0 Q -3 3 -2 7 Q -1 9 1 8 Q 2 5 0 0" fill="url(#tailGradient)" opacity="0.8"/>
+      <path d="M 2 -1 Q -1 2 0 6 Q 1 8 3 7 Q 4 4 2 -1" fill="url(#tailGradient)" opacity="0.7"/>
+      <path d="M 4 -2 Q 1 1 2 5 Q 3 7 5 6 Q 6 3 4 -2" fill="url(#tailGradient)" opacity="0.6"/>
+    </g>
+  </g>
+  
+  <!-- Gradient definitions -->
+  <defs>
+    <!-- Sparkle gradient -->
+    <radialGradient id="sparkleGradient">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#6EE7B7;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Queue gradients -->
+    <linearGradient id="queueGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#10B981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <linearGradient id="queueGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+      <stop offset="50%" style="stop-color:#F59E0B;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F59E0B;stop-opacity:0.3" />
+    </linearGradient>
+    
+    <!-- Body gradients -->
+    <radialGradient id="bodyGradient" cx="50%" cy="30%">
+      <stop offset="0%" style="stop-color:#A7F3D0;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="bodyStroke" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="chestHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#D1FAE5;stop-opacity:0.2" />
+    </radialGradient>
+    
+    <!-- Wing gradients -->
+    <linearGradient id="wingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="wingStroke">
+      <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#047857;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Neck gradient -->
+    <linearGradient id="neckGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#6EE7B7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#86EFAC;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Head gradients -->
+    <radialGradient id="headGradient" cx="40%" cy="40%">
+      <stop offset="0%" style="stop-color:#BBF7D0;stop-opacity:1" />
+      <stop offset="60%" style="stop-color:#86EFAC;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
+    </radialGradient>
+    
+    <linearGradient id="headStroke">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </linearGradient>
+    
+    <radialGradient id="headHighlight">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F0FDF4;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Beak gradient -->
+    <linearGradient id="beakGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FCD34D;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Eye gradient -->
+    <radialGradient id="eyeGradient">
+      <stop offset="0%" style="stop-color:#92400E;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#451A03;stop-opacity:1" />
+    </radialGradient>
+    
+    <!-- Crown gradients -->
+    <linearGradient id="crownGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#FDE68A;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FEF3C7;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="crownStroke">
+      <stop offset="0%" style="stop-color:#FCD34D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Jewel gradients -->
+    <radialGradient id="centerJewelGradient">
+      <stop offset="0%" style="stop-color:#D1FAE5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="leftJewelGradient">
+      <stop offset="0%" style="stop-color:#A7F3D0;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="rightJewelGradient">
+      <stop offset="0%" style="stop-color:#D1FAE5;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#047857;stop-opacity:1" />
+    </radialGradient>
+    
+    <radialGradient id="jewelSparkle">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0" />
+    </radialGradient>
+    
+    <!-- Tail gradient -->
+    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>

package/webapp/src/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="{ 'dark': isDark }" class="min-h-screen">
+    <AppLayout>
+      <router-view />
+    </AppLayout>
+  </div>
+</template>
+
+<script setup>
+import { provide } from 'vue';
+import AppLayout from './components/layout/AppLayout.vue';
+import { useTheme } from './composables/useTheme';
+
+const { isDark, toggleTheme } = useTheme();
+
+// Provide theme globally
+provide('theme', { isDark, toggleTheme });
+</script>
+

package/webapp/src/api/analytics.js

@@ -0,0 +1,10 @@
+import apiClient from './client';
+
+export const analyticsApi = {
+  getStatus: (params) => apiClient.get('/api/v1/status', { params }),
+  getQueues: (params) => apiClient.get('/api/v1/status/queues', { params }),
+  getQueueDetail: (queueName, params) => apiClient.get(`/api/v1/status/queues/${queueName}`, { params }),
+  getQueueMessages: (queueName, params) => apiClient.get(`/api/v1/status/queues/${queueName}/messages`, { params }),
+  getAnalytics: (params) => apiClient.get('/api/v1/status/analytics', { params }),
+};
+

package/webapp/src/api/client.js

@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:6632';
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response) {
+      console.error('API Error:', error.response.data);
+    } else if (error.request) {
+      console.error('Network Error:', error.message);
+    } else {
+      console.error('Error:', error.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;
+

package/webapp/src/api/consumers.js

@@ -0,0 +1,52 @@
+import apiClient from './client';
+
+export const consumersApi = {
+  // Get consumer groups by querying status queues and extracting consumer info
+  getConsumerGroups: async () => {
+    try {
+      const response = await apiClient.get('/api/v1/status/queues');
+      const queues = response.data.queues;
+      
+      // Extract unique consumer groups from queue data
+      const consumerMap = new Map();
+      
+      queues.forEach(queue => {
+        // For now, we'll derive consumer groups from lag and performance data
+        // In a real implementation, we'd need a dedicated API endpoint
+        if (queue.lag || queue.performance) {
+          const consumerGroup = queue.consumerGroup || '__QUEUE_MODE__';
+          
+          if (!consumerMap.has(consumerGroup)) {
+            consumerMap.set(consumerGroup, {
+              name: consumerGroup,
+              topics: [],
+              queues: new Set(),
+              totalLag: 0,
+              maxTimeLag: 0,
+              state: 'Stable',
+            });
+          }
+          
+          const consumer = consumerMap.get(consumerGroup);
+          consumer.queues.add(queue.name);
+          consumer.topics.push(queue.name);
+          
+          if (queue.lag) {
+            consumer.totalLag += queue.lag.offset || 0;
+            consumer.maxTimeLag = Math.max(consumer.maxTimeLag, queue.lag.timeLagMs || 0);
+          }
+        }
+      });
+      
+      return Array.from(consumerMap.values()).map(c => ({
+        ...c,
+        topics: Array.from(c.queues),
+        members: c.topics.length,
+      }));
+    } catch (error) {
+      console.error('Error fetching consumer groups:', error);
+      return [];
+    }
+  },
+};
+

package/webapp/src/api/health.js

@@ -0,0 +1,7 @@
+import apiClient from './client';
+
+export const healthApi = {
+  getHealth: () => apiClient.get('/health'),
+  getMetrics: () => apiClient.get('/metrics'),
+};
+

package/webapp/src/api/messages.js

@@ -0,0 +1,26 @@
+import apiClient from './client';
+
+export const messagesApi = {
+  getMessages: (params) => apiClient.get('/api/v1/messages', { params }),
+  getMessage: (transactionId) => apiClient.get(`/api/v1/messages/${transactionId}`),
+  deleteMessage: (transactionId) => apiClient.delete(`/api/v1/messages/${transactionId}`),
+  retryMessage: (transactionId) => apiClient.post(`/api/v1/messages/${transactionId}/retry`),
+  moveToDLQ: (transactionId) => apiClient.post(`/api/v1/messages/${transactionId}/dlq`),
+  getRelatedMessages: (transactionId) => apiClient.get(`/api/v1/messages/${transactionId}/related`),
+  
+  // Push messages
+  pushMessages: (data) => apiClient.post('/api/v1/push', data),
+  
+  // Pop messages
+  popMessages: (queue, partition, params) => {
+    if (partition) {
+      return apiClient.get(`/api/v1/pop/queue/${queue}/partition/${partition}`, { params });
+    }
+    return apiClient.get(`/api/v1/pop/queue/${queue}`, { params });
+  },
+  
+  // Acknowledgment
+  ackMessage: (data) => apiClient.post('/api/v1/ack', data),
+  batchAck: (data) => apiClient.post('/api/v1/ack/batch', data),
+};
+

package/webapp/src/api/queues.js

@@ -0,0 +1,14 @@
+import apiClient from './client';
+
+export const queuesApi = {
+  getQueues: (params) => apiClient.get('/api/v1/resources/queues', { params }),
+  getQueue: (queueName) => apiClient.get(`/api/v1/resources/queues/${queueName}`),
+  deleteQueue: (queueName) => apiClient.delete(`/api/v1/resources/queues/${queueName}`),
+  clearQueue: (queueName, partition) => {
+    const params = partition ? { partition } : {};
+    return apiClient.delete(`/api/v1/queues/${queueName}/clear`, { params });
+  },
+  configureQueue: (data) => apiClient.post('/api/v1/configure', data),
+  getPartitions: (params) => apiClient.get('/api/v1/resources/partitions', { params }),
+};
+

package/webapp/src/api/resources.js

@@ -0,0 +1,8 @@
+import apiClient from './client';
+
+export const resourcesApi = {
+  getOverview: () => apiClient.get('/api/v1/resources/overview'),
+  getNamespaces: () => apiClient.get('/api/v1/resources/namespaces'),
+  getTasks: () => apiClient.get('/api/v1/resources/tasks'),
+};
+