queen-mq 0.1.0

package/dashboard/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/dashboard/src/components/cards/MetricCard.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="metric-card-v3" :class="`metric-${color}`">
+    <div class="metric-icon-wrapper">
+      <i :class="icon"></i>
+    </div>
+    
+    <div class="metric-content">
+      <p class="metric-label">{{ title }}</p>
+      
+      <h3 class="metric-value" v-if="!loading">
+        {{ formattedValue }}{{ suffix }}
+      </h3>
+      <Skeleton v-else height="2rem" width="80%" />
+      
+      <p class="metric-change" :class="changeClass" v-if="change !== null && !loading">
+        <i :class="changeIcon"></i>
+        <span>{{ Math.abs(change) }}%</span>
+        <span class="metric-period">{{ period }}</span>
+      </p>
+    </div>
+    
+    <div class="metric-sparkline" v-if="sparklineData && sparklineData.length > 0">
+      <svg viewBox="0 0 80 30" preserveAspectRatio="none">
+        <polyline
+          :points="sparklinePoints"
+          fill="none"
+          :stroke="sparklineColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Skeleton from 'primevue/skeleton'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  icon: {
+    type: String,
+    default: 'pi pi-chart-line'
+  },
+  color: {
+    type: String,
+    default: 'primary',
+    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
+  },
+  change: {
+    type: Number,
+    default: null
+  },
+  period: {
+    type: String,
+    default: 'vs last hour'
+  },
+  suffix: {
+    type: String,
+    default: ''
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  sparklineData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Format large numbers
+const formattedValue = computed(() => {
+  const val = typeof props.value === 'string' ? parseFloat(props.value) : props.value
+  if (isNaN(val)) return props.value
+  
+  if (val >= 1000000) {
+    return (val / 1000000).toFixed(1) + 'M'
+  } else if (val >= 1000) {
+    return (val / 1000).toFixed(1) + 'K'
+  }
+  return val.toLocaleString()
+})
+
+// Change indicator
+const changeClass = computed(() => ({
+  positive: props.change > 0,
+  negative: props.change < 0,
+  neutral: props.change === 0
+}))
+
+const changeIcon = computed(() => {
+  if (props.change > 0) return 'pi pi-arrow-up'
+  if (props.change < 0) return 'pi pi-arrow-down'
+  return 'pi pi-minus'
+})
+
+// Sparkline calculation
+const sparklinePoints = computed(() => {
+  if (!props.sparklineData || props.sparklineData.length === 0) return ''
+  
+  const data = props.sparklineData
+  const max = Math.max(...data)
+  const min = Math.min(...data)
+  const range = max - min || 1
+  
+  return data.map((value, index) => {
+    const x = (index / (data.length - 1)) * 80
+    const y = 30 - ((value - min) / range) * 25
+    return `${x},${y}`
+  }).join(' ')
+})
+
+const sparklineColor = computed(() => {
+  const colors = {
+    primary: '#ec4899',
+    success: '#10b981',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    info: '#06b6d4'
+  }
+  return colors[props.color] || colors.primary
+})
+</script>
+
+<style scoped>
+.metric-card-v3 {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 1.25rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  position: relative;
+  overflow: hidden;
+  transition: all var(--transition-base);
+  min-height: auto;
+}
+
+/* Removed top gradient line */
+
+.metric-card-v3:hover {
+  border-color: rgba(236, 72, 153, 0.15);
+}
+
+.metric-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.metric-success .metric-icon-wrapper {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.metric-warning .metric-icon-wrapper {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+}
+
+.metric-danger .metric-icon-wrapper {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+}
+
+.metric-info .metric-icon-wrapper {
+  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+}
+
+.metric-icon-wrapper i {
+  font-size: 1.375rem;
+  color: white;
+}
+
+.metric-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.metric-label {
+  font-size: 0.625rem;
+  color: #78716c;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin: 0 0 0.5rem 0;
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.metric-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fafaf9;
+  line-height: 1;
+  margin: 0;
+}
+
+.metric-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.metric-change.positive {
+  color: var(--success-color);
+}
+
+.metric-change.negative {
+  color: var(--danger-color);
+}
+
+.metric-change.neutral {
+  color: var(--surface-400);
+}
+
+.metric-change i {
+  font-size: 0.75rem;
+}
+
+.metric-period {
+  color: var(--surface-400);
+  font-weight: 400;
+  margin-left: 0.25rem;
+}
+
+.metric-sparkline {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  width: 100px;
+  height: 40px;
+  opacity: 0.4;
+}
+
+.metric-card-v3:hover .metric-sparkline {
+  opacity: 0.6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .metric-card-v3 {
+    padding: 1rem;
+    min-height: 100px;
+  }
+  
+  .metric-icon-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .metric-icon-wrapper i {
+    font-size: 1rem;
+  }
+  
+  .metric-value {
+    font-size: 1.5rem;
+  }
+  
+  .metric-label {
+    font-size: 0.7rem;
+  }
+  
+  .metric-change {
+    font-size: 0.75rem;
+  }
+  
+  .metric-sparkline {
+    width: 60px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .metric-card-v3 {
+    padding: 0.875rem;
+  }
+  
+  .metric-value {
+    font-size: 1.25rem;
+  }
+}
+</style>

package/dashboard/src/components/charts/QueueDepthChart.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h3 class="chart-title">{{ title || 'Queue Depth' }}</h3>
+      <div class="chart-actions">
+        <Button 
+          icon="pi pi-refresh" 
+          class="p-button-text p-button-sm"
+          @click="$emit('refresh')"
+          v-tooltip="'Refresh'"
+        />
+      </div>
+    </div>
+    
+    <div class="queue-depth-chart">
+      <Chart 
+        v-if="!loading && chartDataWithTheme && chartDataWithTheme.labels && chartDataWithTheme.labels.length > 0"
+        :key="`queue-depth-${chartDataWithTheme.labels.length}`"
+        type="bar" 
+        :data="chartDataWithTheme" 
+        :options="chartOptionsWithTheme"
+        class="chart"
+      />
+      <div v-else-if="loading" class="chart-loading">
+        <ProgressSpinner />
+        <span>Loading chart data...</span>
+      </div>
+      <div v-else class="chart-empty">
+        <i class="pi pi-chart-bar empty-icon"></i>
+        <span>No queues with messages</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Chart from 'primevue/chart'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+
+// Import and register Chart.js components
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+)
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: null
+  },
+  data: {
+    type: Object,
+    default: null
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['refresh'])
+
+// Apply dark theme colors to chart data
+const chartDataWithTheme = computed(() => {
+  if (!props.data) return null
+  
+  // Create gradient colors for each dataset
+  const colors = {
+    pending: '#f59e0b',
+    processing: '#06b6d4',
+    completed: '#10b981',
+    failed: '#ef4444',
+    dead_letter: '#64748b'
+  }
+  
+  return {
+    labels: props.data.labels,
+    datasets: props.data.datasets?.map(dataset => ({
+      ...dataset,
+      backgroundColor: colors[dataset.label?.toLowerCase().replace(' ', '_')] || '#ec4899',
+      borderColor: 'transparent',
+      borderWidth: 0,
+      borderRadius: 4
+    })) || []
+  }
+})
+
+// Dark theme chart options
+const chartOptionsWithTheme = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'bottom',
+      labels: {
+        padding: 15,
+        usePointStyle: true,
+        font: {
+          size: 11,
+          family: 'Inter'
+        },
+        color: '#cbd5e1'
+      }
+    },
+    tooltip: {
+      backgroundColor: 'rgba(30, 41, 59, 0.95)',
+      titleColor: '#f1f5f9',
+      bodyColor: '#cbd5e1',
+      borderColor: 'rgba(236, 72, 153, 0.3)',
+      borderWidth: 1,
+      cornerRadius: 8,
+      padding: 12,
+      displayColors: true,
+      callbacks: {
+        label: (context) => {
+          return `${context.dataset.label}: ${context.parsed.y.toLocaleString()} messages`
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        display: false
+      },
+      ticks: {
+        color: '#94a3b8',
+        maxRotation: 45,
+        minRotation: 0,
+        font: {
+          size: 11
+        },
+        callback: function(value, index) {
+          const label = this.getLabelForValue(value)
+          return label && label.length > 15 ? label.substr(0, 15) + '...' : (label || '')
+        }
+      },
+      border: {
+        display: false
+      }
+    },
+    y: {
+      stacked: true,
+      beginAtZero: true,
+      grid: {
+        color: 'rgba(255, 255, 255, 0.03)',
+        drawBorder: false
+      },
+      ticks: {
+        color: '#94a3b8',
+        callback: (value) => {
+          if (value >= 1000000) {
+            return (value / 1000000).toFixed(1) + 'M'
+          } else if (value >= 1000) {
+            return (value / 1000).toFixed(1) + 'K'
+          }
+          return value
+        },
+        font: {
+          size: 11
+        }
+      },
+      border: {
+        display: false
+      }
+    }
+  },
+  animation: {
+    duration: 750,
+    easing: 'easeInOutQuart'
+  }
+}))
+</script>
+
+<style scoped>
+.chart-container {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.chart-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--surface-700);
+  margin: 0;
+}
+
+.chart-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.queue-depth-chart {
+  flex: 1;
+  min-height: 300px;
+  position: relative;
+}
+
+.chart {
+  height: 100%;
+}
+
+.chart-loading,
+.chart-empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: var(--surface-400);
+}
+
+.empty-icon {
+  font-size: 3rem;
+  color: var(--surface-300);
+}
+
+:deep(.p-button-sm) {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+:deep(.p-button-text) {
+  color: var(--surface-500);
+}
+
+:deep(.p-button-text:hover) {
+  background: rgba(236, 72, 153, 0.1);
+  color: var(--primary-500);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 1rem;
+  }
+  
+  .chart-title {
+    font-size: 1rem;
+  }
+  
+  .queue-depth-chart {
+    min-height: 250px;
+  }
+}
+</style>