From 26205eb65e9fd32234114299f17809424e63bfbf Mon Sep 17 00:00:00 2001
From: tanmoysrt <57363826+tanmoysrt@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:16:46 +0530
Subject: [PATCH] feat(perf-report): Show full slow query on clicking the row

---
 .../site/performance/SiteSlowQueries.vue      |  2 ++
 .../site/performance/SiteSlowQueryDialog.vue  | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue

diff --git a/dashboard/src2/components/site/performance/SiteSlowQueries.vue b/dashboard/src2/components/site/performance/SiteSlowQueries.vue
index a2c730974e..208252b4d1 100644
--- a/dashboard/src2/components/site/performance/SiteSlowQueries.vue
+++ b/dashboard/src2/components/site/performance/SiteSlowQueries.vue
@@ -16,8 +16,10 @@
 </template>
 
 <script>
+import { defineAsyncComponent, h } from 'vue';
 import AlertBanner from '../../AlertBanner.vue';
 import PerformanceReport from './PerformanceReport.vue';
+import { renderDialog } from '../../../utils/components';
 
 export default {
 	props: ['name', 'siteVersion'],
diff --git a/dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue b/dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue
new file mode 100644
index 0000000000..e09b0db7de
--- /dev/null
+++ b/dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue
@@ -0,0 +1,25 @@
+<template>
+	<Dialog
+		:options="{
+			title: 'Normalized Slow Query',
+			size: '2xl'
+		}"
+		v-model="show"
+	>
+		<template #body-content>
+			<pre
+				class="mt-2 whitespace-pre-wrap rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-sm text-gray-700"
+				>{{ query }}</pre
+			>
+			<div class="mt-2 flex text-sm">
+				<span class="ml-auto">Duration: {{ duration.toFixed(2) }} seconds</span>
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script>
+export default {
+	props: ['query', 'duration']
+};
+</script>