From 545aff9dbbfcaa882defbc8a89cb27aab2c1e5a8 Mon Sep 17 00:00:00 2001
From: Omkar Kesarkhane <127078473+omkarK06@users.noreply.github.com>
Date: Tue, 7 Nov 2023 15:27:03 +0530
Subject: [PATCH] fix: RUM dashboard overlay  (#1891)

---
 .../rum/errorTracking/view/ErrorHeader.vue    | 31 ++++++++++++++-----
 .../rum/performance/PerformanceSummary.vue    |  3 +-
 .../rum/performance/WebVitalsDashboard.vue    |  3 +-
 web/src/utils/rum/overview.json               | 30 ++++++++++++++++++
 web/src/views/RUM/SessionViewer.vue           | 13 ++++++++
 web/vite.config.ts                            |  3 +-
 6 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/web/src/components/rum/errorTracking/view/ErrorHeader.vue b/web/src/components/rum/errorTracking/view/ErrorHeader.vue
index eac6f67648..4f574c2953 100644
--- a/web/src/components/rum/errorTracking/view/ErrorHeader.vue
+++ b/web/src/components/rum/errorTracking/view/ErrorHeader.vue
@@ -16,8 +16,28 @@
 <template>
   <div>
     <div>
+      <div class="q-pt-sm q-pb-xs flex justify-start">
+        <div
+          class="flex justify-center items-center q-mr-md cursor-pointer"
+          style="
+            border: 1.5px solid;
+            border-radius: 50%;
+            width: 22px;
+            height: 22px;
+          "
+          title="Go Back"
+          @click="router.back()"
+        >
+          <q-icon name="arrow_back_ios_new" size="14px" />
+        </div>
+        <span class="text-bold">Event ID:</span>
+        <span :title="eventId" class="q-pl-xs cursor-pointer"
+          >{{ error.error_id }} <q-icon size="12px" name="content_copy"
+        /></span>
+        <span class="q-ml-lg">{{ error.timestamp }}</span>
+      </div>
       <div class="row items-center no-wrap q-my-xs">
-        <div class="error_type text-bold ">{{ error.type }}</div>
+        <div class="error_type text-bold">{{ error.type }}</div>
       </div>
       <div class="error_message q-pt-xs row items-center">
         <div
@@ -32,20 +52,15 @@
         </div>
         {{ error.error_message }}
       </div>
-      <div class="q-pt-sm q-pb-xs">
-        <span class="text-bold">Event ID:</span>
-        <span :title="eventId" class="q-pl-xs cursor-pointer"
-          >{{ error.error_id }} <q-icon size="12px" name="content_copy"
-        /></span>
-        <span class="q-ml-lg">{{ error.timestamp }}</span>
-      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineProps } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const props = defineProps({
   error: {
     type: Object,
diff --git a/web/src/components/rum/performance/PerformanceSummary.vue b/web/src/components/rum/performance/PerformanceSummary.vue
index 0971eef4eb..60aef50a2b 100644
--- a/web/src/components/rum/performance/PerformanceSummary.vue
+++ b/web/src/components/rum/performance/PerformanceSummary.vue
@@ -97,7 +97,8 @@ export default defineComponent({
 
       setTimeout(() => {
         performanceChartsRef.value.layoutUpdate();
-      }, 500);
+        window.dispatchEvent(new Event("resize"));
+      }, 800);
     };
 
     const loadDashboard = async () => {
diff --git a/web/src/components/rum/performance/WebVitalsDashboard.vue b/web/src/components/rum/performance/WebVitalsDashboard.vue
index d83a3068d9..2c1f14e678 100644
--- a/web/src/components/rum/performance/WebVitalsDashboard.vue
+++ b/web/src/components/rum/performance/WebVitalsDashboard.vue
@@ -126,7 +126,8 @@ export default defineComponent({
 
       setTimeout(() => {
         webVitalsChartsRef.value.layoutUpdate();
-      }, 500);
+        window.dispatchEvent(new Event("resize"));
+      }, 800);
     };
 
     const loadDashboard = async () => {
diff --git a/web/src/utils/rum/overview.json b/web/src/utils/rum/overview.json
index 8b9bd3f551..c33d32462f 100644
--- a/web/src/utils/rum/overview.json
+++ b/web/src/utils/rum/overview.json
@@ -19,6 +19,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
@@ -61,6 +66,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
@@ -102,6 +112,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
@@ -143,6 +158,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
@@ -184,6 +204,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
@@ -226,6 +251,11 @@
         "base_map": { "type": "osm" },
         "map_view": { "zoom": 1, "lat": 0, "lng": 0 }
       },
+      "error_config": {
+        "custom_error_handeling": true,
+        "custom_error_message": "No Data",
+        "default_data_on_error": "[[{\"y_axis_1\":0}]]"
+      },
       "queryType": "sql",
       "queries": [
         {
diff --git a/web/src/views/RUM/SessionViewer.vue b/web/src/views/RUM/SessionViewer.vue
index 06ea0511b7..0fad5679d5 100644
--- a/web/src/views/RUM/SessionViewer.vue
+++ b/web/src/views/RUM/SessionViewer.vue
@@ -17,6 +17,19 @@
   <div class="row qp-2 full-height">
     <div class="col-12 q-px-sm q-pt-md row items-end">
       <div class="col-9 row">
+        <div
+          class="flex justify-center items-center q-mr-md cursor-pointer"
+          style="
+            border: 1.5px solid;
+            border-radius: 50%;
+            width: 22px;
+            height: 22px;
+          "
+          title="Go Back"
+          @click="router.back()"
+        >
+          <q-icon name="arrow_back_ios_new" size="14px" />
+        </div>
         <div
           class="text-caption ellipsis row items-center q-mr-md"
           style="font-size: 20px"
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 7098cd51ac..94e9b24602 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -105,8 +105,7 @@ export default defineConfig({
     enterpriseResolverPlugin,
     vueJsx(),
     monacoEditorPlugin({
-      customDistPath: () =>
-        path.resolve(__dirname, "dist/assets/monacoeditorwork"),
+      customDistPath: () => path.resolve(__dirname, "dist/monacoeditorwork"),
     }),
     isTesting && monacoEditorTestResolver(),
   ].filter(Boolean),