fix: RUM dashboard overlay (#1891)

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,

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 () => {

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 () => {

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": [
         {

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"

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),