Merge pull request #7 from bernt-matthias/topic/stdio-regex-extend-fr…

…ontend

Enhance Job Messages in Datasets Details page

client/src/components/JobInformation/JobInformation.vue

@@ -1,6 +1,57 @@
+<script setup>
+import CopyToClipboard from "components/CopyToClipboard";
+import { JobDetailsProvider } from "components/providers/JobProvider";
+import UtcDate from "components/UtcDate";
+import { formatDuration, intervalToDuration } from "date-fns";
+import JOB_STATES_MODEL from "utils/job-states-model";
+import { computed, ref } from "vue";
+
+import DecodedId from "../DecodedId.vue";
+import CodeRow from "./CodeRow.vue";
+
+const job = ref(null);
+
+const props = defineProps({
+    job_id: {
+        type: String,
+        required: true,
+    },
+    includeTimes: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const runTime = computed(() =>
+    formatDuration(intervalToDuration({ start: new Date(job.value.create_time), end: new Date(job.value.update_time) }))
+);
+
+const jobIsTerminal = computed(() => job.value && !JOB_STATES_MODEL.NON_TERMINAL_STATES.includes(job.value.state));
+
+const metadataDetail = ref({
+    exit_code: `Tools may use exit codes to indicate specific execution errors. Many programs use 0 to indicate success and non-zero exit codes to indicate errors. Galaxy allows each tool to specify exit codes that indicate errors. https://docs.galaxyproject.org/en/master/dev/schema.html#tool-stdio-exit-code`,
+    error_level: `NO_ERROR = 0</br>LOG = 1</br>QC = 1.1</br>WARNING = 2</br>FATAL = 3</br>FATAL_OOM = 4</br>MAX = 4`,
+});
+
+function updateJob(fromProvider) {
+    job.value = fromProvider;
+}
+
+function filterMetadata(jobMessages) {
+    return jobMessages.map((item) => {
+        return Object.entries(item).reduce((acc, [key, value]) => {
+            if (value) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+    });
+}
+</script>
+
 <template>
     <div>
-        <JobDetailsProvider auto-refresh :job-id="job_id" @update:result="updateJob" />
+        <JobDetailsProvider auto-refresh :job-id="props.job_id" @update:result="updateJob" />
         <h2 class="h-md">Job Information</h2>
         <table id="job-information" class="tabletip info_data_table">
             <tbody>
@@ -22,19 +73,19 @@
                     <td>Galaxy Tool Version</td>
                     <td id="galaxy-tool-version">{{ job.tool_version }}</td>
                 </tr>
-                <tr v-if="job && includeTimes">
+                <tr v-if="job && props.includeTimes">
                     <td>Created</td>
                     <td v-if="job.create_time" id="created">
                         <UtcDate :date="job.create_time" mode="pretty" />
                     </td>
                 </tr>
-                <tr v-if="job && includeTimes">
+                <tr v-if="job && props.includeTimes">
                     <td>Updated</td>
                     <td v-if="job.update_time" id="updated">
                         <UtcDate :date="job.update_time" mode="pretty" />
                     </td>
                 </tr>
-                <tr v-if="job && includeTimes && jobIsTerminal">
+                <tr v-if="job && props.includeTimes && jobIsTerminal">
                     <td>Time To Finish</td>
                     <td id="runtime">
                         {{ runTime }}
@@ -55,9 +106,28 @@
                 <tr v-if="job && job.job_messages && job.job_messages.length > 0" id="job-messages">
                     <td>Job Messages</td>
                     <td>
-                        <ul style="padding-left: 15px; margin-bottom: 0px">
-                            <li v-for="(message, index) in job.job_messages" :key="index">{{ message }}</li>
+                        <ul v-if="Array.isArray(job.job_messages)" class="pl-2 mb-0">
+                            <div v-for="(message, m) in filterMetadata(job.job_messages)" :key="m">
+                                <div v-if="job.job_messages.length > 1">
+                                    <u>Job Message {{ m + 1 }}:</u>
+                                </div>
+                                <li v-for="(value, name, i) in message" :key="i">
+                                    <span
+                                        v-if="metadataDetail[name]"
+                                        v-b-tooltip.html
+                                        class="tooltipJobInfo"
+                                        :title="metadataDetail[name]"
+                                        ><strong>{{ name }}:</strong></span
+                                    >
+                                    <strong v-else>{{ name }}:</strong>
+                                    {{ value }}
+                                </li>
+                                <hr v-if="m + 1 < job.job_messages.length" />
+                            </div>
                         </ul>
+                        <div v-else>
+                            {{ job.job_messages }}
+                        </div>
                     </td>
                 </tr>
                 <slot></slot>
@@ -76,57 +146,9 @@
     </div>
 </template>
 
-<script>
-import CopyToClipboard from "components/CopyToClipboard";
-import { JobDetailsProvider } from "components/providers/JobProvider";
-import UtcDate from "components/UtcDate";
-import { formatDuration, intervalToDuration } from "date-fns";
-import { getAppRoot } from "onload/loadConfig";
-import JOB_STATES_MODEL from "utils/job-states-model";
-
-import DecodedId from "../DecodedId.vue";
-import CodeRow from "./CodeRow.vue";
-
-export default {
-    components: {
-        CodeRow,
-        DecodedId,
-        JobDetailsProvider,
-        UtcDate,
-        CopyToClipboard,
-    },
-    props: {
-        job_id: {
-            type: String,
-            required: true,
-        },
-        includeTimes: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            job: null,
-        };
-    },
-    computed: {
-        runTime: function () {
-            return formatDuration(
-                intervalToDuration({ start: new Date(this.job.create_time), end: new Date(this.job.update_time) })
-            );
-        },
-        jobIsTerminal() {
-            return this.job && !JOB_STATES_MODEL.NON_TERMINAL_STATES.includes(this.job.state);
-        },
-    },
-    methods: {
-        getAppRoot() {
-            return getAppRoot();
-        },
-        updateJob(job) {
-            this.job = job;
-        },
-    },
-};
-</script>
+<style scoped>
+.tooltipJobInfo {
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+}
+</style>