ErrorMessage: added modal window and handling (9fe25805) · Commits · Filip Opálený / Loop Grafter

src/App.vue

+3 −0

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@
		<HorizontalMenu />
		<router-view />
		<LoopsStatusBar />
		<ErrorMessage/>
		</div>
		</template>

		@@ -11,6 +12,7 @@
		import LoopsHeader from "./components/Header/LoopsHeader";
		import HorizontalMenu from "./components/Header/HorizontalMenu";
		import LoopsStatusBar from "./components/LoopsStatusBar";
		import ErrorMessage from "./components/ErrorMessage";

		export default {
		name: "App",
		@@ -18,6 +20,7 @@ export default {
		LoopsHeader,
		HorizontalMenu,
		LoopsStatusBar,
		ErrorMessage,
		},
		created: function () {
		this.$log.info("Start");

src/components/ErrorMessage.vue

0 → 100644

+95 −0

Original line number	Diff line number	Diff line
		<template>
		<div v-if="show" class="modal-backdrop">
		<div class="modal">
		<div class="header">Whoopsie!</div>
		<div class="body">
		<p>
		LoopGrafter encountered an error and might misbehave if you decide to
		continue with this particular job. Here is what we know: {{ error }}
		</p>
		<div>
		<p class="importang-part">{{ getErrorRepresentation.shortForm }}</p>
		<p class="importang-part">{{ getErrorRepresentation.message }}</p>
		<p>{{ getErrorRepresentation.detail }}</p>
		</div>
		<p>
		Sent us an email to
		<span class="email">loopgrafter@sci.muni.cz</span> specifying this
		error and your job id (<span class="jobId">{{ getToken }}</span
		>). We are not promising anything, but we might be able to help.
		</p>

		<text-label-button @click="show = false" class="msg-button"
		>OK :(</text-label-button
		>
		</div>
		</div>
		</div>
		</template>

		<script>
		import { mapGetters } from "vuex";
		import TextLabelButton from "./PanelButtons/TextLabelButton.vue";
		export default {
		components: { TextLabelButton },
		data() {
		return {
		show: false,
		};
		},
		computed: {
		...mapGetters(["getErrorRepresentation", "getToken", "getErrorCount"]),
		},
		watch: {
		getErrorCount(newValue, oldValue) {
		if (newValue > oldValue) {
		this.show = true;
		}
		},
		},
		};
		</script>

		<style scoped>
		.modal-backdrop {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		}

		.modal {
		border-radius: 5px;
		box-shadow: 2px 2px 20px 1px grey;
		overflow-x: auto;
		display: flex;
		flex-direction: column;
		max-width: 60%;
		}
		.header {
		background: var(--scaffold);
		padding: 4px 20px;
		color: white;
		}
		.body {
		background: var(--neutral);
		padding: 4px 20px;
		}
		.msg-button {
		width: 40px;
		}
		.email {
		color: var(--insert);
		}
		.jobId {
		color: var(--insert);
		}
		.importang-part{
		color: var(--scaffold);
		}
		</style>
		No newline at end of file

src/components/LoopsStatusBar.vue

+1 −36

Original line number	Diff line number	Diff line
		@@ -2,10 +2,7 @@
		<footer class="status-bar">
		<div class="capped-width status-bar-content">
		<div class="msg">
		[Job: {{ getToken }}]:
		<transition name="msg-fade" mode="out-in">
		<span class="msg-text" :key="getMessage"> {{ getMessage }} </span>
		</transition>
		[Job: {{ getToken }}]
		</div>
		<Loading />
		<Ping />
		@@ -49,36 +46,4 @@ export default {
		.msg {
		flex: 1;
		}

		.msg-text {
		opacity: 0;
		color: var(--scaffold)
		}

		.msg-text:hover {
		animation-play-state: paused;
		}

		.msg-fade-enter-active {
		transition: all 0.3s ease;
		}
		.msg-fade-leave-active {
		transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
		}
		.msg-fade-enter-to
		/* .slide-fade-leave-active for <2.1.8 */ {
		animation: hide 10s ease-in;
		}

		@keyframes hide {
		0% {
		opacity: 1;
		}
		90% {
		opacity: 1;
		}
		100% {
		opacity: 0;
		}
		}
		</style>
		No newline at end of file

src/store/modules/error.js

0 → 100644

+31 −0

Original line number	Diff line number	Diff line
		export default {
		state: {
		errorCount: 0,
		errorRepresentation: null,
		},
		getters: {
		getErrorRepresentation(state) {
		return state.errorRepresentation;
		},
		getErrorCount(state) {
		return state.errorCount;
		}
		},
		mutations: {
		setErrorMessage(state, message) {
		state.errorRepresentation = message;
		state.errorCount += 1;
		},
		},
		actions: {
		setErrorMessage(context, errorMessage) {
		debugger;

		if (errorMessage.error.ignoreUnhandledRejection) {
		return
		}
		context.commit('setErrorMessage', {shortForm: `${errorMessage.error}`, message: `${errorMessage.error.response?.data?.error} - ${errorMessage.error.response?.data?.message}`, detail: `${errorMessage.error.stack}`});
		throw { source: errorMessage.error, ignoreUnhandledRejection: true };
		},
		}
		}
		No newline at end of file

src/store/modules/status_bar.js

+1 −19

Original line number	Diff line number	Diff line
		@@ -3,8 +3,6 @@ import _ from "lodash";
		export default {
		state: {
		awaitables: [],
		message: "",
		messageTimeout: null,

		},
		getters: {
		@@ -15,10 +13,6 @@ export default {
		isAwaiting(state) {
		return state.getCurrentAwaitables.length > 0;
		},

		getMessage(state) {
		return state.message;
		}
		},
		mutations: {
		addAwaitable(state, awaitable) {
		@@ -27,11 +21,7 @@ export default {
		removeAwaitable(state, awaitable) {
		state.awaitables = state.awaitables.filter((a) => a.id != awaitable.id)
		},
		setErrorMessage(state, message) {
		window.clearTimeout(state.messageTimeout)
		state.messageTimeout = window.setTimeout(() => { state.message = null }, 8000)
		state.message = message;
		},



		},
		@@ -42,14 +32,6 @@ export default {
		context.commit('removeAwaitable', awaitable);
		})
		},
		setErrorMessage(context, errorMessage) {
		debugger;

		if (errorMessage.error.ignoreUnhandledRejection) {
		return
		}
		context.commit('setErrorMessage', `${errorMessage.error.response?.data?.error} - ${errorMessage.error.response?.data?.message}`);
		throw { source: errorMessage.error, ignoreUnhandledRejection: true };
		},
		}
		}
		No newline at end of file