change database status command

packages/web/src/commands/changeDatabaseStatusCommand.ts

@@ -0,0 +1,43 @@
+import _ from 'lodash';
+import { currentDatabase, getCurrentDatabase } from '../stores';
+import getElectron from '../utility/getElectron';
+import registerCommand from './registerCommand';
+import axiosInstance from '../utility/axiosInstance';
+
+const electron = getElectron();
+
+registerCommand({
+  id: 'database.changeState',
+  category: 'Database',
+  name: 'Change status',
+  getSubCommands: () => {
+    const current = getCurrentDatabase();
+    if (!current) return [];
+    const { connection, name } = current;
+    const dbid = {
+      conid: connection._id,
+      database: name,
+    };
+    return [
+      {
+        text: 'Sync model',
+        onClick: () => {
+          axiosInstance.post('database-connections/sync-model', dbid);
+        },
+      },
+      {
+        text: 'Reopen',
+        onClick: () => {
+          axiosInstance.post('database-connections/refresh', dbid);
+        },
+      },
+      {
+        text: 'Disconnect',
+        onClick: () => {
+          if (electron) axiosInstance.post('database-connections/disconnect', dbid);
+          currentDatabase.set(null);
+        },
+      },
+    ];
+  },
+});

packages/web/src/commands/runCommand.ts

@@ -26,3 +26,9 @@ export function runGroupCommand(group) {
   const real = values.find(x => x.group == group && !x.isGroupCommand && x.enabled);
   if (real && real.onClick) real.onClick();
 }
+
+export function findCommand(id) {
+  const commandsValue = getCommands();
+  const command = commandsValue[id];
+  return command;
+}

packages/web/src/commands/stdCommands.ts

@@ -16,6 +16,7 @@ import { openElectronFile } from '../utility/openElectronFile';
 import { getDefaultFileFormat } from '../plugins/fileformats';
 import { getCurrentConfig, getCurrentDatabase } from '../stores';
 import './recentDatabaseSwitch';
+import './changeDatabaseStatusCommand';
 import hasPermission from '../utility/hasPermission';
 import axiosInstance from '../utility/axiosInstance';
 import _ from 'lodash';

packages/web/src/widgets/StatusBar.svelte

@@ -7,7 +7,6 @@
       [tabid]: info,
     }));
   }
-
 </script>
 
 <script lang="ts">
@@ -16,10 +15,11 @@
 
   import FontIcon from '../icons/FontIcon.svelte';
 
-  import { activeTabId, currentDatabase } from '../stores';
+  import { activeTabId, currentDatabase, visibleCommandPalette } from '../stores';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
   import axiosInstance from '../utility/axiosInstance';
+  import { findCommand } from '../commands/runCommand';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
@@ -40,7 +40,6 @@
       await axiosInstance.post('database-connections/sync-model', { conid: connection._id, database: databaseName });
     }
   }
-
 </script>
 
 <div class="main">
@@ -64,7 +63,7 @@
       </div>
     {/if}
     {#if connection && $status}
-      <div class="item">
+      <div class="item clickable" on:click={() => visibleCommandPalette.set(findCommand('database.changeState'))}>
         {#if $status.name == 'pending'}
           <FontIcon icon="icon loading" /> Loading
         {:else if $status.name == 'checkStructure'}
@@ -94,7 +93,9 @@
     {#if $status?.analysedTime}
       <div
         class="item flex clickable"
-        title={`Last ${databaseName} model refresh: ${moment($status?.analysedTime).format('HH:mm:ss')}\nClick for refresh DB model`}
+        title={`Last ${databaseName} model refresh: ${moment($status?.analysedTime).format(
+          'HH:mm:ss'
+        )}\nClick for refresh DB model`}
         on:click={handleSyncModel}
       >
         <FontIcon icon="icon history" />
@@ -144,5 +145,4 @@
   .clickable:hover {
     background-color: var(--theme-bg-statusbar-inv-hover);
   }
-
 </style>