38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="status-bar">
|
||
|
|
<div class="status-badges">
|
||
|
|
<span class="badge" :class="connected ? 'badge-ok' : 'badge-err'">
|
||
|
|
{{ connected ? 'Connected' : 'Offline' }}
|
||
|
|
</span>
|
||
|
|
<span v-if="health" class="badge badge-info">
|
||
|
|
Mode: {{ health.mode || 'sender' }}
|
||
|
|
</span>
|
||
|
|
<span v-if="health" class="badge badge-info">
|
||
|
|
Flows: {{ health.active_flows || 0 }}
|
||
|
|
</span>
|
||
|
|
<span v-if="health" class="badge badge-info">
|
||
|
|
Tests: {{ health.active_tests || 0 }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
const props = defineProps({ health: Object, apiError: String })
|
||
|
|
const connected = computed(() => !props.apiError && props.health)
|
||
|
|
</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); }
|
||
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||
|
|
</style>
|