Skip to content

Commit d4150b1

Browse files
fiftinfiftin
committed
feat(ui): task details
1 parent 225b5cf commit d4150b1

File tree

3 files changed

+89
-49
lines changed

3 files changed

+89
-49
lines changed

‎web/src/components/AnsibleStageView.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,21 +108,28 @@
108108

109109
<script>
110110
111+
import ProjectMixin from '@/components/ProjectMixin';
112+
111113
export default {
112114
props: {
113-
stages: Array,
115+
projectId: Number,
116+
taskId: Number,
114117
},
115118
119+
mixins: [ProjectMixin],
120+
116121
data() {
117122
return {
123+
stages: null,
118124
okServers: 0,
119125
notOkServers: 0,
120126
tab: 'notOkServers',
121127
};
122128
},
123129
124130
watch: {
125-
stages() {
131+
async taskId() {
132+
await this.loadData();
126133
this.calcStats();
127134
},
128135
},
@@ -140,11 +147,15 @@ export default {
140147
},
141148
},
142149
143-
created() {
150+
async created() {
151+
await this.loadData();
144152
this.calcStats();
145153
},
146154
147155
methods: {
156+
async loadData() {
157+
this.stages = await this.loadProjectEndpoint(`/tasks/${this.taskId}/stages`);
158+
},
148159
calcStats() {
149160
this.hosts.forEach((host) => {
150161
if (host.failed > 0 || host.unreachable > 0) {

‎web/src/components/TaskDetails.vue

Lines changed: 60 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,96 @@
11
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
2-
<v-row>
3-
<v-col class="pr-4">
4-
<v-list two-line subheader class="pa-0">
5-
<v-list-item class="pa-0">
6-
<v-list-item-content v-if="item.user_id != null">
7-
<v-list-item-title>{{ $t('author') }}</v-list-item-title>
8-
<v-list-item-subtitle>{{ user?.name || '-' }}</v-list-item-subtitle>
9-
</v-list-item-content>
10-
<v-list-item-content v-else-if="item.integration_id != null">
11-
<v-list-item-title>{{ $t('integration') }}</v-list-item-title>
12-
</v-list-item-content>
13-
</v-list-item>
14-
</v-list>
15-
</v-col>
16-
<v-col class="pr-4">
17-
<v-list two-line subheader class="pa-0">
2+
<div>
3+
4+
<h3>Template information</h3>
5+
<div class="mb-4">
6+
<div>Template: {{ template?.name }}</div>
7+
<div>App: {{ template?.app }}</div>
8+
</div>
9+
10+
<h3>Start information</h3>
11+
<v-row>
12+
<v-col class="pr-4">
13+
<v-list two-line subheader class="pa-0">
14+
<v-list-item class="pa-0">
15+
<v-list-item-content v-if="item.user_id != null">
16+
<v-list-item-title>{{ $t('author') }}</v-list-item-title>
17+
<v-list-item-subtitle>{{ user?.name || '-' }}</v-list-item-subtitle>
18+
</v-list-item-content>
19+
<v-list-item-content v-else-if="item.integration_id != null">
20+
<v-list-item-title>{{ $t('integration') }}</v-list-item-title>
21+
</v-list-item-content>
22+
</v-list-item>
23+
</v-list>
24+
</v-col>
25+
<v-col class="pr-4">
26+
<v-list two-line subheader class="pa-0">
27+
<v-list-item class="pa-0">
28+
<v-list-item-content>
29+
<v-list-item-title>{{ $t('started') || '-' }}</v-list-item-title>
30+
<v-list-item-subtitle>
31+
{{ item.start | formatDate }}
32+
</v-list-item-subtitle>
33+
</v-list-item-content>
34+
</v-list-item>
35+
</v-list>
36+
</v-col>
37+
<v-col>
1838
<v-list-item class="pa-0">
1939
<v-list-item-content>
20-
<v-list-item-title>{{ $t('started') || '-' }}</v-list-item-title>
40+
<v-list-item-title>{{ $t('duration') || '-' }}</v-list-item-title>
2141
<v-list-item-subtitle>
22-
{{ item.start | formatDate }}
42+
{{ [item.start, item.end] | formatMilliseconds }}
2343
</v-list-item-subtitle>
2444
</v-list-item-content>
2545
</v-list-item>
26-
</v-list>
27-
</v-col>
28-
<v-col>
29-
<v-list-item class="pa-0">
30-
<v-list-item-content>
31-
<v-list-item-title>{{ $t('duration') || '-' }}</v-list-item-title>
32-
<v-list-item-subtitle>
33-
{{ [item.start, item.end] | formatMilliseconds }}
34-
</v-list-item-subtitle>
35-
</v-list-item-content>
36-
</v-list-item>
37-
</v-col>
38-
</v-row>
46+
</v-col>
47+
</v-row>
48+
49+
<h3>Parameters</h3>
50+
51+
</div>
3952
</template>
4053
<style lang="scss">
4154
</style>
4255

4356
<script>
4457
58+
import ProjectMixin from '@/components/ProjectMixin';
59+
4560
export default {
4661
props: {
4762
item: Object,
4863
user: Object,
64+
projectId: Number,
4965
},
5066
67+
mixins: [ProjectMixin],
68+
5169
data() {
5270
return {
71+
template: null,
5372
};
5473
},
5574
5675
watch: {
76+
async item() {
77+
if (this.item?.template_id !== this.template?.id) {
78+
await this.loadData();
79+
}
80+
},
5781
},
5882
5983
computed: {
6084
},
6185
62-
created() {
86+
async created() {
87+
await this.loadData();
6388
},
6489
6590
methods: {
91+
async loadData() {
92+
this.template = await this.loadProjectResource('templates', this.item.template_id);
93+
},
6694
},
6795
};
6896
</script>

‎web/src/components/TaskLogView.vue

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@
2424

2525
<div class="overflow-auto text-no-wrap px-5" style="margin-bottom: -40px;">
2626
<TaskStatus :status="item.status" data-testid="task-status" />
27-
<span class="ml-3">
27+
<span class="ml-3 hidden-xs-only">
2828
Started by <b>{{ user?.name || '-' }}</b>
2929
at <b>{{ item.start | formatDate }}</b>
3030
<v-icon
31-
class="ml-3 mr-1" small style="transform: translateY(-1px)">mdi-clock-outline</v-icon>
31+
class="ml-4" small style="transform: translateY(-1px)">mdi-clock-outline</v-icon>
3232
{{ [item.start, item.end] | formatMilliseconds }}
3333
</span>
3434
</div>
3535

3636
<v-tabs right v-model="tab">
3737
<v-tab>Log</v-tab>
38-
<v-tab>Details</v-tab>
39-
<v-tab>Summary</v-tab>
38+
<v-tab :disabled="!isTaskStopped">Details</v-tab>
39+
<v-tab :disabled="!isTaskStopped">Summary</v-tab>
4040
</v-tabs>
4141

4242
<div v-if="tab === 0">
@@ -100,15 +100,17 @@
100100
</div>
101101

102102
<div v-else-if="tab === 1">
103-
<v-container fluid class="py-0 px-5 overflow-auto">
104-
<TaskDetails :item="item" :user="user" />
103+
<v-divider style="margin-top: -1px;" />
104+
105+
<v-container fluid class="py-0 px-5 overflow-auto pt-4">
106+
<TaskDetails :item="item" :user="user" :project-id="projectId" />
105107
</v-container>
106108
</div>
107109

108110
<div v-else-if="tab === 2">
109111
<v-divider style="margin-top: -1px;" />
110112

111-
<AnsibleStageView :stages="stages" />
113+
<AnsibleStageView :project-id="projectId" :task-id="itemId" />
112114
</div>
113115

114116
</div>
@@ -208,7 +210,7 @@ export default {
208210
outputBuffer: [],
209211
user: {},
210212
autoScroll: true,
211-
stages: null,
213+
// stages: null,
212214
};
213215
},
214216
@@ -223,12 +225,11 @@ export default {
223225
await this.loadData();
224226
},
225227
226-
async tab() {
227-
if (this.tab === 1) {
228-
this.stages = await this.loadProjectEndpoint(`/tasks/${this.itemId}/stages`);
229-
console.log(this.stages);
230-
}
231-
},
228+
// async tab() {
229+
// if (this.tab === 1) {
230+
// this.stages = await this.loadProjectEndpoint(`/tasks/${this.itemId}/stages`);
231+
// }
232+
// },
232233
},
233234
234235
computed: {

0 commit comments

Comments
 (0)