Show query result as HTML table (#30)

* Show query result as HTML table * Show query result as HTML table * Extract one method for similar code
formulahendry · Mar 12, 2018 · 30ba54b · 30ba54b
1 parent a1103c7
commit 30ba54b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 3 deletions.
diff --git a/src/common/utility.ts b/src/common/utility.ts
@@ -62,19 +62,21 @@ export class Utility {
         connection.query(sql, (err, rows) => {
             if (Array.isArray(rows)) {
                 if (rows.some(((row) => Array.isArray(row)))) {
-                    rows.forEach((row) => {
+                    rows.forEach((row, index) => {
                         if (Array.isArray(row)) {
-                            OutputChannel.appendLine(asciitable(row));
+                             Utility.showQueryResult(row, "Results " + (index + 1));
                         } else {
                             OutputChannel.appendLine(JSON.stringify(row));
                         }
                     });
                 } else {
-                    OutputChannel.appendLine(asciitable(rows));
+                    Utility.showQueryResult(rows, "Results");
                 }
+
             } else {
                 OutputChannel.appendLine(JSON.stringify(rows));
             }
+
             if (err) {
                 OutputChannel.appendLine(err);
                 AppInsightsClient.sendEvent("runQuery.end", { Result: "Fail", ErrorMessage: err });
@@ -101,6 +103,22 @@ export class Utility {
         return mysql.createConnection(newConnectionOptions);
     }
 
+    private static getPreviewUri(data) {
+        const uri = vscode.Uri.parse("sqlresult://mysql/data");
+
+        return uri.with({ query: data });
+    }
+
+    private static showQueryResult(data, title: string) {
+        vscode.commands.executeCommand(
+            "vscode.previewHtml",
+            Utility.getPreviewUri(JSON.stringify(data)),
+            vscode.ViewColumn.Two,
+            title).then(() => { }, (e) => {
+                OutputChannel.appendLine(e);
+            });
+    }
+
     private static async hasActiveConnection(): Promise<boolean> {
         let count = 5;
         while (!Global.activeConnection && count > 0) {

diff --git a/src/extension.ts b/src/extension.ts
@@ -7,10 +7,14 @@ import { DatabaseNode } from "./model/databaseNode";
 import { INode } from "./model/INode";
 import { TableNode } from "./model/tableNode";
 import { MySQLTreeDataProvider } from "./mysqlTreeDataProvider";
+import { SqlResultDocumentContentProvider } from "./sqlResultDocumentContentProvider";
 
 export function activate(context: vscode.ExtensionContext) {
     AppInsightsClient.sendEvent("loadExtension");
 
+    const provider = new SqlResultDocumentContentProvider(context);
+    context.subscriptions.push(vscode.workspace.registerTextDocumentContentProvider("sqlresult", provider));
+
     const mysqlTreeDataProvider = new MySQLTreeDataProvider(context);
     context.subscriptions.push(vscode.window.registerTreeDataProvider("mysql", mysqlTreeDataProvider));
 

diff --git a/src/sqlResultDocumentContentProvider.ts b/src/sqlResultDocumentContentProvider.ts
@@ -0,0 +1,62 @@
+import { ExtensionContext, TextDocumentContentProvider, Uri } from "vscode";
+
+export class SqlResultDocumentContentProvider implements TextDocumentContentProvider {
+
+    private _context: ExtensionContext;
+
+    constructor(context: ExtensionContext) {
+        this._context = context;
+    }
+
+    public provideTextDocumentContent(uri: Uri): Thenable<string> {
+
+        const self = this;
+        return new Promise((resolve, reject) => {
+            const head = [].concat(
+                "<!DOCTYPE html>",
+                "<html>",
+                "<head>",
+                '<meta http-equiv="Content-type" content="text/html;charset=UTF-8">',
+                "<style>table{border-collapse:collapse; }table,td,th{border:1px dotted #ccc; padding:5px;}th {background:#444} </style>",
+                "</head>",
+                "<body>",
+            ).join("\n");
+
+            const body = self._render(JSON.parse(uri.query));
+
+            const tail = [
+                "</body>",
+                "</html>",
+            ].join("\n");
+
+            resolve(head + body + tail);
+        });
+    }
+
+    private _render(rows) {
+        if (rows.length === 0) {
+            return "No data";
+        }
+
+        let head = "";
+        for (const field in rows[0]) {
+            if (rows[0].hasOwnProperty(field)) {
+                head += "<th>" + field + "</th>";
+            }
+        }
+        let body = "<table><tr>" + head + "</tr>";
+        rows.forEach((row) => {
+            body += "<tr>";
+            for (const field in row) {
+                if (row.hasOwnProperty(field)) {
+                    body += "<td>" + row[field] + "</td>";
+                }
+            }
+
+            body += "</tr>";
+        });
+
+        return body + "</table>";
+    }
+
+}