Mercurial > gemma

comparison client/src/components/importoverview/importlogs/LogDetail.vue @ 2442:9b7138751f5b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging: layout logs
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 01 Mar 2019 12:07:34 +0100
parents 999bb511ef67
children
comparison
equal deleted inserted replaced
2441:9de710bdb535 2442:9b7138751f5b
49 ></font-awesome-icon> 49 ></font-awesome-icon>
50 </div> 50 </div>
51 </div> 51 </div>
52 <div class="detailstable d-flex flex-row"> 52 <div class="detailstable d-flex flex-row">
53 <div :class="collapse"> 53 <div :class="collapse">
54 <table class="table table-responsive"> 54 <div class="text-left">
55 <thead> 55 <small style="margin-right:10px" class="type condensed"
56 <tr> 56 ><translate>Kind</translate></small
57 <th class="type pb-0"> 57 >
58 <small class="condensed"><translate>Kind</translate></small> 58 <a
59 </th> 59 href="#"
60 <th class="datetime pb-0"> 60 @click="sortAsc = !sortAsc"
61 <a href="#" @click="sortAsc = !sortAsc" class="sort-link" 61 style="margin-right:58px"
62 ><small class="condensed"><translate>Date</translate></small> 62 class="datetime sort-link"
63 <small class="condensed" 63 ><small class="condensed"><translate>Date</translate></small>
64 ><font-awesome-icon 64 <small class="message condensed"
65 :icon="sortIcon" 65 ><font-awesome-icon
66 class="ml-1" 66 :icon="sortIcon"
67 ></font-awesome-icon></small 67 class="ml-1"
68 ></a> 68 ></font-awesome-icon></small
69 </th> 69 ></a>
70 <th class="message pb-0"> 70 <small class="condensed"><translate>Message</translate></small>
71 <small class="condensed"><translate>Message</translate></small> 71 </div>
72 </th> 72 <div class="logentries">
73 </tr> 73 <div
74 </thead> 74 v-for="(entry, index) in sortedEntries"
75 <tbody> 75 :key="index"
76 <tr 76 class="detailsrow text-left"
77 v-for="(entry, index) in sortedEntries" 77 >
78 :key="index" 78 <small
79 class="detailsrow" 79 :class="[
80 'condensed type',
81 {
82 'text-danger': entry.kind.toUpperCase() == 'ERROR',
83 'text-warning': entry.kind.toUpperCase() == 'WARN'
84 }
85 ]"
86 >{{ entry.kind.toUpperCase() }}</small
80 > 87 >
81 <td class="type"> 88 <small
82 <span 89 :class="[
83 :class="[ 90 'condensed datetime',
84 'condensed', 91 {
85 { 92 'text-danger': entry.kind.toUpperCase() == 'ERROR',
86 'text-danger': entry.kind.toUpperCase() == 'ERROR', 93 'text-warning': entry.kind.toUpperCase() == 'WARN'
87 'text-warning': entry.kind.toUpperCase() == 'WARN' 94 }
88 } 95 ]"
89 ]" 96 >{{ formatDateTime(entry.time) }}</small
90 >{{ entry.kind.toUpperCase() }}</span 97 >
91 > 98 <small
92 </td> 99 :class="[
93 <td class="datetime"> 100 'condensed message',
94 <span 101 {
95 :class="[ 102 'text-danger': entry.kind.toUpperCase() == 'ERROR',
96 'condensed', 103 'text-warning': entry.kind.toUpperCase() == 'WARN'
97 { 104 }
98 'text-danger': entry.kind.toUpperCase() == 'ERROR', 105 ]"
99 'text-warning': entry.kind.toUpperCase() == 'WARN' 106 >{{ entry.message }}</small
100 } 107 >
101 ]" 108 </div>
102 >{{ formatDateTime(entry.time) }}</span 109 </div>
103 >
104 </td>
105 <td class="message">
106 <span
107 :class="[
108 'condensed',
109 {
110 'text-danger': entry.kind.toUpperCase() == 'ERROR',
111 'text-warning': entry.kind.toUpperCase() == 'WARN'
112 }
113 ]"
114 >{{ entry.message }}</span
115 >
116 </td>
117 </tr>
118 </tbody>
119 </table>
120 </div> 110 </div>
121 </div> 111 </div>
122 </div> 112 </div>
123 </template> 113 </template>
124 114
263 } 253 }
264 }; 254 };
265 </script> 255 </script>
266 256
267 <style lang="scss" scoped> 257 <style lang="scss" scoped>
258 .logentries {
259 overflow: auto;
260 }
261
268 .condensed { 262 .condensed {
269 font-stretch: condensed; 263 font-stretch: condensed;
270 } 264 }
271 265
272 .entry { 266 .entry {
314 .details { 308 .details {
315 width: 50%; 309 width: 50%;
316 } 310 }
317 311
318 .detailsrow { 312 .detailsrow {
319 line-height: 0.1em; 313 line-height: 0.7rem;
320 } 314 }
321 315
322 .type { 316 .type {
323 width: 65px;
324 white-space: nowrap; 317 white-space: nowrap;
325 padding-left: 0px;
326 border-top: 0px;
327 padding-bottom: $small-offset;
328 } 318 }
329 319
330 .datetime { 320 .datetime {
331 width: 200px;
332 white-space: nowrap; 321 white-space: nowrap;
333 padding-left: 0px; 322 padding-left: 10px;
334 border-top: 0px; 323 padding-right: 10px;
335 padding-bottom: $small-offset;
336 } 324 }
337 325
338 .message { 326 .message {
339 min-width: 700px;
340 white-space: nowrap; 327 white-space: nowrap;
341 padding-left: 0px;
342 border-top: 0px;
343 padding-bottom: $small-offset;
344 }
345
346 thead,
347 tbody {
348 display: block;
349 }
350
351 tbody {
352 height: 150px;
353 overflow-y: auto;
354 overflow-x: auto;
355 } 328 }
356 </style> 329 </style>