github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/ObjectManager/ObjectManager.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment } from "react";
    18  import { useSelector } from "react-redux";
    19  import { AppState, useAppDispatch } from "../../../../store";
    20  import { Box, RemoveAllIcon, IconButton, Tooltip } from "mds";
    21  import ObjectHandled from "./ObjectHandled";
    22  import {
    23    cleanList,
    24    deleteFromList,
    25  } from "../../ObjectBrowser/objectBrowserSlice";
    26  import VirtualizedList from "../VirtualizedList/VirtualizedList";
    27  
    28  const ObjectManager = () => {
    29    const dispatch = useAppDispatch();
    30  
    31    const objects = useSelector(
    32      (state: AppState) => state.objectBrowser.objectManager.objectsToManage,
    33    );
    34    const managerOpen = useSelector(
    35      (state: AppState) => state.objectBrowser.objectManager.managerOpen,
    36    );
    37    const anonymousMode = useSelector(
    38      (state: AppState) => state.system.anonymousMode,
    39    );
    40  
    41    function renderObject(index: number) {
    42      return (
    43        <ObjectHandled
    44          objectToDisplay={objects[index]}
    45          deleteFromList={(instanceID) => dispatch(deleteFromList(instanceID))}
    46        />
    47      );
    48    }
    49  
    50    return (
    51      <Fragment>
    52        {managerOpen && (
    53          <Box
    54            sx={{
    55              boxShadow: "rgba(0, 0, 0, 0.08) 0 2px 10px",
    56              position: "absolute",
    57              right: 20,
    58              top: 62,
    59              width: 400,
    60              overflowY: "hidden",
    61              overflowX: "hidden",
    62              borderRadius: 3,
    63              zIndex: 1000,
    64              padding: 0,
    65              height: 0,
    66              transitionDuration: "0.3s",
    67              visibility: "hidden",
    68              "&.open": {
    69                visibility: "visible",
    70                minHeight: 400,
    71              },
    72              "&.downloadContainerAnonymous": {
    73                top: 70,
    74              },
    75            }}
    76            className={`${anonymousMode ? "downloadContainerAnonymous" : ""} ${
    77              managerOpen ? "open" : ""
    78            }`}
    79            useBackground
    80            withBorders
    81          >
    82            <Box
    83              sx={{
    84                position: "absolute",
    85                right: 28,
    86                top: 25,
    87              }}
    88            >
    89              <Tooltip tooltip={"Clean Completed Objects"} placement="bottom">
    90                <IconButton
    91                  aria-label={"Clear Completed List"}
    92                  onClick={() => dispatch(cleanList())}
    93                >
    94                  <RemoveAllIcon />
    95                </IconButton>
    96              </Tooltip>
    97            </Box>
    98            <Box
    99              sx={{
   100                fontSize: 16,
   101                fontWeight: "bold",
   102                textAlign: "left",
   103                paddingBottom: 20,
   104                borderBottom: "#E2E2E2 1px solid",
   105                margin: "25px 30px 5px 30px",
   106              }}
   107            >
   108              Downloads / Uploads
   109            </Box>
   110            <Box
   111              sx={{
   112                overflowY: "auto",
   113                overflowX: "hidden",
   114                minHeight: 250,
   115                maxHeight: 335,
   116                height: "100%",
   117                width: "100%",
   118                display: "flex",
   119                flexDirection: "column",
   120              }}
   121            >
   122              <VirtualizedList
   123                rowRenderFunction={renderObject}
   124                totalItems={objects.length}
   125                defaultHeight={110}
   126              />
   127            </Box>
   128          </Box>
   129        )}
   130      </Fragment>
   131    );
   132  };
   133  
   134  export default ObjectManager;