84 lines
3.9 KiB
Vue
84 lines
3.9 KiB
Vue
<template>
|
|
<div class="space-y-3">
|
|
<p class="text-[11px] text-muted leading-relaxed">
|
|
per-record parallel enrichment · per-API retry policies · multiple external APIs
|
|
</p>
|
|
<div class="flex items-center gap-3 text-[10px] text-muted/60">
|
|
<span class="font-mono">app/Temporal/DataEnrichment/</span>
|
|
<a href="https://docs.temporal.io/develop/php/asynchronous-activity-completion" target="_blank" class="text-accent/50 hover:text-accent transition-colors">Workflow::async()</a>
|
|
<a href="https://php.temporal.io/classes/Temporal-Common-RetryOptions.html" target="_blank" class="text-accent/50 hover:text-accent transition-colors">per-API RetryOptions</a>
|
|
<a href="https://docs.temporal.io/develop/php/message-passing#queries" target="_blank" class="text-accent/50 hover:text-accent transition-colors">queries</a>
|
|
</div>
|
|
|
|
<SimulationControls v-model="simulation" />
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button @click="startEnrichment"
|
|
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 Enrichment
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="workflowId" class="bg-deep/50 border border-border rounded-sm p-3 space-y-2">
|
|
<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>
|
|
|
|
<div class="flex items-center gap-4 text-[10px] text-muted">
|
|
<span>enriched <span class="text-value">{{ status.enrichedRecords || 0 }}</span> / {{ status.totalRecords || 0 }}</span>
|
|
<span>failed <span class="text-danger">{{ status.failedRecords || 0 }}</span></span>
|
|
</div>
|
|
|
|
<div v-if="status.apiStats" class="space-y-1 pt-1 border-t border-border/30">
|
|
<div class="text-[10px] text-muted uppercase tracking-wider">Per-API Stats</div>
|
|
<div v-for="(stats, api) in status.apiStats" :key="api"
|
|
class="flex items-center gap-3 text-[10px]">
|
|
<span class="text-label w-16">{{ api }}</span>
|
|
<span class="text-muted">calls <span class="text-value">{{ stats.calls }}</span></span>
|
|
<span class="text-muted">retries <span class="text-warn">{{ stats.retries }}</span></span>
|
|
<span class="text-muted">429s <span class="text-warn">{{ stats.rateLimits }}</span></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 workflowId = ref(null);
|
|
const status = ref({});
|
|
|
|
const isTerminal = computed(() =>
|
|
['completed', 'failed'].includes(status.value.status) || !!status.value.error
|
|
);
|
|
|
|
const { start: startPolling } = usePolling(async () => {
|
|
const { data } = await axios.get(`/temporal/enrichment/${workflowId.value}/status`);
|
|
if (data.error && !data.status) {
|
|
status.value = { ...status.value, status: 'completed' };
|
|
return true;
|
|
}
|
|
status.value = data;
|
|
return isTerminal.value;
|
|
});
|
|
|
|
async function startEnrichment() {
|
|
const { data } = await axios.post('/temporal/enrichment/start', { simulation: simulation.value });
|
|
workflowId.value = data.workflow_id;
|
|
status.value = { status: 'starting' };
|
|
startPolling();
|
|
}
|
|
</script>
|