mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-05-18 14:24:15 +01:00
xterm add
This commit is contained in:
Sourabh Jain
parent
0babb1fa13
commit
1678ec0a23
15
package-lock.json
generated
15
package-lock.json
generated
@ -18,7 +18,6 @@
|
||||
"@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",
|
||||
"@microsoft/applicationinsights-web": "2.6.1",
|
||||
"@nteract/commutable": "7.5.1",
|
||||
@ -114,6 +113,7 @@
|
||||
"tinykeys": "2.1.0",
|
||||
"underscore": "1.12.1",
|
||||
"utility-types": "3.10.0",
|
||||
"xterm-for-react": "1.0.4",
|
||||
"zustand": "3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -36550,6 +36550,19 @@
|
||||
"xterm": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/xterm-for-react": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/xterm-for-react/-/xterm-for-react-1.0.4.tgz",
|
||||
"integrity": "sha512-DCkLR9ZXeW907YyyaCTk/3Ol34VRHfCnf3MAPOkj3dUNA85sDqHvTXN8efw4g7bx7gWdJQRsEpGt2tJOXKG3EQ==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"xterm": "^4.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "4.0.3",
|
||||
"license": "ISC"
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
"@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",
|
||||
"@microsoft/applicationinsights-web": "2.6.1",
|
||||
"@nteract/commutable": "7.5.1",
|
||||
@ -46,6 +45,7 @@
|
||||
"@types/mkdirp": "1.0.1",
|
||||
"@types/node-fetch": "2.5.7",
|
||||
"@xmldom/xmldom": "0.7.13",
|
||||
"xterm-for-react":"1.0.4",
|
||||
"allotment": "1.20.2",
|
||||
"applicationinsights": "1.8.0",
|
||||
"bootstrap": "3.4.1",
|
||||
|
||||
@ -10,10 +10,11 @@ import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
|
||||
import Explorer from "../Explorer";
|
||||
import { useNotebook } from "../Notebook/useNotebook";
|
||||
//import { useNotebook } from "../Notebook/useNotebook";
|
||||
import TabsBase from "./TabsBase";
|
||||
import XTermComponent from "./XTermComponent";
|
||||
|
||||
|
||||
export interface TerminalTabOptions extends ViewModels.TabOptions {
|
||||
account: DataModels.DatabaseAccount;
|
||||
@ -25,7 +26,7 @@ export interface TerminalTabOptions extends ViewModels.TabOptions {
|
||||
/**
|
||||
* Notebook terminal tab
|
||||
*/
|
||||
class NotebookTerminalComponentAdapter implements ReactAdapter {
|
||||
class XTermAdapter implements ReactAdapter {
|
||||
// parameters: true: show, false: hide
|
||||
public parameters: ko.Computed<boolean>;
|
||||
constructor(
|
||||
@ -47,14 +48,14 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.parameters() ? (
|
||||
<NotebookTerminalComponent
|
||||
notebookServerInfo={this.getNotebookServerInfo()}
|
||||
databaseAccount={this.getDatabaseAccount()}
|
||||
tabId={this.getTabId()}
|
||||
username={this.getUsername()}
|
||||
/>
|
||||
<XTermComponent />
|
||||
// <NotebookTerminalComponent
|
||||
// notebookServerInfo={this.getNotebookServerInfo()}
|
||||
// databaseAccount={this.getDatabaseAccount()}
|
||||
// tabId={this.getTabId()}
|
||||
// username={this.getUsername()}
|
||||
// />
|
||||
) : (
|
||||
<Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
|
||||
);
|
||||
@ -74,28 +75,28 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
export default class TerminalTab extends TabsBase {
|
||||
public readonly html = '<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter"></div> ';
|
||||
public readonly html = '<div style="height: 100%" data-bind="react: xtermAdapter"></div>';
|
||||
private container: Explorer;
|
||||
private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
|
||||
private xtermAdapter: XTermAdapter;
|
||||
private isAllPublicIPAddressesEnabled: ko.Observable<boolean>;
|
||||
|
||||
constructor(options: TerminalTabOptions) {
|
||||
super(options);
|
||||
this.container = options.container;
|
||||
this.isAllPublicIPAddressesEnabled = ko.observable(true);
|
||||
this.notebookTerminalComponentAdapter = new NotebookTerminalComponentAdapter(
|
||||
() => this.getNotebookServerInfo(options),
|
||||
this.xtermAdapter = new XTermAdapter(
|
||||
() => null,
|
||||
() => userContext?.databaseAccount,
|
||||
() => this.tabId,
|
||||
() => this.getUsername(),
|
||||
this.isAllPublicIPAddressesEnabled,
|
||||
options.kind,
|
||||
);
|
||||
this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
|
||||
this.xtermAdapter.parameters = ko.computed<boolean>(() => {
|
||||
if (
|
||||
this.isTemplateReady() &&
|
||||
useNotebook.getState().isNotebookEnabled &&
|
||||
useNotebook.getState().notebookServerInfo?.notebookServerEndpoint &&
|
||||
// useNotebook.getState().isNotebookEnabled &&
|
||||
// useNotebook.getState().notebookServerInfo?.notebookServerEndpoint &&
|
||||
this.isAllPublicIPAddressesEnabled()
|
||||
) {
|
||||
return true;
|
||||
@ -134,41 +135,41 @@ export default class TerminalTab extends TabsBase {
|
||||
this.updateNavbarWithTabsButtons();
|
||||
}
|
||||
|
||||
private getNotebookServerInfo(options: TerminalTabOptions): DataModels.NotebookWorkspaceConnectionInfo {
|
||||
let endpointSuffix: string;
|
||||
// private getNotebookServerInfo(options: TerminalTabOptions): DataModels.NotebookWorkspaceConnectionInfo {
|
||||
// let endpointSuffix: string;
|
||||
|
||||
switch (options.kind) {
|
||||
case ViewModels.TerminalKind.Default:
|
||||
endpointSuffix = "";
|
||||
break;
|
||||
// switch (options.kind) {
|
||||
// case ViewModels.TerminalKind.Default:
|
||||
// endpointSuffix = "";
|
||||
// break;
|
||||
|
||||
case ViewModels.TerminalKind.Mongo:
|
||||
endpointSuffix = "mongo";
|
||||
break;
|
||||
// case ViewModels.TerminalKind.Mongo:
|
||||
// endpointSuffix = "mongo";
|
||||
// break;
|
||||
|
||||
case ViewModels.TerminalKind.Cassandra:
|
||||
endpointSuffix = "cassandra";
|
||||
break;
|
||||
// case ViewModels.TerminalKind.Cassandra:
|
||||
// endpointSuffix = "cassandra";
|
||||
// break;
|
||||
|
||||
case ViewModels.TerminalKind.Postgres:
|
||||
endpointSuffix = "postgresql";
|
||||
break;
|
||||
// case ViewModels.TerminalKind.Postgres:
|
||||
// endpointSuffix = "postgresql";
|
||||
// break;
|
||||
|
||||
case ViewModels.TerminalKind.VCoreMongo:
|
||||
endpointSuffix = "mongovcore";
|
||||
break;
|
||||
// case ViewModels.TerminalKind.VCoreMongo:
|
||||
// endpointSuffix = "mongovcore";
|
||||
// break;
|
||||
|
||||
default:
|
||||
throw new Error(`Terminal kind: ${options.kind} not supported`);
|
||||
}
|
||||
// default:
|
||||
// throw new Error(`Terminal kind: ${options.kind} not supported`);
|
||||
// }
|
||||
|
||||
const info: DataModels.NotebookWorkspaceConnectionInfo = useNotebook.getState().notebookServerInfo;
|
||||
return {
|
||||
authToken: info.authToken,
|
||||
notebookServerEndpoint: `${info.notebookServerEndpoint.replace(/\/+$/, "")}/${endpointSuffix}`,
|
||||
forwardingId: info.forwardingId,
|
||||
};
|
||||
}
|
||||
// const info: DataModels.NotebookWorkspaceConnectionInfo = useNotebook.getState().notebookServerInfo;
|
||||
// return {
|
||||
// authToken: info.authToken,
|
||||
// notebookServerEndpoint: `${info.notebookServerEndpoint.replace(/\/+$/, "")}/${endpointSuffix}`,
|
||||
// forwardingId: info.forwardingId,
|
||||
// };
|
||||
// }
|
||||
|
||||
private getUsername(): string {
|
||||
if (userContext.apiType !== "VCoreMongo" || !userContext?.vcoreMongoConnectionParams?.adminLogin) {
|
||||
|
||||
16
src/Explorer/Tabs/XTermComponent.tsx
Normal file
16
src/Explorer/Tabs/XTermComponent.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { XTerm } from "xterm-for-react";
|
||||
|
||||
const XTermComponent: React.FC = () => {
|
||||
const xtermRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.terminal.writeln("Hello, World!");
|
||||
}
|
||||
}, []);
|
||||
|
||||
return <XTerm ref={xtermRef} />;
|
||||
};
|
||||
|
||||
export default XTermComponent;
|
||||
Loading…
x
Reference in New Issue
Block a user