Add download objects api and integrate it with UI (#321)

Author: cesnietor

portal-ui/bindata_assetfs.go

@@ -33,7 +33,6 @@ import { CreateIcon } from "../../../../icons";
 import { niceBytes } from "../../../../common/utils";
 import { AppState } from "../../../../store";
 import { connect } from "react-redux";
-import { logMessageReceived, logResetMessages } from "../../Logs/actions";
 import { addBucketOpen, addBucketReset } from "../actions";
 import {
   actionsTray,

portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx

@@ -26,7 +26,6 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../../../../common/api";
-import { BucketObjectsList } from "../ListObjects/types";
 import Typography from "@material-ui/core/Typography";
 
 const styles = (theme: Theme) =>
@@ -68,13 +67,14 @@ class DeleteObject extends React.Component<
     if (selectedObject.endsWith("/")) {
       recursive = true;
     }
+
     this.setState({ deleteLoading: true }, () => {
       api
         .invoke(
           "DELETE",
           `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObject}&recursive=${recursive}`
         )
-        .then((res: BucketObjectsList) => {
+        .then((res: any) => {
           this.setState(
             {
               deleteLoading: false,
@@ -142,10 +142,12 @@ class DeleteObject extends React.Component<
           </Button>
           <Button
             onClick={() => {
-              this.removeRecord();
+              this.setState({ deleteError: "" }, () => {
+                this.removeRecord();
+              });
             }}
             color="secondary"
-            autoFocus
+            disabled={deleteLoading}
           >
             Delete
           </Button>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx

@@ -36,6 +36,7 @@ import {
   searchField,
 } from "../../../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../../../Common/PageHeader/PageHeader";
+import storage from "local-storage-fallback";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -140,6 +141,38 @@ class ListObjects extends React.Component<
     });
   }
 
+  download(bucketName: string, objectName: string) {
+    var anchor = document.createElement("a");
+    document.body.appendChild(anchor);
+    const token: string = storage.getItem("token")!;
+    var xhr = new XMLHttpRequest();
+
+    xhr.open(
+      "GET",
+      `/api/v1/buckets/${bucketName}/objects/download?prefix=${objectName}`,
+      true
+    );
+    xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+    xhr.responseType = "blob";
+
+    xhr.onload = function(e) {
+      if (this.status == 200) {
+        var blob = new Blob([this.response], {
+          type: "octet/stream",
+        });
+        var blobUrl = window.URL.createObjectURL(blob);
+
+        anchor.href = blobUrl;
+        anchor.download = objectName;
+
+        anchor.click();
+        window.URL.revokeObjectURL(blobUrl);
+        anchor.remove();
+      }
+    };
+    xhr.send();
+  }
+
   bucketFilter(): void {}
 
   render() {
@@ -160,7 +193,12 @@ class ListObjects extends React.Component<
       this.setState({ deleteOpen: true, selectedObject: object });
     };
 
+    const downloadObject = (object: string) => {
+      this.download(selectedBucket, object);
+    };
+
     const tableActions = [
+      { type: "download", onClick: downloadObject, sendOnlyId: true },
       { type: "delete", onClick: confirmDeleteObject, sendOnlyId: true },
     ];
 

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -22,6 +22,8 @@ import DeleteIcon from "./TableActionIcons/DeleteIcon";
 import DescriptionIcon from "./TableActionIcons/DescriptionIcon";
 import CloudIcon from "./TableActionIcons/CloudIcon";
 import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
+import GetAppIcon from "@material-ui/icons/GetApp";
+import SvgIcon from "@material-ui/core/SvgIcon";
 import { Link } from "react-router-dom";
 
 interface IActionButton {
@@ -48,6 +50,10 @@ const defineIcon = (type: string, selected: boolean) => {
       return <CloudIcon active={selected} />;
     case "console":
       return <ConsoleIcon active={selected} />;
+    case "download":
+      return (
+        <SvgIcon component={GetAppIcon} fontSize="small" color="primary" />
+      );
   }
 
   return null;

portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx

@@ -19,6 +19,7 @@ package restapi
 import (
 	"context"
 	"fmt"
+	"io"
 	"strings"
 	"time"
 
@@ -136,6 +137,7 @@ type MCClient interface {
 	watch(ctx context.Context, options mc.WatchOptions) (*mc.WatchObject, *probe.Error)
 	remove(ctx context.Context, isIncomplete, isRemoveBucket, isBypass bool, contentCh <-chan *mc.ClientContent) <-chan *probe.Error
 	list(ctx context.Context, opts mc.ListOptions) <-chan *mc.ClientContent
+	get(ctx context.Context, opts mc.GetOptions) (io.ReadCloser, *probe.Error)
 }
 
 // Interface implementation
@@ -172,6 +174,10 @@ func (c mcClient) list(ctx context.Context, opts mc.ListOptions) <-chan *mc.Clie
 	return c.client.List(ctx, opts)
 }
 
+func (c mcClient) get(ctx context.Context, opts mc.GetOptions) (io.ReadCloser, *probe.Error) {
+	return c.client.Get(ctx, opts)
+}
+
 // ConsoleCredentials interface with all functions to be implemented
 // by mock when testing, it should include all needed consoleCredentials.Login api calls
 // that are used within this project.