Skip to content

Commit 8f453af

Browse files
fiftinfiftin
committed
feat(ui): add summary error message details
1 parent 4b95145 commit 8f453af

File tree

2 files changed

+75
-28
lines changed

2 files changed

+75
-28
lines changed

‎web/src/components/AnsibleStageView.vue

Lines changed: 73 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,33 +42,67 @@
4242
</v-btn>
4343
</v-btn-toggle>
4444

45-
<v-simple-table v-if="tab === 'notOkServers'">
46-
<template v-slot:default>
47-
<thead>
48-
<tr>
49-
<th style="width: 150px;">Server</th>
50-
<th style="width: 200px;">Task</th>
51-
<th style="width: calc(100% - 350px);">Error</th>
52-
</tr>
53-
</thead>
54-
<tbody>
55-
<tr v-if="!failedTasks || failedTasks.length === 0">
56-
<td colspan="3" class="text-center">No failed tasks</td>
57-
</tr>
58-
<tr v-else v-for="(task, index) in failedTasks" :key="index">
59-
<td style="width: 150px;">{{ task.host }}</td>
60-
<td style="width: 200px;">{{ task.task }}</td>
61-
<td>
62-
<div
63-
style="overflow: hidden; color: #ff5252; max-width: 400px; text-overflow: ellipsis">
64-
{{ task.error }}
65-
</div>
66-
</td>
67-
</tr>
45+
<v-data-table
46+
v-if="tab === 'notOkServers'"
47+
hide-default-footer
48+
single-expand
49+
show-expand
50+
:headers="notOkServersHeaders"
51+
:items="failedTasks"
52+
:items-per-page="Number.MAX_VALUE"
53+
>
54+
<template v-slot:item.error="{ item }">
55+
<div
56+
style="overflow: hidden; color: #ff5252; max-width: 400px; text-overflow: ellipsis">
57+
{{ item.error }}
58+
</div>
59+
</template>
60+
<template v-slot:expanded-item="{ headers, item }">
61+
<td
62+
:colspan="headers.length"
63+
>
64+
<pre style="overflow: auto;
65+
background: gray;
66+
font-size: 14px;
67+
color: white;
68+
border-radius: 10px;
69+
margin-top: 5px; margin-bottom: 5px;"
6870

69-
</tbody>
71+
class="pa-2"
72+
>{{ item.error.trim() }}</pre>
73+
</td>
7074
</template>
71-
</v-simple-table>
75+
</v-data-table>
76+
77+
<!-- <v-simple-table v-if="tab === 'notOkServers'">-->
78+
<!-- <template v-slot:default>-->
79+
<!-- <thead>-->
80+
<!-- <tr>-->
81+
<!-- <th style="width: 150px;">Server</th>-->
82+
<!-- <th style="width: 200px;">Task</th>-->
83+
<!-- <th style="width: calc(100% - 350px);">Error</th>-->
84+
<!-- </tr>-->
85+
<!-- </thead>-->
86+
<!-- <tbody>-->
87+
<!-- <tr v-if="!failedTasks || failedTasks.length === 0">-->
88+
<!-- <td colspan="3" class="text-center">No failed tasks</td>-->
89+
<!-- </tr>-->
90+
91+
<!-- <tr v-else v-for="(task, index) in failedTasks" :key="index">-->
92+
<!-- <td style="width: 150px;">{{ task.host }}</td>-->
93+
<!-- <td style="width: 200px;">{{ task.task }}</td>-->
94+
<!-- <td>-->
95+
<!-- <div-->
96+
<!-- style="overflow: hidden; color: #ff5252;
97+
max-width: 400px; text-overflow: ellipsis">-->
98+
<!-- {{ task.error }}-->
99+
<!-- </div>-->
100+
<!-- </td>-->
101+
<!-- </tr>-->
102+
103+
<!-- </tbody>-->
104+
<!-- </template>-->
105+
<!-- </v-simple-table>-->
72106

73107
<v-simple-table v-else-if="tab === 'allServers'">
74108
<template v-slot:default>
@@ -183,8 +217,21 @@ export default {
183217
okServers: 0,
184218
notOkServers: 0,
185219
tab: 'notOkServers',
186-
failedTasks: null,
220+
failedTasks: [],
187221
hosts: null,
222+
notOkServersHeaders: [{
223+
text: 'Server',
224+
value: 'host',
225+
sortable: false,
226+
}, {
227+
text: 'Task',
228+
value: 'task',
229+
sortable: false,
230+
}, {
231+
text: 'Error',
232+
value: 'error',
233+
sortable: false,
234+
}],
188235
};
189236
},
190237

‎web/src/views/project/Templates.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@
138138
:items-per-page="Number.MAX_VALUE"
139139
:expanded.sync="openedItems"
140140
:style="{
141-
opacity: viewItemsLoading ? 0.3 : 1,
142-
}"
141+
opacity: viewItemsLoading ? 0.3 : 1,
142+
}"
143143
>
144144
<template v-slot:item.name="{ item }">
145145
<v-icon

0 commit comments

Comments
 (0)