obmp-docker/traffic-gen-ui/src/components/TestBuilder.vue

<template>
  <div class="test-builder">
    <h3>RFC 2544 Test</h3>

    <div class="form-row">
      <label>Test Type</label>
      <select v-model="form.type">
        <option value="throughput">Throughput (binary search for max rate)</option>
        <option value="latency">Latency (measure RTT)</option>
        <option value="frame_loss">Frame Loss (loss vs rate curve)</option>
        <option value="back_to_back">Back-to-Back (max burst)</option>
      </select>
    </div>

    <div class="form-row">
      <label>Base Flow</label>
      <select v-model="form.flow_id">
        <option value="" disabled>Select a flow...</option>
        <option v-for="f in flows" :key="f.id" :value="f.id">
          {{ f.name || f.dst_ip }} ({{ f.protocol }})
        </option>
      </select>
    </div>

    <div class="form-row">
      <label>Frame Sizes</label>
      <div class="frame-sizes">
        <label v-for="s in standardSizes" :key="s" class="checkbox-label">
          <input type="checkbox" :value="s" v-model="form.frame_sizes" /> {{ s }}
        </label>
      </div>
    </div>

    <div class="form-row-pair">
      <div class="form-row">
        <label>Trial Duration (sec)</label>
        <input v-model.number="form.trial_duration" type="number" min="5" max="300" />
      </div>
      <div class="form-row">
        <label>Max Rate (pps)</label>
        <input v-model.number="form.max_rate_pps" type="number" min="10" max="100000" />
      </div>
    </div>

    <div class="form-row">
      <label>Acceptable Loss %</label>
      <input v-model.number="form.acceptable_loss_pct" type="number" min="0" max="100" step="0.1" />
    </div>

    <button class="btn btn-accent" @click="create" :disabled="!form.flow_id">
      Create & Run Test
    </button>

    <div class="presets-section">
      <h4>Quick Presets</h4>
      <div class="preset-list">
        <button v-for="(p, name) in presets" :key="name" class="btn-preset" @click="loadPreset(name)">
          <strong>{{ name }}</strong>
          <span>{{ p.description }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { api } from '../api.js'

const props = defineProps({ flows: Array })
const emit = defineEmits(['created', 'refresh'])

const standardSizes = [64, 128, 256, 512, 1024, 1280, 1518]
const presets = ref({})

const form = reactive({
  type: 'throughput',
  flow_id: '',
  frame_sizes: [64, 512, 1518],
  trial_duration: 30,
  max_rate_pps: 10000,
  acceptable_loss_pct: 0.0,
})

onMounted(async () => {
  try { const r = await api.presets(); presets.value = r.presets || r } catch (_) {}
})

async function create() {
  try {
    const test = await api.createTest({ ...form })
    await api.startTest(test.id)
    emit('created')
  } catch (e) { alert(e.message) }
}

async function loadPreset(name) {
  try {
    await api.loadPreset(name, {})
    emit('refresh')
  } catch (e) { alert(e.message) }
}
</script>

<style scoped>
h3 { font-size: 15px; margin-bottom: 12px; color: var(--accent); }
h4 { font-size: 13px; margin: 16px 0 8px; color: var(--muted); }
.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.form-row input, .form-row select { width: 100%; }
.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frame-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-label { font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--text); cursor: pointer; }
.btn { padding: 8px 16px; font-weight: 600; font-size: 13px; width: 100%; margin-top: 8px; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:disabled { opacity: 0.4; }
.preset-list { display: flex; flex-direction: column; gap: 6px; }
.btn-preset {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 12px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); text-align: left;
}
.btn-preset:hover { border-color: var(--accent); }
.btn-preset strong { font-size: 12px; color: var(--accent); }
.btn-preset span { font-size: 11px; color: var(--muted); }
</style>