queen-mq 0.1.5 → 0.2.0

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

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

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

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

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