Add Database -> Show Connected Clients

app/controllers/server_controller.js

@@ -0,0 +1,11 @@
+class ServerController {
+  async showConnectionList () {
+    var server = global.App.currentTab.instance.connection.server;
+    var dialog = new Dialog.ConnectionList(server);
+    // dialog.showWindow();
+  }
+}
+
+
+module.exports = ServerController;
+global.ServerController = ServerController;

app/models/server.js

@@ -54,6 +54,12 @@ class Server extends ModelBase {
     });
   }
 
+  listConnections(variable) {
+    return this.q(`SELECT * FROM pg_stat_activity \n  order by state_change is null, datname nulls first, usename, application_name`).then(data => {
+      return Promise.resolve(data.rows);
+    });
+  }
+
   createDatabase(dbname, template, encoding) {
     var sql = `CREATE DATABASE "${dbname}"`;
     if (encoding) sql += " ENCODING '" + encoding + "'";

app/top_menu.js

@@ -39,6 +39,14 @@ var template /*: Electron.MenuItemConstructorOptions[] */ = [
   {
     label: 'Database',
     submenu: [
+      {
+        label: 'Show Connected Clients',
+        click: () => {
+          (new ServerController).showConnectionList();
+        },
+        enabled: false
+      },
+      { type: 'separator' },
       {
         label: 'Create Database',
         click: () => {
@@ -339,11 +347,13 @@ var checkDbMenu = function () {
   }
 
   if (db && db != Connection.defaultDatabaseName) {
+    enableItem("Database", "Show Connected Clients");
     enableItem("Database", "Refresh Database");
     enableItem("Database", "Rename Database");
     enableItem("Database", "Export Database");
     enableItem("Database", "Drop Database");
   } else {
+    disableItem("Database", "Show Connected Clients");
     disableItem("Database", "Refresh Database");
     disableItem("Database", "Rename Database");
     disableItem("Database", "Export Database");

app/views/dialogs/all.js

@@ -19,4 +19,5 @@ module.exports = {
   RelatedRecords:   require('./related_records'),
   ShowSql:          require('./show_sql'),
   UserGrants:       require('./user_grants'),
+  ConnectionList:   require('./connection_list'),
 };

app/views/dialogs/connection_list.js

@@ -0,0 +1,27 @@
+class ConnectionList extends DialogBase {
+  /*::
+  server: string[]
+  */
+  constructor (server) {
+    super(null, {
+      title: "Connected Clients",
+      dialogClass: "connection-list",
+      server: server
+    });
+    this.showWindow();
+  }
+
+  async showWindow () {
+    var connections = await this.server.listConnections();
+    var nodes = App.renderView('dialogs/connection_list', {connections: connections});
+    this.content = this.renderWindow(this.title, nodes);
+    this.content.find('code').forEach(codeElement => {
+      window.hljs.highlightBlock(codeElement);
+    })
+  }
+}
+
+/*::
+declare var ConnectionList__: typeof ConnectionList
+*/
+module.exports = ConnectionList;

assets/styles/elements/_dialogs.scss

@@ -167,4 +167,35 @@
       margin-top: 15px;
     }
   }
+}
+
+.alertify-inner.connection-list {
+  width: 900px;
+  //max-width: 350px;
+  margin-bottom: 5px;
+  table {
+    td, th {
+      word-break: break-all;
+    }
+    code {
+      max-width: 700px;
+      margin: 1px 0;
+
+      @include dialog-code;
+
+      padding: 3px 5px;
+      overflow: auto;
+      max-height: 400px;
+      box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
+      text-align: left;
+      white-space: pre-wrap;
+      word-break: normal;
+    }
+    i.null {
+      font-style: normal;
+      color: #b8b8b8;
+      font-size: 12px;
+      opacity: 0.75;
+    }
+  }
 }

index.js

@@ -34,6 +34,7 @@ global.Model = require('./app/models/all');
 require('./app/controllers/import_controller');
 require('./app/controllers/export_controller');
 require('./app/controllers/updates_controller');
+require('./app/controllers/server_controller');
 
 require('./app/views/history_window');
 

public/style.css

@@ -1918,6 +1918,32 @@ small.help-icon {
     .related-records-dialog table ~ table {
       margin-top: 15px; }
 
+.alertify-inner.connection-list {
+  width: 900px;
+  margin-bottom: 5px; }
+  .alertify-inner.connection-list table td, .alertify-inner.connection-list table th {
+    word-break: break-all; }
+  .alertify-inner.connection-list table code {
+    max-width: 700px;
+    margin: 1px 0;
+    padding: 5px;
+    background: #f5f5f5;
+    display: block;
+    font-family: Consolas, "Liberation Mono", Menlo, Monaco, Lucida Console, Courier New, monospace, serif;
+    word-break: break-all;
+    padding: 3px 5px;
+    overflow: auto;
+    max-height: 400px;
+    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
+    text-align: left;
+    white-space: pre-wrap;
+    word-break: normal; }
+  .alertify-inner.connection-list table i.null {
+    font-style: normal;
+    color: #b8b8b8;
+    font-size: 12px;
+    opacity: 0.75; }
+
 /*
  *Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]> */
 .hljs {

views/dialogs/connection_list.jade

@@ -0,0 +1,32 @@
+.rescol-wrapper.with-borders
+  .rescol-header-wrapper
+  .rescol-content-wrapper
+    table
+      thead
+        tr
+          th PID
+          th Database
+          th User
+          th IP
+          th Application
+          th State
+          th Query
+      tbody
+        each client in connections
+          tr
+            td= client.pid
+            td
+              if client.datname
+                = client.datname
+              else
+                i.null NULL
+            td= client.usename
+            td= client.client_addr
+            td= client.state_change ? client.application_name : client.backend_type
+            td= client.state
+            td
+              if client.state == 'active'
+                code.result.pgsql= client.query
+
+p.buttons
+  button.cancel Close