queen-mq 0.1.0 → 0.1.2

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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,76 @@
+<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

@@ -0,0 +1,193 @@
+<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

@@ -0,0 +1,90 @@
+<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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,96 @@
+// 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

@@ -0,0 +1,49 @@
+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',
+  });
+}
+