(#78) Network Viewer - Add console panel for logs

ChainMovers · Oct 25, 2023 · beffdfd · beffdfd
1 parent b160d87
commit beffdfd
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 22 deletions.
diff --git a/typescript/vscode-extension/package.json b/typescript/vscode-extension/package.json
@@ -14,28 +14,38 @@
   "main": "./out/extension.js",
   "contributes": {
     "commands": [
-      {
-        "command": "suibase.refresh",
-        "title": "refresh",
-        "icon": "$(refresh)"
-      },
       {
         "command": "suibase.settings",
         "title": "settings",
         "icon": "$(settings-view-bar-icon)"
+      },
+      {
+        "command": "suibase.console",
+        "title": "console",
+        "icon": "$(debug-console)"
+      },
+      {
+        "command": "suibase.refresh",
+        "title": "refresh",
+        "icon": "$(refresh)"
       }
     ],
     "menus": {
       "view/title": [
         {
-          "command": "suibase.refresh",
+          "command": "suibase.settings",
+          "when": "view == suibaseTreeView",
+          "group": "navigation@0"
+        },
+        {
+          "command": "suibase.console",
           "when": "view == suibaseTreeView",
           "group": "navigation@1"
         },
         {
-          "command": "suibase.settings",
+          "command": "suibase.refresh",
           "when": "view == suibaseTreeView",
-          "group": "navigation@0"
+          "group": "navigation@2"
         }
       ]
     },

diff --git a/typescript/vscode-extension/src/SuibaseCommands.ts b/typescript/vscode-extension/src/SuibaseCommands.ts
@@ -6,6 +6,7 @@ import * as vscode from "vscode";
 import { SuibaseExec } from "./SuibaseExec";
 
 import { DashboardPanel } from "./panels/DashboardPanel";
+import { ConsolePanel } from "./panels/ConsolePanel";
 
 export class SuibaseCommands {
   private static instance?: SuibaseCommands;
@@ -30,6 +31,13 @@ export class SuibaseCommands {
       context.subscriptions.push(disposable);
     }
 
+    {
+      let disposable = vscode.commands.registerCommand("suibase.console", () => {
+        SuibaseCommands.getInstance()?.console();
+      });
+      context.subscriptions.push(disposable);
+    }
+
     {
       let disposable = vscode.commands.registerCommand("suibase.refresh", () => {
         SuibaseCommands.getInstance()?.refresh();
@@ -84,4 +92,11 @@ export class SuibaseCommands {
     }
     DashboardPanel.render();
   }
+
+  public console() {
+    if (!SuibaseCommands.context) {
+      return;
+    }
+    ConsolePanel.render();
+  }
 }
diff --git a/typescript/vscode-extension/src/common/SuibaseJSONStorage.ts b/typescript/vscode-extension/src/common/SuibaseJSONStorage.ts
@@ -1,6 +1,6 @@
 // JSON storage of all data (config, state and status) related to a Suibase installation.
 //
-// Multiple instance are expected to exists, allowing to compare one store to another.
+// Multiple instance are expected for a given data for doing comparison and detect deltas.
 //
 // The purpose of the SuibaseJSONStorage is to :
 //    - Always get any data (even if not up to date) and revert to a default when not initialized.

diff --git a/typescript/vscode-extension/src/panels/BasePanel.ts b/typescript/vscode-extension/src/panels/BasePanel.ts
@@ -178,9 +178,14 @@ export class BasePanel {
           <title>Hello World</title>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src http://localhost:*; font-src ${cspSource}; style-src ${cspSource} unsafe-inline; script-src 'nonce-${nonce}';">
+          <meta http-equiv="Content-Security-Policy" content="default-src ${cspSource}; connect-src http://localhost:*; font-src ${cspSource}; style-src ${cspSource} 'unsafe-inline'; img-src ${cspSource}; script-src ${cspSource} 'strict-dynamic' 'nonce-${nonce}'">      
+          
           <link rel="stylesheet" type="text/css" href="${stylesUri}">
-          <link rel="stylesheet" type="text/css" href="${iconsUri}" />
+          <link rel="stylesheet" type="text/css" href="${iconsUri}" />      
+
+          <script nonce="${nonce}">
+            var suibase_panel_key = '${this.panelKey}';
+          </script>
           <script defer nonce="${nonce}" src="${scriptUri}"></script>
         </head>
         <body>

diff --git a/typescript/vscode-extension/src/panels/ConsolePanel.ts b/typescript/vscode-extension/src/panels/ConsolePanel.ts
@@ -0,0 +1,43 @@
+import { BasePanel } from "./BasePanel";
+
+/**
+ * This class manages the state and behavior of the ConsolePanel webview.
+ *
+ * This is a singleton.
+ */
+export class ConsolePanel extends BasePanel {
+  private static instance?: ConsolePanel;
+
+  /**
+   * ConsolePanel constructor called only from ConsolePanel.render()
+   */
+  private constructor() {
+    super("suibase.console", "Sui Console");
+  }
+
+  // Note: Does not use the activate/deactivate pattern (the BasePanel does).
+  //       Instead this subclass uses a render()/dispose() for its lifetime.
+  //
+  //       This is because activate() always happens once and early while render()
+  //       and dispose() may happen or not depending of the user actions to display
+  //       the panel or not.
+  //
+  public static render() {
+    if (!ConsolePanel.instance) {
+      ConsolePanel.instance = new ConsolePanel();
+    }
+    ConsolePanel.instance.render();
+  }
+
+  // Dispose is a callback triggered by VSCode (see BasePanel).
+  protected dispose() {
+    console.log("ConsolePanel.dispose() called");
+    if (ConsolePanel.instance) {
+      super.dispose();
+      delete ConsolePanel.instance;
+      ConsolePanel.instance = undefined;
+    } else {
+      console.log("Error: dispose() called out of order");
+    }
+  }
+}
diff --git a/typescript/vscode-extension/src/panels/README.md b/typescript/vscode-extension/src/panels/README.md
@@ -2,15 +2,7 @@
 
 This directory contains all of the webview-related code that will be executed within the extension context. It can be thought of as the place where all of the "backend" code of a webview panel is contained.
 
-Types of content that can be contained here:
-
-Individual JavaScript / TypeScript files that contain a class which manages the state and behavior of a given webview panel. Each class is usually in charge of:
-
-- Creating and rendering the webview panel
-- Properly cleaning up and disposing of webview resources when the panel is closed
-- Setting message listeners so data can be passed between the webview and extension
-- Setting the HTML (and by proxy CSS/JavaScript) content of the webview panel
-- Other custom logic and behavior related to webview panel management
+See BasePanel.ts for functionalities common to all panels.
 
 Reference:
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/frameworks/hello-world-svelte/src/panels/README.md
diff --git a/typescript/vscode-extension/webview-ui/src/App.svelte b/typescript/vscode-extension/webview-ui/src/App.svelte
@@ -2,6 +2,7 @@
   import { provideVSCodeDesignSystem, allComponents } from "@vscode/webview-ui-toolkit";
   import { VSCode } from "./lib/VSCode";
   import WorkdirsController from "./components/WorkdirsController.svelte";
+  import ConsoleController from "./components/ConsoleController.svelte";
   import { GlobalStorage } from "./lib/GlobalStorage";
 
   // Static initializations
@@ -37,7 +38,11 @@
 </script>
 
 <main>
-  <WorkdirsController />
+  {#if globalThis.suibase_panel_key == "suibase.settings"}
+    <WorkdirsController />
+  {:else if globalThis.suibase_panel_key == "suibase.console"}
+    <ConsoleController />
+  {/if}
 
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <vscode-button on:click={handleHowdyClick}>Howdy!</vscode-button>

diff --git a/typescript/vscode-extension/webview-ui/src/components/ConsoleController.svelte b/typescript/vscode-extension/webview-ui/src/components/ConsoleController.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { VSCode } from "../lib/VSCode";
+  import { SuibaseJSONStorage } from "../common/SuibaseJSONStorage";
+</script>
+
+<main>
+  <ul class="no-bullets">
+    <li>
+      2023-10-25 14:46:19.031 [info] > git show --textconv
+      :typescript/vscode-extension/webview-ui/src/components/ConsoleController.svelte [21ms]
+    </li>
+
+    <li>
+      2023-10-25 14:46:19.032 [info] > git ls-files --stage --
+      /home/olet/suibase/typescript/vscode-extension/webview-ui/src/components/ConsoleController.svelte [1ms]
+    </li>
+
+    <li>2023-10-25 14:53:26.114 [info] > git fetch [536ms]</li>
+
+    <li>2023-10-25 14:53:26.145 [info] > git config --get commit.template [1ms]</li>
+
+    <li>
+      2023-10-25 14:53:26.165 [info] > git for-each-ref
+      --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track)%00%(upstream:remotename)%00%(upstream:remoteref)
+      refs/heads/main refs/remotes/main [1ms]
+    </li>
+
+    <li>2023-10-25 14:53:26.181 [info] > git status -z -uall [3ms]</li>
+    <li>
+      2023-10-25 14:53:27.331 [info] > git ls-tree -l HEAD --
+      /home/olet/suibase/typescript/vscode-extension/src/panels/BasePanel.ts [18ms]
+    </li>
+    <li>
+      2023-10-25 14:53:27.332 [info] > git ls-files --stage --
+      /home/olet/suibase/typescript/vscode-extension/webview-ui/src/components/ConsoleController.svelte [1ms]
+    </li>
+  </ul>
+</main>
+
+<style>
+  /* Hide everything above this component. */
+  /*:global(#smui-app),
+  :global(body),
+  :global(html) {
+    display: block !important;
+    height: auto !important;
+    width: auto !important;
+    position: static !important;
+  }*/
+
+  main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  ul.no-bullets {
+    list-style-type: none; /* Remove bullets */
+    padding: 0; /* Remove padding */
+    margin: 0; /* Remove margins */
+  }
+</style>
diff --git a/typescript/vscode-extension/webview-ui/src/global.d.ts b/typescript/vscode-extension/webview-ui/src/global.d.ts
@@ -1 +1 @@
-/// <reference types="svelte" />
+/// <reference types="svelte" />
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		/// <reference types="svelte" />
		/// <reference types="svelte" />