queen-mq 0.1.0 → 0.1.2

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

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="filter-container">
+    <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>
+
+<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,
+  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

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

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

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