feat(UI): File output preview

close #1767

ui/src/components/Csv.vue

@@ -0,0 +1,40 @@
+<template>
+    <el-table :data="data" stripe>
+        <el-table-column v-for="(column, index) in generateTableColumns" :key="index" :prop="column.props.prop" :label="column.label">
+            <template #default="scope">
+                <span class="">{{ scope.row[index] }}</span>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+<script>
+
+    export default {
+        name: "Csv",
+        props: {
+            value: {
+                type: Object,
+                required: true
+            }
+        },
+        computed: {
+            generateTableColumns() {
+                const columns = [];
+                for (let i = 0; i < this.value.data[0].length; i++) {
+                    columns.push({
+                        props: {prop: String(i)},
+                        label: this.value.data[0][i],
+                    });
+                }
+
+                return columns;
+            },
+            data() {
+                return this.value.data.slice(1, this.value.data.length);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+</style>

ui/src/components/executions/ExecutionOutput.vue

@@ -85,6 +85,31 @@
                     <var-value :execution="execution" :value="scope.row.output" />
                 </template>
             </el-table-column>
+
+            <el-table-column :label="$t('preview')">
+                <template #default="scope">
+                    <div v-if="scope.row.output.startsWith('kestra:///')">
+                        <el-button @click="getFilePreview(scope.row.output)">
+                            {{ $t('open') }}
+                        </el-button>
+                        <el-drawer
+                            v-if="selectedPreview === scope.row.output"
+                            v-model="isPreviewOpen"
+                            destroy-on-close
+                            lock-scroll
+                            size=""
+                            :append-to-body="true"
+                        >
+                            <template #header>
+                                <h3>{{ $t('preview') }}</h3>
+                            </template>
+                            <template #default>
+                                <FilePreview :content="filePreview.content" :extension="filePreview.extension" v-if="filePreview" />
+                            </template>
+                        </el-drawer>
+                    </div>
+                </template>
+            </el-table-column>
         </el-table>
         <pagination :total="outputs.length" :page="page" :size="size" @page-changed="onPageChanged" />
     </div>
@@ -96,9 +121,11 @@
     import Editor from "../../components/inputs/Editor.vue";
     import Collapse from "../layout/Collapse.vue";
     import Pagination from "../layout/Pagination.vue";
+    import FilePreview from "./FilePreview.vue";
 
     export default {
         components: {
+            FilePreview,
             Pagination,
             VarValue,
             Editor,
@@ -113,7 +140,9 @@
                 debugStackTrace: "",
                 isModalOpen: false,
                 size: this.$route.query.size ? this.$route.query.size : 25,
-                page: this.$route.query.page ? this.$route.query.page : 1
+                page: this.$route.query.page ? this.$route.query.page : 1,
+                isPreviewOpen: false,
+                selectedPreview: null
             };
         },
         created() {
@@ -126,6 +155,9 @@
                 if (this.$route.query.search !== this.filter) {
                     this.filter = this.$route.query.search || "";
                 }
+            },
+            filePreview() {
+                this.isPreviewOpen = true;
             }
         },
         methods: {
@@ -172,9 +204,16 @@
                     }
                 });
             },
+            getFilePreview(path) {
+                this.$store.dispatch("execution/filePreview", {
+                    executionId: this.execution.id,
+                    path: path
+                })
+                this.selectedPreview = path
+            }
         },
         computed: {
-            ...mapState("execution", ["execution"]),
+            ...mapState("execution", ["execution","filePreview"]),
             selectOptions() {
                 const options = {};
                 for (const taskRun of this.execution.taskRunList || []) {

ui/src/components/executions/FilePreview.vue

@@ -0,0 +1,66 @@
+<template>
+    <csv v-if="extensionToMonacoLang === 'csv'" :value="formattedContent" />
+    <img v-else-if="extensionToMonacoLang === 'image'" :src="formattedContent" alt="Image output preview">
+    <editor v-else :model-value="formattedContent" :lang="extensionToMonacoLang" format-on-start />
+</template>
+<script>
+    import Editor from "../inputs/Editor.vue";
+    import * as ion from "ion-js";
+    import Papa from "papaparse";
+    import Csv from "../Csv.vue";
+
+    export default {
+        components: {Csv, Editor},
+        props: {
+            content: {
+                type: String,
+                required: true
+            },
+            extension: {
+                type: String,
+                required: true
+            }
+        },
+        computed: {
+            extensionToMonacoLang() {
+                switch(this.extension) {
+                case "json":
+                    return "json";
+                case "yaml":
+                case "yml":
+                case "ion":
+                    // little hack to get ion colored with monaco
+                    return "yaml";
+                case "csv":
+                    return "csv";
+                case "jpg":
+                case "jpeg":
+                case "png":
+                case "svg":
+                    return "image";
+                default:
+                    return "text";
+                }
+            },
+            formattedContent() {
+                switch(this.extension) {
+                case "json":
+                    return JSON.stringify(JSON.parse(this.content), null, 2);
+                case "ion":
+                    return ion.dumpPrettyText(ion.load(this.content));
+                case "csv":
+                    return Papa.parse(this.content);
+                case "jpg":
+                case "jpeg":
+                case "png":
+                case "svg":
+                    return "data:image/" + this.extension + ";base64," + this.content;
+                default:
+                    return this.content;
+                }
+            }
+        },
+        methods: {
+        }
+    }
+</script>

ui/src/components/inputs/Editor.vue

@@ -81,6 +81,7 @@
             lineNumbers: {type: Boolean, default: undefined},
             minimap: {type: Boolean, default: false},
             creating: {type: Boolean, default: false},
+            formatOnStart: {type: Boolean, default: false}
         },
         components: {
             MonacoEditor,
@@ -206,6 +207,8 @@
 
                 this.editor = editor;
 
+
+
                 if (!this.original) {
                     this.editor.onDidBlurEditorWidget(() => {
                         this.$emit("focusout", editor.getValue());
@@ -323,6 +326,12 @@
                         this.$emit("cursor", {position: position, model: model})
                     }, 100);
                 });
+
+                if (this.formatOnStart) {
+                    setTimeout(function() {
+                        editor.getAction("editor.action.formatDocument").run();
+                    }, 1000);
+                }
             },
             autoFold(autoFold) {
                 if (autoFold) {

ui/src/components/inputs/MonacoEditor.vue

@@ -171,6 +171,38 @@
                         command: "editor.action.triggerSuggest"
                     })
 
+                    // Register a new language
+                    monaco.languages.register({id: "ion"});
+
+                    monaco.languages.setLanguageConfiguration("ion", {
+                    });
+
+                    // Register a tokens provider for the language
+                    const config = {
+                        brackets: [["{", "}"]],
+                        tokenizer: {
+                            root: [
+                                [/^\s+([a-zA-Z]|\d)+:/, "string.key.json"],
+                                [/\d+:/, "string.key.json"],
+                                [/[a-zA-Z]+:/, "string.key.json"],
+                                [/".*?":/, "string.key.json"],
+                            ],
+                        },
+                        theme: {
+                            base: "vs",
+                            inherit: true,
+                            rules: [
+                                {token: "property", foreground: "#008800"},
+                            ],
+                        },
+
+                        colors: {
+                            property: "#008800",
+                        },
+                    };
+
+                    monaco.languages.setLanguageConfiguration("ion", config);
+
                     this.editor = monaco.editor.create(this.$el, options);
                 }
 

ui/src/stores/executions.js

@@ -12,6 +12,7 @@ export default {
         },
         metrics: [],
         metricsTotal: 0,
+        filePreview: undefined
     },
     actions: {
         loadExecutions({commit}, options) {
@@ -143,6 +144,13 @@ export default {
             }).then(response => {
                 return response.data
             })
+        },
+        filePreview({commit}, options) {
+            return this.$http.get(`api/v1/executions/${options.executionId}/file/preview`, {
+                params: options
+            }).then(response => {
+                commit("setFilePreview", response.data)
+            })
         }
     },
     mutations: {
@@ -179,6 +187,9 @@ export default {
         },
         setMetricsTotal(state, metrics) {
             state.metricsTotal = metrics
+        },
+        setFilePreview(state, filePreview) {
+            state.filePreview = filePreview
         }
     },
     getters: {

ui/src/translations.json

@@ -463,6 +463,9 @@
     "error detected": "Error detected",
     "cannot swap tasks": "Can't swap the tasks",
     "dependency task": "Task {taskId} is a dependency of another task",
+    "preview": "Preview",
+    "open": "Open",
+    "dependency task": "Task {taskId} is a dependency of another task",
     "administration": "Administration",
     "evaluation lock date": "Evaluation lock date",
     "unlock trigger": {
@@ -943,6 +946,9 @@
     "error detected": "Erreur détectée",
     "cannot swap tasks": "Impossible de permuter les tâches",
     "dependency task": "La tâche {taskId} est une dépendance d'une autre tâche",
+    "preview": "Aperçu",
+    "open": "Afficher",
+    "dependency task": "La tâche {taskId} est une dépendance d'une autre tâche",
     "administration": "Administration",
     "evaluation lock date": "Date verrou évaluation",
     "unlock trigger": {