queen-mq 0.1.0

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

@@ -0,0 +1,302 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <h3 class="chart-title">{{ title || 'Message Throughput' }}</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="throughput-chart">
+      <Chart 
+        v-if="!loading && chartDataWithTheme && chartDataWithTheme.labels && chartDataWithTheme.labels.length > 0"
+        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 data available</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
+  },
+  stacked: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['refresh'])
+
+// Apply dark theme colors to chart data
+const chartDataWithTheme = computed(() => {
+  if (!props.data) return null
+  
+  return {
+    labels: props.data.labels,
+    datasets: [
+      {
+        label: 'Incoming Messages',
+        backgroundColor: '#ec4899',
+        borderColor: '#ec4899',
+        borderWidth: 0,
+        borderRadius: 4,
+        data: props.data.datasets?.[0]?.data || []
+      },
+      {
+        label: 'Completed Messages',
+        backgroundColor: 'rgba(236, 72, 153, 0.5)',
+        borderColor: 'rgba(236, 72, 153, 0.5)',
+        borderWidth: 0,
+        borderRadius: 4,
+        data: props.data.datasets?.[1]?.data || []
+      },
+      {
+        label: 'Failed Messages',
+        backgroundColor: 'rgba(236, 72, 153, 0.2)',
+        borderColor: 'rgba(236, 72, 153, 0.2)',
+        borderWidth: 0,
+        borderRadius: 4,
+        data: props.data.datasets?.[2]?.data || []
+      }
+    ]
+  }
+})
+
+// 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,
+      mode: 'index',
+      intersect: false,
+      callbacks: {
+        label: (context) => {
+          return `${context.dataset.label}: ${context.parsed.y.toLocaleString()} messages`
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      stacked: props.stacked,
+      grid: {
+        display: false
+      },
+      ticks: {
+        color: '#94a3b8',
+        maxRotation: 0,
+        autoSkipPadding: 20,
+        font: {
+          size: 11
+        }
+      },
+      border: {
+        display: false
+      }
+    },
+    y: {
+      stacked: props.stacked,
+      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
+      }
+    }
+  },
+  interaction: {
+    mode: 'index',
+    intersect: false
+  },
+  animation: {
+    duration: 300,
+    easing: 'easeInOutQuart',
+    // Smooth animations for real-time updates
+    onComplete: null,
+    onProgress: null
+  },
+  // Enable smooth transitions for data updates
+  transitions: {
+    active: {
+      animation: {
+        duration: 200
+      }
+    }
+  }
+}))
+</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;
+}
+
+.throughput-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;
+  }
+  
+  .throughput-chart {
+    min-height: 250px;
+  }
+}
+</style>

package/dashboard/src/components/common/ActivityFeed.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="activity-feed">
+    <ScrollPanel class="feed-container">
+      <div v-if="events.length > 0" class="feed-items">
+        <div 
+          v-for="event in events" 
+          :key="event.id"
+          class="feed-item fade-in"
+        >
+          <div class="feed-icon" :class="getEventClass(event.event)">
+            <i :class="getEventIcon(event.event)"></i>
+          </div>
+          
+          <div class="feed-content">
+            <div class="feed-title">{{ getEventTitle(event.event) }}</div>
+            <div class="feed-details">
+              <span v-if="event.data && event.data.queue" class="feed-queue">
+                {{ event.data.queue }}
+                <span v-if="event.data.partition && event.data.partition !== 'Default'">
+                  /{{ event.data.partition }}
+                </span>
+              </span>
+              <span v-if="event.data && event.data.transactionId" class="feed-id">
+                {{ event.data.transactionId.substring(0, 8) }}...
+              </span>
+            </div>
+            <div class="feed-time">{{ formatTime(event.timestamp) }}</div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-else class="feed-empty">
+        <i class="pi pi-inbox empty-icon"></i>
+        <span>No activity yet</span>
+        <span class="empty-subtitle">Events will appear here in real-time</span>
+      </div>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import ScrollPanel from 'primevue/scrollpanel'
+import { formatRelativeTime } from '../../utils/helpers.js'
+
+const props = defineProps({
+  events: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Get event icon
+const getEventIcon = (eventType) => {
+  if (!eventType || typeof eventType !== 'string') return 'pi pi-info-circle'
+  const icons = {
+    'message.pushed': 'pi pi-plus',
+    'message.processing': 'pi pi-spin pi-spinner',
+    'message.completed': 'pi pi-check',
+    'message.failed': 'pi pi-times',
+    'queue.created': 'pi pi-inbox',
+    'queue.depth': 'pi pi-chart-bar',
+    'system.stats': 'pi pi-chart-line',
+    'client.connected': 'pi pi-sign-in',
+    'client.disconnected': 'pi pi-sign-out'
+  }
+  return icons[eventType] || 'pi pi-info-circle'
+}
+
+// Get event class for styling
+const getEventClass = (eventType) => {
+  if (!eventType || typeof eventType !== 'string') return 'event-default'
+  if (eventType.includes('completed')) return 'event-success'
+  if (eventType.includes('failed')) return 'event-danger'
+  if (eventType.includes('processing')) return 'event-info'
+  if (eventType.includes('pushed') || eventType.includes('created')) return 'event-primary'
+  return 'event-default'
+}
+
+// Get event title
+const getEventTitle = (eventType) => {
+  if (!eventType || typeof eventType !== 'string') return 'Unknown Event'
+  const titles = {
+    'message.pushed': 'Message Pushed',
+    'message.processing': 'Processing Message',
+    'message.completed': 'Message Completed',
+    'message.failed': 'Message Failed',
+    'queue.created': 'Queue Created',
+    'queue.depth': 'Queue Depth Update',
+    'system.stats': 'System Stats Update',
+    'client.connected': 'Client Connected',
+    'client.disconnected': 'Client Disconnected'
+  }
+  return titles[eventType] || eventType
+}
+
+// Format time
+const formatTime = (timestamp) => {
+  return formatRelativeTime(timestamp)
+}
+</script>
+
+<style scoped>
+.activity-feed {
+  height: 100%;
+}
+
+.feed-container {
+  height: 350px;
+}
+
+:deep(.p-scrollpanel-content) {
+  padding: 0.5rem;
+}
+
+.feed-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.feed-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.875rem;
+  border-radius: 8px;
+  background: var(--surface-0);
+  border: 1px solid rgba(255, 255, 255, 0.03);
+  transition: all 0.2s ease;
+}
+
+.feed-item:hover {
+  background: rgba(236, 72, 153, 0.05);
+  border-color: rgba(236, 72, 153, 0.1);
+}
+
+.feed-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+}
+
+.event-primary {
+  background: rgba(236, 72, 153, 0.15);
+  color: var(--primary-500);
+}
+
+.event-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--success-color);
+}
+
+.event-info {
+  background: rgba(6, 182, 212, 0.15);
+  color: var(--info-color);
+}
+
+.event-danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger-color);
+}
+
+.event-default {
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--surface-400);
+}
+
+.feed-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.feed-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--surface-600);
+  margin-bottom: 0.125rem;
+}
+
+.feed-details {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--surface-400);
+  margin-bottom: 0.25rem;
+}
+
+.feed-queue {
+  background: rgba(236, 72, 153, 0.1);
+  color: var(--primary-500);
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.feed-id {
+  font-family: 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: var(--surface-400);
+}
+
+.feed-time {
+  font-size: 0.75rem;
+  color: var(--surface-300);
+}
+
+.feed-empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--surface-400);
+  padding: 2rem;
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  color: var(--surface-300);
+  margin-bottom: 0.5rem;
+}
+
+.empty-subtitle {
+  font-size: 0.875rem;
+  color: var(--surface-300);
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>