queen-mq 0.1.5 → 0.2.0

package/webapp/COLOR_GUIDE.md

@@ -1,118 +0,0 @@
-# Color Customization Guide
-
-## Quick Color Change
-
-To change the entire app's color scheme, edit **ONE FILE**:
-
-### **File:** `src/utils/colors.js`
-
-```javascript
-export const colors = {
-  // PRIMARY COLORS - Change these!
-  primary: {
-    name: 'Rose',
-    hex: '#f43f5e',      // Change to your color
-    rgb: 'rgb(244, 63, 94)',
-    rgba: (opacity) => `rgba(244, 63, 94, ${opacity})`,
-  },
-  secondary: {
-    name: 'Purple', 
-    hex: '#a855f7',      // Change to your color
-    rgb: 'rgb(168, 85, 247)',
-    rgba: (opacity) => `rgba(168, 85, 247, ${opacity})`,
-  },
-  // ... rest of config
-};
-```
-
-## Current Color Scheme
-
-**Primary (Charts - Ingested):** Rose (#f43f5e)  
-**Secondary (Charts - Processed):** Purple (#a855f7)
-
-## Where Colors Are Used
-
-### **Primary (Rose)**
-- Dashboard throughput chart - "Ingested" line
-- Analytics message flow - "Ingested" line
-- Accent colors
-
-### **Secondary (Purple)**
-- Dashboard throughput chart - "Processed" line
-- Analytics message flow - "Processed" line
-- Top queues bar chart
-- Accent elements
-
-### **Status Colors** (Fixed)
-- Success/Completed: Green
-- Warning/Pending: Yellow
-- Danger/Failed: Red
-- Info: Blue
-- Dead Letter: Gray
-
-## How to Change
-
-### Example: Switch to Blue & Cyan
-
-```javascript
-// In src/utils/colors.js
-primary: {
-  name: 'Blue',
-  hex: '#3b82f6',
-  rgb: 'rgb(59, 130, 246)',
-  rgba: (opacity) => `rgba(59, 130, 246, ${opacity})`,
-},
-secondary: {
-  name: 'Cyan', 
-  hex: '#06b6d4',
-  rgb: 'rgb(6, 182, 212)',
-  rgba: (opacity) => `rgba(6, 182, 212, ${opacity})`,
-},
-```
-
-### Example: Switch to Orange & Pink
-
-```javascript
-primary: {
-  name: 'Orange',
-  hex: '#f97316',
-  rgb: 'rgb(249, 115, 22)',
-  rgba: (opacity) => `rgba(249, 115, 22, ${opacity})`,
-},
-secondary: {
-  name: 'Pink', 
-  hex: '#ec4899',
-  rgb: 'rgb(236, 72, 153)',
-  rgba: (opacity) => `rgba(236, 72, 153, ${opacity})`,
-},
-```
-
-## Tailwind Config
-
-Also update `tailwind.config.js` for consistency:
-
-```javascript
-colors: {
-  'queen-primary': '#f43f5e',    // Match primary
-  'queen-secondary': '#a855f7',  // Match secondary
-  'queen-accent': '#ec4899',     // Optional third color
-},
-```
-
-## Current Implementation
-
-✅ **Centralized**: All chart colors in one place  
-✅ **Easy to change**: Edit one file  
-✅ **Consistent**: Used across all charts  
-✅ **Type-safe**: Helper functions for opacity  
-
-## Files Using Color System
-
-1. `src/components/dashboard/ThroughputChart.vue`
-2. `src/components/analytics/MessageFlowChart.vue`
-3. `src/components/analytics/TopQueuesChart.vue`
-4. `src/components/analytics/MessageDistributionChart.vue`
-5. `tailwind.config.js` (for CSS utilities)
-
-Change `src/utils/colors.js` and all charts update automatically! 🎨
-

package/webapp/README.md

@@ -1,143 +0,0 @@
-# Queen Message Queue - Web Application
-
-Modern web interface for managing and monitoring the Queen Message Queue system.
-
-## Prerequisites
-
-- Node.js 18+ 
-- npm or yarn
-- Queen Message Queue server running on `http://localhost:6632`
-
-## Installation
-
-Install dependencies:
-
-```bash
-npm install vue@latest vue-router@latest axios@latest
-npm install chart.js@latest vue-chartjs@latest
-npm install -D vite@latest @vitejs/plugin-vue@latest
-npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
-```
-
-Or all at once:
-
-```bash
-npm install vue vue-router axios chart.js vue-chartjs && npm install -D vite @vitejs/plugin-vue tailwindcss postcss autoprefixer
-```
-
-## Configuration
-
-The application connects to the Queen API at `http://localhost:6632` by default.
-
-To change this, create a `.env` file:
-
-```
-VITE_API_BASE_URL=http://your-api-url:port
-```
-
-## Development
-
-Start the development server on port 4000:
-
-```bash
-npm run dev
-```
-
-The application will be available at `http://localhost:4000`
-
-## Build for Production
-
-```bash
-npm run build
-```
-
-Output will be in the `dist/` directory.
-
-## Features
-
-### ✅ Implemented (Dashboard)
-- Real-time health monitoring
-- System metrics and statistics
-- Message throughput visualization
-- Performance monitoring
-- Top queues overview
-- Dark/light theme support
-
-### 🚧 Coming Soon
-- Queues management
-- Queue detail views
-- Consumer groups monitoring
-- Message browser
-- Analytics and insights
-
-## Architecture
-
-### Technology Stack
-- **Vue 3** - Composition API
-- **Vue Router** - Client-side routing
-- **Axios** - HTTP client
-- **Chart.js** - Data visualization
-- **Tailwind CSS** - Styling
-- **Vite** - Build tool
-
-### Project Structure
-
-```
-webapp/
-├── public/          # Static assets
-├── src/
-│   ├── api/         # API client modules
-│   ├── assets/      # Styles and fonts
-│   ├── components/  # Vue components
-│   │   ├── common/      # Reusable components
-│   │   ├── dashboard/   # Dashboard-specific
-│   │   └── layout/      # Layout components
-│   ├── composables/ # Vue composables
-│   ├── router/      # Router configuration
-│   ├── utils/       # Utility functions
-│   └── views/       # Page components
-```
-
-## API Integration
-
-The application integrates with the following Queen API endpoints:
-
-**Dashboard:**
-- `GET /health` - Server health
-- `GET /metrics` - System metrics
-- `GET /api/v1/resources/overview` - System overview
-- `GET /api/v1/status` - Status with throughput
-- `GET /api/v1/resources/queues` - Queue list
-
-All API calls use real data - no mocking!
-
-## Development Notes
-
-- **No WebSocket** - Currently using manual refresh only
-- **No Auto-refresh** - User-controlled data updates
-- **Clean Design** - Minimal animations, focus on clarity
-- **Responsive** - Works on desktop and tablet
-- **Theme Support** - Full light/dark mode
-
-## Troubleshooting
-
-**CORS Errors:**
-Ensure the Queen server has CORS enabled. The server should include:
-```
-Access-Control-Allow-Origin: *
-```
-
-**API Connection:**
-Check that the Queen server is running on port 6632:
-```bash
-curl http://localhost:6632/health
-```
-
-**Port 4000 in use:**
-Change the port in `vite.config.js`:
-```javascript
-server: {
-  port: 4001, // or another port
-}
-```
-