queen-mq 0.1.0 → 0.1.2

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="chart-container">
+    <Bar v-if="chartData" :data="chartData" :options="chartOptions" />
+    <div v-else class="flex items-center justify-center h-full text-gray-500 text-sm">
+      No data available for this time range
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { colors } from '../../utils/colors';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const props = defineProps({
+  data: Object,
+});
+
+const chartData = computed(() => {
+  if (!props.data?.throughput?.length) return null;
+
+  const throughput = [...props.data.throughput].reverse();
+  
+  return {
+    labels: throughput.map(t => {
+      const date = new Date(t.timestamp);
+      return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+    }),
+    datasets: [
+      {
+        label: 'Ingested',
+        data: throughput.map(t => t.ingested || t.ingestedPerSecond || 0),
+        backgroundColor: createGradientBars('rose'),
+        borderColor: 'transparent',
+        borderWidth: 0,
+        borderRadius: 4,
+        barPercentage: 0.9,
+        categoryPercentage: 0.95,
+      },
+      {
+        label: 'Processed',
+        data: throughput.map(t => t.processed || t.processedPerSecond || 0),
+        backgroundColor: createGradientBars('purple'),
+        borderColor: 'transparent',
+        borderWidth: 0,
+        borderRadius: 4,
+        barPercentage: 0.9,
+        categoryPercentage: 0.95,
+      },
+    ],
+  };
+});
+
+function createGradientBars(color) {
+  return (context) => {
+    const chart = context.chart;
+    const {ctx, chartArea} = chart;
+    
+    if (!chartArea) {
+      return color === 'rose' ? colors.charts.ingested.border : colors.charts.processed.border;
+    }
+    
+    const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+    
+    if (color === 'rose') {
+      gradient.addColorStop(0, 'rgba(244, 63, 94, 0.9)');
+      gradient.addColorStop(1, 'rgba(244, 63, 94, 0.5)');
+    } else if (color === 'purple') {
+      gradient.addColorStop(0, 'rgba(168, 85, 247, 0.9)');
+      gradient.addColorStop(1, 'rgba(168, 85, 247, 0.5)');
+    }
+    
+    return gradient;
+  };
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    mode: 'index',
+    intersect: false,
+  },
+  scales: {
+    x: {
+      stacked: false,
+      grid: {
+        display: false,
+      },
+      border: {
+        display: false,
+      },
+      ticks: {
+        maxRotation: 0,
+        autoSkipPadding: 20,
+        font: {
+          size: 10,
+        },
+        color: '#9ca3af',
+      },
+    },
+    y: {
+      stacked: false,
+      beginAtZero: true,
+      border: {
+        display: false,
+      },
+      grid: {
+        display: false,
+      },
+      ticks: {
+        font: {
+          size: 11,
+        },
+        color: '#9ca3af',
+        padding: 8,
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top',
+      align: 'end',
+      labels: {
+        boxWidth: 12,
+        boxHeight: 12,
+        padding: 15,
+        usePointStyle: true,
+        pointStyle: 'circle',
+        font: {
+          size: 12,
+          weight: '500',
+        },
+        color: '#6b7280',
+      },
+    },
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      padding: 12,
+      cornerRadius: 8,
+      titleFont: {
+        size: 13,
+        weight: '600',
+      },
+      bodyFont: {
+        size: 12,
+      },
+      bodySpacing: 6,
+      usePointStyle: true,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex items-center gap-3">
+    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Time Range:</label>
+    <select
+      :value="modelValue"
+      @change="$emit('update:modelValue', $event.target.value)"
+      class="input w-40"
+    >
+      <option value="1h">Last Hour</option>
+      <option value="6h">Last 6 Hours</option>
+      <option value="24h">Last 24 Hours</option>
+      <option value="7d">Last 7 Days</option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: '1h',
+  },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="h-80">
+    <Bar v-if="chartData" :data="chartData" :options="chartOptions" />
+    <div v-else class="flex items-center justify-center h-full text-gray-500 text-sm">
+      No queue data available
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { colors } from '../../utils/colors';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const props = defineProps({
+  queues: Array,
+});
+
+const chartData = computed(() => {
+  if (!props.queues?.length) return null;
+
+  // Take top 10 queues by total messages
+  const topQueues = [...props.queues]
+    .sort((a, b) => (b.messages?.total || 0) - (a.messages?.total || 0))
+    .slice(0, 10);
+  
+  return {
+    labels: topQueues.map(q => q.name),
+    datasets: [
+      {
+        label: 'Total Messages',
+        data: topQueues.map(q => q.messages?.total || 0),
+        backgroundColor: createGradientBars(),
+        borderColor: 'transparent',
+        borderWidth: 0,
+        borderRadius: 8,
+        barThickness: 24,
+      },
+    ],
+  };
+});
+
+// Create gradient for bars
+function createGradientBars() {
+  return (context) => {
+    const chart = context.chart;
+    const {ctx, chartArea} = chart;
+    
+    if (!chartArea) {
+      return colors.secondary.rgba(0.8);
+    }
+    
+    const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
+    gradient.addColorStop(0, 'rgba(244, 63, 94, 0.8)');
+    gradient.addColorStop(0.5, 'rgba(236, 72, 153, 0.8)');
+    gradient.addColorStop(1, 'rgba(168, 85, 247, 0.8)');
+    
+    return gradient;
+  };
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  indexAxis: 'y',
+  scales: {
+    x: {
+      beginAtZero: true,
+      grid: {
+        display: false,
+      },
+      border: {
+        display: false,
+      },
+      ticks: {
+        font: {
+          size: 11,
+        },
+        color: '#9ca3af',
+      },
+    },
+    y: {
+      grid: {
+        display: false,
+      },
+      border: {
+        display: false,
+      },
+      ticks: {
+        font: {
+          size: 11,
+        },
+        color: '#6b7280',
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      padding: 12,
+      cornerRadius: 8,
+      titleFont: {
+        size: 13,
+      },
+      bodyFont: {
+        size: 12,
+      },
+    },
+  },
+};
+</script>

package/webapp/src/components/common/ConfirmDialog.vue

@@ -0,0 +1,56 @@
+<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="$emit('cancel')"
+      ></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="mb-4">
+          <h3 class="text-lg font-bold mb-2">{{ title }}</h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
+        </div>
+        
+        <div class="flex gap-3">
+          <button @click="$emit('cancel')" class="btn btn-secondary flex-1">
+            {{ cancelText }}
+          </button>
+          <button @click="$emit('confirm')" :class="`btn ${confirmClass} flex-1`">
+            {{ confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isOpen: Boolean,
+  title: {
+    type: String,
+    default: 'Confirm Action',
+  },
+  message: {
+    type: String,
+    default: 'Are you sure you want to proceed?',
+  },
+  confirmText: {
+    type: String,
+    default: 'Confirm',
+  },
+  cancelText: {
+    type: String,
+    default: 'Cancel',
+  },
+  confirmClass: {
+    type: String,
+    default: 'btn-primary',
+  },
+});
+
+defineEmits(['confirm', 'cancel']);
+</script>

package/webapp/src/components/common/LoadingSpinner.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center justify-center p-8">
+    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-rose-600"></div>
+  </div>
+</template>
+

package/webapp/src/components/common/MetricCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="metric-card animate-fade-in">
+    <p class="metric-label">{{ title }}</p>
+    <p class="metric-value">{{ formattedValue }}</p>
+    <p v-if="subtitle || (secondaryValue !== undefined && secondaryValue !== null)" class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
+      <span v-if="subtitle">{{ subtitle }}</span>
+      <span v-else>
+        {{ secondaryLabel }}: <span class="font-semibold">{{ formattedSecondary }}</span>
+      </span>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { formatNumber } from '../../utils/formatters';
+
+const props = defineProps({
+  title: String,
+  value: [String, Number],
+  subtitle: String,
+  secondaryValue: [String, Number],
+  secondaryLabel: String,
+});
+
+const formattedValue = computed(() => {
+  if (typeof props.value === 'number') {
+    return formatNumber(props.value);
+  }
+  return props.value;
+});
+
+const formattedSecondary = computed(() => {
+  if (props.secondaryValue !== undefined && props.secondaryValue !== null) {
+    if (typeof props.secondaryValue === 'number') {
+      return formatNumber(props.secondaryValue);
+    }
+    return props.secondaryValue;
+  }
+  return '';
+});
+</script>
+

package/webapp/src/components/common/StatusBadge.vue

@@ -0,0 +1,45 @@
+<template>
+  <span :class="badgeClass" class="flex items-center badge-glow">
+    <span v-if="showDot" class="w-2 h-2 rounded-full mr-1.5" :class="dotClass"></span>
+    {{ label }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  showDot: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const statusConfig = {
+  healthy: { class: 'badge-success', dot: 'bg-green-500', label: 'Healthy' },
+  stable: { class: 'badge-success', dot: 'bg-green-500', label: 'Stable' },
+  warning: { class: 'badge-warning', dot: 'bg-yellow-500', label: 'Warning' },
+  error: { class: 'badge-danger', dot: 'bg-red-500', label: 'Error' },
+  unhealthy: { class: 'badge-danger', dot: 'bg-red-500', label: 'Unhealthy' },
+  pending: { class: 'badge-warning', dot: 'bg-yellow-500', label: 'Pending' },
+  processing: { class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400', dot: 'bg-purple-500 animate-pulse', label: 'Processing' },
+  completed: { class: 'badge-success', dot: 'bg-green-500', label: 'Completed' },
+  failed: { class: 'badge-danger', dot: 'bg-red-500', label: 'Failed' },
+  dead_letter: { class: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300', dot: 'bg-gray-500', label: 'Dead Letter' },
+};
+
+const config = computed(() => statusConfig[props.status.toLowerCase()] || statusConfig.pending);
+const badgeClass = computed(() => `badge ${config.value.class}`);
+const dotClass = computed(() => config.value.dot);
+const label = computed(() => config.value.label);
+</script>
+
+<style scoped>
+.badge-glow {
+  transition: all 0.2s ease;
+}
+</style>

package/webapp/src/components/dashboard/MessageStatusCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="space-y-2.5">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Pending</span>
+        <span class="font-semibold">{{ formatNumber(calculatedPending) }}</span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Processing</span>
+        <span class="font-semibold">{{ formatNumber(data?.processing || 0) }}</span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Completed</span>
+        <span class="font-semibold text-green-600 dark:text-green-400">
+          {{ formatNumber(data?.completed || 0) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Failed</span>
+        <span class="font-semibold text-red-600 dark:text-red-400">
+          {{ formatNumber(data?.failed || 0) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Dead Letter</span>
+        <span class="font-semibold text-gray-600 dark:text-gray-400">
+          {{ formatNumber(data?.deadLetter || 0) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between text-sm pt-2 border-t border-gray-200 dark:border-gray-700">
+        <span class="text-gray-600 dark:text-gray-400">Total in DB</span>
+        <span class="font-semibold text-gray-500 dark:text-gray-400">
+          {{ formatNumber(data?.total || 0) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatNumber } from '../../utils/formatters';
+
+defineProps({
+  data: Object,
+  calculatedPending: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>

package/webapp/src/components/dashboard/PerformanceCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="space-y-2.5">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Requests/sec</span>
+        <span class="font-semibold font-mono">{{ data?.requests?.rate?.toFixed(2) || '0.00' }}</span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Messages/sec</span>
+        <span class="font-semibold font-mono">{{ data?.messages?.rate?.toFixed(2) || '0.00' }}</span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">DB Connections</span>
+        <span class="font-semibold font-mono">
+          {{ (data?.database?.poolSize || 0) - (data?.database?.idleConnections || 0) }}/{{ data?.database?.poolSize || 0 }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">Memory (Heap)</span>
+        <span class="font-semibold font-mono">{{ formatBytes(data?.memory?.heapUsed || 0) }}</span>
+      </div>
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-gray-600 dark:text-gray-400">CPU Time</span>
+        <span class="font-semibold font-mono">
+          {{ formatDuration(((data?.cpu?.user || 0) + (data?.cpu?.system || 0)) / 1000) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatBytes, formatDuration } from '../../utils/formatters';
+
+defineProps({
+  data: Object,
+});
+</script>