github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.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, { Fragment } from "react";
    18  import get from "lodash/get";
    19  import styled from "styled-components";
    20  import { Box, HelpTip } from "mds";
    21  import { Cell, Pie, PieChart } from "recharts";
    22  
    23  const ReportedUsageMain = styled.div(({ theme }) => ({
    24    maxHeight: "110px",
    25    display: "flex",
    26    alignItems: "center",
    27    justifyContent: "space-between",
    28    fontSize: "19px",
    29  
    30    padding: "10px",
    31    "& .unit-value": {
    32      fontSize: "50px",
    33      color: get(theme, "signalColors.main", "#07193E"),
    34    },
    35    "& .unit-type": {
    36      fontSize: "18px",
    37      color: get(theme, "mutedText", "#87888d"),
    38      marginTop: "20px",
    39      marginLeft: "5px",
    40    },
    41  
    42    "& .usage-label": {
    43      display: "flex",
    44      alignItems: "center",
    45      fontSize: "16px",
    46      fontWeight: 600,
    47      marginRight: "20px",
    48      marginTop: "-10px",
    49      "& .min-icon": {
    50        marginLeft: "10px",
    51        height: 16,
    52        width: 16,
    53      },
    54    },
    55  }));
    56  export const usageClarifyingContent = (
    57    <Fragment>
    58      <div>
    59        <strong> Not what you expected?</strong>
    60        <br />
    61        This Usage value is comparable to <strong>mc du --versions</strong> which
    62        represents the size of all object versions that exist in the buckets.
    63        <br />
    64        Running{" "}
    65        <a
    66          target="_blank"
    67          href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
    68        >
    69          mc du
    70        </a>{" "}
    71        without the <strong>--versions</strong> flag or{" "}
    72        <a target="_blank" href="https://man7.org/linux/man-pages/man1/df.1.html">
    73          df
    74        </a>{" "}
    75        will provide different values corresponding to the size of all{" "}
    76        <strong>current</strong> versions and the physical disk space occupied
    77        respectively.
    78      </div>
    79    </Fragment>
    80  );
    81  
    82  const ReportedUsage = ({
    83    usageValue,
    84    total,
    85    unit,
    86  }: {
    87    usageValue: string;
    88    total: number | string;
    89    unit: string;
    90  }) => {
    91    const plotValues = [
    92      { value: total, color: "#D6D6D6", label: "Free Space" },
    93      {
    94        value: usageValue,
    95        color: "#073052",
    96        label: "Used Space",
    97      },
    98    ];
    99  
   100    return (
   101      <ReportedUsageMain>
   102        <Box>
   103          <div className="usage-label">
   104            <span>Reported Usage</span>
   105          </div>
   106  
   107          <HelpTip content={usageClarifyingContent} placement="left">
   108            <label
   109              className={"unit-value"}
   110              style={{
   111                fontWeight: 600,
   112              }}
   113            >
   114              {total}
   115            </label>
   116            <label className={"unit-type"}>{unit}</label>
   117          </HelpTip>
   118        </Box>
   119  
   120        <Box>
   121          <Box sx={{ flex: 1 }}>
   122            <div
   123              style={{
   124                position: "relative",
   125                width: 105,
   126                height: 105,
   127                top: "-8px",
   128              }}
   129            >
   130              <div>
   131                <PieChart width={105} height={105}>
   132                  <Pie
   133                    data={plotValues}
   134                    cx={"50%"}
   135                    cy={"50%"}
   136                    dataKey="value"
   137                    outerRadius={45}
   138                    innerRadius={35}
   139                    startAngle={-70}
   140                    endAngle={360}
   141                    animationDuration={1}
   142                  >
   143                    {plotValues.map((entry, index) => (
   144                      <Cell key={`cellCapacity-${index}`} fill={entry.color} />
   145                    ))}
   146                  </Pie>
   147                </PieChart>
   148              </div>
   149            </div>
   150          </Box>
   151        </Box>
   152      </ReportedUsageMain>
   153    );
   154  };
   155  
   156  export default ReportedUsage;