Skip to content

Commit 6faef5b

Browse files
fiftinfiftin
committed
feat(ui): task details layout
1 parent 20631c5 commit 6faef5b

File tree

1 file changed

+154
-47
lines changed

1 file changed

+154
-47
lines changed

‎web/src/components/TaskDetails.vue

Lines changed: 154 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,160 @@
11
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
2-
<div>
3-
4-
<h2 v-if="template" class="pb-2">Template info</h2>
5-
<div v-if="template" class="mb-5">
6-
<div>App: <b>{{ getAppTitle(template.app) }}</b></div>
7-
<div>
8-
Template: <RouterLink :to="`/project/${projectId}/templates/${template.id}`">
9-
{{ template.name }}
10-
</RouterLink>
11-
</div>
12-
</div>
13-
14-
<h2 v-if="item.commit_hash" class="pb-2">Commit info</h2>
15-
16-
<div v-if="item.commit_hash" class="mb-5">
17-
<div>Commit message: <b>{{ item.commit_message }}</b></div>
18-
<div>Commit hash: <code>{{ item.commit_hash }}</code></div>
19-
</div>
20-
21-
<h2 class="pb-2">Running info</h2>
22-
23-
<div class="mb-5">
24-
<div>Message: <b>{{ item.message || '—' }}</b></div>
25-
26-
<div v-if="item.user_id != null">{{ $t('author') }}: <b>{{ user?.name || '—' }}</b></div>
27-
<div v-else-if="item.integration_id != null">
28-
{{ $t('integration') }}: {{ item.integration_id }}
29-
</div>
30-
31-
<div>{{ $t('created') }}: {{ item.created | formatDate }}</div>
32-
<div>{{ $t('started') }}: {{ item.start | formatDate }}</div>
33-
<div>{{ $t('end') }}: {{ item.end | formatDate }}</div>
34-
<div>{{ $t('duration') }}: {{ [item.start, item.end] | formatMilliseconds }}</div>
35-
</div>
36-
37-
<h2 v-if="item?.params" class="pb-2">Task parameters</h2>
38-
<div class="mb-5" v-if="item?.params">
39-
<div>Limit: {{ item.params.limit }}</div>
40-
<div>Debug: {{ item.params.debug }}</div>
41-
<div>Debug level: {{ item.params.debug_level }}</div>
42-
<div>Diff <code>--diff</code>: {{ item.params.diff }}</div>
43-
<div>Dry run <code>--check</code>: {{ item.params.dry_run }}</div>
44-
<div>Environment: {{ item.environment }}</div>
45-
</div>
46-
2+
<div class="pb-3">
3+
<v-row>
4+
<v-col cols="12" md="6">
5+
<v-card
6+
v-if="template"
7+
:color="$vuetify.theme.dark ? '#212121' : 'white'"
8+
style="background: #8585850f"
9+
>
10+
<v-card-title>Template info</v-card-title>
11+
<v-card-text>
12+
<v-simple-table class="TaskDetails__table">
13+
<template v-slot:default>
14+
<tbody>
15+
<tr>
16+
<td><b>App</b></td>
17+
<td>{{ getAppTitle(template.app) }}</td>
18+
</tr>
19+
<tr>
20+
<td><b>Template</b></td>
21+
<td>
22+
<RouterLink :to="`/project/${projectId}/templates/${template.id}`">
23+
{{ template.name }}
24+
</RouterLink>
25+
</td>
26+
</tr>
27+
</tbody>
28+
</template>
29+
</v-simple-table>
30+
</v-card-text>
31+
</v-card>
32+
</v-col>
33+
34+
<v-col cols="12" md="6">
35+
<v-card
36+
v-if="item.commit_hash"
37+
:color="$vuetify.theme.dark ? '#212121' : 'white'"
38+
style="background: #8585850f"
39+
>
40+
<v-card-title>Commit info</v-card-title>
41+
42+
<v-card-text>
43+
<v-simple-table class="TaskDetails__table">
44+
<template v-slot:default>
45+
<tbody>
46+
<tr>
47+
<td><b>Message</b></td>
48+
<td>{{ item.commit_message }}</td>
49+
</tr>
50+
<tr>
51+
<td><b>Hash</b></td>
52+
<td>{{ item.commit_hash }}</td>
53+
</tr>
54+
</tbody>
55+
</template>
56+
</v-simple-table>
57+
</v-card-text>
58+
</v-card>
59+
</v-col>
60+
</v-row>
61+
62+
<v-row>
63+
<v-col>
64+
<v-card
65+
:color="$vuetify.theme.dark ? '#212121' : 'white'"
66+
style="background: #8585850f"
67+
class="mb-5"
68+
>
69+
<v-card-title>Running info</v-card-title>
70+
<v-card-text>
71+
<v-simple-table class="pa-0 TaskDetails__table">
72+
<template v-slot:default>
73+
<tbody>
74+
<tr>
75+
<td><b>Message</b></td>
76+
<td>{{ item.message || '—' }}</td>
77+
</tr>
78+
<tr v-if="item.user_id != null">
79+
<td><b>{{ $t('author') }}</b></td>
80+
<td>{{ user?.name || '—' }}</td>
81+
</tr>
82+
<tr v-else-if="item.integration_id != null">
83+
<td><b>{{ $t('integration') }}</b></td>
84+
<td>{{ item.integration_id }}</td>
85+
</tr>
86+
<tr>
87+
<td><b>{{ $t('created') }}</b></td>
88+
<td>{{ item.created | formatDate }}</td>
89+
</tr>
90+
<tr>
91+
<td><b>{{ $t('started') }}</b></td>
92+
<td>{{ item.start | formatDate }}</td>
93+
</tr>
94+
<tr>
95+
<td><b>{{ $t('end') }}</b></td>
96+
<td>{{ item.end | formatDate }}</td>
97+
</tr>
98+
<tr>
99+
<td><b>{{ $t('duration') }}</b></td>
100+
<td>{{ [item.start, item.end] | formatMilliseconds }}</td>
101+
</tr>
102+
</tbody>
103+
</template>
104+
</v-simple-table>
105+
</v-card-text>
106+
</v-card>
107+
</v-col>
108+
<v-col>
109+
<v-card v-if="item?.params">
110+
<v-card-title>Task parameters</v-card-title>
111+
<v-card-text>
112+
<v-simple-table class="pa-0 TaskDetails__table">
113+
<template v-slot:default>
114+
<tbody>
115+
<tr>
116+
<td><b>Limit</b></td>
117+
<td>{{ item.params.limit }}</td>
118+
</tr>
119+
<tr>
120+
<td><b>Debug</b></td>
121+
<td>{{ item.params.debug }}</td>
122+
</tr>
123+
<tr>
124+
<td><b>Debug level</b></td>
125+
<td>{{ item.params.debug_level }}</td>
126+
</tr>
127+
<tr>
128+
<td><b>Diff</b> <code>--diff</code></td>
129+
<td>{{ item.params.diff }}</td>
130+
</tr>
131+
<tr>
132+
<td><b>Dry run</b> <code>--check</code></td>
133+
<td>{{ item.params.dry_run }}</td>
134+
</tr>
135+
<tr>
136+
<td><b>Environment</b></td>
137+
<td>{{ item.environment }}</td>
138+
</tr>
139+
</tbody>
140+
</template>
141+
</v-simple-table>
142+
</v-card-text>
143+
</v-card>
144+
</v-col>
145+
</v-row>
47146
</div>
48147
</template>
148+
49149
<style lang="scss">
150+
.TaskDetails__table {
151+
background-color: transparent !important;
152+
.v-data-table__wrapper {
153+
padding-left: 0 !important;
154+
padding-right: 0 !important;
155+
}
156+
}
157+
50158
</style>
51159

52160
<script>
@@ -77,8 +185,7 @@ export default {
77185
},
78186
},
79187
80-
computed: {
81-
},
188+
computed: {},
82189
83190
async created() {
84191
await this.loadData();

0 commit comments

Comments
 (0)