github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/BasicDashboard/ServersList.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 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 from "react";
    18  import { Accordion, Box, breakPoints } from "mds";
    19  import ServerInfoItem from "./ServerInfoItem";
    20  import DriveInfoItem from "./DriveInfoItem";
    21  import { ServerProperties } from "api/consoleApi";
    22  
    23  const ServersList = ({ data }: { data: ServerProperties[] }) => {
    24    const [expanded, setExpanded] = React.useState<string>(
    25      data.length > 1 ? "" : data[0].endpoint + "-0",
    26    );
    27  
    28    const handleClick = (key: string) => {
    29      setExpanded(key);
    30    };
    31  
    32    return (
    33      <Box>
    34        <Box
    35          sx={{
    36            fontSize: 18,
    37            lineHeight: 2,
    38            fontWeight: 700,
    39          }}
    40        >
    41          Servers ({data.length})
    42        </Box>
    43        <Box>
    44          {data.map((serverInfo, index) => {
    45            const key = `${serverInfo.endpoint}-${index}`;
    46            const isExpanded = expanded === key;
    47            return (
    48              <Accordion
    49                key={key}
    50                expanded={isExpanded}
    51                onTitleClick={() => {
    52                  if (!isExpanded) {
    53                    handleClick(key);
    54                  } else {
    55                    handleClick("");
    56                  }
    57                }}
    58                id={"key"}
    59                title={<ServerInfoItem server={serverInfo} index={index} />}
    60                sx={{ marginBottom: 15 }}
    61              >
    62                <Box
    63                  useBackground
    64                  sx={{ padding: "10px 30px", fontWeight: "bold" }}
    65                >
    66                  Drives ({serverInfo.drives?.length})
    67                </Box>
    68                <Box
    69                  sx={{
    70                    flex: 1,
    71                    display: "flex",
    72                    flexDirection: "column",
    73                    padding: "15px 30px",
    74                    gap: 15,
    75                    [`@media (max-width: ${breakPoints.sm}px)`]: {
    76                      padding: "10px 10px",
    77                    },
    78                  }}
    79                >
    80                  {serverInfo.drives?.map((driveInfo, index) => {
    81                    return (
    82                      <DriveInfoItem
    83                        drive={driveInfo}
    84                        key={`${driveInfo.endpoint}-${index}`}
    85                      />
    86                    );
    87                  })}
    88                </Box>
    89              </Accordion>
    90            );
    91          })}
    92        </Box>
    93      </Box>
    94    );
    95  };
    96  
    97  export default ServersList;