queen-mq 0.1.1 → 0.1.2

package/webapp/src/assets/styles/main.css

@@ -0,0 +1,357 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-gray-200 dark:border-gray-700;
+  }
+  
+  body {
+    @apply bg-gray-100 dark:bg-[#0d1117] text-gray-900 dark:text-gray-100 text-sm antialiased;
+  }
+  
+  h1 {
+    @apply text-xl font-semibold tracking-tight;
+  }
+  
+  h2 {
+    @apply text-lg font-semibold tracking-tight;
+  }
+  
+  h3 {
+    @apply text-base font-semibold tracking-tight;
+  }
+}
+
+@layer components {
+  .card {
+    @apply bg-white dark:bg-slate-800 rounded-xl shadow-sm border p-4 sm:p-5 
+           transition-all duration-200 hover:shadow-md;
+    background: linear-gradient(to bottom, white, white) padding-box,
+                linear-gradient(to bottom, transparent, transparent) border-box;
+  }
+  
+  .dark .card {
+    background: linear-gradient(to bottom, rgb(30, 41, 59), rgb(30, 41, 59)) padding-box,
+                linear-gradient(to bottom, rgba(248, 113, 113, 0.1), rgba(168, 85, 247, 0.1)) border-box;
+  }
+  
+  /* Metric cards with top accent */
+  .metric-card {
+    @apply card relative;
+  }
+  
+  .metric-card:hover {
+    @apply shadow-lg;
+    transform: translateY(-2px);
+  }
+  
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm 
+           inline-flex items-center justify-center gap-2;
+  }
+  
+  .btn:active {
+    @apply scale-95;
+  }
+  
+  .btn-primary {
+    @apply bg-gradient-to-br from-rose-600 to-rose-700 hover:from-rose-700 hover:to-rose-800 
+           active:from-rose-800 active:to-rose-900 text-white shadow-sm hover:shadow-md 
+           disabled:opacity-50 disabled:cursor-not-allowed;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(244 63 94 / 0.1);
+  }
+  
+  .btn-primary:hover {
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), 
+                0 0 0 1px rgb(244 63 94 / 0.2);
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-100 hover:bg-gray-200 active:bg-gray-300 
+           dark:bg-slate-700 dark:hover:bg-slate-600 dark:active:bg-slate-500 
+           text-gray-900 dark:text-gray-100 disabled:opacity-50;
+  }
+  
+  .btn-danger {
+    @apply bg-gradient-to-br from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 
+           text-white shadow-sm hover:shadow-md disabled:opacity-50;
+  }
+  
+  .btn-ghost {
+    @apply hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-slate-700 
+           dark:active:bg-slate-600 text-gray-700 dark:text-gray-300;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+    transition: all 0.2s ease;
+  }
+  
+  .badge-success {
+    @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 
+           ring-1 ring-green-600/20 dark:ring-green-400/20;
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  
+  .badge-success:hover {
+    box-shadow: 0 0 8px 0 rgba(16, 185, 129, 0.3);
+  }
+  
+  .badge-warning {
+    @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 
+           ring-1 ring-yellow-600/20 dark:ring-yellow-400/20;
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+  }
+  
+  .badge-warning:hover {
+    box-shadow: 0 0 8px 0 rgba(245, 158, 11, 0.3);
+  }
+  
+  .badge-danger {
+    @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 
+           ring-1 ring-red-600/20 dark:ring-red-400/20;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+  
+  .badge-danger:hover {
+    box-shadow: 0 0 8px 0 rgba(239, 68, 68, 0.3);
+  }
+  
+  .badge-info {
+    @apply bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 
+           ring-1 ring-purple-600/20 dark:ring-purple-400/20;
+    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
+  }
+  
+  .badge-info:hover {
+    box-shadow: 0 0 8px 0 rgba(168, 85, 247, 0.3);
+  }
+  
+  .input {
+    @apply w-full px-3 py-2 text-sm border rounded-lg bg-white dark:bg-slate-800 
+           focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent 
+           transition-all duration-200;
+  }
+  
+  .input:focus {
+    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
+  }
+  
+  /* Table styles */
+  .table-container {
+    @apply overflow-x-auto -mx-4 sm:mx-0 rounded-lg;
+  }
+  
+  .table {
+    @apply w-full text-sm;
+  }
+  
+  .table thead {
+    @apply text-xs text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700;
+    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.02));
+  }
+  
+  .dark .table thead {
+    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.02));
+  }
+  
+  .table th {
+    @apply pb-3 font-semibold text-left px-4 sm:px-3 first:pl-4 last:pr-4 
+           uppercase tracking-wider;
+  }
+  
+  .table tbody tr {
+    @apply border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 
+           transition-all duration-150;
+  }
+  
+  .table tbody tr:nth-child(even) {
+    @apply bg-gray-50/50 dark:bg-slate-700/20;
+  }
+  
+  .table tbody tr:hover {
+    @apply bg-gradient-to-r from-rose-50/50 to-purple-50/50 
+           dark:from-rose-900/10 dark:to-purple-900/10;
+    box-shadow: inset 3px 0 0 0 rgb(244, 63, 94, 0.5);
+  }
+  
+  .table td {
+    @apply py-3.5 px-4 sm:px-3 first:pl-4 last:pr-4;
+  }
+  
+  /* Metric card specific */
+  .metric-value {
+    @apply text-2xl sm:text-3xl font-bold mt-1.5;
+    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #a855f7 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+  }
+  
+  .metric-label {
+    @apply text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold;
+  }
+  
+  /* Chart container */
+  .chart-container {
+    @apply h-64 sm:h-72 md:h-80 w-full relative;
+  }
+  
+  /* Status indicators */
+  .status-dot {
+    @apply w-2 h-2 rounded-full;
+    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  
+  .status-dot.healthy {
+    @apply bg-green-500;
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  }
+  
+  .status-dot.unhealthy {
+    @apply bg-red-500;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+  
+  @keyframes pulse-glow {
+    0%, 100% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+    }
+    50% {
+      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
+    }
+  }
+}
+
+/* Scrollbar styling */
+@layer utilities {
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-track {
+    @apply bg-gray-100 dark:bg-slate-800 rounded-full;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-gradient-to-b from-rose-400 to-purple-400 rounded-full;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    @apply from-rose-500 to-purple-500;
+  }
+  
+  /* Custom utilities */
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  /* Smooth scrolling */
+  .smooth-scroll {
+    scroll-behavior: smooth;
+  }
+  
+  /* Glassmorphism */
+  .glass {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  
+  .dark .glass {
+    background: rgba(30, 41, 59, 0.8);
+  }
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.2s ease-out;
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  @apply outline-2 outline-offset-2 outline-rose-500 rounded;
+}
+
+/* Selection color */
+::selection {
+  @apply bg-rose-200 dark:bg-rose-800/50 text-gray-900 dark:text-gray-100;
+}
+
+/* Gradient text utility */
+.gradient-text {
+  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #a855f7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card with gradient border */
+.card-gradient-border {
+  position: relative;
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(168, 85, 247, 0.2));
+}
+
+.dark .card-gradient-border {
+  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(168, 85, 247, 0.3));
+}
+
+.card-gradient-border > * {
+  background: white;
+  border-radius: 0.7rem;
+  padding: 1rem 1.25rem;
+}
+
+.dark .card-gradient-border > * {
+  background: rgb(30, 41, 59);
+}

package/webapp/src/components/analytics/AnalyticsFilters.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="flex flex-col sm:flex-row gap-3">
+      <!-- Time Range -->
+      <div class="flex items-center gap-2">
+        <label class="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">Time Range:</label>
+        <select
+          :value="timeRange"
+          @change="$emit('update:timeRange', $event.target.value)"
+          class="input w-32"
+        >
+          <option value="1h">Last Hour</option>
+          <option value="6h">6 Hours</option>
+          <option value="24h">24 Hours</option>
+          <option value="7d">7 Days</option>
+        </select>
+      </div>
+      
+      <!-- Queue Filter -->
+      <select
+        :value="queue"
+        @change="$emit('update:queue', $event.target.value)"
+        class="input flex-1 sm:w-48"
+      >
+        <option value="">All Queues</option>
+        <option v-for="q in queues" :key="q.id" :value="q.name">
+          {{ q.name }}
+        </option>
+      </select>
+      
+      <!-- Namespace Filter -->
+      <select
+        :value="namespace"
+        @change="$emit('update:namespace', $event.target.value)"
+        class="input sm:w-40"
+      >
+        <option value="">All Namespaces</option>
+        <option v-for="ns in namespaces" :key="ns.namespace" :value="ns.namespace">
+          {{ ns.namespace }}
+        </option>
+      </select>
+      
+      <!-- Task Filter -->
+      <select
+        :value="task"
+        @change="$emit('update:task', $event.target.value)"
+        class="input sm:w-40"
+      >
+        <option value="">All Tasks</option>
+        <option v-for="t in tasks" :key="t.task" :value="t.task">
+          {{ t.task }}
+        </option>
+      </select>
+      
+      <!-- Clear Filters -->
+      <button
+        v-if="queue || namespace || task"
+        @click="clearFilters"
+        class="btn btn-secondary whitespace-nowrap"
+      >
+        Clear Filters
+      </button>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+defineProps({
+  timeRange: String,
+  queue: String,
+  namespace: String,
+  task: String,
+  queues: Array,
+  namespaces: Array,
+  tasks: Array,
+});
+
+const emit = defineEmits(['update:timeRange', 'update:queue', 'update:namespace', 'update:task']);
+
+function clearFilters() {
+  emit('update:queue', '');
+  emit('update:namespace', '');
+  emit('update:task', '');
+}
+</script>
+

package/webapp/src/components/analytics/AnalyticsMetrics.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div class="card">
+      <p class="metric-label">Avg Throughput</p>
+      <p class="metric-value">{{ avgThroughput }}</p>
+      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">messages/sec</p>
+    </div>
+    
+    <div class="card">
+      <p class="metric-label">Total Processed</p>
+      <p class="metric-value">{{ formatNumber(totalProcessed) }}</p>
+      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">in time range</p>
+    </div>
+    
+    <div class="card">
+      <p class="metric-label">Error Rate</p>
+      <p class="metric-value">{{ errorRate }}%</p>
+      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">failed / total</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { formatNumber } from '../../utils/formatters';
+
+const props = defineProps({
+  data: Object,
+  messages: Object,
+});
+
+const avgThroughput = computed(() => {
+  if (!props.data?.throughput?.length) return '0.00';
+  
+  const throughput = props.data.throughput;
+  const total = throughput.reduce((sum, t) => sum + (t.processedPerSecond || t.processed || 0), 0);
+  const avg = total / throughput.length;
+  
+  return avg.toFixed(2);
+});
+
+const totalProcessed = computed(() => {
+  return props.messages?.completed || 0;
+});
+
+const errorRate = computed(() => {
+  const failed = props.messages?.failed || 0;
+  const dlq = props.messages?.deadLetter || 0;
+  const total = props.messages?.total || 0;
+  
+  if (total === 0) return '0.00';
+  
+  const rate = ((failed + dlq) / total) * 100;
+  return rate.toFixed(2);
+});
+</script>
+

package/webapp/src/components/analytics/MessageDistributionChart.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="h-80 flex items-center justify-center">
+    <div class="w-full max-w-sm">
+      <Doughnut v-if="chartData" :data="chartData" :options="chartOptions" />
+      <div v-else class="text-center text-gray-500 text-sm">
+        No message data available
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Doughnut } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { getStatusColors } from '../../utils/colors';
+
+ChartJS.register(
+  ArcElement,
+  Tooltip,
+  Legend
+);
+
+const props = defineProps({
+  messages: Object,
+});
+
+const chartData = computed(() => {
+  if (!props.messages) return null;
+
+  const data = [
+    props.messages.pending || 0,
+    props.messages.processing || 0,
+    props.messages.completed || 0,
+    props.messages.failed || 0,
+    props.messages.deadLetter || 0,
+  ];
+  
+  // Only show chart if there's data
+  if (data.every(v => v === 0)) return null;
+  
+  return {
+    labels: ['Pending', 'Processing', 'Completed', 'Failed', 'Dead Letter'],
+    datasets: [
+      {
+        data: data,
+        backgroundColor: [
+          'rgba(236, 72, 153, 0.8)',   // Pink - Pending
+          'rgba(168, 85, 247, 0.8)',   // Purple - Processing  
+          'rgba(139, 92, 246, 0.8)',   // Violet - Completed
+          'rgba(244, 63, 94, 0.8)',    // Rose - Failed
+          'rgba(192, 132, 252, 0.7)',  // Light Purple - Dead Letter
+        ],
+        borderColor: [
+          'rgb(236, 72, 153)',
+          'rgb(168, 85, 247)',
+          'rgb(139, 92, 246)',
+          'rgb(244, 63, 94)',
+          'rgb(192, 132, 252)',
+        ],
+        borderWidth: 2,
+      },
+    ],
+  };
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: true,
+  plugins: {
+    legend: {
+      position: 'bottom',
+      labels: {
+        padding: 15,
+        font: {
+          size: 12,
+        },
+        color: '#6b7280',
+        usePointStyle: true,
+        pointStyle: 'circle',
+      },
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      padding: 12,
+      cornerRadius: 8,
+      titleFont: {
+        size: 13,
+      },
+      bodyFont: {
+        size: 12,
+      },
+      callbacks: {
+        label: (context) => {
+          const label = context.label || '';
+          const value = context.parsed || 0;
+          const total = context.dataset.data.reduce((a, b) => a + b, 0);
+          const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+          return ` ${label}: ${value.toLocaleString()} (${percentage}%)`;
+        },
+      },
+    },
+  },
+};
+</script>
+