in source/idea/idea-cluster-manager/webapp/src/pages/home/file-browser.tsx [932:1231]
render() {
const getPath = (fileName: string): string => {
return `${this.getCwd(-1)}/${fileName}`;
};
const getFileBrowserActions = () => {
let actions = [...ACTIONS];
if (AppContext.get().getClusterSettingsService().isSchedulerDeployed()) {
actions.push(CustomActionSubmitJob);
}
return actions;
};
const getFavoriteActions = () => {
let actions = [...FAVORITE_ACTIONS];
if (AppContext.get().getClusterSettingsService().isSchedulerDeployed()) {
actions.push(CustomActionSubmitJob);
}
return actions;
};
const buildLoadingContent = () => {
return (
<div style={{ marginTop: "20px" }}>
<Box variant="p" textAlign="center">
<StatusIndicator type="loading"/>
</Box>
</div>
)
}
const buildDisabledPageContent = () => {
return (
<Box textAlign="center" variant="p" color="text-body-secondary" padding={{ top: "xxxl", bottom: "s" }}>
<b>No access to files.</b>
<br/>File access has been disabled.
</Box>
)
}
const buildFileBrowserContent = () => {
return (
<div style={{ marginTop: "20px" }}>
{this.state.showDeleteConfirmModal && this.buidlDeleteFileConfirmModal()}
{this.buildCreateFolderForm()}
{this.buildFileEditor()}
{/*<Container>*/}
<Tabs
onChange={(event) => {
this.setState(
{
activeTabId: event.detail.activeTabId,
},
() => {
this.adjustFileBrowserHeight();
}
);
}}
activeTabId={this.state.activeTabId}
tabs={[
{
id: "files",
label: "My Files",
content: (
<Container disableContentPaddings={true}>
<div className="soca-file-browser" style={{ height: "100vh - 200px" }}>
<FileBrowser
darkMode={AppContext.get().isDarkMode()}
folderChain={this.state.folderChain}
files={this.state.files}
fileActions={getFileBrowserActions()}
disableDragAndDrop={true}
onFileAction={(event) => {
const eventId: string = event.id;
if (event.id === ChonkyActions.OpenFiles.id) {
this.onOpenSelection(event.payload.targetFile);
} else if (event.id === ChonkyActions.UploadFiles.id) {
this.showUploadModal();
} else if (event.id === ChonkyActions.DownloadFiles.id) {
this.downloadFiles(event.state.selectedFiles);
} else if (event.id === ChonkyActions.CreateFolder.id) {
this.getCreateFolderForm().showModal();
} else if (event.id === ChonkyActions.DeleteFiles.id) {
this.deleteFiles(event.state.selectedFiles);
} else if (event.id === ChonkyActions.CopyFiles.id) {
if (event.state.selectedFiles && event.state.selectedFiles.length > 0) {
const name = event.state.selectedFiles[0].name;
const path = getPath(name);
Utils.copyToClipBoard(path).then((status) => {
if (status) {
this.setFlashbarMessage("info", `${name} path copied to clipboard`);
}
});
}
} else if (eventId === "soca_refresh") {
this.listFiles(this.getCwd(-1))
.catch((error) => {
if (error.errorCode === ErrorCodes.DISABLED_FEATURE) {
this.setFlashbarMessage("error", ErrorMessages.DISABLED_FILE_BROWSER_BY_ADMIN);
this.setState({
isFileBrowserEnabled: false,
});
} else {
this.setFlashbarMessage("error", error.message);
}
})
.finally();
} else if (eventId === "soca_submit_job") {
if (event.state.selectedFiles && event.state.selectedFiles.length > 0) {
this.props.navigate(`/soca/jobs/submit-job?input_file=${this.getCwd(-1)}/${event.state.selectedFiles[0].name}`);
}
} else if (eventId === "soca_favorite") {
if (event.state.selectedFiles && event.state.selectedFiles.length > 0) {
event.state.selectedFiles.forEach((file) => this.addFavorite(file));
}
} else if (eventId === "soca_tail_log_file") {
if (event.state.selectedFiles && event.state.selectedFiles.length > 0) {
this.listFiles(this.getCwd(-1))
.then(() => {
Utils.openNewTab(`/#/home/file-browser/tail?file=${this.getCwd(-1)}/${event.state.selectedFiles[0].name}&cwd=${this.getCwd(-1)}`);
})
.catch((error) => {
if (error.errorCode === ErrorCodes.DISABLED_FEATURE) {
this.setFlashbarMessage("error", ErrorMessages.DISABLED_FILE_BROWSER_BY_ADMIN);
this.setState({
isFileBrowserEnabled: false,
});
} else {
this.setFlashbarMessage("error", error.message);
}
})
}
}
}}
defaultFileViewActionId={ChonkyActions.EnableListView.id}
disableDefaultFileActions={[ChonkyActions.CopyFiles.id, ChonkyActions.ToggleHiddenFiles.id, ChonkyActions.ToggleShowFoldersFirst.id]}
>
<FileNavbar />
<FileToolbar />
<FileList />
<FileContextMenu />
</FileBrowser>
</div>
</Container>
),
},
{
id: "favorites",
label: "Favorites",
content: (
<Container disableContentPaddings={true}>
<div className="soca-file-browser" style={{ height: "100vh - 200px" }}>
<FileBrowser
darkMode={AppContext.get().isDarkMode()}
folderChain={this.state.folderChain}
files={this.state.favorites}
fileActions={getFavoriteActions()}
disableDragAndDrop={true}
onFileAction={(event) => {
const eventId: string = event.id;
if (event.id === ChonkyActions.OpenFiles.id) {
this.onOpenFavorite(event.payload.targetFile);
} else if (eventId === "soca_submit_job") {
const targetFile = event.state.selectedFiles[0];
this.props.navigate(`/soca/jobs/submit-job?input_location=${targetFile.path}`);
} else if (eventId === "soca_remove_favorite") {
if (event.state.selectedFiles && event.state.selectedFiles.length > 0) {
event.state.selectedFiles.forEach((file) => this.removeFavorite(file));
}
}
}}
defaultFileViewActionId={ChonkyActions.EnableListView.id}
disableDefaultFileActions={[ChonkyActions.CopyFiles.id, ChonkyActions.ToggleHiddenFiles.id, ChonkyActions.ToggleShowFoldersFirst.id]}
>
<FileToolbar />
<FileList />
<FileContextMenu />
</FileBrowser>
</div>
</Container>
),
},
{
id: "file-transfer",
label: "File Transfer",
disabled: !this.state.sshAccess,
content: (
<SpaceBetween size={"s"}>
<Container>
<b>File Transfer Method</b>
<br />
<p>We recommend using below methods to transfer large files to your RES environment. Select an option below.</p>
<Tiles
value={this.state.fileTransferMethod}
columns={3}
items={[
{
label: <b>FileZilla</b>,
description: "Available for download on Windows, MacOS and Linux",
value: "file-zilla",
},
{
label: <b>WinSCP</b>,
description: "Available for download on Windows Only",
value: "winscp",
},
{
label: <b>AWS Transfer</b>,
description: "Your RES environment must be using Amazon EFS to use AWS Transfer",
value: "aws-transfer",
},
]}
onChange={(event) => {
this.setState({
fileTransferMethod: event.detail.value,
});
}}
/>
</Container>
{this.state.fileTransferMethod === "file-zilla" && (
<Container header={<Header variant={"h3"}>FileZilla</Header>}>
<SpaceBetween size={"s"}>
<Box>
<h2>Step 1: Download FileZilla</h2>
<ul>
<li>
<Link external={true} href={"https://filezilla-project.org/download.php?platform=osx"}>
Download FileZilla (MacOS)
</Link>
</li>
<li>
<Link external={true} href={"https://filezilla-project.org/download.php?platform=win64"}>
Download FileZilla (Windows)
</Link>
</li>
<li>
<Link external={true} href={"https://filezilla-project.org/download.php?platform=linux"}>
Download FileZilla (Linux)
</Link>
</li>
</ul>
</Box>
<Box>
<h2>Step 2: Download Key File</h2>
<SpaceBetween size={"l"} direction={"horizontal"}>
<Button variant={"normal"} onClick={() => this.onDownloadPrivateKey("pem")} loading={this.state.downloadPemLoading}>
<FontAwesomeIcon icon={faDownload} /> Download Key File [*.pem] (MacOS / Linux)
</Button>
<Button variant={"normal"} onClick={() => this.onDownloadPrivateKey("ppk")} loading={this.state.downloadPpkLoading}>
<FontAwesomeIcon icon={faDownload} /> Download Key File [*.ppk] (Windows)
</Button>
</SpaceBetween>
</Box>
<Box>
<h2>Step 3: Configure FileZilla</h2>
<p>
Open FileZilla and select <b>File > Site Manager</b> to create a new Site using below options:
</p>
<Container>
<ColumnLayout columns={2}>
<KeyValue title="Host" value={this.state.sshHostIp} />
<KeyValue title="Port" value={"22"} />
<KeyValue title="Protocol" value={"SFTP"} />
<KeyValue title="Logon Type" value={"Key File"} />
<KeyValue title="User" value={AppContext.get().auth().getUsername()} />
<KeyValue title="Key File" value={"/path/to/key-file (downloaded in Step 2)"} />
</ColumnLayout>
</Container>
<p>
<b>Save</b> the settings and click <b>Connect</b>
</p>
</Box>
<Box>
<h2>Step 4: Connect and transfer file to FileZilla</h2>
<p>During your first connection, you will be asked whether or not you want to trust {this.state.sshHostIp}. Check "Always Trust this Host" and Click "Ok".</p>
<p>Once connected, simply drag & drop to upload/download files.</p>
</Box>
</SpaceBetween>
</Container>
)}
{this.state.fileTransferMethod === "winscp" && (
<Container header={<Header variant={"h3"}>WinSCP (Windows)</Header>}>
<SpaceBetween size={"s"}>
<Box>
<Alert onDismiss={() => false} dismissAriaLabel="Close alert" header="Info">
WinSCP is only available on Windows. Please use alternate methods (FileZilla, AWS FTP) if you are running Linux/Mac clients.
</Alert>
<h2>Step 1: Download WinSCP</h2>
<ul>
<li>
<Link external={true} href={"https://winscp.net/eng/download.php"}>
Download WinSCP (Windows)
</Link>
</li>
</ul>
</Box>
<Box>
<h2>Step 2: Download Key File</h2>
<SpaceBetween size={"l"} direction={"horizontal"}>
<Button variant={"normal"} onClick={() => this.onDownloadPrivateKey("pem")} loading={this.state.downloadPemLoading}>