feat(perf-report): Show full slow query on clicking the row

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'],

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>