obmp-docker/traffic-gen-ui/src/components/StatusBar.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>