Skip to content

Commit

Permalink
feat(ui): subflow logs expand
Browse files Browse the repository at this point in the history 
closes #1701
closes #1869
closes #1815
closes #1702
  • Loading branch information
@brian-mulier-p
brian-mulier-p committed Sep 21, 2023
1 parent d817b5f commit b57f6da
Show file tree
Hide file tree
Showing 16 changed files with 696 additions and 556 deletions.
3 changes: 2 additions & 1 deletion core/src/test/java/io/kestra/core/tasks/flows/BadFlowableTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import io.kestra.core.models.executions.TaskRun;
import io.kestra.core.models.flows.State;
import io.kestra.core.runners.AbstractMemoryRunnerTest;
import io.kestra.core.serializers.JacksonMapper;
import org.junit.jupiter.api.Test;

import java.util.Arrays;
Expand All @@ -19,7 +20,7 @@ public class BadFlowableTest extends AbstractMemoryRunnerTest {
void sequential() throws TimeoutException {
Execution execution = runnerUtils.runOne("io.kestra.tests", "bad-flowable");

assertThat("Task runs were: "+ execution.getTaskRunList().stream().map(TaskRun::getTaskId).toList(), execution.getTaskRunList(), hasSize(2));
assertThat("Task runs were: \n"+ JacksonMapper.log(execution.getTaskRunList()), execution.getTaskRunList(), hasSize(2));
assertThat(execution.getState().getCurrent(), is(State.Type.FAILED));
}

Expand Down
2 changes: 1 addition & 1 deletion jdbc/src/main/java/io/kestra/jdbc/runner/JdbcExecutor.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ private void executionQueue(Either<Execution, DeserializationException> either)
.forEach(workerTaskExecution -> {
String log = "Create new execution for flow '" +
workerTaskExecution.getExecution()
.getNamespace() + "'." + workerTaskExecution.getExecution().getFlowId() +
.getNamespace() + "'.'" + workerTaskExecution.getExecution().getFlowId() +
"' with id '" + workerTaskExecution.getExecution()
.getId() + "' from task '" + workerTaskExecution.getTask().getId() +
"' and taskrun '" + workerTaskExecution.getTaskRun().getId() +
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/executions/ExecutionMetric.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<metrics-table ref="table" :task-run-id="taskRunId" :show-task="true">
<metrics-table ref="table" :task-run-id="taskRunId" :show-task="true" :execution="execution">
<template #navbar>
<el-form-item>
<el-select
Expand Down
1 change: 0 additions & 1 deletion ui/src/components/executions/ExecutionRoot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@
watch: {
$route(newValue, oldValue) {
this.$store.commit("execution/setTaskRun", undefined);
this.$store.commit("execution/setTask", undefined);
if (oldValue.name === newValue.name && this.previousExecutionId !== this.$route.params.id) {
this.follow()
}
Expand Down
135 changes: 81 additions & 54 deletions ui/src/components/executions/Gantt.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,64 @@
<el-card shadow="never" v-if="execution">
<table>
<thead>
<tr>
<th>
<duration :histories="execution.state.histories" />
</th>
<td v-for="(date, i) in dates" :key="i">
{{ date }}
</td>
</tr>
<tr>
<th>
<duration :histories="execution.state.histories" />
</th>
<td v-for="(date, i) in dates" :key="i">
{{ date }}
</td>
</tr>
</thead>
<tbody v-for="currentTaskRun in partialSeries" :key="currentTaskRun.id">
<tr>
<th>
<el-tooltip placement="right" :persistent="false" transition="" :hide-after="0">
<template #content>
<code>{{ currentTaskRun.name }}</code>
<span v-if="currentTaskRun.task && currentTaskRun.task.value"><br>{{ currentTaskRun.task.value }}</span>
</template>
<tr>
<th>
<el-tooltip placement="right" :persistent="false" transition="" :hide-after="0">
<template #content>
<code>{{ currentTaskRun.name }}</code>
<small v-if="currentTaskRun.task && currentTaskRun.task.value"> {{ currentTaskRun.task.value }}</small>
</el-tooltip>
</th>
<td :colspan="dates.length">
<el-tooltip placement="top" :persistent="false" transition="" :hide-after="0">
<template #content>
<span v-if="currentTaskRun.task && currentTaskRun.task.value"><br>{{ currentTaskRun.task.value }}</span>
</template>
<code>{{ currentTaskRun.name }}</code>
<small v-if="currentTaskRun.task && currentTaskRun.task.value"> {{ currentTaskRun.task.value }}</small>
</el-tooltip>
</th>
<td :colspan="dates.length">
<el-tooltip placement="top" :persistent="false" transition="" :hide-after="0">
<template #content>
<span style="white-space: pre-wrap;">
{{ currentTaskRun.tooltip }}
</span>
</template>
<div
:style="{left: currentTaskRun.start + '%', width: currentTaskRun.width + '%'}"
class="task-progress"
@click="onTaskSelect(currentTaskRun.task)"
>
<div class="progress">
<div
class="progress-bar"
:style="{left: currentTaskRun.left + '%', width: (100-currentTaskRun.left) + '%'}"
:class="'bg-' + currentTaskRun.color + (currentTaskRun.running ? ' progress-bar-striped progress-bar-animated' : '')"
role="progressbar"
/>
</div>
</template>
<div
:style="{left: currentTaskRun.start + '%', width: currentTaskRun.width + '%'}"
class="task-progress"
@click="onTaskSelect(currentTaskRun.task)"
>
<div class="progress">
<div
class="progress-bar"
:style="{left: currentTaskRun.left + '%', width: (100-currentTaskRun.left) + '%'}"
:class="'bg-' + currentTaskRun.color + (currentTaskRun.running ? ' progress-bar-striped progress-bar-animated' : '')"
role="progressbar"
/>
</div>
</el-tooltip>
</td>
</tr>
<tr v-if="taskRun && taskRun.id === currentTaskRun.id">
<td :colspan="dates.length + 1" class="p-0 pb-2">
<log-list
:task-run-id="taskRun.id"
:exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
level="TRACE"
@follow="forwardEvent('follow', $event)"
:hide-others-on-select="true"
/>
</td>
</tr>
</div>
</el-tooltip>
</td>
</tr>
<tr v-if="selectedTaskRun?.id === currentTaskRun.id">
<td :colspan="dates.length + 1" class="p-0 pb-2">
<log-list
:task-run-id="selectedTaskRun.id"
:exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
level="TRACE"
@follow="forwardEvent('follow', $event)"
:target-execution="execution"
:target-flow="flow"
class="no-click-handler"
/>
</td>
</tr>
</tbody>
</table>
</el-card>
Expand All @@ -81,6 +83,7 @@
dates: [],
duration: undefined,
usePartialSerie: true,
selectedTaskRun: undefined
};
},
watch: {
Expand All @@ -102,7 +105,8 @@
this.paint();
},
computed: {
...mapState("execution", ["execution", "taskRun"]),
...mapState("execution", ["execution"]),
...mapState("flow", ["flow"]),
taskRunsCount() {
return this.execution && this.execution.taskRunList ? this.execution.taskRunList.length : 0
},
Expand Down Expand Up @@ -261,8 +265,12 @@
this.dates = dates;
},
onTaskSelect(taskRun) {
taskRun = this.taskRun && this.taskRun.id === taskRun.id ? undefined : taskRun;
this.$store.commit("execution/setTaskRun", taskRun);
if(this.selectedTaskRun?.id === taskRun.id) {
this.selectedTaskRun = undefined
return
}
this.selectedTaskRun = taskRun;
},
stopRealTime() {
this.realTime = false
Expand All @@ -287,8 +295,7 @@
color: var(--bs-body-color);
& th, td {
border-bottom: 1px solid var(--bs-border-color);
padding: 0.3rem;
padding: calc(var(--spacer) / 2);
}
tr:last-child th, tr:last-child td {
Expand Down Expand Up @@ -349,11 +356,31 @@
}
}
}
tr:nth-child(2) td {
padding-bottom: 0 !important;
}
}
}
:deep(.log-wrapper .attempt-wrapper) {
margin-bottom: 0;
border-radius: 0;
border: 0;
border-top: 1px solid var(--bs-gray-600);
border-bottom: 1px solid var(--bs-gray-600);
tbody:last-child & {
border-bottom: 0;
}
.attempt-header {
padding: calc(var(--spacer) / 2);
}
.line {
padding-left: calc(var(--spacer) / 2);
}
}
</style>
54 changes: 11 additions & 43 deletions ui/src/components/executions/Logs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
/>
</el-form-item>
<el-form-item>
<el-button @click="handleLogDisplay()">
<el-button @click="expandCollapseAll()">
{{ logDisplayButtonText }}
</el-button>
</el-form-item>
Expand All @@ -35,28 +35,15 @@
</collapse>

<log-list
v-if="execution.state.current === State.RUNNING"
ref="logs"
:level="level"
:exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
:filter="filter"
@follow="forwardEvent('follow', $event)"
@opened-taskruns-count="openedTaskrunsCounts['running'] = $event"
:logs-to-open-parent="logsToOpen"
@opened-taskruns-count="openedTaskrunsCount = $event"
:target-execution="execution"
:target-flow="flow"
/>
<div v-else-if="execution.state.current !== State.RUNNING">
<log-list
v-for="taskRun in taskRunList"
:key="taskRun.id"
:task-run-id="taskRun.id"
:attempt-number="taskRun.attempt"
:level="level"
:exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
:filter="filter"
@follow="forwardEvent('follow', $event)"
@opened-taskruns-count="openedTaskrunsCounts[taskRun.id] = $event"
:logs-to-open-parent="logsToOpen"
/>
</div>
</div>
</template>

Expand Down Expand Up @@ -84,8 +71,7 @@
fullscreen: false,
level: undefined,
filter: undefined,
logsToOpen: undefined,
openedTaskrunsCounts: {}
openedTaskrunsCount: 0
};
},
created() {
Expand All @@ -96,27 +82,13 @@
State() {
return State
},
...mapState("execution", ["execution", "taskRun", "logs"]),
...mapState("execution", ["execution", "logs"]),
...mapState("flow", ["flow"]),
downloadName() {
return `kestra-execution-${this.$moment().format("YYYYMMDDHHmmss")}-${this.execution.id}.log`
},
taskRunList() {
const fullList = [];
for (const taskRun of (this.execution.taskRunList || [])) {
for (const attempt in (taskRun.attempts ?? [{}])) {
fullList.push({
...taskRun,
attempt: parseInt(attempt),
})
}
}
return fullList
},
openedTaskrunsTotal() {
return Object.values(this.openedTaskrunsCounts).reduce((prev, count) => prev + count, 0);
},
logDisplayButtonText() {
return this.openedTaskrunsTotal === 0 ? this.$t("expand all") : this.$t("collapse all")
return this.openedTaskrunsCount === 0 ? this.$t("expand all") : this.$t("collapse all")
}
},
methods: {
Expand Down Expand Up @@ -144,12 +116,8 @@
onChange() {
this.$router.push({query: {...this.$route.query, q: this.filter, level: this.level, page: 1}});
},
handleLogDisplay() {
if(this.openedTaskrunsTotal === 0) {
this.logsToOpen = State.arrayAllStates().map(s => s.name)
} else {
this.logsToOpen = []
}
expandCollapseAll() {
this.$refs.logs.toggleExpandCollapseAll();
}
}
};
Expand Down
14 changes: 9 additions & 5 deletions ui/src/components/executions/Metrics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
size=""
direction="ltr"
>
<metrics-table ref="table" :task-run-id="taskRun.id" />
<metrics-table ref="table" :task-run-id="taskRun.id" :execution="execution" />
</el-drawer>
</template>

Expand All @@ -25,7 +25,6 @@
</script>

<script>
import {mapState} from "vuex";
import MetricsTable from "./MetricsTable.vue";
export default {
Expand All @@ -42,9 +41,14 @@
type: Boolean,
default: true
},
},
computed: {
...mapState("execution", ["taskRun"]),
taskRun: {
type: Object,
required: true
},
execution: {
type: Object,
required: true
}
},
methods: {
onClick() {
Expand Down
Loading

0 comments on commit b57f6da

Please sign in to comment.