VSCODE: use cancellation token (#54)

* feat: use cancellation token

* feat: show loading progress

* docs: add open questions

* feat: close node connection when playground is canceled

* refactor: show information about cancelation instantly

* test: update tests

* test: better info messages testing

* refactor: return resolve

* docs: add comments to the code

* feat: check server alive

* feat: use node worker threads

* refactor: update function returning type

* refactor: move promise to the language server

* refactor: debug in worker

* refactor: change names and structure of returns

* refactor: do not close mongo client

* test: add test for canceling a playground

* test: try longer timeout

* test: remove rimeout

* test: try update async

* feat: configure LSP inspector

* docs: how to stream logs to LSP inspector

* refactor: update text of info messages

* test: add test when runAllPlaygroundBlocks is missing active connection

Author: alenakhineika

.vscode/settings.json

@@ -20,6 +20,6 @@
   // https://github.com/Microsoft/language-server-protocol-inspector
   "mongodbLanguageServer.trace.server": {
     "format": "json",
-    "verbosity": "info"
+    "verbosity": "verbose"
   }
 }

package-lock.json

@@ -241,6 +241,10 @@
       {
         "command": "mdb.refreshSchema",
         "title": "Refresh"
+      },
+      {
+        "command": "mdb.startStreamLanguageServerLogs",
+        "title": "LSP Inspector: Start Stream LSP Logs"
       }
     ],
     "menus": {
@@ -393,6 +397,37 @@
     "configuration": {
       "title": "MongoDB",
       "properties": {
+        "mongodbLanguageServer.maxNumberOfProblems": {
+          "scope": "resource",
+          "type": "number",
+          "default": 100,
+          "description": "Controls the maximum number of problems produced by the server."
+        },
+        "mongodbLanguageServer.trace.server": {
+          "scope": "window",
+          "type": "object",
+          "properties": {
+            "verbosity": {
+              "type": "string",
+              "enum": [
+                "off",
+                "messages",
+                "verbose"
+              ],
+              "default": "off",
+              "description": "Controls the verbosity of the trace."
+            },
+            "format": {
+              "type": "string",
+              "enum": [
+                "text",
+                "json"
+              ],
+              "default": "text",
+              "description": "Controls the output format of the trace."
+            }
+          }
+        },
         "mdb.shell": {
           "type": "string",
           "enum": [
@@ -477,7 +512,8 @@
     "ts-log": "^2.1.4",
     "uuid": "^7.0.0",
     "vscode-languageclient": "^6.1.3",
-    "vscode-languageserver": "^6.1.1"
+    "vscode-languageserver": "^6.1.1",
+    "ws": "^7.2.3"
   },
   "devDependencies": {
     "@types/chai": "^4.2.9",
@@ -490,6 +526,7 @@
     "@types/react": "^16.9.25",
     "@types/react-dom": "^16.9.5",
     "@types/vscode": "^1.41.0",
+    "@types/ws": "^7.2.4",
     "@typescript-eslint/eslint-plugin": "^2.19.2",
     "@typescript-eslint/parser": "^2.19.2",
     "autoprefixer": "^9.7.5",

package.json

@@ -4,8 +4,7 @@ import ConnectionController, { DataServiceEventTypes } from '../connectionContro
 import { LanguageServerController } from '../language';
 import TelemetryController, { TelemetryEventTypes } from '../telemetry/telemetryController';
 import ActiveConnectionCodeLensProvider from './activeConnectionCodeLensProvider';
-import formatOutput from '../utils/formatOutput';
-import { OutputChannel } from 'vscode';
+import { OutputChannel, ProgressLocation } from 'vscode';
 import playgroundTemplate from '../templates/playgroundTemplate';
 
 /**
@@ -62,6 +61,7 @@ export default class PlaygroundController {
         })
         .then((document) => {
           vscode.window.showTextDocument(document);
+          this._outputChannel.show(true);
           resolve(true);
         }, reject);
     });
@@ -111,17 +111,18 @@ export default class PlaygroundController {
       );
     }
 
-    // Run playground as a background process using the Language Server
-    const res = await this._languageServerController.executeAll(codeToEvaluate, activeConnectionString);
+    // Send a request to the language server to execute scripts from a playground
+    const result = await this._languageServerController.executeAll(codeToEvaluate, activeConnectionString);
 
-    if (res) {
+    if (result) {
+      // Send metrics to Segment
       this._telemetryController?.track(
         TelemetryEventTypes.PLAYGROUND_CODE_EXECUTED,
-        this.prepareTelemetry(res)
+        this.prepareTelemetry(result)
       );
     }
 
-    return Promise.resolve(formatOutput(res));
+    return Promise.resolve(result);
   }
 
   runAllPlaygroundBlocks(): Promise<boolean> {
@@ -131,7 +132,13 @@ export default class PlaygroundController {
         .getConfiguration('mdb')
         .get('confirmRunAll');
 
-      if (activeConnection && shouldConfirmRunAll === true) {
+      if (!activeConnection) {
+        vscode.window.showErrorMessage('Please connect to a database before running a playground.');
+
+        return resolve(false);
+      }
+
+      if (shouldConfirmRunAll === true) {
         const name = this._connectionController.getActiveConnectionName();
         const confirmRunAll = await vscode.window.showInformationMessage(
           `Are you sure you want to run this playground against ${name}? This confirmation can be disabled in the extension settings.`,
@@ -140,26 +147,45 @@ export default class PlaygroundController {
         );
 
         if (confirmRunAll !== 'Yes') {
-          return Promise.resolve(false);
+          return resolve(false);
         }
       }
 
       const activeEditor = vscode.window.activeTextEditor;
       const codeToEvaluate = activeEditor?.document.getText() || '';
       let result;
 
-      try {
+      // Show a running progress in the notification area with support for cancellation
+      await vscode.window.withProgress({
+        location: ProgressLocation.Notification,
+        title: 'Running MongoDB playground...',
+        cancellable: true
+      }, async (progress, token) => {
+        token.onCancellationRequested(() => {
+          // If a user clicked the cancel button terminate all playground scripts
+          this._languageServerController.cancelAll();
+          this._outputChannel.clear();
+          this._outputChannel.show(true);
+
+          return resolve(false);
+        });
+
+        // Run all playground scripts
         result = await this.evaluate(codeToEvaluate);
-      } catch (error) {
-        vscode.window.showErrorMessage(`Unable to run playground: ${error.message}`);
+      });
+
+      if (!result) {
+        this._outputChannel.clear();
+        this._outputChannel.show(true);
+
         return resolve(false);
       }
 
       this._outputChannel.clear();
       this._outputChannel.appendLine(result);
       this._outputChannel.show(true);
 
-      resolve(true);
+      return resolve(true);
     });
   }
 

src/editors/playgroundController.ts

@@ -28,20 +28,21 @@ We can also extend the mongodb language server and client with custom methods to
 
 ### Debugging
 
-#### Output Channel
+#### Client
 
-`MongoDB Language Server`
+Debugging the client code is as easy as debugging a normal extension. Set a breakpoint in the client code and debug the extension by pressing `F5`. Use `console.log()` for printing debug information in the Debug Console of the extension.
 
-From server side: `connection.console.log(<string>)`
+#### Server
 
-![MongoDB Language Server output channel](https://user-images.githubusercontent.com/23074/76441349-a489e980-6395-11ea-8247-50cfe9b3ff61.png)
+Since the server is started by the `LanguageClient` running separately, we need to attach a debugger to the running server. To do so, switch to the Run view and select the launch configuration `Extension + Server Inspector` and press `F5`. This will run both the extension and the Server Inspector.
 
-#### Log Streaming + LSP Inspector
+Use `connection.console.log()` for printing debug information in the `MongoDB Language Server` Output Channel of the server.
 
-https://github.com/microsoft/vscode-extension-samples/tree/master/lsp-log-streaming-sample
-https://microsoft.github.io/language-server-protocol/inspector/
+![MongoDB Language Server output channel](https://user-images.githubusercontent.com/23074/76441349-a489e980-6395-11ea-8247-50cfe9b3ff61.png)
+
+### Logging Support
 
-In `.vscode/settings.json`
+In `.vscode/settings.json` specify a `mongodbLanguageServer.trace.server` setting that instructs the Client to log communications between Language Client/Server to a channel of the Language Client's name.
 
 ```json
 "mongodbLanguageServer.trace.server": {
@@ -50,18 +51,42 @@ In `.vscode/settings.json`
 },
 ```
 
+You can also configure logging from VSCode setting interface.
+
+![MongoDB Language Server log settings](./lsp-trace-server.png)
+
+The logs will be printed in the `MongoDB Language Server` Output Channel.
+
+These logs are useful for developing and testing the Language Server, but they can be lengthy and hard to read. To visualize Cleint/Server logs use the [Language Server Protocol Inspector](https://github.com/Microsoft/language-server-protocol-inspector).
+
+#### Strem Logs To LSP Inspector
+
+- Install the [Language Server Protocol Inspector](https://marketplace.visualstudio.com/items?itemName=octref.lsp-inspector-webview) webview extension.
+- Run the MongoDB extension.
+- Activate the extension using any activation command.
+- Open a playground.
+- Check `mongodbLanguageServer.trace.server` settings.
+- Run command "LSP Inspector: Start LSP Inspector" to open the LSP inspector webview.
+- Run command "LSP Inspector: Start Stream LSP Logs" to start streaming logs to the LSP inspector port specified by the `languageServerExample.port` setting (The default value is 7000).
+
+![MongoDB Language Server log settings](./lsp-stream-logs.png)
+
+https://github.com/microsoft/vscode-extension-samples/tree/master/lsp-log-streaming-sample
+https://github.com/microsoft/vscode-extension-samples/tree/master/lsp-sample
+
+
 #### LSP Notifications
 
 From the server:
 
 ```javascript
-connection.sendNotification('mongodbNotification', `Hi, Friend.`);
+connection.sendNotification('showInformationMessage', `Hi, Friend.`);
 ```
 
 From the client:
 
 ```javascript
-client.onNotification('mongodbNotification', (messsage) => {
+client.onNotification('showInformationMessage', (messsage) => {
   vscode.window.showInformationMessage(messsage);
 });
 ```