feat: autorefresh processes, refresh processes w/o displaying loader

packages/api/src/controllers/serverConnections.js

@@ -274,6 +274,20 @@ module.exports = {
     return this.loadDataCore('serverSummary', { conid });
   },
 
+  listDatabaseProcesses_meta: true,
+  async listDatabaseProcesses(ctx, req) {
+    const { conid } = ctx;
+    testConnectionPermission(conid, req);
+
+    const opened = await this.ensureOpened(conid);
+    if (!opened) {
+      return null;
+    }
+    if (opened.connection.isReadOnly) return false;
+
+    return this.sendRequest(opened, { msgtype: 'listDatabaseProcesses' });
+  },
+
   killDatabaseProcess_meta: true,
   async killDatabaseProcess(ctx, req) {
     const { conid, pid } = ctx;

packages/api/src/proc/serverConnectionProcess.js

@@ -158,6 +158,18 @@ async function handleKillDatabaseProccess({ msgid, pid }) {
   }
 }
 
+async function handleListDatabaseProcesses({ msgid }) {
+  await waitConnected();
+  const driver = requireEngineDriver(storedConnection);
+
+  try {
+    const result = await driver.listProcesses(dbhan);
+    process.send({ msgtype: 'response', msgid, result });
+  } catch (err) {
+    process.send({ msgtype: 'response', msgid, errorMessage: err.message });
+  }
+}
+
 async function handleSummaryCommand({ msgid, command, row }) {
   return handleDriverDataCore(msgid, driver => driver.summaryCommand(dbhan, command, row));
 }
@@ -167,6 +179,7 @@ const messageHandlers = {
   ping: handlePing,
   serverSummary: handleServerSummary,
   killDatabaseProcess: handleKillDatabaseProccess,
+  listDatabaseProcesses: handleListDatabaseProcesses,
   summaryCommand: handleSummaryCommand,
   createDatabase: props => handleDatabaseOp('createDatabase', props),
   dropDatabase: props => handleDatabaseOp('dropDatabase', props),

packages/web/src/widgets/SummaryProcesses.svelte

@@ -4,21 +4,26 @@
   import { _t } from '../translations';
   import CtaButton from '../buttons/CtaButton.svelte';
   import { apiCall } from '../utility/api';
-  import runCommand from '../commands/runCommand';
+  import { onMount } from 'svelte';
 
   export let conid;
   export let processes: DatabaseProcess[] = [];
+  export let refreshInterval: number = 1000;
+
+  let internalProcesses = [...processes];
+
+  async function refreshProcesses() {
+    const data = await apiCall('server-connections/list-database-processes', { conid });
+    internalProcesses = data.result;
+  }
 
   async function killProcess(processId: number) {
-    // TODO: Implement kill process functionality
-    console.log('Kill process:', processId);
-
     await apiCall('server-connections/kill-database-process', {
       pid: processId,
       conid,
     });
 
-    runCommand('serverSummary.refresh');
+    refreshProcesses();
   }
 
   function formatRunningTime(seconds: number): string {
@@ -27,11 +32,17 @@
     if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
     return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
   }
+
+  onMount(() => {
+    const intervalId = setInterval(() => refreshProcesses(), refreshInterval);
+
+    return () => clearInterval(intervalId);
+  });
 </script>
 
 <div>
   <TableControl
-    rows={processes}
+    rows={internalProcesses}
     columns={[
       { header: 'Process ID', fieldName: 'processId', slot: 1 },
       { header: 'Connection ID', fieldName: 'connectionId' },