queen-mq 0.1.5 → 0.2.0

package/webapp/src/components/messages/MessageDetailPanel.vue

@@ -1,242 +0,0 @@
-<template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-y-0 right-0 w-full sm:w-[32rem] bg-white dark:bg-slate-800 shadow-2xl z-40 overflow-y-auto scrollbar-thin transform transition-all duration-300 border-l border-gray-200 dark:border-gray-700"
-    :class="isOpen ? 'translate-x-0' : 'translate-x-full'"
-  >
-    <!-- Backdrop for mobile -->
-    <div
-      v-if="isOpen"
-      class="sm:hidden fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm -z-10 animate-fade-in"
-      @click="close"
-    ></div>
-    
-    <div class="p-6">
-      <!-- Header -->
-      <div class="flex items-start justify-between mb-6">
-        <div class="flex-1 min-w-0">
-          <h3 class="text-lg font-bold mb-1">Message Details</h3>
-          <p class="text-xs font-mono text-gray-500 dark:text-gray-400 break-all">
-            {{ message?.transactionId }}
-          </p>
-        </div>
-        <button @click="close" class="text-gray-400 hover:text-gray-600 p-1">
-          <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>
-
-      <LoadingSpinner v-if="loading" />
-
-      <div v-else-if="error" class="text-sm text-red-600 dark:text-red-400">
-        {{ error }}
-      </div>
-
-      <template v-else-if="messageDetail">
-        <!-- Status Badge -->
-        <div class="mb-6">
-          <StatusBadge :status="messageDetail.status" />
-        </div>
-
-        <!-- Info Grid -->
-        <div class="space-y-4 mb-6">
-          <div>
-            <label class="text-xs text-gray-500 dark:text-gray-400 block mb-1">Queue</label>
-            <p class="text-sm font-medium">{{ messageDetail.queue }} / {{ messageDetail.partition }}</p>
-          </div>
-          
-          <div>
-            <label class="text-xs text-gray-500 dark:text-gray-400 block mb-1">Created</label>
-            <p class="text-sm">{{ formatDate(messageDetail.createdAt) }}</p>
-          </div>
-          
-          <div v-if="messageDetail.traceId">
-            <label class="text-xs text-gray-500 dark:text-gray-400 block mb-1">Trace ID</label>
-            <p class="text-xs font-mono break-all">{{ messageDetail.traceId }}</p>
-          </div>
-          
-          <div v-if="messageDetail.errorMessage">
-            <label class="text-xs text-gray-500 dark:text-gray-400 block mb-1">Error Message</label>
-            <p class="text-sm text-red-600 dark:text-red-400">{{ messageDetail.errorMessage }}</p>
-          </div>
-          
-          <div v-if="messageDetail.retryCount">
-            <label class="text-xs text-gray-500 dark:text-gray-400 block mb-1">Retry Count</label>
-            <p class="text-sm">{{ messageDetail.retryCount }}</p>
-          </div>
-        </div>
-
-        <!-- Payload -->
-        <div class="mb-6">
-          <label class="text-xs text-gray-500 dark:text-gray-400 block mb-2">Payload</label>
-          <div class="bg-gray-50 dark:bg-slate-900 rounded-lg p-4 overflow-x-auto scrollbar-thin">
-            <pre class="text-xs font-mono">{{ JSON.stringify(messageDetail.payload, null, 2) }}</pre>
-          </div>
-        </div>
-
-        <!-- Actions -->
-        <div class="space-y-2">
-          <!-- Completed message info -->
-          <div v-if="messageDetail.status === 'completed'" class="card bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 text-sm">
-            <div class="flex gap-2">
-              <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <p>This message has been successfully consumed and acknowledged.</p>
-            </div>
-          </div>
-          
-          <button
-            v-if="messageDetail.status === 'dead_letter'"
-            @click="retryMessage"
-            :disabled="actionLoading"
-            class="btn btn-primary w-full"
-          >
-            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-            Retry Message
-          </button>
-          
-          <button
-            v-if="messageDetail.status === 'pending'"
-            @click="moveToDLQ"
-            :disabled="actionLoading"
-            class="btn btn-secondary w-full"
-          >
-            Move to Dead Letter Queue
-          </button>
-          
-          <button
-            @click="confirmDelete"
-            :disabled="actionLoading"
-            class="btn btn-danger w-full"
-          >
-            <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>
-            Delete Message
-          </button>
-        </div>
-
-        <div v-if="actionError" class="text-sm text-red-600 dark:text-red-400 mt-4">
-          {{ actionError }}
-        </div>
-      </template>
-    </div>
-
-    <!-- Delete Confirmation -->
-    <ConfirmDialog
-      :is-open="showDeleteConfirm"
-      title="Delete Message"
-      message="Are you sure you want to delete this message? This action cannot be undone."
-      confirm-text="Delete"
-      confirm-class="btn-danger"
-      @confirm="deleteMessage"
-      @cancel="showDeleteConfirm = false"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { messagesApi } from '../../api/messages';
-import { formatDate } from '../../utils/formatters';
-
-import StatusBadge from '../common/StatusBadge.vue';
-import LoadingSpinner from '../common/LoadingSpinner.vue';
-import ConfirmDialog from '../common/ConfirmDialog.vue';
-
-const props = defineProps({
-  isOpen: Boolean,
-  message: Object,
-});
-
-const emit = defineEmits(['close', 'action-complete']);
-
-const loading = ref(false);
-const error = ref(null);
-const actionLoading = ref(false);
-const actionError = ref(null);
-const messageDetail = ref(null);
-const showDeleteConfirm = ref(false);
-
-watch(() => props.message, async (newMessage) => {
-  if (newMessage) {
-    await loadMessageDetail();
-  }
-});
-
-async function loadMessageDetail() {
-  if (!props.message?.transactionId) return;
-  
-  loading.value = true;
-  error.value = null;
-  
-  try {
-    const response = await messagesApi.getMessage(props.message.transactionId);
-    messageDetail.value = response.data;
-  } catch (err) {
-    error.value = err.response?.data?.error || err.message;
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function retryMessage() {
-  actionLoading.value = true;
-  actionError.value = null;
-  
-  try {
-    await messagesApi.retryMessage(messageDetail.value.transactionId);
-    emit('action-complete');
-    close();
-  } catch (err) {
-    actionError.value = err.response?.data?.error || err.message;
-  } finally {
-    actionLoading.value = false;
-  }
-}
-
-async function moveToDLQ() {
-  actionLoading.value = true;
-  actionError.value = null;
-  
-  try {
-    await messagesApi.moveToDLQ(messageDetail.value.transactionId);
-    emit('action-complete');
-    close();
-  } catch (err) {
-    actionError.value = err.response?.data?.error || err.message;
-  } finally {
-    actionLoading.value = false;
-  }
-}
-
-function confirmDelete() {
-  showDeleteConfirm.value = true;
-}
-
-async function deleteMessage() {
-  actionLoading.value = true;
-  actionError.value = null;
-  showDeleteConfirm.value = false;
-  
-  try {
-    await messagesApi.deleteMessage(messageDetail.value.transactionId);
-    emit('action-complete');
-    close();
-  } catch (err) {
-    actionError.value = err.response?.data?.error || err.message;
-  } finally {
-    actionLoading.value = false;
-  }
-}
-
-function close() {
-  emit('close');
-  messageDetail.value = null;
-}
-</script>
-

package/webapp/src/components/messages/MessageFilters.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <div class="flex flex-col sm:flex-row gap-3">
-      <!-- Search by Transaction ID -->
-      <div class="flex-1">
-        <input
-          v-model="localSearch"
-          @input="onSearchChange"
-          type="text"
-          placeholder="Search by transaction ID..."
-          class="input font-mono text-xs"
-        />
-      </div>
-      
-      <!-- Queue Filter -->
-      <select
-        v-model="localQueue"
-        @change="onQueueChange"
-        class="input sm:w-48"
-      >
-        <option value="">All Queues</option>
-        <option v-for="queue in queues" :key="queue.id" :value="queue.name">
-          {{ queue.name }}
-        </option>
-      </select>
-      
-      <!-- Status Filter -->
-      <select
-        v-model="localStatus"
-        @change="onStatusChange"
-        class="input sm:w-40"
-      >
-        <option value="">All Status</option>
-        <option value="pending">Pending</option>
-        <option value="processing">Processing</option>
-        <option value="completed">Completed</option>
-        <option value="dead_letter">Dead Letter</option>
-      </select>
-      
-      <!-- Clear Filters -->
-      <button
-        v-if="localSearch || localQueue || localStatus"
-        @click="clearFilters"
-        class="btn btn-secondary whitespace-nowrap"
-      >
-        Clear Filters
-      </button>
-    </div>
-  </div>
-</template>
-
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-  search: String,
-  queue: String,
-  status: String,
-  queues: Array,
-});
-
-const emit = defineEmits(['update:search', 'update:queue', 'update:status']);
-
-const localSearch = ref(props.search || '');
-const localQueue = ref(props.queue || '');
-const localStatus = ref(props.status || '');
-
-watch(() => props.search, (newVal) => {
-  localSearch.value = newVal || '';
-});
-
-watch(() => props.queue, (newVal) => {
-  localQueue.value = newVal || '';
-});
-
-watch(() => props.status, (newVal) => {
-  localStatus.value = newVal || '';
-});
-
-function onSearchChange() {
-  emit('update:search', localSearch.value);
-}
-
-function onQueueChange() {
-  emit('update:queue', localQueue.value);
-}
-
-function onStatusChange() {
-  emit('update:status', localStatus.value);
-}
-
-function clearFilters() {
-  localSearch.value = '';
-  localQueue.value = '';
-  localStatus.value = '';
-  emit('update:search', '');
-  emit('update:queue', '');
-  emit('update:status', '');
-}
-</script>

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

@@ -1,79 +0,0 @@
-<template>
-  <div class="partition-container">
-    <h3 class="text-base font-semibold mb-4">Partitions</h3>
-    <div class="space-y-3">
-      <div
-        v-for="partition in partitions"
-        :key="partition.id"
-        class="p-4 bg-gray-50 dark:bg-slate-700/50 rounded-lg"
-      >
-        <div class="flex items-center justify-between mb-2">
-          <h4 class="font-semibold">{{ partition.name }}</h4>
-          <span class="text-xs text-gray-500">{{ formatDate(partition.createdAt) }}</span>
-        </div>
-        
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
-          <div>
-            <span class="text-gray-500 dark:text-gray-400 block">Pending</span>
-            <span class="font-semibold">{{ formatNumber(partition.messages?.pending || 0) }}</span>
-          </div>
-          <div>
-            <span class="text-gray-500 dark:text-gray-400 block">Processing</span>
-            <span class="font-semibold">{{ formatNumber(partition.messages?.processing || 0) }}</span>
-          </div>
-          <div>
-            <span class="text-gray-500 dark:text-gray-400 block">Completed</span>
-            <span class="font-semibold text-green-600">{{ formatNumber(partition.messages?.completed || 0) }}</span>
-          </div>
-          <div>
-            <span class="text-gray-500 dark:text-gray-400 block">Failed</span>
-            <span class="font-semibold text-red-600">{{ formatNumber(partition.messages?.failed || 0) }}</span>
-          </div>
-        </div>
-        
-        <div v-if="partition.cursor" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-600 dark:text-gray-400">
-          <div class="flex items-center justify-between">
-            <span>Consumed: {{ formatNumber(partition.cursor.totalConsumed || 0) }} messages in {{ partition.cursor.batchesConsumed || 0 }} batches</span>
-            <span v-if="partition.lastActivity">Last: {{ formatTime(partition.lastActivity) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <div v-if="!partitions?.length" class="text-center py-8 text-gray-500 text-sm">
-      No partitions found
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.partition-container {
-  background: #ffffff;
-  border: none;
-  box-shadow: none;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  transition: all 0.3s ease;
-}
-
-.dark .partition-container {
-  background: #0a0d14;
-}
-
-.partition-container:hover {
-  background: #fafafa;
-}
-
-.dark .partition-container:hover {
-  background: #0d1117;
-}
-</style>
-
-<script setup>
-import { formatNumber, formatDate, formatTime } from '../../utils/formatters';
-
-defineProps({
-  partitions: Array,
-});
-</script>
-

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

@@ -1,175 +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-2xl 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">Push Message to {{ queueName }}</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="pushMessage" class="space-y-4">
-          <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>
-            <label class="block text-sm font-medium mb-1">Payload (JSON) *</label>
-            <textarea
-              v-model="form.payload"
-              rows="10"
-              placeholder='{"key": "value", "message": "Hello World"}'
-              class="input font-mono text-xs"
-              required
-            ></textarea>
-            <p v-if="jsonError" class="text-xs text-red-600 mt-1">{{ jsonError }}</p>
-          </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"
-                placeholder="0"
-                class="input"
-              />
-            </div>
-          </div>
-          
-          <div>
-            <label class="block text-sm font-medium mb-1">Trace ID (optional)</label>
-            <input
-              v-model="form.traceId"
-              type="text"
-              placeholder="trace-id-for-distributed-tracing"
-              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 || !!jsonError" class="btn btn-primary flex-1">
-              <span v-if="loading">Pushing...</span>
-              <span v-else>Push Message</span>
-            </button>
-            <button type="button" @click="close" class="btn btn-secondary">
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, computed } from 'vue';
-import { messagesApi } from '../../api/messages';
-
-const props = defineProps({
-  isOpen: Boolean,
-  queueName: String,
-});
-
-const emit = defineEmits(['close', 'pushed']);
-
-const loading = ref(false);
-const error = ref(null);
-const form = ref({
-  partition: 'Default',
-  payload: '',
-  ttl: null,
-  priority: null,
-  traceId: '',
-});
-
-const jsonError = computed(() => {
-  if (!form.value.payload) return null;
-  
-  try {
-    JSON.parse(form.value.payload);
-    return null;
-  } catch (e) {
-    return 'Invalid JSON format';
-  }
-});
-
-watch(() => props.isOpen, (newVal) => {
-  if (newVal) {
-    resetForm();
-  }
-});
-
-function resetForm() {
-  form.value = {
-    partition: 'Default',
-    payload: '',
-    ttl: null,
-    priority: null,
-    traceId: '',
-  };
-  error.value = null;
-}
-
-async function pushMessage() {
-  loading.value = true;
-  error.value = null;
-  
-  try {
-    const payload = JSON.parse(form.value.payload);
-    
-    const item = {
-      queue: props.queueName,
-      partition: form.value.partition || 'Default',
-      payload: payload,
-    };
-    
-    if (form.value.ttl) item.ttl = form.value.ttl;
-    if (form.value.priority) item.priority = form.value.priority;
-    if (form.value.traceId) item.traceId = form.value.traceId;
-    
-    await messagesApi.pushMessages({ items: [item] });
-    emit('pushed');
-    close();
-  } catch (err) {
-    error.value = err.response?.data?.error || err.message;
-  } finally {
-    loading.value = false;
-  }
-}
-
-function close() {
-  emit('close');
-}
-</script>
-

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

@@ -1,63 +0,0 @@
-<template>
-  <div class="config-container">
-    <h3 class="text-base font-semibold mb-4">Queue Configuration</h3>
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">Lease Time</span>
-        <span class="font-semibold">{{ config?.leaseTime || 0 }}s</span>
-      </div>
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">TTL</span>
-        <span class="font-semibold">{{ formatDuration((config?.ttl || 0) * 1000) }}</span>
-      </div>
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">Max Queue Size</span>
-        <span class="font-semibold">{{ formatNumber(config?.maxQueueSize || 0) }}</span>
-      </div>
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">Retry Limit</span>
-        <span class="font-semibold">{{ config?.retryLimit || 0 }}</span>
-      </div>
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">Retry Delay</span>
-        <span class="font-semibold">{{ config?.retryDelay || 0 }}ms</span>
-      </div>
-      <div>
-        <span class="text-gray-500 dark:text-gray-400 block mb-1">DLQ Enabled</span>
-        <span class="font-semibold">{{ config?.deadLetterQueue ? 'Yes' : 'No' }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.config-container {
-  background: #ffffff;
-  border: none;
-  box-shadow: none;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  transition: all 0.3s ease;
-}
-
-.dark .config-container {
-  background: #0a0d14;
-}
-
-.config-container:hover {
-  background: #fafafa;
-}
-
-.dark .config-container:hover {
-  background: #0d1117;
-}
-</style>
-
-<script setup>
-import { formatNumber, formatDuration } from '../../utils/formatters';
-
-defineProps({
-  config: Object,
-});
-</script>
-