152 lines
7.0 KiB
Vue
152 lines
7.0 KiB
Vue
<template>
|
|
<div class="space-y-3">
|
|
<p class="text-[11px] text-muted leading-relaxed">
|
|
durable timers · Continue-As-New · heartbeat · signal-driven stop · ~30 min long-running
|
|
</p>
|
|
<div class="flex items-center gap-3 text-[10px] text-muted/60">
|
|
<span class="font-mono">app/Temporal/SystemMonitor/</span>
|
|
<a href="https://docs.temporal.io/develop/php/timers#timers" target="_blank" class="text-accent/50 hover:text-accent transition-colors">Workflow::timer()</a>
|
|
<a href="https://docs.temporal.io/develop/php/continue-as-new" target="_blank" class="text-accent/50 hover:text-accent transition-colors">Continue-As-New</a>
|
|
<a href="https://docs.temporal.io/develop/php/message-passing#signals" target="_blank" class="text-accent/50 hover:text-accent transition-colors">signals</a>
|
|
</div>
|
|
|
|
<SimulationControls v-model="simulation" />
|
|
|
|
<!-- Config sliders -->
|
|
<div class="flex items-center gap-4 text-[10px] text-muted">
|
|
<label class="flex items-center gap-1.5">
|
|
<span class="text-label">Interval</span>
|
|
<input type="range" v-model.number="intervalSeconds" min="5" max="120" step="5" class="w-20 accent-accent">
|
|
<span class="text-value w-8 text-right">{{ intervalSeconds }}s</span>
|
|
</label>
|
|
<label class="flex items-center gap-1.5">
|
|
<span class="text-label">Iterations</span>
|
|
<input type="range" v-model.number="maxIterations" min="3" max="60" step="1" class="w-20 accent-accent">
|
|
<span class="text-value w-6 text-right">{{ maxIterations }}</span>
|
|
</label>
|
|
<span class="text-muted/50">~{{ Math.round(intervalSeconds * maxIterations / 60) }} min</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button @click="startMonitor"
|
|
class="px-3 py-1 text-[11px] font-medium uppercase tracking-wider bg-accent/15 text-accent border border-accent/30 hover:bg-accent/25 hover:border-accent/50 transition-all rounded-sm cursor-pointer">
|
|
Start Monitor
|
|
</button>
|
|
<button v-if="workflowId && !isTerminal" @click="stopMonitor"
|
|
class="px-2 py-0.5 text-[10px] uppercase tracking-wider text-danger border border-danger/30 hover:bg-danger/10 transition-all rounded-sm cursor-pointer">
|
|
Stop
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="workflowId" class="bg-deep/50 border border-border rounded-sm p-3 space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full"
|
|
:class="isTerminal ? 'bg-accent' : 'bg-accent animate-pulse-dot'"></span>
|
|
<span class="text-[11px] text-value">{{ status.status || 'starting' }}</span>
|
|
</div>
|
|
|
|
<!-- Iteration + health score -->
|
|
<div class="flex items-center gap-4 text-[10px] text-muted">
|
|
<span>iteration <span class="text-value">{{ status.iteration || 0 }}</span> / {{ status.totalIterations || maxIterations }}</span>
|
|
<span>health <span class="font-medium" :class="scoreColor">{{ status.healthScore ?? '—' }}</span></span>
|
|
<span v-if="status.startedAt">started <span class="text-value">{{ formatTime(status.startedAt) }}</span></span>
|
|
<span v-if="status.lastCheckAt">last check <span class="text-value">{{ formatTime(status.lastCheckAt) }}</span></span>
|
|
</div>
|
|
|
|
<!-- Health score bar -->
|
|
<div class="h-1.5 bg-border/30 rounded-full overflow-hidden">
|
|
<div class="h-full rounded-full transition-all duration-500"
|
|
:class="scoreBarColor"
|
|
:style="{ width: (status.healthScore ?? 100) + '%' }">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check history -->
|
|
<div v-if="(status.checkHistory || []).length" class="space-y-1 pt-1 border-t border-border/30">
|
|
<div class="text-[10px] text-muted uppercase tracking-wider">Check History (last {{ status.checkHistory.length }})</div>
|
|
<div v-for="(check, i) in [...(status.checkHistory || [])].reverse()" :key="i"
|
|
class="flex items-center gap-3 text-[10px] border-b border-border/10 py-0.5">
|
|
<span class="text-muted w-28">{{ formatTime(check.timestamp) }}</span>
|
|
<span class="font-medium w-6 text-right" :class="check.healthScore >= 80 ? 'text-accent' : check.healthScore >= 50 ? 'text-warn' : 'text-danger'">{{ check.healthScore }}</span>
|
|
<span v-if="check.checks" class="text-muted/60">
|
|
{{ check.checks.product_count || 0 }} products ·
|
|
{{ check.checks.order_count || 0 }} orders ·
|
|
{{ check.checks.out_of_stock_products || 0 }} OOS
|
|
</span>
|
|
<span v-if="check.attempt > 1" class="text-warn text-[9px]">attempt {{ check.attempt }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import axios from 'axios';
|
|
import { usePolling } from '../composables/usePolling.js';
|
|
import SimulationControls from './SimulationControls.vue';
|
|
|
|
const simulation = ref({
|
|
failureRate: 0,
|
|
latencyMs: 0,
|
|
rateLimiting: { enabled: false, hitChance: 25, retryAfterMs: 2000 },
|
|
});
|
|
|
|
const intervalSeconds = ref(60);
|
|
const maxIterations = ref(30);
|
|
const workflowId = ref(null);
|
|
const status = ref({});
|
|
|
|
const isTerminal = computed(() =>
|
|
['completed', 'stopped', 'failed'].includes(status.value.status) || !!status.value.error
|
|
);
|
|
|
|
const scoreColor = computed(() => {
|
|
const s = status.value.healthScore ?? 100;
|
|
if (s >= 80) return 'text-accent';
|
|
if (s >= 50) return 'text-warn';
|
|
return 'text-danger';
|
|
});
|
|
|
|
const scoreBarColor = computed(() => {
|
|
const s = status.value.healthScore ?? 100;
|
|
if (s >= 80) return 'bg-accent';
|
|
if (s >= 50) return 'bg-warn';
|
|
return 'bg-danger';
|
|
});
|
|
|
|
function formatTime(iso) {
|
|
if (!iso) return '—';
|
|
try {
|
|
return new Date(iso).toLocaleTimeString();
|
|
} catch {
|
|
return iso;
|
|
}
|
|
}
|
|
|
|
const { start: startPolling } = usePolling(async () => {
|
|
const { data } = await axios.get(`/temporal/system-monitor/${workflowId.value}/status`);
|
|
if (data.error && !data.status) {
|
|
status.value = { ...status.value, status: 'completed' };
|
|
return true;
|
|
}
|
|
status.value = data;
|
|
return isTerminal.value;
|
|
}, 3000);
|
|
|
|
async function startMonitor() {
|
|
const { data } = await axios.post('/temporal/system-monitor/start', {
|
|
interval_seconds: intervalSeconds.value,
|
|
max_iterations: maxIterations.value,
|
|
simulation: simulation.value,
|
|
});
|
|
workflowId.value = data.workflow_id;
|
|
status.value = { status: 'starting' };
|
|
startPolling();
|
|
}
|
|
|
|
async function stopMonitor() {
|
|
await axios.post(`/temporal/system-monitor/${workflowId.value}/stop`);
|
|
}
|
|
</script>
|