Add status bar item to indicate progress (#56)

microsoft · Jun 28, 2019 · da3b10f · da3b10f
1 parent 5986bd8
commit da3b10f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -142,7 +142,8 @@
     "@types/semver": "5.5.0",
     "tslint": "5.16.0",
     "typescript": "3.3.3333",
-    "vscode": "1.1.33"
+    "vscode": "1.1.33",
+    "elegant-spinner": "2.0.0"
   },
   "dependencies": {
     "jmespath": "0.15.0",

diff --git a/src/extension.ts b/src/extension.ts
@@ -8,6 +8,7 @@ import { HoverProvider, Hover, SnippetString, StatusBarAlignment, StatusBarItem,
 import { AzService, CompletionKind, Arguments, Status } from './azService';
 import { parse, findNode } from './parser';
 import { exec } from './utils';
+import * as spinner from 'elegant-spinner';
 
 export function activate(context: ExtensionContext) {
     const azService = new AzService(azNotFound);
@@ -152,15 +153,43 @@ class RunLineInEditor {
     private queryEnabled = false;
     private query: string | undefined;
     private disposables: Disposable[] = [];
+    private commandRunningStatusBarItem: StatusBarItem;
+    private statusBarUpdateInterval!: NodeJS.Timer;
+    private statusBarSpinner = spinner();
+    private hideStatusBarItemTimeout! : NodeJS.Timeout;
+    private statusBarItemText : string = '';
 
     constructor(private status: StatusBarInfo) {
         this.disposables.push(commands.registerTextEditorCommand('ms-azurecli.toggleLiveQuery', editor => this.toggleQuery(editor)));
         this.disposables.push(commands.registerTextEditorCommand('ms-azurecli.runLineInEditor', editor => this.run(editor)));
         this.disposables.push(workspace.onDidCloseTextDocument(document => this.close(document)));
         this.disposables.push(workspace.onDidChangeTextDocument(event => this.change(event)));
+
+        this.commandRunningStatusBarItem = window.createStatusBarItem(StatusBarAlignment.Left);
+        this.disposables.push(this.commandRunningStatusBarItem);
     }
 
+    private runningCommandCount : number = 0;
     private run(source: TextEditor) {
+        this.runningCommandCount += 1;
+        const t0 = Date.now();
+        if (this.runningCommandCount == 1)
+        {
+            this.statusBarItemText = `Azure CLI: Waiting for response`;
+            this.statusBarUpdateInterval = setInterval(() => {
+                if (this.runningCommandCount == 1)
+                {
+                    this.commandRunningStatusBarItem.text = `${this.statusBarItemText} ${this.statusBarSpinner()}`;
+                }
+                else
+                {
+                    this.commandRunningStatusBarItem.text = `${this.statusBarItemText} [${this.runningCommandCount}] ${this.statusBarSpinner()}`;
+                }
+            }, 50);
+        }
+        this.commandRunningStatusBarItem.show();
+        clearTimeout(this.hideStatusBarItemTimeout);
+
         this.parsedResult = undefined;
         this.query = undefined; // TODO
         const cursor = source.selection.active;
@@ -174,10 +203,26 @@ class RunLineInEditor {
                         .then(() => this.parsedResult = JSON.parse(content))
                         .then(undefined, err => {})
                 )
+                .then(() => this.commandFinished(t0))
             )
             .then(undefined, console.error);
     }
 
+    private commandFinished(startTime: number)
+    {
+        this.runningCommandCount -= 1
+        this.statusBarItemText = 'Azure CLI: Executed in ' + (Date.now() - startTime) + ' milliseconds';
+        this.commandRunningStatusBarItem.text = this.statusBarItemText;
+
+        if (this.runningCommandCount == 0)
+        {
+            clearInterval(this.statusBarUpdateInterval);
+
+            // hide status bar item after 10 seconds to keep status bar uncluttered
+            this.hideStatusBarItemTimeout = setTimeout(() => this.commandRunningStatusBarItem.hide(), 10000);
+        }
+    }
+
     private toggleQuery(source: TextEditor) {
         this.queryEnabled = !this.queryEnabled;
         this.status.liveQuery = this.queryEnabled;