Contribute z/OS console panel

.vscode/settings.json

@@ -28,5 +28,6 @@
     { "directory": "packages/zowe-explorer-ftp-extension", "changeProcessCWD": true },
     { "directory": "packages/zowe-explorer-api", "changeProcessCWD": true },
     { "directory": "packages/zowe-explorer", "changeProcessCWD": true }
-  ]
+  ],
+  "zopendebug.profileView.showWelcome": false
 }

packages/zowe-explorer/__mocks__/@zowe/zos-console-for-zowe-sdk.ts

@@ -0,0 +1,3 @@
+export interface IIssueParms {}
+
+export class IssueCommand {}

packages/zowe-explorer/__tests__/__unit__/extension.unit.test.ts

@@ -39,7 +39,7 @@ jest.mock("util");
 jest.mock("isbinaryfile");
 
 async function createGlobalMocks() {
-    const mockReadProfilesFromDisk = jest.fn();
+    const mockReadProfilesFromDisk = jest.fn().mockReturnValue(Promise.resolve());
     const globalMocks = {
         mockLoadNamedProfile: jest.fn(),
         mockMkdirSync: jest.fn(),
@@ -49,6 +49,7 @@ async function createGlobalMocks() {
         mockCreateTreeView: jest.fn().mockReturnValue({ onDidCollapseElement: jest.fn() }),
         mockExecuteCommand: jest.fn(),
         mockRegisterCommand: jest.fn(),
+        mockRegisterWebviewViewProvider: jest.fn(),
         mockOnDidCloseTextDocument: jest.fn(),
         mockOnDidSaveTextDocument: jest.fn(),
         mockOnDidChangeSelection: jest.fn(),
@@ -280,6 +281,10 @@ async function createGlobalMocks() {
         value: globalMocks.mockRegisterCommand,
         configurable: true,
     });
+    Object.defineProperty(vscode.window, "registerWebviewViewProvider", {
+        value: globalMocks.mockRegisterWebviewViewProvider,
+        configurable: true,
+    });
     Object.defineProperty(vscode.commands, "executeCommand", {
         value: globalMocks.mockExecuteCommand,
         configurable: true,

packages/zowe-explorer/package.json

@@ -41,6 +41,13 @@
           "title": "%viewsContainers.activitybar%",
           "icon": "resources/zowe.svg"
         }
+      ],
+      "panel": [
+        {
+          "id": "zosconsole",
+          "title": "z/OS Console",
+          "icon": ""
+        }
       ]
     },
     "views": {
@@ -57,6 +64,13 @@
           "id": "zowe.jobs.explorer",
           "name": "%zowe.jobs.explorer%"
         }
+      ],
+      "zosconsole": [
+        {
+          "id": "zosconsole",
+          "name": "z/OS Console",
+          "type": "webview"
+        }
       ]
     },
     "keybindings": [
@@ -2107,6 +2121,7 @@
     "sinon": "^6.1.0"
   },
   "dependencies": {
+    "@vscode/codicons": "^0.0.35",
     "@zowe/secrets-for-zowe-sdk": "7.18.6",
     "@zowe/zowe-explorer-api": "2.17.0-SNAPSHOT",
     "dayjs": "^1.11.10",

packages/zowe-explorer/src/extension.ts

@@ -28,6 +28,7 @@ import { initDatasetProvider } from "./dataset/init";
 import { initUSSProvider } from "./uss/init";
 import { initJobsProvider } from "./job/init";
 import { ZoweLocalStorage } from "./utils/ZoweLocalStorage";
+import { ZosConsoleViewProvider } from "./zosconsole/ZosConsolePanel";
 
 /**
  * The function that runs when the extension is loaded
@@ -65,6 +66,8 @@ export async function activate(context: vscode.ExtensionContext): Promise<ZoweEx
     await watchConfigProfile(context, providers);
     globals.setActivated(true);
     findRecoveredFiles();
+    const provider = new ZosConsoleViewProvider(context.extensionUri);
+    context.subscriptions.push(vscode.window.registerWebviewViewProvider(ZosConsoleViewProvider.viewType, provider));
     return ZoweExplorerApiRegister.getInstance();
 }
 /**

packages/zowe-explorer/src/webviews/src/zos-console/App.tsx

@@ -0,0 +1,80 @@
+import { Dropdown, Option, TextArea, TextField } from "@vscode/webview-ui-toolkit";
+import { VSCodeDropdown, VSCodeTextArea, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { useEffect } from "preact/hooks";
+
+declare const vscode: any;
+
+export function App() {
+  useEffect(() => {
+    window.addEventListener("message", (event) => {
+      const message = event.data;
+      switch (message.type) {
+        case "commandResult":
+          const consoleResponse = document.getElementById("output") as TextArea;
+          consoleResponse!.value += `> ${message.cmd} (${message.profile})\n`;
+          consoleResponse!.value += message.result;
+          consoleResponse!.control.scrollTop = consoleResponse!.control.scrollHeight;
+          break;
+        case "optionsList":
+          const profileList = document.getElementById("systems") as Option;
+          for (const profile in message.profiles) {
+            const option = document.createElement("vscode-option");
+            option.textContent = message.profiles[profile];
+            if (message.profiles[profile] === message.defaultProfile) {
+              option.setAttribute("selected", "true");
+            }
+            profileList.appendChild(option);
+          }
+          break;
+      }
+    });
+  });
+
+  const sendCommand = (e: KeyboardEvent) => {
+    const consoleField = document.getElementById("command-input") as TextField;
+    const consoleResponse = document.getElementById("output") as TextArea;
+    const profileList = document.getElementById("systems") as Dropdown;
+    if (e.key === "Enter") {
+      if (consoleField!.value === "clear") {
+        consoleResponse.value = "";
+        consoleResponse.control.scrollTop = 0;
+      } else {
+        vscode.postMessage({
+          command: "opercmd",
+          profile: profileList.options[profileList.selectedIndex].text,
+          text: consoleField.value,
+        });
+      }
+      consoleField.value = "";
+    }
+  };
+
+  return (
+    <div>
+      <VSCodeDropdown id="systems" style={{ float: "right" }}></VSCodeDropdown>
+      <VSCodeTextArea
+        id="output"
+        readonly
+        rows="8"
+        resize="vertical"
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          display: "block",
+        }}
+      ></VSCodeTextArea>
+      <VSCodeTextField
+        id="command-input"
+        name="command-input"
+        type="text"
+        onKeyDown={(e: KeyboardEvent) => sendCommand(e)}
+        style={{
+          width: "100%",
+        }}
+      >
+        <span slot="start" class="codicon codicon-chevron-right"></span>
+      </VSCodeTextField>
+    </div>
+  );
+}

packages/zowe-explorer/src/webviews/src/zos-console/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>z/OS Console</title>
+  </head>
+  <body>
+    <div id="webviewRoot"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

packages/zowe-explorer/src/webviews/src/zos-console/index.tsx

@@ -0,0 +1,4 @@
+import { render } from "preact";
+import { App } from "./App";
+
+render(<App />, document.getElementById("webviewRoot")!);

packages/zowe-explorer/src/zosconsole/ZosConsolePanel.ts

@@ -0,0 +1,143 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
+import * as vscode from "vscode";
+import { ProfileInfo, IProfAttrs } from "@zowe/imperative";
+import { IIssueParms, IssueCommand } from "@zowe/zos-console-for-zowe-sdk";
+
+export class ZosConsoleViewProvider implements vscode.WebviewViewProvider {
+    public static readonly viewType = "zosconsole";
+
+    private _view?: vscode.WebviewView;
+
+    private profiles: Map<String, IProfAttrs> = new Map();
+    private defaultProfileName: string | undefined;
+
+    public constructor(private readonly _extensionUri: vscode.Uri) {
+        const profInfo = new ProfileInfo("zowe");
+        profInfo
+            .readProfilesFromDisk()
+            .then(() => {
+                const loadedProfiles = profInfo.getAllProfiles("zosmf");
+                const defaultProfile = profInfo.getDefaultProfile("zosmf");
+                this.defaultProfileName = defaultProfile?.profName;
+                loadedProfiles.forEach((profile) => {
+                    this.profiles.set(profile.profName, profile);
+                });
+            })
+            .catch(() => {});
+    }
+
+    public resolveWebviewView(
+        webviewView: vscode.WebviewView,
+        _context: vscode.WebviewViewResolveContext<unknown>,
+        _token: vscode.CancellationToken
+    ): void | Thenable<void> {
+        this._view = webviewView;
+
+        webviewView.webview.options = {
+            enableScripts: true,
+            localResourceRoots: [this._extensionUri],
+        };
+
+        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+
+        webviewView.webview.onDidReceiveMessage(async (message: any) => {
+            const command = message.command;
+            const text = message.text;
+            const profile = message.profile;
+
+            switch (command) {
+                case "startup": {
+                    const profileArray = [];
+                    for (const profileName of this.profiles.keys()) {
+                        profileArray.push(profileName);
+                    }
+                    webviewView.webview.postMessage({
+                        type: "optionsList",
+                        profiles: profileArray,
+                        defaultProfile: this.defaultProfileName,
+                    });
+                    break;
+                }
+                case "opercmd":
+                    webviewView.webview.postMessage({
+                        type: "commandResult",
+                        cmd: text,
+                        profile: profile,
+                        result: await this.runOperCmd(text, profile),
+                    });
+                    return;
+            }
+        });
+    }
+
+    private _getHtmlForWebview(webview: vscode.Webview): string {
+        const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "src", "webviews", "dist", "zos-console", "zos-console.js"));
+        const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "node_modules", "@vscode/codicons", "dist", "codicon.css"));
+        const nonce = this.getNonce();
+
+        // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
+        return /*html*/ `
+          <!DOCTYPE html>
+          <html lang="en">
+              <head>
+                  <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'; font-src ${webview.cspSource}; 
+                        style-src ${webview.cspSource}; script-src 'nonce-${nonce}';" />-->
+                  <link href="${codiconsUri.toString()}" rel="stylesheet" />
+              </head>
+              <body>
+                <div id="webviewRoot"></div>
+                <script>
+                    const vscode = acquireVsCodeApi();
+                    window.onload = function() {
+                        vscode.postMessage({ command: 'startup' });
+                    };
+                </script>
+                <script type="module" nonce="${nonce}" src="${scriptUri.toString()}"></script>
+                </body>
+              </body>
+          </html>
+          `;
+    }
+
+    private async runOperCmd(command: string, profile: string): Promise<string> {
+        try {
+            const profInfo = new ProfileInfo("zowe");
+            await profInfo.readProfilesFromDisk();
+            const zosmfProfAttrs = this.profiles.get(profile);
+            const zosmfMergedArgs = profInfo.mergeArgsForProfile(zosmfProfAttrs, { getSecureVals: true });
+            const session = ProfileInfo.createSession(zosmfMergedArgs.knownArgs);
+
+            const parms: IIssueParms = {
+                command: command,
+                sysplexSystem: undefined,
+                solicitedKeyword: undefined,
+                async: "N",
+            };
+            const response = await IssueCommand.issue(session, parms);
+            return response.commandResponse;
+        } catch (e) {
+            return (e as Error).message;
+        }
+    }
+
+    private getNonce(): string {
+        let text = "";
+        const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        for (let i = 0; i < 32; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+        return text;
+    }
+}

yarn.lock

@@ -2564,6 +2564,11 @@
   resolved "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.33.tgz"
   integrity sha512-VdgpnD75swH9hpXjd34VBgQ2w2quK63WljodlUcOoJDPKiV+rPjHrcUc2sjLCNKxhl6oKqmsZgwOWcDAY2GKKQ==
 
+"@vscode/codicons@^0.0.35":
+  version "0.0.35"
+  resolved "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.35.tgz#7424a647f39c6e71c86c1edf12bfc27196c8fba1"
+  integrity sha512-7iiKdA5wHVYSbO7/Mm0hiHD3i4h+9hKUe1O4hISAe/nHhagMwb2ZbFC8jU6d7Cw+JNT2dWXN2j+WHbkhT5/l2w==
+
 "@vscode/webview-ui-toolkit@^1.2.2":
   version "1.2.2"
   resolved "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.2.2.tgz"