github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.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 get from "lodash/get";
    19  import styled from "styled-components";
    20  import { niceBytes } from "../../../../common/utils";
    21  import { Box, breakPoints, CircleIcon, SizeChart } from "mds";
    22  import { ServerDrives } from "api/consoleApi";
    23  import { STATUS_COLORS } from "./Utils";
    24  
    25  interface ICardProps {
    26    drive: ServerDrives;
    27  }
    28  
    29  const driveStatusColor = (health_status: string) => {
    30    switch (health_status) {
    31      case "offline":
    32        return STATUS_COLORS.RED;
    33      case "ok":
    34        return STATUS_COLORS.GREEN;
    35      default:
    36        return STATUS_COLORS.YELLOW;
    37    }
    38  };
    39  
    40  const DataContainerMain = styled.div(({ theme }) => ({
    41    flex: 1,
    42    display: "flex",
    43    alignItems: "center",
    44    paddingLeft: "20px",
    45    marginTop: "10px",
    46    flexFlow: "row",
    47    "& .info-label": {
    48      color: get(theme, "mutedText", "#87888d"),
    49      fontSize: "12px",
    50      textAlign: "center",
    51    },
    52    "& .info-value": {
    53      fontSize: "18px",
    54      color: get(theme, "signalColors.main", "#07193E"),
    55      display: "flex",
    56      fontWeight: 500,
    57      overflow: "hidden",
    58      textOverflow: "ellipsis",
    59      whiteSpace: "nowrap",
    60    },
    61    [`@media (max-width: ${breakPoints.sm}px)`]: {
    62      flexFlow: "column",
    63    },
    64  }));
    65  
    66  const DriveInfoItem = ({ drive }: ICardProps) => {
    67    const totalSpace = drive.totalSpace || 0;
    68    const usedSpace = drive.usedSpace || 0;
    69  
    70    return (
    71      <Box
    72        withBorders
    73        sx={{
    74          display: "flex",
    75          flex: 1,
    76          alignItems: "center",
    77          paddingBottom: "10px",
    78          padding: "20px",
    79        }}
    80      >
    81        <Box
    82          sx={{
    83            display: "flex",
    84            flexFlow: "column",
    85            marginLeft: "10px",
    86            flex: 1,
    87          }}
    88        >
    89          <Box
    90            sx={{
    91              fontSize: "14px",
    92              fontWeight: 400,
    93              display: "flex",
    94              alignItems: "center",
    95  
    96              "& .min-icon": {
    97                marginRight: "10px",
    98                height: "10px",
    99                width: "10px",
   100                fill: driveStatusColor(drive.state || ""),
   101                flexShrink: 0,
   102              },
   103  
   104              "& .drive-endpoint": {
   105                overflow: "hidden",
   106                textOverflow: "ellipsis",
   107                whiteSpace: "normal",
   108                wordBreak: "break-all",
   109                marginRight: "8px",
   110                fontWeight: 600,
   111                fontSize: 16,
   112                [`@media (max-width: ${breakPoints.sm}px)`]: {
   113                  fontSize: 10,
   114                },
   115              },
   116            }}
   117          >
   118            <div className="drive-endpoint">{drive.endpoint || ""}</div>
   119            {drive.state && <CircleIcon />}
   120          </Box>
   121  
   122          <DataContainerMain>
   123            <Box sx={{ flex: 1 }}>
   124              <SizeChart
   125                label={true}
   126                usedBytes={usedSpace}
   127                totalBytes={totalSpace}
   128                width={"120"}
   129                height={"120"}
   130              />
   131            </Box>
   132  
   133            <Box
   134              sx={{
   135                display: "flex",
   136                gap: "5%",
   137                alignItems: "center",
   138                flex: 2,
   139                flexGrow: 1,
   140              }}
   141            >
   142              <Box
   143                sx={{
   144                  display: "flex",
   145                  flexFlow: "column",
   146                }}
   147              >
   148                <div className="info-value">
   149                  {niceBytes(
   150                    drive.totalSpace ? drive.totalSpace.toString() : "0",
   151                  )}
   152                </div>
   153                <label className="info-label">Capacity</label>
   154              </Box>
   155  
   156              <Box
   157                sx={{
   158                  display: "flex",
   159                  flexFlow: "column",
   160                }}
   161              >
   162                <div className="info-value">
   163                  {niceBytes(drive.usedSpace ? drive.usedSpace.toString() : "0")}
   164                </div>
   165                <label className="info-label">Used</label>
   166              </Box>
   167              <Box
   168                sx={{
   169                  display: "flex",
   170                  flexFlow: "column",
   171                }}
   172              >
   173                <div className="info-value">
   174                  {niceBytes(
   175                    drive.availableSpace ? drive.availableSpace.toString() : "0",
   176                  )}
   177                </div>
   178                <label className="info-label">Available</label>
   179              </Box>
   180            </Box>
   181          </DataContainerMain>
   182        </Box>
   183      </Box>
   184    );
   185  };
   186  
   187  export default DriveInfoItem;