Add list objects UI and integrate with listing and delete api (#310)

Author: cesnietor

pkg/acl/endpoints.go

@@ -40,7 +40,7 @@ var (
 	heal              = "/heal"
 	remoteBuckets     = "/remote-buckets"
 	replication       = "/replication"
-	objectBrowser     = "/object-browser/:bucket?/*"
+	objectBrowser     = "/object-browser/:bucket?"
 	mainObjectBrowser = "/object-browser"
 )
 

portal-ui/bindata_assetfs.go

@@ -1,4 +1,4 @@
-// This file is part of MinIO Buckets Server
+// This file is part of MinIO Console Server
 // Copyright (c) 2020 MinIO, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
@@ -19,7 +19,7 @@ import {
   createStyles,
   StyledProps,
   Theme,
-  withStyles
+  withStyles,
 } from "@material-ui/core/styles";
 
 import history from "../../../history";
@@ -28,7 +28,7 @@ import {
   RouteComponentProps,
   Router,
   Switch,
-  withRouter
+  withRouter,
 } from "react-router-dom";
 import { connect } from "react-redux";
 import { AppState } from "../../../store";
@@ -41,62 +41,62 @@ import ViewBucket from "./ViewBucket/ViewBucket";
 const styles = (theme: Theme) =>
   createStyles({
     root: {
-      display: "flex"
+      display: "flex",
     },
     toolbar: {
       background: theme.palette.background.default,
       color: "black",
-      paddingRight: 24 // keep right padding when drawer closed
+      paddingRight: 24, // keep right padding when drawer closed
     },
     toolbarIcon: {
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
       padding: "0 8px",
-      ...theme.mixins.toolbar
+      ...theme.mixins.toolbar,
     },
     appBar: {
       zIndex: theme.zIndex.drawer + 1,
       transition: theme.transitions.create(["width", "margin"], {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
+        duration: theme.transitions.duration.leavingScreen,
+      }),
     },
 
     menuButton: {
-      marginRight: 36
+      marginRight: 36,
     },
     menuButtonHidden: {
-      display: "none"
+      display: "none",
     },
     title: {
-      flexGrow: 1
+      flexGrow: 1,
     },
     appBarSpacer: {
-      height: "5px"
+      height: "5px",
     },
     content: {
       flexGrow: 1,
       height: "100vh",
-      overflow: "auto"
+      overflow: "auto",
     },
     container: {
       paddingTop: theme.spacing(4),
-      paddingBottom: theme.spacing(4)
+      paddingBottom: theme.spacing(4),
     },
     paper: {
       padding: theme.spacing(2),
       display: "flex",
       overflow: "auto",
-      flexDirection: "column"
+      flexDirection: "column",
     },
     fixedHeight: {
-      minHeight: 240
-    }
+      minHeight: 240,
+    },
   });
 
 const mapState = (state: AppState) => ({
-  open: state.system.sidebarOpen
+  open: state.system.sidebarOpen,
 });
 
 const connector = connect(mapState, { setMenuOpen });

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

@@ -0,0 +1,158 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import React from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  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) =>
+  createStyles({
+    errorBlock: {
+      color: "red",
+    },
+  });
+
+interface IDeleteObjectProps {
+  classes: any;
+  closeDeleteModalAndRefresh: (refresh: boolean) => void;
+  deleteOpen: boolean;
+  selectedObject: string;
+  selectedBucket: string;
+}
+
+interface IDeleteObjectState {
+  deleteLoading: boolean;
+  deleteError: string;
+}
+
+class DeleteObject extends React.Component<
+  IDeleteObjectProps,
+  IDeleteObjectState
+> {
+  state: IDeleteObjectState = {
+    deleteLoading: false,
+    deleteError: "",
+  };
+
+  removeRecord() {
+    const { deleteLoading } = this.state;
+    const { selectedObject, selectedBucket } = this.props;
+    if (deleteLoading) {
+      return;
+    }
+    var recursive = false;
+    if (selectedObject.endsWith("/")) {
+      recursive = true;
+    }
+    this.setState({ deleteLoading: true }, () => {
+      api
+        .invoke(
+          "DELETE",
+          `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObject}&recursive=${recursive}`
+        )
+        .then((res: BucketObjectsList) => {
+          this.setState(
+            {
+              deleteLoading: false,
+              deleteError: "",
+            },
+            () => {
+              this.props.closeDeleteModalAndRefresh(true);
+            }
+          );
+        })
+        .catch((err) => {
+          this.setState({
+            deleteLoading: false,
+            deleteError: err,
+          });
+        });
+    });
+  }
+
+  render() {
+    const { classes, deleteOpen, selectedObject } = this.props;
+    const { deleteLoading, deleteError } = this.state;
+
+    return (
+      <Dialog
+        open={deleteOpen}
+        onClose={() => {
+          this.setState({ deleteError: "" }, () => {
+            this.props.closeDeleteModalAndRefresh(false);
+          });
+        }}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">Delete</DialogTitle>
+        <DialogContent>
+          {deleteLoading && <LinearProgress />}
+          <DialogContentText id="alert-dialog-description">
+            Are you sure you want to delete: <b>{selectedObject}</b>?{" "}
+            {deleteError !== "" && (
+              <React.Fragment>
+                <br />
+                <Typography
+                  component="p"
+                  variant="body1"
+                  className={classes.errorBlock}
+                >
+                  {deleteError}
+                </Typography>
+              </React.Fragment>
+            )}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              this.setState({ deleteError: "" }, () => {
+                this.props.closeDeleteModalAndRefresh(false);
+              });
+            }}
+            color="primary"
+            disabled={deleteLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              this.removeRecord();
+            }}
+            color="secondary"
+            autoFocus
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+export default withStyles(styles)(DeleteObject);