Use Cloud Shell for Mongo, Cassandra, Postgres Shells

package.json

@@ -13,8 +13,8 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.119.0",
     "@fluentui/react-components": "9.54.2",
-    "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
+    "@jupyterlab/services": "6.0.2",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
@@ -46,6 +46,7 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@xmldom/xmldom": "0.7.13",
+    "@xterm/xterm": "5.5.0",
     "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",

src/Explorer/Explorer.tsx

@@ -906,25 +906,28 @@ export default class Explorer {
   }
 
   public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
-    if (useNotebook.getState().isPhoenixFeatures) {
-      await this.allocateContainer(PoolIdType.DefaultPoolId);
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
-        this.connectToNotebookTerminal(kind);
-      } else {
-        useDialog
-          .getState()
-          .showOkModalDialog(
-            "Failed to connect",
-            "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again.",
-          );
-      }
+
+    if (userContext.features.enableCloudShell || !useNotebook.getState().isPhoenixFeatures) {
+      this.connectToTerminal(kind);
+      return;
+    }
+
+    await this.allocateContainer(PoolIdType.DefaultPoolId);
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+
+    if (notebookServerInfo?.notebookServerEndpoint) {
+      this.connectToTerminal(kind);
     } else {
-      this.connectToNotebookTerminal(kind);
+      useDialog
+        .getState()
+        .showOkModalDialog(
+          "Failed to connect",
+          "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again."
+        );
     }
   }
 
-  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  private connectToTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {

src/Explorer/Tabs/CloudShellTab/AttachAddOn.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+
+import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
+
+interface IAttachOptions {
+    bidirectional?: boolean;
+}
+
+export class AttachAddon implements ITerminalAddon {
+    private _socket: WebSocket;
+    private _bidirectional: boolean;
+    private _disposables: IDisposable[] = [];
+    private _socketData: string;
+
+    constructor(socket: WebSocket, options?: IAttachOptions) {
+        this._socket = socket;
+        // always set binary type to arraybuffer, we do not handle blobs
+        this._socket.binaryType = 'arraybuffer';
+        this._bidirectional = !(options && options.bidirectional === false);
+        this._socketData = '';
+    }
+
+    public activate(terminal: Terminal): void {
+        this._disposables.push(
+            addSocketListener(this._socket, 'message', ev => {
+                let data: ArrayBuffer | string = ev.data;
+                const startStatusJson = 'ie_us';
+                const endStatusJson = 'ie_ue';
+
+                if (typeof data === 'object') {
+                    const enc = new TextDecoder("utf-8");
+                    data = enc.decode(ev.data as any);
+                }
+
+                // for example of json object look in TerminalHelper in the socket.onMessage
+                if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
+                    // process as one line
+                    const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
+                    data = data.replace(statusData, '');
+                    data = data.replace(startStatusJson, '');
+                    data = data.replace(endStatusJson, '');
+                } else if (data.includes(startStatusJson)) {
+                    // check for start
+                    const partialStatusData = data.split(startStatusJson)[1];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(startStatusJson, '');
+                } else if (data.includes(endStatusJson)) {
+                    // check for end and process the command
+                    const partialStatusData = data.split(endStatusJson)[0];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(endStatusJson, '');
+                    this._socketData = '';
+                } else if (this._socketData.length > 0) {
+                    // check if the line is all data then just concatenate
+                    this._socketData += data;
+                    data = '';
+                }
+                terminal.write(data);
+            })
+        );
+
+        if (this._bidirectional) {
+            this._disposables.push(terminal.onData(data => this._sendData(data)));
+            this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
+        }
+
+        this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
+        this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
+    }
+
+    public dispose(): void {
+        for (const d of this._disposables) {
+            d.dispose();
+        }
+    }
+
+    private _sendData(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        this._socket.send(data);
+    }
+
+    private _sendBinary(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        const buffer = new Uint8Array(data.length);
+        for (let i = 0; i < data.length; ++i) {
+            buffer[i] = data.charCodeAt(i) & 255;
+        }
+        this._socket.send(buffer);
+    }
+
+    private _checkOpenSocket(): boolean {
+        switch (this._socket.readyState) {
+            case WebSocket.OPEN:
+                return true;
+            case WebSocket.CONNECTING:
+                throw new Error('Attach addon was loaded before socket was open');
+            case WebSocket.CLOSING:
+                return false;
+            case WebSocket.CLOSED:
+                throw new Error('Attach addon socket is closed');
+            default:
+                throw new Error('Unexpected socket state');
+        }
+    }
+}
+
+function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
+    socket.addEventListener(type, handler);
+    return {
+        dispose: () => {
+            if (!handler) {
+                // Already disposed
+                return;
+            }
+            socket.removeEventListener(type, handler);
+        }
+    };
+}

src/Explorer/Tabs/CloudShellTab/Data.tsx

@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+import { configContext } from "../../../ConfigContext";
+import { armRequest } from "../../../Utils/arm/request";
+import { Authorization, ConnectTerminalResponse, NetworkType, OsType, ProvisionConsoleResponse, SessionType, Settings, ShellType } from "./DataModels";
+
+const cloudshellToken = "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6ImltaTBZMnowZFlLeEJ0dEFxS19UdDVoWUJUayIsImtpZCI6ImltaTBZMnowZFlLeEJ0dEFxS19UdDVoWUJUayJ9.eyJhdWQiOiJodHRwczovL21hbmFnZW1lbnQuY29yZS53aW5kb3dzLm5ldC8iLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC83MmY5ODhiZi04NmYxLTQxYWYtOTFhYi0yZDdjZDAxMWRiNDcvIiwiaWF0IjoxNzQwNDU5Njc2LCJuYmYiOjE3NDA0NTk2NzYsImV4cCI6MTc0MDQ2NDA0NSwiX2NsYWltX25hbWVzIjp7Imdyb3VwcyI6InNyYzEifSwiX2NsYWltX3NvdXJjZXMiOnsic3JjMSI6eyJlbmRwb2ludCI6Imh0dHBzOi8vZ3JhcGgud2luZG93cy5uZXQvNzJmOTg4YmYtODZmMS00MWFmLTkxYWItMmQ3Y2QwMTFkYjQ3L3VzZXJzL2U4MGZmZGE4LTlmZDUtNDQ4ZC05M2VhLWY5YzgyM2ZjN2RkOC9nZXRNZW1iZXJPYmplY3RzIn19LCJhY3IiOiIxIiwiYWlvIjoiQVpRQWEvOFpBQUFBRjcvNHplb1lpQWYxcytvR1FMVXVsa2NJbU93dGx1aVJNMVVKeVI3czIrV0Z5VVdPM2MrUlUybmdsTlBRaGtwTFo4SktsYjg0a1dlTVhCZFFXemJGcUJGQ0M1aXU3ZUxyamRYY3NOaVMwc0l5Z1crdTJsT1I3VzBsNC8xT3UzRnRjakJoQlZLSTFFTGpLWHJjbzkrbTM0WUZJbmYrc0VPNkhuNmJFMmdIL3kxamUyQXZvZXNTaDhmZlpQdjZNSUcxIiwiYW1yIjpbInJzYSIsIm1mYSJdLCJhcHBpZCI6ImM0NGI0MDgzLTNiYjAtNDljMS1iNDdkLTk3NGU1M2NiZGYzYyIsImFwcGlkYWNyIjoiMCIsImRldmljZWlkIjoiZTM4YzBiOTgtMzQ5OS00YWQzLTkwN2EtYjc2NzJjNzdkZTQ3IiwiZmFtaWx5X25hbWUiOiJKYWluIiwiZ2l2ZW5fbmFtZSI6IlNvdXJhYmgiLCJpZHR5cCI6InVzZXIiLCJpcGFkZHIiOiIyNDA1OjIwMTo0MDMzOjIxY2U6OWRkOTpkMGY1OmJjZWE6YjFiMCIsIm5hbWUiOiJTb3VyYWJoIEphaW4iLCJvaWQiOiJlODBmZmRhOC05ZmQ1LTQ0OGQtOTNlYS1mOWM4MjNmYzdkZDgiLCJvbnByZW1fc2lkIjoiUy0xLTUtMjEtMjE0Njc3MzA4NS05MDMzNjMyODUtNzE5MzQ0NzA3LTI3MDcwNjYiLCJwdWlkIjoiMTAwMzIwMDExQTY5NDVGMCIsInJoIjoiMS5BUm9BdjRqNWN2R0dyMEdScXkxODBCSGJSMFpJZjNrQXV0ZFB1a1Bhd2ZqMk1CTWFBT2dhQUEuIiwic2NwIjoidXNlcl9pbXBlcnNvbmF0aW9uIiwic2lkIjoiMDAyMDEzMDktMmE2MC1jYzVjLWI1MzEtM2IwZDA1YWQxZjc1Iiwic3ViIjoiOHhzRHhTS2pyZzJxd1dpM1gzSmYteTFSQ1dSNnZQMERnSkVsS2hNbTltMCIsInRpZCI6IjcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0NyIsInVuaXF1ZV9uYW1lIjoic291cmFiaGphaW5AbWljcm9zb2Z0LmNvbSIsInVwbiI6InNvdXJhYmhqYWluQG1pY3Jvc29mdC5jb20iLCJ1dGkiOiJUVDYwRzBpSFJrMmN4Y1AtVVZzbEFBIiwidmVyIjoiMS4wIiwieG1zX2lkcmVsIjoiMSAzMCIsInhtc190Y2R0IjoxMjg5MjQxNTQ3fQ.LBYpLSmj8Cd-ZL3i9yuqVvPB0CirALEq7ldFywDH2U5c9LlnUfLgOf_C_N0Uu0ChthTl9Eu54TXuGCxFXwfVSg_kaPuZhtc-vDqVurjHtyNr-53qKg8fbQYbOnB_JGqC86TzdqPRv1XwhZj9C2bNjjGZ2GrcOWitv8CgM9Fs9Cul1OHiq5j8BTJl8OX_THC-VUB11fB-5qyitH9pTtETC4o7AKg4fOHftXYDkFI0gVF_WCZoquI6kFEnoQtt_qhu4rK71VqVRt5qqBeT8tgH4GwsP2W7pBlzESdjSXWMJ5u7klXJwheYvuytrxioD1f0HCOLHyBFpVf5JTBBeXjPow";
+
+export const validateUserSettings = (userSettings: Settings) => {
+    if (userSettings.sessionType !== SessionType.Ephemeral && userSettings.osType !== OsType.Linux) {
+        return false;
+    } else {
+        return true;
+    }
+}
+
+// https://stackoverflow.com/q/38598280 (Is it possible to wrap a function and retain its types?)
+export const trackedApiCall = <T extends Array<any>, U>(apiCall: (...args: T) => Promise<U>, name: string) => {
+    return async (...args: T): Promise<U> => {
+        const startTime = Date.now();
+        const result = await apiCall(...args);
+        const endTime = Date.now();
+        return result;
+    };
+};
+
+export const getUserRegion = trackedApiCall(async (subscriptionId: string, resourceGroup: string, accountName: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`,
+        method: "GET",
+        apiVersion: "2022-12-01"
+      });
+
+}, "getUserRegion");
+
+export const getUserSettings = trackedApiCall(async (): Promise<Settings> => {
+    const resp = await armRequest<any>({
+        host: configContext.ARM_ENDPOINT,
+        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+        method: "GET",
+        apiVersion: "2023-02-01-preview",
+        customHeaders: {
+            "Authorization": cloudshellToken // Temporily use a hardcoded token
+        }
+      });
+
+    return {
+        location: resp?.properties?.preferredLocation,
+        sessionType: resp?.properties?.sessionType,
+        osType: resp?.properties?.preferredOsType
+    };
+}, "getUserSettings");
+
+export const putEphemeralUserSettings = trackedApiCall(async (userSubscriptionId: string, userRegion: string) => {
+    const ephemeralSettings = {
+        properties: {
+            preferredOsType: OsType.Linux,
+            preferredShellType: ShellType.Bash,
+            preferredLocation: userRegion,
+            networkType: NetworkType.Default,
+            sessionType: SessionType.Ephemeral,
+            userSubscription: userSubscriptionId,
+        }
+    };
+
+    const resp = await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+        method: "PUT",
+        apiVersion: "2023-02-01-preview",
+        body: ephemeralSettings,
+        customHeaders: {
+            "Authorization": cloudshellToken // Temporily use a hardcoded token
+        }
+      });
+
+    return resp;
+
+}, "putEphemeralUserSettings");
+
+export const verifyCloudshellProviderRegistration = async(subscriptionId: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell`,
+        method: "GET",
+        apiVersion: "2022-12-01",
+        customHeaders: {
+            "Authorization": cloudshellToken // Temporily use a hardcoded token
+        }
+      });
+};
+
+export const registerCloudShellProvider = async (subscriptionId: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell/register`,
+        method: "POST",
+        apiVersion: "2022-12-01",
+        customHeaders: {
+            "Authorization": cloudshellToken // Temporily use a hardcoded token
+        }
+      });
+};
+
+export const provisionConsole = trackedApiCall(async (subscriptionId: string, location: string): Promise<ProvisionConsoleResponse> => {
+    const data = {
+        properties: {
+            osType: OsType.Linux
+        }
+    };
+
+    return await armRequest<any>({
+        host: configContext.ARM_ENDPOINT,
+        path: `providers/Microsoft.Portal/consoles/default`,
+        method: "PUT",
+        apiVersion: "2023-02-01-preview",
+        customHeaders: {
+            'x-ms-console-preferred-location': location,
+            "Authorization": cloudshellToken  // Temporily use a hardcoded token
+        },
+        body: data,
+      });
+}, "provisionConsole");
+
+export const connectTerminal = trackedApiCall(async (consoleUri: string, size: { rows: number, cols: number }): Promise<ConnectTerminalResponse> => {
+    const targetUri = consoleUri + `/terminals?cols=${size.cols}&rows=${size.rows}&version=2019-01-01&shell=bash`;
+    const resp = await fetch(targetUri, {
+        method: "post",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Content-Length': '2',
+            'Authorization': cloudshellToken,
+            'x-ms-client-request-id': uuidv4(),
+            'Accept-Language': getLocale(),
+        },
+        body: "{}" // empty body is necessary
+    });
+    return resp.json();
+}, "connectTerminal");
+
+export const authorizeSession = trackedApiCall(async (consoleUri: string): Promise<Authorization> => {
+    const targetUri = consoleUri + "/authorize";
+    const resp = await fetch(targetUri, {
+        method: "post",
+        headers: {
+            'Accept': 'application/json',
+            'Authorization': cloudshellToken,
+            'Accept-Language': getLocale(),
+            "Content-Type": 'application/json'
+        },
+        body: "{}" // empty body is necessary
+    });
+    return resp.json();
+}, "authorizeSession");
+
+export const getLocale = () => {
+    const langLocale = navigator.language;
+    return (langLocale && langLocale.length === 2 ? langLocale[1] : 'en-us');
+};
+
+const validCloudShellRegions = new Set(["westus", "southcentralus", "eastus", "northeurope", "westeurope", "centralindia", "southeastasia", "westcentralus"]);
+
+export const getNormalizedRegion = (region: string, defaultCloudshellRegion: string) => {
+    if (!region) return defaultCloudshellRegion;
+
+    const regionMap: Record<string, string> = {
+      "centralus": "westcentralus",
+      "eastus2": "eastus"
+    };
+
+    const normalizedRegion = regionMap[region.toLowerCase()] || region;
+    return validCloudShellRegions.has(normalizedRegion.toLowerCase()) ? normalizedRegion : defaultCloudshellRegion;
+  };
+