chore(slow-query-report): Use Dialog component instead of renderDialog

dashboard/src2/components/site/performance/SiteSlowQueries.vue

@@ -1,38 +1,49 @@
 <template>
 	<div>
 		<PerformanceReport
-			v-if="siteVersion !== 'Version 14'"
 			title="Slow Queries"
 			:site="name"
 			:reportOptions="slowQueriesOptions"
 		/>
-		<div v-else class="m-5 space-y-4">
-			<AlertBanner
-				title="Performance Tuning coming soon for Version 15"
-				type="info"
-			/>
-		</div>
+		<SiteSlowQueryDialog
+			v-if="show"
+			v-model="show"
+			:query="selectedQuery"
+			:duration="selectedQueryDuration"
+		/>
 	</div>
 </template>
 
 <script>
-import { defineAsyncComponent, h } from 'vue';
 import AlertBanner from '../../AlertBanner.vue';
 import PerformanceReport from './PerformanceReport.vue';
-import { renderDialog } from '../../../utils/components';
+import SiteSlowQueryDialog from './SiteSlowQueryDialog.vue';
 
 export default {
 	props: ['name', 'siteVersion'],
 	components: {
 		PerformanceReport,
-		AlertBanner
+		AlertBanner,
+		SiteSlowQueryDialog
+	},
+	data() {
+		return {
+			show: false,
+			selectedQuery: '',
+			selectedQueryDuration: 0
+		};
 	},
 	computed: {
 		slowQueriesOptions() {
 			return {
 				experimental: true,
 				documentation: 'https://frappecloud.com/docs/performance-tuning',
 				data: () => this.$resources.slowQueries.data.data,
+				onRowClick: row => {
+					this.selectedQuery = row.query;
+					this.selectedQueryDuration = row.duration;
+					this.show = true;
+				},
 				emptyStateMessage: 'No slow queries found',
 				columns: [
 					{

dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue

@@ -1,7 +1,7 @@
 <template>
 	<Dialog
 		:options="{
-			title: 'Normalized Slow Query',
+			title: 'Normalized Query',
 			size: '2xl'
 		}"
 		v-model="show"