chore(db-analyzer): refresh button for db processlist

frappe · Dec 20, 2024 · 77072ba · 77072ba
1 parent 215ad65
commit 77072ba
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 38 deletions.
diff --git a/dashboard/src2/components/ToggleContent.vue b/dashboard/src2/components/ToggleContent.vue
@@ -1,17 +1,12 @@
 <template>
 	<div class="rounded border text-base">
 		<div
-			class="flex cursor-pointer select-none flex-row items-center gap-2 p-4"
+			class="flex cursor-pointer select-none flex-row items-center justify-between gap-2 p-4"
 			@click="toggleVisibility"
 			:class="{
 				'!pb-2': isVisible
 			}"
 		>
-			<!-- <Button
-				:icon="isVisible ? 'chevron-down' : 'chevron-right'"
-				variant="ghost"
-				@click="toggleVisibility"
-			></Button> -->
 			<div>
 				<p class="font-medium text-gray-800">
 					{{ label }}
@@ -20,6 +15,7 @@
 					{{ subLabel }}
 				</p>
 			</div>
+			<slot name="actions" v-if="isVisible"></slot>
 		</div>
 
 		<div v-if="isVisible" class="text-sm leading-normal">

diff --git a/dashboard/src2/components/devtools/database/DatabaseProcessKillButton.vue b/dashboard/src2/components/devtools/database/DatabaseProcessKillButton.vue
@@ -5,7 +5,7 @@
 		@click="killProcess"
 		:loading="this.$resources.killProcess.loading"
 		loadingText="Killing"
-		iconLeft="x"
+		iconLeft="trash"
 		variant="ghost"
 		class="w-full"
 		>Kill Process</Button

diff --git a/dashboard/src2/components/devtools/database/ResultTable.vue b/dashboard/src2/components/devtools/database/ResultTable.vue
@@ -128,7 +128,7 @@ const downloadCSV = async () => {
 							</div>
 						</td>
 						<td
-							class="border-b border-r text-center text-gray-800"
+							class="min-w-[10rem] border-b border-r text-center text-gray-800"
 							v-if="actionHeaderLabel"
 						>
 							{{ actionHeaderLabel }}
@@ -154,7 +154,7 @@ const downloadCSV = async () => {
 							/>
 						</td>
 						<td
-							class="border-b border-r text-center text-gray-800"
+							class="min-w-[10rem] border-b border-r text-center text-gray-800"
 							v-if="actionComponent"
 						>
 							<component

diff --git a/dashboard/src2/pages/devtools/database/DatabaseAnalyzer.vue b/dashboard/src2/pages/devtools/database/DatabaseAnalyzer.vue
@@ -113,6 +113,46 @@
 				</div>
 			</div>
 
+			<!-- Database Processes -->
+			<ToggleContent
+				class="mt-3"
+				label="Database Processes"
+				subLabel="Analyze the processes of the database"
+			>
+				<template #actions>
+					<div>
+						<Button
+							:loading="this.$resources.databaseProcesses.loading"
+							loading-text="Refreshing"
+							icon-left="rotate-ccw"
+							@click.stop="this.$resources.databaseProcesses.submit()"
+							>Refresh</Button
+						>
+					</div>
+				</template>
+				<template #default>
+					<div
+						v-if="this.$resources.databaseProcesses.loading"
+						class="flex h-60 w-full items-center justify-center gap-2 text-base text-gray-700"
+					>
+						<Spinner class="w-4" /> Loading Database Processes
+					</div>
+					<ResultTable
+						v-else
+						class="mt-2"
+						:columns="databaseProcesses.columns"
+						:data="databaseProcesses.data"
+						actionHeaderLabel="Kill Process"
+						:actionComponent="DatabaseProcessKillButton"
+						:actionComponentProps="{
+							site: this.site
+						}"
+						:enableCSVExport="false"
+						:borderLess="true"
+					/>
+				</template>
+			</ToggleContent>
+
 			<!-- Queries Information -->
 			<ToggleContent
 				class="mt-5"
@@ -191,33 +231,6 @@
 				</FTabs>
 			</ToggleContent>
 
-			<!-- Database Processes -->
-			<ToggleContent
-				class="mt-3"
-				label="Database Processes"
-				subLabel="Analyze the processes of the database"
-			>
-				<div
-					v-if="this.$resources.databaseProcesses.loading"
-					class="flex h-60 w-full items-center justify-center gap-2 text-base text-gray-700"
-				>
-					<Spinner class="w-4" /> Loading Database Processes
-				</div>
-				<ResultTable
-					v-else
-					class="mt-2"
-					:columns="databaseProcesses.columns"
-					:data="databaseProcesses.data"
-					actionHeaderLabel="Kill Process"
-					:actionComponent="DatabaseProcessKillButton"
-					:actionComponentProps="{
-						site: this.site
-					}"
-					:enableCSVExport="false"
-					:borderLess="true"
-				/>
-			</ToggleContent>
-
 			<!-- <ObjectList :options="tableAnalysisTableOptions" /> -->
 		</div>
 		<div
@@ -239,7 +252,7 @@ import Header from '../../../components/Header.vue';
 import { Tabs, Breadcrumbs } from 'frappe-ui';
 import LinkControl from '../../../components/LinkControl.vue';
 import ObjectList from '../../../components/ObjectList.vue';
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 import { toast } from 'vue-sonner';
 import ToggleContent from '../../../components/ToggleContent.vue';
 import ResultTable from '../../../components/devtools/database/ResultTable.vue';
@@ -265,7 +278,7 @@ export default {
 			isIndexSuggestionTriggered: false,
 			queryTabIndex: 0,
 			dbIndexTabIndex: 0,
-			DatabaseProcessKillButton
+			DatabaseProcessKillButton: markRaw(DatabaseProcessKillButton)
 		};
 	},
 	mounted() {},