queen-mq 0.1.1 → 0.1.2

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

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

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