Skip to content

Commit 5655116

Browse files
MetRonnieMetRonnie
committed
Move job details to its own table component
1 parent 149657e commit 5655116

File tree

6 files changed

+207
-177
lines changed

6 files changed

+207
-177
lines changed

‎src/components/cylc/common/JobDetails.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!--
2+
Copyright (C) NIWA & British Crown (Met Office) & Contributors.
3+
4+
This program is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU General Public License as published by
6+
the Free Software Foundation, either version 3 of the License, or
7+
(at your option) any later version.
8+
9+
This program is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU General Public License for more details.
13+
14+
You should have received a copy of the GNU General Public License
15+
along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
-->
17+
18+
<template>
19+
<v-table data-cy="job-details">
20+
<thead v-if="$slots.header">
21+
<tr>
22+
<th colspan="2">
23+
<slot name="header"></slot>
24+
</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<tr>
29+
<td>State</td>
30+
<td>{{ node.state }}</td>
31+
</tr>
32+
<tr>
33+
<td>Platform</td>
34+
<td>{{ node.platform }}</td>
35+
</tr>
36+
<tr>
37+
<td>Job ID</td>
38+
<td>{{ node.jobId }}</td>
39+
</tr>
40+
<tr>
41+
<td>Job runner</td>
42+
<td>{{ node.jobRunnerName }}</td>
43+
</tr>
44+
<tr>
45+
<td>Submitted time</td>
46+
<td>{{ node.submittedTime }}</td>
47+
</tr>
48+
<tr>
49+
<td>Started time</td>
50+
<td>{{ node.startedTime }}</td>
51+
</tr>
52+
<tr>
53+
<td>Finished time</td>
54+
<td>{{ node.finishedTime }}</td>
55+
</tr>
56+
<tr v-if="meanElapsedTime">
57+
<td>Mean run time</td>
58+
<td>{{ formatDuration(meanElapsedTime) }}</td>
59+
</tr>
60+
</tbody>
61+
</v-table>
62+
</template>
63+
64+
<script setup>
65+
import { formatDuration } from '@/utils/tasks'
66+
67+
defineProps({
68+
node: {
69+
type: Object,
70+
required: true,
71+
},
72+
meanElapsedTime: {
73+
type: Number,
74+
},
75+
})
76+
</script>
77+
78+
<style scoped>
79+
table td:first-of-type {
80+
font-weight: 500;
81+
cursor: default;
82+
}
83+
</style>

‎src/components/cylc/tree/JobDetails.vue‎

Lines changed: 0 additions & 131 deletions
This file was deleted.

‎src/components/cylc/tree/JobLeaf.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!--
2+
Copyright (C) NIWA & British Crown (Met Office) & Contributors.
3+
4+
This program is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU General Public License as published by
6+
the Free Software Foundation, either version 3 of the License, or
7+
(at your option) any later version.
8+
9+
This program is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU General Public License for more details.
13+
14+
You should have received a copy of the GNU General Public License
15+
along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
-->
17+
18+
<template>
19+
<div
20+
:id="`${node.id}-job-details`"
21+
class="node leaf job-details mb-2"
22+
>
23+
<div class="arrow-up" :style="leafTriangleStyle"></div>
24+
<div class="leaf-data pa-2 rounded-lg">
25+
<v-defaults-provider :defaults="defaults">
26+
<JobDetailsTable
27+
:node="node.node"
28+
:mean-elapsed-time="meanElapsedTime"
29+
class="bg-transparent"
30+
/>
31+
<v-table
32+
v-if="customOutputs?.length"
33+
class="outputs mt-2 bg-white"
34+
>
35+
<thead>
36+
<tr>
37+
<th>Custom output</th>
38+
<th>Message</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
<tr
43+
v-for="customOutput of customOutputs"
44+
:key="customOutput.label"
45+
>
46+
<td>{{ customOutput.isMessage ? '--' : customOutput.label }}</td>
47+
<td>{{ customOutput.message }}</td>
48+
</tr>
49+
</tbody>
50+
</v-table>
51+
</v-defaults-provider>
52+
</div>
53+
</div>
54+
</template>
55+
56+
<script setup>
57+
import { computed } from 'vue'
58+
import { getIndent } from '@/components/cylc/tree/util'
59+
import { jobMessageOutputs } from '@/utils/tasks'
60+
import JobDetailsTable from '@/components/cylc/common/JobDetails.vue'
61+
62+
const props = defineProps({
63+
node: {
64+
type: Object,
65+
required: true,
66+
},
67+
/** Indent level */
68+
depth: {
69+
type: Number,
70+
required: true,
71+
},
72+
meanElapsedTime: {
73+
type: Number,
74+
},
75+
density: {
76+
type: String,
77+
default: 'compact'
78+
}
79+
})
80+
81+
/** Make the job details triangle point to the job icon */
82+
const leafTriangleStyle = computed(() => ({
83+
'margin-left': getIndent(props.depth),
84+
}))
85+
86+
const defaults = computed(() => ({
87+
VTable: {
88+
density: props.density,
89+
hover: true,
90+
}
91+
}))
92+
93+
const customOutputs = computed(() => jobMessageOutputs(props.node))
94+
</script>

‎src/components/cylc/tree/TreeItem.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
148148
<slot name="child">
149149
<!-- Need v-if to prevent render of fallback content when slot is provided but is empty -->
150150
<template v-if="!$slots.child">
151-
<JobDetails
151+
<JobLeaf
152152
v-if="node.type === 'job'"
153153
v-bind="{ node, meanElapsedTime }"
154154
:depth="depth + 1"
@@ -175,7 +175,7 @@ import {
175175
} from '@mdi/js'
176176
import Task from '@/components/cylc/Task.vue'
177177
import Job from '@/components/cylc/Job.vue'
178-
import JobDetails from '@/components/cylc/tree/JobDetails.vue'
178+
import JobLeaf from '@/components/cylc/tree/JobLeaf.vue'
179179
import {
180180
jobMessageOutputs,
181181
latestJob,
@@ -193,7 +193,7 @@ export default {
193193
FlowNumsChip,
194194
Task,
195195
Job,
196-
JobDetails,
196+
JobLeaf,
197197
},
198198
199199
props: {

0 commit comments

Comments
 (0)