Merge pull request #251 from ctlnmhl/ui_fixes

Fix error message in notifications and truncate container image text
nanzhong · Jan 3, 2024 · 6cc7c4b · 6cc7c4b
2 parents 126778e + 5d20220
commit 6cc7c4b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/api/validate/validate.pb.go b/api/validate/validate.pb.go
diff --git a/ui/app/src/components/TextWithTooltip.vue b/ui/app/src/components/TextWithTooltip.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  text: any
+}>();
+
+</script>
+
+<template>
+  <span class="has-tooltip relative">
+    <span class="tooltip rounded shadow-lg p-2 bg-gray-500 text-white -mt-10">{{ text }}</span>
+    <pre class="truncate">{{ text }}</pre>
+  </span>
+</template>
diff --git a/ui/app/src/main.ts b/ui/app/src/main.ts
@@ -29,7 +29,7 @@ app.config.errorHandler = (err, instance, info) => {
     group: "top",
     type: "error",
     title: "Uh oh, something went wrong!",
-    text: err.toString(),
+    text: err.message,
   }, 4000);
 };
 

diff --git a/ui/app/src/views/RunDetails.vue b/ui/app/src/views/RunDetails.vue
@@ -9,6 +9,7 @@ import { RunLogOutput, Runner } from "../api/common/v1/common.pb";
 import RunResult from "../components/RunResult.vue";
 import Labels from "../components/Labels.vue";
 import TimeWithTooltip from "../components/TimeWithTooltip.vue";
+import TextWithTooltip from "../components/TextWithTooltip.vue";
 
 dayjs.extend(relativeTime);
 dayjs.extend(duration)
@@ -92,7 +93,7 @@ const logDecode = (data: string | null) => {
           <dl class="grid grid-cols-1 gap-2 my-4">
             <div class="col-span-1">
               <dt class="text-sm font-medium text-gray-500">Container Image</dt>
-              <dd class="mt-1 text-sm text-gray-900"><pre>{{ run.testRunConfig?.containerImage }}</pre></dd>
+              <dd class="mt-1 text-sm text-gray-900"><TextWithTooltip :text="test.runConfig?.containerImage"/></dd>
             </div>
             <div v-if="run.testRunConfig?.command" class="col-span-1">
               <dt class="text-sm font-medium text-gray-500">Command</dt>

diff --git a/ui/app/src/views/TestDetails.vue b/ui/app/src/views/TestDetails.vue
@@ -7,6 +7,7 @@ import { DataService } from "../api/data/v1/data.pb";
 import RunSummariesPlot from "../components/RunSummariesPlot.vue";
 import Labels from "../components/Labels.vue";
 import MatrixLabels from "../components/MatrixLabels.vue";
+import TextWithTooltip from "../components/TextWithTooltip.vue";
 
 dayjs.extend(relativeTime);
 
@@ -31,7 +32,7 @@ const runSummaries = testData.runSummaries!;
         <dl class="grid grid-cols-1 gap-x-2 gap-y-4 mb-4 sm:grid-cols-3">
           <div class="col-span-1">
             <dt class="text-sm font-medium text-gray-500">Container Image</dt>
-            <dd class="mt-1 text-sm text-gray-900"><pre>{{ test.runConfig?.containerImage }}</pre></dd>
+            <dd class="mt-1 text-sm text-gray-900"><TextWithTooltip :text="test.runConfig?.containerImage"/></dd>
           </div>
           <div v-if="test.runConfig?.command" class="col-span-1">
             <dt class="text-sm font-medium text-gray-500">Command</dt>