sam
1f0936763b
Adds sender/responder mode switching via API, QuickPing component, echo-mode responder with dedicated container, improved flow state sync, and RFC2544 test runner enhancements. Includes UI improvements across all traffic-gen components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<template>
|
|
<div class="status-bar">
|
|
<div class="status-badges">
|
|
<span class="badge" :class="connected ? 'badge-ok' : 'badge-err'">
|
|
{{ connected ? 'API Connected' : 'API Offline' }}
|
|
</span>
|
|
<span v-if="health" class="badge badge-mode" :class="'mode-' + (health.mode || 'sender')" @click="toggleMode">
|
|
{{ (health.mode || 'sender').toUpperCase() }}
|
|
</span>
|
|
<span v-if="health" class="badge badge-info">
|
|
Active Flows: {{ health.active_flows || 0 }}
|
|
</span>
|
|
<span v-if="health" class="badge badge-info">
|
|
Active Tests: {{ health.active_tests || 0 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { api } from '../api.js'
|
|
|
|
const props = defineProps({ health: Object, apiError: String })
|
|
const emit = defineEmits(['modeChanged'])
|
|
const connected = computed(() => !props.apiError && props.health)
|
|
const switching = ref(false)
|
|
|
|
async function toggleMode() {
|
|
if (switching.value || !props.health) return
|
|
const current = props.health.mode || 'sender'
|
|
const next = current === 'sender' ? 'responder' : 'sender'
|
|
if (!confirm(`Switch to ${next.toUpperCase()} mode? This will stop all active flows/tests.`)) return
|
|
switching.value = true
|
|
try {
|
|
await api.setMode(next)
|
|
emit('modeChanged')
|
|
} catch (e) {
|
|
alert('Failed to switch mode: ' + e.message)
|
|
} finally {
|
|
switching.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status-bar { display: flex; align-items: center; gap: 8px; }
|
|
.status-badges { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.badge {
|
|
font-size: 11px; padding: 3px 10px; border-radius: 12px;
|
|
font-weight: 600; letter-spacing: 0.03em;
|
|
}
|
|
.badge-ok { background: rgba(72,187,120,0.15); color: var(--success); }
|
|
.badge-err { background: rgba(252,129,129,0.15); color: var(--danger); animation: pulse 1.5s infinite; }
|
|
.badge-info { background: rgba(79,156,249,0.12); color: var(--accent); }
|
|
.badge-mode { cursor: pointer; transition: background 0.2s; }
|
|
.badge-mode:hover { opacity: 0.8; }
|
|
.mode-sender { background: rgba(72,187,120,0.2); color: var(--success); }
|
|
.mode-responder { background: rgba(246,173,85,0.2); color: var(--warning); }
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
</style>
|