From 5d202206c160711fcc2058f562aac773a691a0a5 Mon Sep 17 00:00:00 2001
From: Catalin <ctlnmhl@gmail.com>
Date: Thu, 7 Dec 2023 17:06:25 +0200
Subject: [PATCH] Fix error message in notifications and truncate container
 image text

---
 api/validate/validate.pb.go               |  8 ++++----
 ui/app/src/components/TextWithTooltip.vue | 14 ++++++++++++++
 ui/app/src/main.ts                        |  2 +-
 ui/app/src/views/RunDetails.vue           |  3 ++-
 ui/app/src/views/TestDetails.vue          |  3 ++-
 5 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 ui/app/src/components/TextWithTooltip.vue

diff --git a/api/validate/validate.pb.go b/api/validate/validate.pb.go
index 8b2f00c1..e1848046 100644
--- a/api/validate/validate.pb.go
+++ b/api/validate/validate.pb.go
@@ -1974,7 +1974,7 @@ type StringRules struct {
 	// MaxBytes specifies that this field must be the specified number of bytes
 	// at a maximum
 	MaxBytes *uint64 `protobuf:"varint,5,opt,name=max_bytes,json=maxBytes" json:"max_bytes,omitempty"`
-	// Pattern specifes that this field must match against the specified
+	// Pattern specifies that this field must match against the specified
 	// regular expression (RE2 syntax). The included expression should elide
 	// any delimiters.
 	Pattern *string `protobuf:"bytes,6,opt,name=pattern" json:"pattern,omitempty"`
@@ -2349,7 +2349,7 @@ type BytesRules struct {
 	// MaxLen specifies that this field must be the specified number of bytes
 	// at a maximum
 	MaxLen *uint64 `protobuf:"varint,3,opt,name=max_len,json=maxLen" json:"max_len,omitempty"`
-	// Pattern specifes that this field must match against the specified
+	// Pattern specifies that this field must match against the specified
 	// regular expression (RE2 syntax). The included expression should elide
 	// any delimiters.
 	Pattern *string `protobuf:"bytes,4,opt,name=pattern" json:"pattern,omitempty"`
@@ -2699,10 +2699,10 @@ type RepeatedRules struct {
 	// items at a maximum
 	MaxItems *uint64 `protobuf:"varint,2,opt,name=max_items,json=maxItems" json:"max_items,omitempty"`
 	// Unique specifies that all elements in this field must be unique. This
-	// contraint is only applicable to scalar and enum types (messages are not
+	// constraint is only applicable to scalar and enum types (messages are not
 	// supported).
 	Unique *bool `protobuf:"varint,3,opt,name=unique" json:"unique,omitempty"`
-	// Items specifies the contraints to be applied to each item in the field.
+	// Items specifies the constraints to be applied to each item in the field.
 	// Repeated message fields will still execute validation against each item
 	// unless skip is specified here.
 	Items *FieldRules `protobuf:"bytes,4,opt,name=items" json:"items,omitempty"`
diff --git a/ui/app/src/components/TextWithTooltip.vue b/ui/app/src/components/TextWithTooltip.vue
new file mode 100644
index 00000000..b60dbf67
--- /dev/null
+++ 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
index e3094dc0..6bfaf2a2 100644
--- 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
index b1e5f86f..d48f9e06 100644
--- 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
index 60eb9f11..35b21353 100644
--- 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>