(GH-494) Add Progress Bar for long lived operations

glennsarti · glennsarti · commit 053a0cd32467 · 2019-03-24T20:45:37.000+08:00
Previously during long running operations for the Node Graph and Puppet Resource
features, the user is left wondering "What's going on?" as there's no visual
indicator.  This commit:

* Adds a non-deterministic message box (by default) when long lived operations
  start and then removes the message box once completed.  This uses the native
  VSCode API 'vscode.window.withProgress'

* Adds two new settings to change the progress display behaviour;
  'puppet.notification.nodeGraph' and 'puppet.notification.puppetResource'.
  These settings can have the values of messagebox, statusbar or none, which
  changes the notification type used for each type of operation.

* Updates the README with the new animated gif files and notes the new settings.
diff --git a/README.md b/README.md
@@ -197,6 +197,8 @@ The information returned will be pasted into the open editor window where your c
 
 ![puppet_resource](https://raw.githubusercontent.com/lingua-pupuli/puppet-vscode/master/docs/assets/puppet_resource.gif)
 
+You can change the notification message from the default message box, to a status bar notification or none at all, using the `puppet.notification.puppetResource` configuration setting.
+
 #### Puppet Node Graph preview
 
 You can preview the [node graph](https://puppet.com/blog/visualize-your-infrastructure-models) of a manifest while you edit your Puppet Code.
@@ -209,6 +211,8 @@ The node graph will appear next to the manifest
 
 ![puppet_node_graph](https://raw.githubusercontent.com/lingua-pupuli/puppet-vscode/master/docs/assets/puppet_node_graph.gif)
 
+You can change the notification message from the default message box, to a status bar notification or none at all, using the `puppet.notification.nodeGraph` configuration setting.
+
 ### Puppet Development Kit Support
 
 You can use the [Puppet Development Kit](https://puppet.com/blog/develop-modules-faster-new-puppet-development-kit) inside VS Code from the command palette. To use any of the above commands, open the command palette and start typing a command. You can also use the right-click context menu or the editor menu to reach these commands.
diff --git a/docs/assets/puppet_node_graph.gif b/docs/assets/puppet_node_graph.gif
diff --git a/docs/assets/puppet_resource.gif b/docs/assets/puppet_resource.gif
diff --git a/package.json b/package.json
@@ -398,6 +398,26 @@
             "agent"
           ]
         },
+        "puppet.notification.nodeGraph": {
+          "type": "string",
+          "default": "messagebox",
+          "description": "The type of notification used when a node graph is being generated. Default value of messagebox",
+          "enum": [
+            "messagebox",
+            "statusbar",
+            "none"
+          ]
+        },
+        "puppet.notification.puppetResource": {
+          "type": "string",
+          "default": "messagebox",
+          "description": "The type of notification used when a running Puppet Resouce. Default value of messagebox",
+          "enum": [
+            "messagebox",
+            "statusbar",
+            "none"
+          ]
+        },
         "puppet.editorService.modulePath": {
           "description": "**DEPRECATED** Please use puppet.editorService.puppet.modulePath instead"
         },
diff --git a/src/feature/NodeGraphFeature.ts b/src/feature/NodeGraphFeature.ts
@@ -6,10 +6,11 @@ import * as path from 'path';
 import { IFeature } from "../feature";
 import { ILogger } from "../logging";
 import { ConnectionStatus } from '../interfaces';
-import { CompileNodeGraphRequest } from '../messages';
+import { CompileNodeGraphRequest, CompileNodeGraphResponse } from '../messages';
 import { reporter } from '../telemetry/telemetry';
 import * as viz from 'viz.js';
 import { ConnectionHandler } from "../handler";
+import { ISettings, SettingsFromWorkspace } from '../settings';
 
 const PuppetNodeGraphToTheSideCommandId: string = 'extension.puppetShowNodeGraphToSide';
 
@@ -47,6 +48,7 @@ class NodeGraphWebViewProvider implements vscode.Disposable {
       this.parentFeature.onProviderWebPanelDisposed(this);
     });
 
+    this.webPanel.webview.html = "Generating...";
     this.updateAsync();
   }
 
@@ -67,40 +69,74 @@ class NodeGraphWebViewProvider implements vscode.Disposable {
     const requestData = {
       external: this.docUri.toString()
     };
-    return this.connectionHandler.languageClient
+
+    // Calculate where the progress message should go, if at all.
+    const currentSettings:ISettings = SettingsFromWorkspace();
+    var notificationType = vscode.ProgressLocation.Notification; 
+    if (currentSettings.notification !== undefined && currentSettings.notification.nodeGraph !== undefined) {
+      switch (currentSettings.notification.nodeGraph.toLowerCase()) {
+        case "messagebox": notificationType = vscode.ProgressLocation.Notification; break;
+        case "statusbar": notificationType = vscode.ProgressLocation.Window; break;
+        case "none": notificationType = undefined; break;
+        default: break; // Default is already set
+      }
+    }
+
+    if (notificationType !== undefined) {
+      return vscode.window.withProgress({
+        location: notificationType,
+        title: "Puppet",
+        cancellable: false
+      }, (progress) => {
+        progress.report({message: "Generating Node Graph"});
+        return this.connectionHandler.languageClient
+          .sendRequest(CompileNodeGraphRequest.type, requestData)
+          .then(
+            (compileResult) => {
+              return this.responseToHTMLString(compileResult);
+        });
+      });
+    }
+    else {
+      return this.connectionHandler.languageClient
       .sendRequest(CompileNodeGraphRequest.type, requestData)
       .then(
         (compileResult) => {
+          return this.responseToHTMLString(compileResult);
+      });
+    }
+  }
 
-        var svgContent = '';
-        if (compileResult.dotContent !== null) {
-          var styling = `
-          bgcolor = "transparent"
-          color = "white"
-          rankdir = "TB"
-          node [ shape="box" penwidth="2" color="#e0e0e0" style="rounded,filled" fontname="Courier New" fillcolor=black, fontcolor="white"]
-          edge [ style="bold" color="#f0f0f0" penwith="2" ]
-
-          label = ""`;
-
-          var graphContent = compileResult.dotContent;
-          if (graphContent === undefined) { graphContent = ''; }
-          // vis.jz sees backslashes as escape characters, however they are not in the DOT language.  Instead
-          // we should escape any backslash coming from a valid DOT file in preparation to be rendered
-          graphContent = graphContent.replace(/\\/g,"\\\\");
-          graphContent = graphContent.replace(`label = "editorservices"`,styling);
-
-          svgContent = viz(graphContent,"svg");
-        }
+  private responseToHTMLString(compileResult: CompileNodeGraphResponse): string {
+    var svgContent = '';
+    if (compileResult.dotContent !== null) {
+      var styling = `
+      bgcolor = "transparent"
+      color = "white"
+      rankdir = "TB"
+      node [ shape="box" penwidth="2" color="#e0e0e0" style="rounded,filled" fontname="Courier New" fillcolor=black, fontcolor="white"]
+      edge [ style="bold" color="#f0f0f0" penwith="2" ]
+
+      label = ""`;
+
+      var graphContent = compileResult.dotContent;
+      if (graphContent === undefined) { graphContent = ''; }
+      // vis.jz sees backslashes as escape characters, however they are not in the DOT language.  Instead
+      // we should escape any backslash coming from a valid DOT file in preparation to be rendered
+      graphContent = graphContent.replace(/\\/g,"\\\\");
+      graphContent = graphContent.replace(`label = "editorservices"`,styling);
+
+      svgContent = viz(graphContent,"svg");
+    }
 
-        var errorContent = `<div style='font-size: 1.5em'>${compileResult.error}</div>`;
-        if ((compileResult.error === undefined) || (compileResult.error === null)) { errorContent = ''; }
+    var errorContent = `<div style='font-size: 1.5em'>${compileResult.error}</div>`;
+    if ((compileResult.error === undefined) || (compileResult.error === null)) { errorContent = ''; }
 
-        if (reporter) {
-          reporter.sendTelemetryEvent(PuppetNodeGraphToTheSideCommandId);
-        }
+    if (reporter) {
+      reporter.sendTelemetryEvent(PuppetNodeGraphToTheSideCommandId);
+    }
 
-        const html: string = `<!DOCTYPE html>
+    const html: string = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -130,8 +166,7 @@ ${svgContent}
 </div>
 </body></html>`;
 
-        return html;
-    });
+    return html;
   }
 
   public dispose(): any {
diff --git a/src/feature/PuppetResourceFeature.ts b/src/feature/PuppetResourceFeature.ts
@@ -3,10 +3,11 @@
 import * as vscode from 'vscode';
 import { IFeature } from '../feature';
 import { ILogger } from '../logging';
-import { PuppetCommandStrings, PuppetResourceRequestParams, PuppetResourceRequest } from '../messages';
+import { PuppetCommandStrings, PuppetResourceRequestParams, PuppetResourceRequest, PuppetResourceResponse } from '../messages';
 import { reporter } from '../telemetry/telemetry';
 import { ConnectionStatus } from '../interfaces';
 import { ConnectionHandler } from '../handler';
+import { ISettings, SettingsFromWorkspace } from '../settings';
 
 export class PuppetResourceFeature implements IFeature {
   private _connectionHandler: ConnectionHandler;
@@ -42,36 +43,69 @@ export class PuppetResourceFeature implements IFeature {
         let requestParams = new RequestParams();
         requestParams.typename = moduleName;
 
-        thisCommand._connectionHandler.languageClient
-          .sendRequest(PuppetResourceRequest.type, requestParams)
-          .then(resourceResult => {
-            if (resourceResult.error !== undefined && resourceResult.error.length > 0) {
-              this.logger.error(resourceResult.error);
-              return;
-            }
-            if (resourceResult.data === undefined || resourceResult.data.length === 0) {
-              return;
-            }
-
-            if (!editor) {
-              return;
-            }
-
-            var newPosition = new vscode.Position(0, 0);
-            if (editor.selection.isEmpty) {
-              const position = editor.selection.active;
-              newPosition = position.with(position.line, 0);
-            }
+        // Calculate where the progress message should go, if at all.
+        const currentSettings:ISettings = SettingsFromWorkspace();
+        var notificationType = vscode.ProgressLocation.Notification; 
+        if (currentSettings.notification !== undefined && currentSettings.notification.puppetResource !== undefined) {
+          switch (currentSettings.notification.puppetResource.toLowerCase()) {
+            case "messagebox": notificationType = vscode.ProgressLocation.Notification; break;
+            case "statusbar": notificationType = vscode.ProgressLocation.Window; break;
+            case "none": notificationType = undefined; break;
+            default: break; // Default is already set
+          }
+        }
 
-            this.editCurrentDocument(doc.uri, resourceResult.data, newPosition);
-            if (reporter) {
-              reporter.sendTelemetryEvent(PuppetCommandStrings.PuppetResourceCommandId);
-            }
+        if (notificationType !== undefined) {
+          vscode.window.withProgress({
+            location: notificationType,
+            title: "Puppet",
+            cancellable: false
+          }, (progress) => {
+            progress.report({message: `Gathering Puppet ${moduleName} Resources`});
+            return thisCommand._connectionHandler.languageClient
+              .sendRequest(PuppetResourceRequest.type, requestParams)
+              .then(resourceResult => {
+                this.respsonseToVSCodeEdit(resourceResult, editor, doc);
+              }
+            );
           });
+        } else {
+          thisCommand._connectionHandler.languageClient
+            .sendRequest(PuppetResourceRequest.type, requestParams)
+            .then(resourceResult => {
+              this.respsonseToVSCodeEdit(resourceResult, editor, doc);
+            }
+          );
+        }
       }
     });
   }
 
+  private respsonseToVSCodeEdit(resourceResult: PuppetResourceResponse, editor: vscode.TextEditor, doc: vscode.TextDocument) {
+    if (resourceResult.error !== undefined && resourceResult.error.length > 0) {
+      this.logger.error(resourceResult.error);
+      return;
+    }
+    if (resourceResult.data === undefined || resourceResult.data.length === 0) {
+      return;
+    }
+
+    if (!editor) {
+      return;
+    }
+
+    var newPosition = new vscode.Position(0, 0);
+    if (editor.selection.isEmpty) {
+      const position = editor.selection.active;
+      newPosition = position.with(position.line, 0);
+    }
+
+    this.editCurrentDocument(doc.uri, resourceResult.data, newPosition);
+    if (reporter) {
+      reporter.sendTelemetryEvent(PuppetCommandStrings.PuppetResourceCommandId);
+    }
+  }
+
   private pickPuppetResource(): Thenable<string | undefined> {
     let options: vscode.QuickPickOptions = {
       placeHolder: 'Enter a Puppet resource to interrogate',
diff --git a/src/settings.ts b/src/settings.ts
@@ -61,12 +61,18 @@ export interface IPDKSettings {
   // Future Use
 }
 
+export interface INotificationSettings {
+  nodeGraph?: string;
+  puppetResource?: string;
+}
+
 export interface ISettings {
   editorService?: IEditorServiceSettings;
   format?: IFormatSettings;
   installDirectory?: string;
   installType?: PuppetInstallType;
   lint?: ILintSettings;
+  notification?: INotificationSettings;
   pdk?: IPDKSettings;
 }
 
@@ -160,6 +166,10 @@ export function DefaultWorkspaceSettings(): ISettings {
     lint: {
       enable: true,
     },
+    notification: {
+      nodeGraph: "messagebox",
+      puppetResource: "messagebox"
+    },
     pdk: {
     }
   };
@@ -176,6 +186,7 @@ export function SettingsFromWorkspace(): ISettings {
     installDirectory: workspaceConfig.get<string>("installDirectory",  defaults.installDirectory),
     installType: workspaceConfig.get<PuppetInstallType>("installType",  defaults.installType),
     lint: workspaceConfig.get<ILintSettings>("lint",  defaults.lint),
+    notification: workspaceConfig.get<INotificationSettings>("notification", defaults.notification),
     pdk: workspaceConfig.get<IPDKSettings>("pdk", defaults.pdk)
   };
 
