Mercurial > gemma

comparison client/src/components/importoverview/ImportOverviewAlt.vue @ 2559:d9e1db955d49

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Backed out changeset 91c68153e7b6
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 08 Mar 2019 13:36:24 +0100
parents
children 3ad81357a57c
comparison
equal deleted inserted replaced
2557:91c68153e7b6 2559:d9e1db955d49
1 <template>
2 <div class="overview">
3 <UIBoxHeader
4 icon="clipboard-check"
5 title="Staging Area"
6 :closeCallback="$parent.close"
7 />
8 <div class="imports text-left ml-1 mr-1">
9 <div class="mt-3 d-flex flex-row border-bottom">
10 <div class="icons small condensed">&nbsp;</div>
11 <div class="id small condensed">Id</div>
12 <div class="kind small condensed">Kind</div>
13 <div class="date small condensed">
14 Date
15 </div>
16 <div class="enqueued small condensed">
17 Imported
18 </div>
19 <div class="user small condensed">User</div>
20 <div class="actions small condensed">&nbsp;</div>
21 </div>
22 <div class="d-flex flex-row" v-for="entry in importQueue" :key="entry.id">
23 <div class="d-flex flex-column w-100">
24 <div class="d-flex flex-row">
25 <div class="icons">
26 <font-awesome-icon
27 @click="toggleDetails(entry.id)"
28 class="pointer text-info"
29 v-if="show != entry.id"
30 icon="angle-right"
31 fixed-width
32 ></font-awesome-icon>
33 <font-awesome-icon
34 @click="toggleDetails(entry.id)"
35 class="pointer text-info"
36 v-if="show == entry.id"
37 icon="angle-down"
38 fixed-width
39 ></font-awesome-icon>
40 </div>
41 <div class="id small condensed">{{ entry.id }}</div>
42 <div class="kind small condensed">
43 {{ entry.kind.toUpperCase() }}
44 </div>
45 <div class="date small condensed">
46 {{ entry.summary.date | surveyDate }}
47 </div>
48 <div class="enqueued small condensed">
49 {{ entry.enqueued.split("T")[0] | surveyDate }}
50 </div>
51 <div class="user small condensed">{{ entry.user }}</div>
52 <div class="actions small condensed">
53 <font-awesome-icon
54 v-if="entry.warnings"
55 class="ml-1 text-warning text-info"
56 icon="exclamation-triangle"
57 fixed-width
58 ></font-awesome-icon>
59 </div>
60 </div>
61 <div class="d-flex flex-row" v-if="show == entry.id">
62 <div class="ml-1 details d-flex flex-column">
63 <div
64 v-if="isApprovedGaugeMeasurement(entry.kind.toUpperCase())"
65 class="d-flex flex-row"
66 >
67 <font-awesome-icon
68 @click="toggleAdditional(entry.id)"
69 class="pointer text-info"
70 v-if="showAdditional != entry.id"
71 icon="angle-right"
72 fixed-width
73 ></font-awesome-icon>
74 <font-awesome-icon
75 @click="toggleAdditional(entry.id)"
76 class="pointer text-info"
77 v-if="showAdditional == entry.id"
78 icon="angle-down"
79 fixed-width
80 ></font-awesome-icon>
81 <small class="condensed">Additional Info</small>
82 </div>
83 <div
84 v-if="showAdditional == entry.id"
85 class="additionalinfo ml-4"
86 >
87 <div v-for="(result, index) in entry.summary" :key="index">
88 <font-awesome-icon
89 @click="toggleDiff(index)"
90 class="pointer text-info"
91 v-if="showDiff != index"
92 icon="angle-right"
93 fixed-width
94 ></font-awesome-icon>
95 <font-awesome-icon
96 @click="toggleDiff(index)"
97 class="pointer text-info"
98 v-if="showDiff == index"
99 icon="angle-down"
100 fixed-width
101 ></font-awesome-icon>
102 <span
103 v-if="result.versions.length == 1"
104 class="agmcode text-left"
105 ><small
106 >{{ result["fk-gauge-id"] }}
107 <translate class="mr-1">( New )</translate></small
108 ></span
109 >
110 <span
111 v-if="result.versions.length == 2"
112 class="agmcode text-left"
113 ><small>{{ result["fk-gauge-id"] }}</small></span
114 >
115 <span class="agmdetail text-left"
116 ><small>{{
117 result["measure-date"] | datetime
118 }}</small></span
119 >
120 <div v-if="showDiff == index" class="ml-1">
121 <div>
122 <div class="d-flex flex-row pl-3 text-left">
123 <div class="header border-bottom agmdetailskeys">
124 <small><translate>Value</translate></small>
125 </div>
126 <div
127 v-if="result.versions.length == 2"
128 class="header border-bottom agmdetailsvalues"
129 >
130 <small><translate>Old</translate></small>
131 </div>
132 <div class="header border-bottom agmdetailsvalues">
133 <small><translate>New</translate></small>
134 </div>
135 </div>
136 <div
137 class="d-flex flex-row pl-3 text-left"
138 v-for="(entry, index) in Object.keys(
139 result.versions[0]
140 )"
141 :key="index"
142 >
143 <div
144 v-if="
145 result.versions.length == 1 ||
146 result.versions[0][entry] !=
147 result.versions[1][entry]
148 "
149 class="agmdetailskeys"
150 >
151 <small>{{ entry }}</small>
152 </div>
153 <div
154 v-if="
155 result.versions.length == 1 ||
156 result.versions[0][entry] !=
157 result.versions[1][entry]
158 "
159 class="agmdetailsvalues"
160 >
161 <small>{{ result.versions[0][entry] }}</small>
162 </div>
163 <div
164 v-if="
165 result.versions.length == 2 &&
166 result.versions[0][entry] !=
167 result.versions[1][entry]
168 "
169 class="agmdetailsvalues"
170 >
171 <small>{{ result.versions[1][entry] }}</small>
172 </div>
173 </div>
174 </div>
175 </div>
176 </div>
177 </div>
178 <div class="d-flex flex-row">
179 <div class="d-flex flex-column">
180 <div class="d-flex flex-row">
181 <font-awesome-icon
182 @click="toggleLogs(entry.id)"
183 class="pointer text-info"
184 v-if="showLogs != entry.id"
185 icon="angle-right"
186 fixed-width
187 ></font-awesome-icon>
188 <font-awesome-icon
189 @click="toggleLogs(entry.id)"
190 class="pointer text-info"
191 v-if="showLogs == entry.id"
192 icon="angle-down"
193 fixed-width
194 ></font-awesome-icon>
195 <small class="condensed">Logs</small>
196 </div>
197 <div v-if="showLogs == entry.id" class="ml-4 logentries">
198 <div
199 v-for="(logentry, index) in logEntries"
200 :key="index"
201 class="d-flex flex-row"
202 >
203 <small
204 :class="[
205 'condensed type',
206 {
207 'text-danger':
208 logentry.kind.toUpperCase() == 'ERROR',
209 'text-warning':
210 logentry.kind.toUpperCase() == 'WARN'
211 }
212 ]"
213 >{{ logentry.kind.toUpperCase() }}</small
214 >
215 <small
216 :class="[
217 'condensed type',
218 {
219 'text-danger':
220 logentry.kind.toUpperCase() == 'ERROR',
221 'text-warning':
222 logentry.kind.toUpperCase() == 'WARN'
223 }
224 ]"
225 >{{ logentry.time }}</small
226 >
227 <small
228 :class="[
229 'condensed type',
230 {
231 'text-danger':
232 logentry.kind.toUpperCase() == 'ERROR',
233 'text-warning':
234 logentry.kind.toUpperCase() == 'WARN'
235 }
236 ]"
237 >{{ logentry.message }}</small
238 >
239 </div>
240 </div>
241 </div>
242 </div>
243 </div>
244 </div>
245 </div>
246 </div>
247 </div>
248 </div>
249 </template>
250
251 <script>
252 import { displayError } from "@/lib/errors.js";
253 import { HTTP } from "@/lib/http";
254
255 //import { mapState } from "vuex";
256
257 const NODETAILS = -1;
258 const NODIFF = -1;
259
260 export default {
261 name: "importoverviewalt",
262 data() {
263 return {
264 showDiff: NODIFF,
265 importQueue: [],
266 logEntries: [],
267 show: NODETAILS,
268 showAdditional: NODETAILS,
269 showLogs: NODETAILS
270 };
271 },
272 methods: {
273 isFairwayDimension(kind) {
274 return kind === "FD";
275 },
276 isApprovedGaugeMeasurement(kind) {
277 return kind === "AGM";
278 },
279 isBottleneck(kind) {
280 return kind === "BN" || kind === "UBN";
281 },
282 isStretch(kind) {
283 return kind === "ST";
284 },
285 toggleAdditional(id) {
286 if (id === this.showAdditional) {
287 this.showAdditional = NODETAILS;
288 return;
289 }
290 this.showAdditional = id;
291 },
292 toggleDiff(id) {
293 if (id === this.showDiff) {
294 this.showDiff = NODIFF;
295 return;
296 }
297 this.showDiff = id;
298 },
299 toggleLogs(id) {
300 if (id === this.showLogs) {
301 this.showLogs = NODETAILS;
302 return;
303 }
304 this.loadLogEntries(id);
305 },
306 toggleDetails(id) {
307 if (id === this.show) {
308 this.show = NODETAILS;
309 this.showAdditional = NODETAILS;
310 this.showLogs = NODETAILS;
311 return;
312 }
313 this.show = id;
314 },
315 refresh() {
316 this.reload = true;
317 this.loadImportQueue();
318 this.loadLogs();
319 },
320 loadLogEntries(id) {
321 HTTP.get("/imports/" + id, {
322 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
323 })
324 .then(response => {
325 const { entries } = response.data;
326 this.logEntries = entries;
327 this.showLogs = id;
328 })
329 .catch(error => {
330 const { status, data } = error.response;
331 displayError({
332 title: this.$gettext("Backend Error"),
333 message: `${status}: ${data.message || data}`
334 });
335 });
336 },
337 loadImportQueue() {
338 HTTP.get("/imports?states=running,pending", {
339 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
340 })
341 .then(response => {
342 this.importQueue = response.data.imports;
343 })
344 .catch(error => {
345 const { status, data } = error.response;
346 displayError({
347 title: "Backend Error",
348 message: `${status}: ${data.message || data}`
349 });
350 });
351 },
352 loadLogs() {
353 this.$store
354 .dispatch("imports/getImports")
355 .then(() => {
356 this.reload = false;
357 })
358 .catch(error => {
359 const { status, data } = error.response;
360 displayError({
361 title: this.$gettext("Backend Error"),
362 message: `${status}: ${data.message || data}`
363 });
364 });
365 }
366 },
367 mounted() {
368 this.refresh();
369 },
370 NODETAILS: NODETAILS
371 };
372 </script>
373
374 <style lang="scss" scoped>
375 .agmdetailskeys {
376 width: 100px;
377 }
378
379 .agmdetailsvalues {
380 width: 200px;
381 }
382
383 .overview {
384 max-height: 800px;
385 }
386 .logentries {
387 max-height: 400px;
388 max-width: 600px;
389 font-size: smaller;
390 white-space: nowrap;
391 line-height: 1.1em;
392 overflow: auto;
393 }
394
395 .additionalinfo {
396 max-width: 650px;
397 max-height: 200px;
398 overflow-y: auto;
399 }
400
401 .additionalinfo > div:hover {
402 background: #eee;
403 }
404
405 .logentries > div:hover {
406 background: #eee;
407 }
408
409 .details {
410 width: 100%;
411 padding: 5px;
412 cursor: pointer;
413 }
414
415 .imports {
416 line-height: 0.8rem;
417 }
418
419 .icons {
420 width: 4%;
421 }
422
423 .id {
424 width: 10%;
425 }
426
427 .kind {
428 width: 10%;
429 }
430
431 .date {
432 width: 20%;
433 }
434
435 .enqueued {
436 width: 20%;
437 }
438
439 .user {
440 width: 10%;
441 }
442 .actions {
443 width: 16%;
444 }
445 </style>