X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/515ca43f5ea8c913b4c17224698a15778fea6c95..e1e17729d024637f9f3392611c9a59dc31e5db23:/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx diff --git a/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx b/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx index 1aa9a15b..8e9edac1 100644 --- a/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx +++ b/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx @@ -2,20 +2,29 @@ // // SPDX-License-Identifier: AGPL-3.0 -import * as React from "react"; +import React from "react"; import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, CardHeader, Tab, Tabs } from '@material-ui/core'; -import { withDialog } from "~/store/dialog/with-dialog"; -import { COLLECTION_WEBDAV_S3_DIALOG_NAME, WebDavS3InfoDialogData } from '~/store/collections/collection-info-actions'; -import { WithDialogProps } from '~/store/dialog/with-dialog'; +import { withDialog } from "store/dialog/with-dialog"; +import { COLLECTION_WEBDAV_S3_DIALOG_NAME, WebDavS3InfoDialogData } from 'store/collections/collection-info-actions'; +import { WithDialogProps } from 'store/dialog/with-dialog'; import { compose } from 'redux'; -import { DetailsAttribute } from "~/components/details-attribute/details-attribute"; +import { DetailsAttribute } from "components/details-attribute/details-attribute"; +import { DownloadIcon } from "components/icon/icon"; +import { DefaultCodeSnippet } from "components/default-code-snippet/default-code-snippet"; -type CssRules = 'details'; +export type CssRules = 'details' | 'downloadButton' | 'detailsAttrValWithCode'; const styles: StyleRulesCallback = theme => ({ details: { marginLeft: theme.spacing.unit * 3, marginRight: theme.spacing.unit * 3, + }, + downloadButton: { + marginTop: theme.spacing.unit * 2, + }, + detailsAttrValWithCode: { + display: "flex", + alignItems: "center", } }); @@ -40,6 +49,60 @@ function TabPanel(props: TabPanelData) { ); } +const isValidIpAddress = (ipAddress: string): Boolean => { + if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipAddress)) { + return true; + } + + return false; +}; + +const mountainduckTemplate = ({ + uuid, + username, + cyberDavStr, + collectionsUrl +}: any) => { + + return ` + + + + Protocol + davs + Provider + iterate GmbH + UUID + ${uuid} + Hostname + ${collectionsUrl.replace('https://', ``).replace('*', uuid).split(':')[0]} + Port + ${(cyberDavStr.split(':')[2] || '443').split('/')[0]} + Username + ${username}${isValidIpAddress(collectionsUrl.replace('https://', ``).split(':')[0])? + ` + Path + /c=${uuid}` : ''} + Labels + + + + `.split(/\r?\n/).join('\n'); +}; + +const downloadMountainduckFileHandler = (filename: string, text: string) => { + const element = document.createElement('a'); + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); + element.setAttribute('download', filename); + + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + + document.body.removeChild(element); +}; + export const WebDavS3InfoDialog = compose( withDialog(COLLECTION_WEBDAV_S3_DIALOG_NAME), withStyles(styles), @@ -57,18 +120,19 @@ export const WebDavS3InfoDialog = compose( } else { winDav = new URL(props.data.downloadUrl); cyberDav = new URL(props.data.downloadUrl); - winDav.pathname = `/by_id/${props.data.uuid}/`; - cyberDav.pathname = `/by_id/${props.data.uuid}/`; + winDav.pathname = `/by_id/${props.data.uuid}`; + cyberDav.pathname = `/by_id/${props.data.uuid}`; } - cyberDav.protocol = { "http:": "dav:", "https:": "davs:" }[cyberDav.protocol]; + cyberDav.username = props.data.username; + const cyberDavStr = "dav" + cyberDav.toString().slice(4); const s3endpoint = new URL(props.data.collectionsUrl.replace(/\/\*(--[^.]+)?\./, "/")); const sp = props.data.token.split("/"); let tokenUuid; let tokenSecret; - if (sp.length === 3 && sp[0] === "v2" && props.data.homeCluster === props.data.localCluster) { + if (sp.length === 3 && sp[0] === "v2" && sp[1].slice(0, 5) === props.data.localCluster) { tokenUuid = sp[1]; tokenSecret = sp[2]; } else { @@ -76,26 +140,37 @@ export const WebDavS3InfoDialog = compose( tokenSecret = tokenUuid; } + const isCollection = (props.data.uuid.indexOf("-4zz18-") === 5); + + let activeTab = props.data.activeTab; + if (!isCollection) { + activeTab = 2; + } + + const wgetCommand = `wget --http-user=${props.data.username} --http-passwd=${props.data.token} --mirror --no-parent --no-host --cut-dirs=0 ${winDav.toString()}`; + const curlCommand = `curl -O -u ${props.data.username}:${props.data.token} ${winDav.toString()}`; + return + title={`Open with 3rd party client`} />
- - - - + + {isCollection && } + {isCollection && } + + {isCollection && } - +

Settings

{winDav.toString()}} + value={{winDav.toString()}} copyValue={winDav.toString()} /> Open File Explorer
  • Click on "This PC", then go to Computer → Add a Network Location
  • Click Next, then choose "Add a custom network location", then click Next
    • +
  • Use the "internet address" and credentials listed under Settings, above

    • MacOS

    1. Open Finder
    2. Click Go → Connect to server
      3. +
    3. Use the "internet address" and credentials listed under Settings, above
     - + {cyberDav.toString()}} - copyValue={cyberDav.toString()} /> + value={{cyberDavStr}} + copyValue={cyberDavStr} /> -

    Gnome

    +

    Cyberduck/Mountain Duck

    + + + +

    GNOME

    1. Open Files
    2. Select +Other Locations
      3. @@ -147,7 +237,7 @@ export const WebDavS3InfoDialog = compose( - + + + + + + + + + + + +

      + Note: This curl command downloads single files. + Append the desired filename to the end of the URL. +

      + +       +