feat(ui): add the ability to scroll the outputs error log and copy to…

… clipboard (#4681)
kestra-io · Aug 22, 2024 · 6c98339 · 6c98339
1 parent d48f540
commit 6c98339
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/ui/src/components/executions/outputs/Wrapper.vue b/ui/src/components/executions/outputs/Wrapper.vue
@@ -92,9 +92,13 @@
                     </el-collapse-item>
                 </el-collapse>
 
-                <el-alert v-if="debugError" type="error" :closable="false">
+                <el-alert v-if="debugError" type="error" :closable="false" class="overflow-auto">
                     <p><strong>{{ debugError }}</strong></p>
-                    <pre class="mb-0">{{ debugStackTrace }}</pre>
+                    <div class="my-2">
+                        <CopyToClipboard :text="debugError" label="Copy Error" class="d-inline-block me-2" />
+                        <CopyToClipboard :text="debugStackTrace" label="Copy Stack Trace" class="d-inline-block" />
+                    </div>
+                    <pre class="mb-0" style="overflow: scroll;">{{ debugStackTrace }}</pre>
                 </el-alert>
 
                 <VarValue :value="selectedValue" :execution="execution" />
@@ -116,6 +120,8 @@
 
     import {apiUrl} from "override/utils/route";
 
+    import CopyToClipboard from "../../layout/CopyToClipboard.vue"
+
     import Editor from "../../inputs/Editor.vue";
     const debugEditor = ref(null);
     const debugExpression = ref("");

diff --git a/ui/src/components/layout/CopyToClipboard.vue b/ui/src/components/layout/CopyToClipboard.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="copy-wrapper">
         <el-tooltip trigger="click" :content="$t('copied')" placement="left" :auto-close="2000" effect="light">
-            <el-button text round :icon="ContentCopy" @click="Utils.copy(text)" />
+            <el-button text round :icon="ContentCopy" @click="Utils.copy(text)">
+                <span v-if="label">
+                    {{ label }}
+                </span>
+            </el-button>
         </el-tooltip>
     </div>
 </template>
@@ -18,6 +22,11 @@
             text: {
                 type: String,
                 required: true
+            },
+            label: {
+                type: String,
+                required: false,
+                default: undefined
             }
         }
     }