feat: device summary + github issue creator

Author: jakobrosenberg

package.json

@@ -358,6 +358,11 @@
       }
     ],
     "commands": [
+      {
+        "command": "pymakr.debug.showDeviceSummary",
+        "title": "Show device summary",
+        "category": "PyMakr"
+      },
       {
         "command": "pymakr.showDebugMenu",
         "title": "Shows debugging menu",
@@ -598,6 +603,10 @@
         "icon": "$(ellipsis)",
         "label": "device"
       },
+      {
+        "id": "pymakr.deviceMenuDebug",
+        "label": "Debug"
+      },
       {
         "id": "pymakr.projectMenu",
         "icon": "$(ellipsis)",
@@ -774,10 +783,18 @@
           "group": "4-config"
         },
         {
-          "command": "pymakr.showTerminalHistory",
+          "submenu": "pymakr.deviceMenuDebug",
           "group": "5-debug"
         }
       ],
+      "pymakr.deviceMenuDebug": [
+        {
+          "command": "pymakr.debug.showDeviceSummary"
+        },
+        {
+          "command": "pymakr.showTerminalHistory"
+        }
+      ],
       "pymakr.editorContextMenu": [
         {
           "command": "pymakr.runEditor",

src/commands/index.js

@@ -38,9 +38,14 @@ class Commands {
   }
 
   commands = {
-    // debugPrintAdapterQueue: () => {
-    //   this.pymakr.devicesStore.get().forEach((device) => console.log(device.name, device.adapter.__proxyMeta));
-    // },
+    /**
+     * @param {{device: Device}} param0
+     */
+    "debug.showDeviceSummary": async ({ device }) => {
+      let uri = vscode.Uri.parse("pymakrDocument:" + "Pymakr: device summary - " + device.raw.path);
+      this.pymakr.textDocumentProvider.onDidChangeEmitter.fire(uri);
+      vscode.commands.executeCommand("markdown.showPreview", uri);
+    },
     showDebugMenu: async () => {
       const options = {
         "log adapter queue": "log adapter queue",

src/providers/TextDocumentProvider.js

@@ -1,7 +1,15 @@
 const { SerialPort } = require("serialport");
 const vscode = require("vscode");
+const { timestamp } = require("../utils/createLogger");
+const { arraysToMarkdownTable, adapterHistoryTable } = require("../utils/formatters");
 const { serializeKeyValuePairs } = require("../utils/misc");
 
+/**
+ * @typedef {Object} subProvider
+ * @prop {string|RegExp} match
+ * @prop {(...matches:string[]) => Promise<string>|string} body
+ */
+
 /**
  * @implements {vscode.TextDocumentContentProvider}
  */
@@ -14,19 +22,69 @@ class TextDocumentProvider {
   }
 
   provideTextDocumentContent(uri) {
-    const doc = this.paths[uri.path];
-    if(typeof doc === 'undefined') throw new Error('could not find pymakr document: ' + uri.toString())
-    return doc()
+    const path = uri.path || uri;
+    for (const subProvider of this.subProviders) {
+      const matches = path.match(subProvider.match);
+      if (matches) return subProvider.body(...matches);
+    }
+
+    throw new Error("could not find pymakr document: " + uri.toString());
   }
 
-  paths = {
-    'Pymakr: available devices': async () => {
-      const devices = await SerialPort.list();
-      const devicesStr = devices.map((e) => serializeKeyValuePairs(e)).join("\r\n\r\n");
+  onDidChangeEmitter = new vscode.EventEmitter();
+  onDidChange = this.onDidChangeEmitter.event;
+
+  /**
+   * @type {subProvider[]}
+   */
+  subProviders = [
+    {
+      match: "available devices",
+      body: async () => {
+        const devices = await SerialPort.list();
+        const devicesStr = devices.map((e) => serializeKeyValuePairs(e)).join("\r\n\r\n");
+        return devicesStr;
+      },
+    },
+    {
+      match: /device summary - (.+)/,
+      body: (_all, path) => {
+        const GithubMaxLengthUri = 8170; //8182 to be exact
+        const device = this.pymakr.devicesStore.get().find((device) => device.raw.path === path);
+        const config = { ...device.config, password: "***", username: "***" };
+        const configTable = arraysToMarkdownTable([["Config", ""], ...Object.entries(config || {})]);
+        const deviceTable = arraysToMarkdownTable([["Device", ""], ...Object.entries(device.raw || {})]);
+        const systemTable = arraysToMarkdownTable([["System", ""], ...Object.entries(device.info || {})]);
+
+        const historyTable = arraysToMarkdownTable(adapterHistoryTable(device));
+        const body = [
+          configTable,
+          deviceTable,
+          systemTable,
+          `## Device History at ${timestamp(new Date())}`,
+          historyTable,
+        ].join("\r\n\r\n");
+
+        const intro = encodeURI(
+          "What I did: ***\n\nWhat I expected to happen: ***\n\nWhat actually happened: ***\n\nAdditional info: ***\n\n<!--Device info below. Please check for passwords or sensitive info.-->\n\n"
+        );
+        const truncateMsg = encodeURIComponent("\n\n\n#### History was truncated");
+        let url = `https://github.com/pycom/pymakr-vsc/issues/new?body=${intro + encodeURIComponent(body)}`;
+        if (url.length > GithubMaxLengthUri) url = url.slice(0, GithubMaxLengthUri - truncateMsg.length) + truncateMsg;
+
+        const createIssueButton = [
+          "# Create issue on Github",
+          `### !WARNING ABOUT SENSITIVE DATA!`,
+          `**Your device history may contain credentials or other sensitive data.**`,
+          `After clicking the link below, please review the data before submitting it.`,
+          `Pycom is not liable for credentials or other sensitive data posted to Github!`,
+          `### [I understand - Create an issue on Github ](${url})`,
+        ].join("\r\n\r\n");
 
-      return devicesStr;
+        return [body, "# <br />", createIssueButton].join("\r\n\r\n");
+      },
     },
-  };
+  ];
 }
 
 module.exports = { TextDocumentProvider };

src/utils/createLogger.js

@@ -82,4 +82,4 @@ const createLogger = (name) => {
   return log;
 };
 
-module.exports = { createLogger };
+module.exports = { createLogger, timestamp };

src/utils/formatters.js

@@ -0,0 +1,96 @@
+/**
+ * @typedef {Object} TableOptions
+ * @prop {(value: (string | number | boolean)) => (string | number | boolean)} tableWrap
+ * @prop {(value: (string | number | boolean), row) => (string | number | boolean)} rowWrap
+ * @prop {(value: (string | number | boolean), row, col) => (string | number | boolean)} colWrap
+ * @prop {string} colDelim
+ * @prop {string} rowDelim
+ */
+
+const { timestamp } = require("./createLogger");
+
+const sanitize = (str) =>
+  (typeof str === "string" ? str : JSON.stringify(str, null, 2))
+    .replace(/\|/gm, "|")
+    .replace(/\r?\n/gm, "<br />")
+    .replace(/"username": ".+?"/, '"username": "&#42;&#42;&#42;"')
+    .replace(/"password": ".+?"/, '"password": "&#42;&#42;&#42;"');
+const sanitizeTableValues = (table) => table.map((columns) => columns.map(sanitize));
+
+const arraysToHTMLTable = (arrays, hasHeader) =>
+  arraysToTable(arrays, {
+    tableWrap: (value) => `<table>\n${value}\n</table>`,
+    rowWrap: (value, row) => (hasHeader && !row ? `<th>${value}</th>` : `<tr>${value}</tr>`),
+    colWrap: (value, row, col) => `<td>${value}</td>`,
+    colDelim: " ",
+    rowDelim: "\n",
+  });
+
+/** @param {(string | number | boolean)[][]} rows */
+const arraysToMarkdownTable = ([...rows]) => {
+  rows.splice(1, 0, Array(rows[0].length).fill("-"));
+
+  return arraysToTable(rows, {
+    tableWrap: (value) => value,
+    rowWrap: (value, row) => `|${value}|`,
+    colWrap: (value, row, col) => value,
+    colDelim: "|",
+    rowDelim: "\n",
+  });
+};
+
+/** @param {(string | number | boolean)[][]} rows */
+const arraysToTerminalTable = (rows) => {
+  // determine max length of each column
+  const colLenghts = Array(rows[0].length).fill(0);
+  rows.forEach((row) =>
+    row.forEach((col, index) => (colLenghts[index] = Math.max(col.toString().length, colLenghts[index])))
+  );
+
+  return arraysToTable(rows, {
+    tableWrap: (value) => value,
+    rowWrap: (value, row) => value,
+    colWrap: (value, row, col) => value.toString().padEnd(colLenghts[col]),
+    colDelim: "|",
+    rowDelim: "\n",
+  });
+};
+
+/**
+ *
+ * @param {(string | number | boolean)[][]} arrays
+ * @param {TableOptions} options
+ */
+const arraysToTable = (arrays, options) => {
+  arrays = sanitizeTableValues(arrays);
+  const { tableWrap, rowWrap, colWrap, rowDelim, colDelim } = options;
+  const formattedColumns = arrays.map((array, row) =>
+    array.map((value, column) => colWrap(value, row, column)).join(colDelim)
+  );
+  const formattedRows = formattedColumns.map((columnStr, row) => rowWrap(columnStr, row)).join(rowDelim);
+
+  return tableWrap(formattedRows);
+};
+
+const unBuffer = (str) =>
+  str instanceof Buffer ? str.toString() : typeof str === "string" ? str : JSON.stringify(str, null, 2);
+
+/**
+ * @param {Device} device
+ */
+const adapterHistoryTable = (device) => {
+  const fields = ["function", "args", "time", "result", "queued at", "finished at", "failed"];
+  console.log("proxymeta", device.adapter.__proxyMeta);
+  const rows = device.adapter.__proxyMeta.history.map((entry) => [
+    entry.field.toString(),
+    entry.args.length ? `<details> <pre>${unBuffer(entry.args)}</pre> </details>` : " ",
+    entry.runDuration,
+    `<details> <pre>${entry.error || unBuffer(entry.result)}</pre> </details>`,
+    entry.queuedAt && timestamp(entry.queuedAt),
+    entry.finishedAt && timestamp(entry.finishedAt),
+    !!entry.error,
+  ]);
+  return [fields, ...rows.reverse()];
+};
+
+module.exports = { arraysToHTMLTable, arraysToMarkdownTable, arraysToTerminalTable, adapterHistoryTable };

src/utils/specs/formatters.test.js

@@ -0,0 +1,52 @@
+const { arraysToHTMLTable, arraysToMarkdownTable, arraysToTerminalTable } = require("../formatters");
+
+test("can create tables from arrays", () => {
+  const data = [
+    ["header1", "header2", "header3"],
+    ["cola1", "cola2", "cola3"],
+    ["colb1", "colb2", "colb3"],
+  ];
+
+  test("can create HTML table", () => {
+    const output = arraysToHTMLTable(data);
+    assert.equal(
+      output,
+      `<table>
+<tr><td>header1</td> <td>header2</td> <td>header3</td></tr>
+<tr><td>cola1</td> <td>cola2</td> <td>cola3</td></tr>
+<tr><td>colb1</td> <td>colb2</td> <td>colb3</td></tr>
+</table>`
+    );
+  });
+  test("can create HTML table with header", () => {
+    const output = arraysToHTMLTable(data, true);
+    assert.equal(
+      output,
+      `<table>
+<th><td>header1</td> <td>header2</td> <td>header3</td></th>
+<tr><td>cola1</td> <td>cola2</td> <td>cola3</td></tr>
+<tr><td>colb1</td> <td>colb2</td> <td>colb3</td></tr>
+</table>`
+    );
+  });
+  test("can create markdown table", () => {
+    const output = arraysToMarkdownTable(data);
+    assert.equal(
+      output,
+      `|header1|header2|header3|
+|-|-|-|
+|cola1|cola2|cola3|
+|colb1|colb2|colb3|`
+    );
+  });
+  test("can create terminal table", () => {
+    const output = arraysToTerminalTable(data);
+    console.log(output);
+    assert.equal(
+      output,
+      `header1|header2|header3
+cola1  |cola2  |cola3  
+colb1  |colb2  |colb3  `
+    );
+  });
+});