YakumoLabs/gatus
4
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(suite): Display condition results when user clicks step in execution flow (#1278)

Browse Source
This commit is contained in:
TwiN
2025-09-19 12:43:43 -04:00
committed by GitHub
parent 1658825525
commit c87c651ff0
6 changed files with 155 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/app/src/components/StepDetailsModal.vue
View File

@@ -74,6 +74,92 @@
</div>
</div>
</div>
<!-- Condition Results -->
<div v-if="step.result?.conditionResults?.length" class="space-y-2">
<h3 class="text-sm font-medium flex items-center gap-2">
<CheckCircle class="w-4 h-4" />
Condition Results ({{ step.result.conditionResults.length }})
</h3>
<div class="space-y-2 max-h-48 overflow-y-auto">
<div
v-for="(conditionResult, index) in step.result.conditionResults"
:key="index"
class="flex items-start gap-3 p-1 rounded-lg border"
:class="conditionResult.success
? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-700'
: 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-700'"
>
<!-- Status icon -->
<div class="flex-shrink-0 mt-0.5">
<CheckCircle
v-if="conditionResult.success"
class="w-4 h-4 text-green-600 dark:text-green-400"
/>
<XCircle
v-else
class="w-4 h-4 text-red-600 dark:text-red-400"
/>
</div>
<!-- Condition text -->
<div class="flex-1 min-w-0 flex items-center justify-between gap-3">
<p class="text-sm font-mono break-all"
:class="conditionResult.success
? 'text-green-800 dark:text-green-200'
: 'text-red-800 dark:text-red-200'">
{{ conditionResult.condition }}
</p>
<span class="text-xs font-medium whitespace-nowrap"
:class="conditionResult.success
? 'text-green-600 dark:text-green-400'
: 'text-red-600 dark:text-red-400'">
{{ conditionResult.success ? 'Passed' : 'Failed' }}
</span>
</div>
</div>
</div>
</div>
<!-- Endpoint Configuration -->
<div v-if="step.endpoint" class="space-y-2">
<h3 class="text-sm font-medium flex items-center gap-2">
<Settings class="w-4 h-4" />
Endpoint Configuration
</h3>
<div class="space-y-3 text-xs">
<div v-if="step.endpoint.url">
<span class="text-muted-foreground">URL:</span>
<p class="font-mono mt-1 break-all">{{ step.endpoint.url }}</p>
</div>
<div v-if="step.endpoint.method">
<span class="text-muted-foreground">Method:</span>
<p class="mt-1 font-medium">{{ step.endpoint.method }}</p>
</div>
<div v-if="step.endpoint.interval">
<span class="text-muted-foreground">Interval:</span>
<p class="mt-1">{{ step.endpoint.interval }}</p>
</div>
<div v-if="step.endpoint.timeout">
<span class="text-muted-foreground">Timeout:</span>
<p class="mt-1">{{ step.endpoint.timeout }}</p>
</div>
</div>
</div>
<!-- Result Errors (separate from step errors) -->
<div v-if="step.result?.errors?.length" class="space-y-2">
<h3 class="text-sm font-medium flex items-center gap-2 text-red-600 dark:text-red-400">
<AlertCircle class="w-4 h-4" />
Result Errors ({{ step.result.errors.length }})
</h3>
<div class="space-y-2 max-h-32 overflow-y-auto">
<div v-for="(error, index) in step.result.errors" :key="index"
class="p-3 bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-700 rounded text-sm font-mono text-red-800 dark:text-red-300 break-all">
{{ error }}
</div>
</div>
</div>
</div>
</div>
</div>
@@ -81,7 +167,7 @@
<script setup>
import { computed } from 'vue'
import { X, AlertCircle, RotateCcw, Download, CheckCircle, XCircle, SkipForward, Pause, Clock } from 'lucide-vue-next'
import { X, AlertCircle, RotateCcw, Download, CheckCircle, XCircle, SkipForward, Pause, Clock, Settings } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { formatDuration } from '@/utils/format'
import { prettifyTimestamp } from '@/utils/time'

12
web/app/src/views/SuiteDetails.vue
View File

@@ -68,7 +68,7 @@
<!-- Enhanced Execution Flow -->
<div class="mt-6">
<h3 class="text-lg font-semibold mb-4">Execution Flow</h3>
<SequentialFlowDiagram
<SequentialFlowDiagram
:flow-steps="flowSteps"
:progress-percentage="executionProgress"
:completed-steps="completedStepsCount"
@@ -132,7 +132,7 @@
<Settings @refreshData="fetchData" />
<!-- Step Details Modal -->
<StepDetailsModal
<StepDetailsModal
v-if="selectedStep"
:step="selectedStep"
:index="selectedStepIndex"
@@ -255,13 +255,10 @@ const flowSteps = computed(() => {
if (!latestResult.value || !latestResult.value.endpointResults) {
return []
}
const results = latestResult.value.endpointResults
return results.map((result, index) => {
const endpoint = suite.value?.endpoints?.[index]
const nextResult = results[index + 1]
// Determine if this is an always-run endpoint by checking execution pattern
// If a previous step failed but this one still executed, it must be always-run
let isAlwaysRun = false
@@ -272,7 +269,6 @@ const flowSteps = computed(() => {
break
}
}
return {
name: endpoint?.name || result.name || `Step ${index + 1}`,
endpoint: endpoint,
@@ -296,21 +292,17 @@ const executionProgress = computed(() => {
})
// Helper functions
const determineStepStatus = (result) => {
if (!result) return 'not-started'
// Check if step was skipped
if (result.conditionResults && result.conditionResults.some(c => c.condition.includes('SKIP'))) {
return 'skipped'
}
// Check if step failed but is always-run (still shows as failed but executed)
if (!result.success) {
return 'failed'
}
return 'success'
}