mongodb profiler

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -254,6 +254,18 @@
       });
     };
 
+    const handleDatabaseProfiler = () => {
+      openNewTab({
+        title: 'Profiler',
+        icon: 'img profiler',
+        tabComponent: 'ProfilerTab',
+        props: {
+          conid: connection._id,
+          database: name,
+        },
+      });
+    };
+
     async function handleConfirmSql(sql) {
       saveScriptToDatabase({ conid: connection._id, database: name }, sql, false);
     }
@@ -284,7 +296,8 @@
         !connection.singleDatabase && { onClick: handleDropDatabase, text: 'Drop database' },
       { divider: true },
       driver?.databaseEngineTypes?.includes('sql') && { onClick: handleShowDiagram, text: 'Show diagram' },
-      isSqlOrDoc && { onClick: handleSqlGenerator, text: 'SQL Generator' },
+      driver?.databaseEngineTypes?.includes('sql') && { onClick: handleSqlGenerator, text: 'SQL Generator' },
+      driver?.supportsDatabaseProfiler && { onClick: handleDatabaseProfiler, text: 'Database profiler' },
       isSqlOrDoc && { onClick: handleOpenJsonModel, text: 'Open model as JSON' },
       isSqlOrDoc && { onClick: handleExportModel, text: 'Export DB model - experimental' },
       isSqlOrDoc &&

packages/web/src/icons/FontIcon.svelte

@@ -49,6 +49,9 @@
     'icon close': 'mdi mdi-close',
     'icon unsaved': 'mdi mdi-record',
     'icon stop': 'mdi mdi-close-octagon',
+    'icon play': 'mdi mdi-play',
+    'icon play-stop': 'mdi mdi-stop',
+    'icon pause': 'mdi mdi-pause',
     'icon filter': 'mdi mdi-filter',
     'icon filter-off': 'mdi mdi-filter-off',
     'icon reload': 'mdi mdi-reload',
@@ -176,6 +179,7 @@
     'img app-command': 'mdi mdi-flash color-icon-green',
     'img app-query': 'mdi mdi-view-comfy color-icon-magenta',
     'img connection': 'mdi mdi-connection color-icon-blue',
+    'img profiler': 'mdi mdi-gauge color-icon-blue',
 
     'img add': 'mdi mdi-plus-circle color-icon-green',
     'img minus': 'mdi mdi-minus-circle color-icon-red',

packages/web/src/tabs/ProfilerTab.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" context="module">
+  export const matchingProps = ['conid', 'database', 'pureName', 'sql'];
+
+  const getCurrentEditor = () => getActiveComponent('ProfilerTab');
+
+  registerCommand({
+    id: 'profiler.start',
+    category: 'Profiler',
+    name: 'Start profiling',
+    icon: 'icon play',
+    testEnabled: () => getCurrentEditor() && !getCurrentEditor()?.isProfiling(),
+    onClick: () => getCurrentEditor().startProfiling(),
+  });
+
+  registerCommand({
+    id: 'profiler.stop',
+    category: 'Profiler',
+    name: 'Stop profiling',
+    icon: 'icon play-stop',
+    testEnabled: () => getCurrentEditor()?.isProfiling(),
+    onClick: () => getCurrentEditor().stopProfiling(),
+  });
+</script>
+
+<script>
+  import { onDestroy, onMount } from 'svelte';
+
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import registerCommand from '../commands/registerCommand';
+  import JslDataGrid from '../datagrid/JslDataGrid.svelte';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
+  import { apiCall } from '../utility/api';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+
+  export const activator = createActivator('ProfilerTab', true);
+
+  export let conid;
+  export let database;
+
+  let profiling = false;
+  let jslid;
+  let sessionId;
+
+  let intervalId;
+
+  onMount(() => {
+    intervalId = setInterval(() => {
+      if (sessionId) {
+        apiCall('sessions/ping', {
+          sesid: sessionId,
+        });
+      }
+    }, 15 * 1000);
+  });
+
+  onDestroy(() => {
+    clearInterval(intervalId);
+  });
+
+  export function isProfiling() {
+    return profiling;
+  }
+
+  export async function startProfiling() {
+    profiling = true;
+
+    let sesid = sessionId;
+    if (!sesid) {
+      const resp = await apiCall('sessions/create', {
+        conid,
+        database,
+      });
+      sesid = resp.sesid;
+      sessionId = sesid;
+    }
+
+    const resp = await apiCall('sessions/start-profiler', {
+      sesid,
+    });
+    jslid = resp.jslid;
+
+    invalidateCommands();
+  }
+
+  export function stopProfiling() {
+    profiling = false;
+    apiCall('sessions/stop-profiler', { sesid: sessionId });
+
+    invalidateCommands();
+  }
+</script>
+
+<ToolStripContainer>
+  {#if jslid}
+    <JslDataGrid {jslid} listenInitializeFile />
+  {:else}
+    <ErrorInfo message="Profiler not yet started" alignTop />
+  {/if}
+
+  <!-- <VerticalSplitter>
+    <svelte:fragment slot="1">
+      {#if jslid}
+        <JslDataGrid {jslid} listenInitializeFile />
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="2">DETAIL</svelte:fragment>
+  </VerticalSplitter> -->
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="profiler.start" />
+    <ToolStripCommandButton command="profiler.stop" />
+  </svelte:fragment>
+</ToolStripContainer>

packages/web/src/tabs/index.js

@@ -27,6 +27,7 @@ import * as ConnectionTab from './ConnectionTab.svelte';
 import * as MapTab from './MapTab.svelte';
 import * as PerspectiveTab from './PerspectiveTab.svelte';
 import * as ServerSummaryTab from './ServerSummaryTab.svelte';
+import * as ProfilerTab from './ProfilerTab.svelte';
 
 export default {
   TableDataTab,
@@ -58,4 +59,5 @@ export default {
   MapTab,
   PerspectiveTab,
   ServerSummaryTab,
+  ProfilerTab,
 };