queen-mq 0.1.5 → 0.2.0

package/webapp/src/components/queue-detail/QueueDetailHeader.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-    <div>
-      <div class="flex items-center gap-3 mb-2">
-        <button @click="goBack" class="p-1 hover:bg-gray-100 dark:hover:bg-slate-700 rounded transition-colors">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-          </svg>
-        </button>
-        <h2 class="text-xl font-bold">{{ queue?.name }}</h2>
-      </div>
-      <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400 ml-9">
-        <span>Namespace: {{ queue?.namespace || '-' }}</span>
-        <span>Task: {{ queue?.task || '-' }}</span>
-        <span>Priority: {{ queue?.priority || 0 }}</span>
-        <span class="text-xs">Created: {{ formatDate(queue?.createdAt) }}</span>
-      </div>
-    </div>
-    
-    <div class="flex gap-2 ml-9 sm:ml-0">
-      <button @click="$emit('push-message')" class="btn btn-primary">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-        </svg>
-        Push Message
-      </button>
-      <button @click="$emit('clear-queue')" class="btn btn-secondary">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-        </svg>
-        Clear Queue
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router';
-import { formatDate } from '../../utils/formatters';
-
-defineProps({
-  queue: Object,
-});
-
-defineEmits(['push-message', 'clear-queue']);
-
-const router = useRouter();
-
-function goBack() {
-  router.push('/queues');
-}
-</script>
-

package/webapp/src/components/queue-detail/RecentMessages.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="messages-container">
-    <h3 class="text-base font-semibold mb-4">Recent Messages</h3>
-    
-    <div class="table-container scrollbar-thin">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Transaction ID</th>
-            <th class="hidden sm:table-cell">Partition</th>
-            <th class="text-right">Created</th>
-            <th class="text-right hidden md:table-cell">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="message in messages"
-            :key="message.id"
-            class="cursor-pointer"
-            @click="$emit('message-click', message)"
-          >
-            <td>
-              <div class="font-mono text-xs">{{ message.transactionId?.substring(0, 16) }}...</div>
-            </td>
-            <td class="hidden sm:table-cell">
-              <span class="text-xs">{{ message.partition }}</span>
-            </td>
-            <td class="text-right text-xs">{{ formatTime(message.createdAt) }}</td>
-            <td class="text-right hidden md:table-cell">
-              <StatusBadge v-if="message.status" :status="message.status" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      
-      <div v-if="!messages?.length" class="text-center py-8 text-gray-500 text-sm">
-        No recent messages
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.messages-container {
-  background: #ffffff;
-  border: none;
-  box-shadow: none;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  transition: all 0.3s ease;
-}
-
-.dark .messages-container {
-  background: #0a0d14;
-}
-
-.messages-container:hover {
-  background: #fafafa;
-}
-
-.dark .messages-container:hover {
-  background: #0d1117;
-}
-</style>
-
-<script setup>
-import { formatTime } from '../../utils/formatters';
-import StatusBadge from '../common/StatusBadge.vue';
-
-defineProps({
-  messages: Array,
-});
-
-defineEmits(['message-click']);
-</script>
-

package/webapp/src/components/queues/CreateQueueModal.vue

@@ -1,193 +0,0 @@
-<template>
-  <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto">
-    <div class="flex items-center justify-center min-h-screen px-4">
-      <!-- Backdrop with blur -->
-      <div 
-        class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity animate-fade-in"
-        @click="close"
-      ></div>
-      
-      <!-- Modal -->
-      <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-md w-full p-6 animate-scale-in border border-gray-200 dark:border-gray-700">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-bold">Create New Queue</h3>
-          <button @click="close" class="text-gray-400 hover:text-gray-600">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        
-        <form @submit.prevent="createQueue" class="space-y-4">
-          <div>
-            <label class="block text-sm font-medium mb-1">Queue Name *</label>
-            <input
-              v-model="form.queue"
-              type="text"
-              required
-              placeholder="my-queue"
-              class="input"
-            />
-          </div>
-          
-          <div>
-            <label class="block text-sm font-medium mb-1">Partition</label>
-            <input
-              v-model="form.partition"
-              type="text"
-              placeholder="Default"
-              class="input"
-            />
-          </div>
-          
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="block text-sm font-medium mb-1">TTL (seconds)</label>
-              <input
-                v-model.number="form.ttl"
-                type="number"
-                placeholder="3600"
-                class="input"
-              />
-            </div>
-            
-            <div>
-              <label class="block text-sm font-medium mb-1">Priority</label>
-              <input
-                v-model.number="form.priority"
-                type="number"
-                min="0"
-                max="100"
-                placeholder="0"
-                class="input"
-              />
-            </div>
-          </div>
-          
-          <div class="grid grid-cols-2 gap-3">
-            <div>
-              <label class="block text-sm font-medium mb-1">Namespace</label>
-              <input
-                v-model="form.namespace"
-                type="text"
-                placeholder="optional"
-                class="input"
-              />
-            </div>
-            
-            <div>
-              <label class="block text-sm font-medium mb-1">Task</label>
-              <input
-                v-model="form.task"
-                type="text"
-                placeholder="optional"
-                class="input"
-              />
-            </div>
-          </div>
-          
-          <div>
-            <label class="block text-sm font-medium mb-1">Max Queue Size</label>
-            <input
-              v-model.number="form.maxQueueSize"
-              type="number"
-              placeholder="10000"
-              class="input"
-            />
-          </div>
-          
-          <div v-if="error" class="text-sm text-red-600 dark:text-red-400">
-            {{ error }}
-          </div>
-          
-          <div class="flex gap-3 pt-2">
-            <button type="submit" :disabled="loading" class="btn btn-primary flex-1">
-              <span v-if="loading">Creating...</span>
-              <span v-else>Create Queue</span>
-            </button>
-            <button type="button" @click="close" class="btn btn-secondary">
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { queuesApi } from '../../api/queues';
-
-const props = defineProps({
-  isOpen: Boolean,
-});
-
-const emit = defineEmits(['close', 'created']);
-
-const loading = ref(false);
-const error = ref(null);
-const form = ref({
-  queue: '',
-  partition: 'Default',
-  ttl: 3600,
-  priority: 0,
-  namespace: '',
-  task: '',
-  maxQueueSize: 10000,
-});
-
-watch(() => props.isOpen, (newVal) => {
-  if (newVal) {
-    resetForm();
-  }
-});
-
-function resetForm() {
-  form.value = {
-    queue: '',
-    partition: 'Default',
-    ttl: 3600,
-    priority: 0,
-    namespace: '',
-    task: '',
-    maxQueueSize: 10000,
-  };
-  error.value = null;
-}
-
-async function createQueue() {
-  loading.value = true;
-  error.value = null;
-  
-  try {
-    const payload = {
-      queue: form.value.queue,
-      partition: form.value.partition || 'Default',
-      ttl: form.value.ttl,
-      priority: form.value.priority,
-      maxQueueSize: form.value.maxQueueSize,
-    };
-    
-    if (form.value.namespace) {
-      payload.namespace = form.value.namespace;
-    }
-    if (form.value.task) {
-      payload.task = form.value.task;
-    }
-    
-    await queuesApi.configureQueue(payload);
-    emit('created');
-    close();
-  } catch (err) {
-    error.value = err.response?.data?.error || err.message;
-  } finally {
-    loading.value = false;
-  }
-}
-
-function close() {
-  emit('close');
-}
-</script>
-

package/webapp/src/components/queues/QueueFilters.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="filter-container">
-    <div class="flex flex-col sm:flex-row gap-3">
-      <!-- Search -->
-      <div class="flex-1">
-        <input
-          v-model="localSearch"
-          @input="onSearchChange"
-          type="text"
-          placeholder="Search queues..."
-          class="input"
-        />
-      </div>
-      
-      <!-- Namespace Filter -->
-      <select
-        v-model="localNamespace"
-        @change="onNamespaceChange"
-        class="input sm:w-48"
-      >
-        <option value="">All Namespaces</option>
-        <option v-for="ns in namespaces" :key="ns.namespace" :value="ns.namespace">
-          {{ ns.namespace }} ({{ ns.queues }})
-        </option>
-      </select>
-      
-      <!-- Clear Filters -->
-      <button
-        v-if="localSearch || localNamespace"
-        @click="clearFilters"
-        class="btn btn-secondary whitespace-nowrap"
-      >
-        Clear Filters
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.filter-container {
-  background: #ffffff;
-  border: none;
-  box-shadow: none;
-  border-radius: 0.75rem;
-  padding: 1rem;
-}
-
-.dark .filter-container {
-  background: #0a0d14;
-}
-</style>
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-  search: String,
-  namespace: String,
-  namespaces: Array,
-});
-
-const emit = defineEmits(['update:search', 'update:namespace']);
-
-const localSearch = ref(props.search || '');
-const localNamespace = ref(props.namespace || '');
-
-watch(() => props.search, (newVal) => {
-  localSearch.value = newVal || '';
-});
-
-watch(() => props.namespace, (newVal) => {
-  localNamespace.value = newVal || '';
-});
-
-function onSearchChange() {
-  emit('update:search', localSearch.value);
-}
-
-function onNamespaceChange() {
-  emit('update:namespace', localNamespace.value);
-}
-
-function clearFilters() {
-  localSearch.value = '';
-  localNamespace.value = '';
-  emit('update:search', '');
-  emit('update:namespace', '');
-}
-</script>
-

package/webapp/src/composables/useApi.js

@@ -1,34 +0,0 @@
-import { ref } from 'vue';
-
-export function useApi(apiCall) {
-  const data = ref(null);
-  const error = ref(null);
-  const loading = ref(false);
-
-  const execute = async (...params) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await apiCall(...params);
-      data.value = response.data;
-      return response.data;
-    } catch (err) {
-      error.value = err.response?.data?.error || err.message || 'An error occurred';
-      throw err;
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  const refresh = () => execute();
-
-  return {
-    data,
-    error,
-    loading,
-    execute,
-    refresh,
-  };
-}
-

package/webapp/src/composables/useTheme.js

@@ -1,36 +0,0 @@
-import { ref, watch, onMounted } from 'vue';
-
-export function useTheme() {
-  const isDark = ref(false);
-
-  const toggleTheme = () => {
-    isDark.value = !isDark.value;
-  };
-
-  // Watch for changes and update localStorage and document class
-  watch(isDark, (newValue) => {
-    if (newValue) {
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    }
-  });
-
-  // Initialize theme from localStorage or system preference
-  onMounted(() => {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) {
-      isDark.value = savedTheme === 'dark';
-    } else {
-      isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-  });
-
-  return {
-    isDark,
-    toggleTheme,
-  };
-}
-

package/webapp/src/main.js

@@ -1,11 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import './assets/styles/main.css';
-
-const app = createApp(App);
-
-app.use(router);
-
-app.mount('#app');
-

package/webapp/src/router/index.js

@@ -1,42 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-
-const routes = [
-  {
-    path: '/',
-    name: 'Dashboard',
-    component: () => import('../views/Dashboard.vue'),
-  },
-  {
-    path: '/queues',
-    name: 'Queues',
-    component: () => import('../views/Queues.vue'),
-  },
-  {
-    path: '/queues/:queueName',
-    name: 'QueueDetail',
-    component: () => import('../views/QueueDetail.vue'),
-  },
-  {
-    path: '/consumer-groups',
-    name: 'ConsumerGroups',
-    component: () => import('../views/ConsumerGroups.vue'),
-  },
-  {
-    path: '/messages',
-    name: 'Messages',
-    component: () => import('../views/Messages.vue'),
-  },
-  {
-    path: '/analytics',
-    name: 'Analytics',
-    component: () => import('../views/Analytics.vue'),
-  },
-];
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-});
-
-export default router;
-

package/webapp/src/utils/colors.js

@@ -1,96 +0,0 @@
-// Centralized color configuration for the entire app
-// Change these values to update the color scheme everywhere
-
-export const colors = {
-  // Primary brand colors (used for charts, accents, etc.)
-  primary: {
-    name: 'Rose',
-    hex: '#f43f5e',      // rose-500
-    rgb: 'rgb(244, 63, 94)',
-    rgba: (opacity) => `rgba(244, 63, 94, ${opacity})`,
-  },
-  secondary: {
-    name: 'Purple', 
-    hex: '#a855f7',      // purple-500
-    rgb: 'rgb(168, 85, 247)',
-    rgba: (opacity) => `rgba(168, 85, 247, ${opacity})`,
-  },
-  
-  // Status colors
-  success: {
-    hex: '#10b981',      // green-500
-    rgb: 'rgb(16, 185, 129)',
-    rgba: (opacity) => `rgba(16, 185, 129, ${opacity})`,
-  },
-  warning: {
-    hex: '#f59e0b',      // yellow-500
-    rgb: 'rgb(245, 158, 11)',
-    rgba: (opacity) => `rgba(245, 158, 11, ${opacity})`,
-  },
-  danger: {
-    hex: '#ef4444',      // red-500
-    rgb: 'rgb(239, 68, 68)',
-    rgba: (opacity) => `rgba(239, 68, 68, ${opacity})`,
-  },
-  info: {
-    hex: '#3b82f6',      // blue-500
-    rgb: 'rgb(59, 130, 246)',
-    rgba: (opacity) => `rgba(59, 130, 246, ${opacity})`,
-  },
-  
-  // Chart colors (for consistency)
-  charts: {
-    // Main data series
-    ingested: {
-      border: 'rgb(244, 63, 94)',      // Rose
-      background: 'rgba(244, 63, 94, 0.1)',
-    },
-    processed: {
-      border: 'rgb(168, 85, 247)',     // Purple
-      background: 'rgba(168, 85, 247, 0.1)',
-    },
-    
-    // Status distribution
-    pending: {
-      bg: 'rgba(245, 158, 11, 0.8)',   // Yellow
-      border: 'rgb(245, 158, 11)',
-    },
-    processing: {
-      bg: 'rgba(59, 130, 246, 0.8)',   // Blue
-      border: 'rgb(59, 130, 246)',
-    },
-    completed: {
-      bg: 'rgba(16, 185, 129, 0.8)',   // Green
-      border: 'rgb(16, 185, 129)',
-    },
-    failed: {
-      bg: 'rgba(239, 68, 68, 0.8)',    // Red
-      border: 'rgb(239, 68, 68)',
-    },
-    deadLetter: {
-      bg: 'rgba(156, 163, 175, 0.8)',  // Gray
-      border: 'rgb(156, 163, 175)',
-    },
-  },
-};
-
-// Helper to get all chart colors for status distribution
-export function getStatusColors() {
-  return {
-    backgrounds: [
-      colors.charts.pending.bg,
-      colors.charts.processing.bg,
-      colors.charts.completed.bg,
-      colors.charts.failed.bg,
-      colors.charts.deadLetter.bg,
-    ],
-    borders: [
-      colors.charts.pending.border,
-      colors.charts.processing.border,
-      colors.charts.completed.border,
-      colors.charts.failed.border,
-      colors.charts.deadLetter.border,
-    ],
-  };
-}
-

package/webapp/src/utils/formatters.js

@@ -1,49 +0,0 @@
-export function formatNumber(num) {
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1) + 'M';
-  }
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1) + 'K';
-  }
-  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
-export function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
-export function formatDuration(ms) {
-  if (ms < 1000) return `${ms}ms`;
-  
-  const seconds = Math.floor(ms / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  
-  if (days > 0) return `${days}d ${hours % 24}h`;
-  if (hours > 0) return `${hours}h ${minutes % 60}m`;
-  if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
-  return `${seconds}s`;
-}
-
-export function formatDate(date) {
-  return new Date(date).toLocaleString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-export function formatTime(date) {
-  return new Date(date).toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-}
-