github.com/minio/console@v1.4.1/web-app/src/screens/Console/Speedtest/SpeedTestUnit.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  import React from "react";
    17  import styled from "styled-components";
    18  import get from "lodash/get";
    19  import { calculateBytes } from "../../../common/utils";
    20  
    21  const SpeedTestUnitBase = styled.table(({ theme }) => ({
    22    "& .objectGeneralTitle": {
    23      lineHeight: 1,
    24      fontSize: 50,
    25      color: get(theme, "mutedText", "#87888d"),
    26    },
    27    "& .generalUnit": {
    28      color: get(theme, "fontColor", "#000"),
    29      fontSize: 12,
    30      fontWeight: "bold",
    31    },
    32    "& .testUnitRes": {
    33      fontSize: 60,
    34      color: get(theme, "signalColors.main", "#07193E"),
    35      fontWeight: "bold",
    36      textAlign: "right",
    37    },
    38    "& .metricValContainer": {
    39      lineHeight: 1,
    40      verticalAlign: "bottom",
    41    },
    42    "& .objectsUnitRes": {
    43      fontSize: 22,
    44      marginTop: 6,
    45      color: get(theme, "mutedText", "#87888d"),
    46      fontWeight: "bold",
    47      textAlign: "right",
    48    },
    49    "& .objectsUnit": {
    50      color: get(theme, "mutedText", "#87888d"),
    51      fontSize: 16,
    52      fontWeight: "bold",
    53    },
    54    "& .iconTd": {
    55      verticalAlign: "bottom",
    56    },
    57  }));
    58  
    59  const SpeedTestUnit = ({
    60    title,
    61    icon,
    62    throughput,
    63    objects,
    64  }: {
    65    title: any;
    66    icon: any;
    67    throughput: string;
    68    objects: number;
    69  }) => {
    70    const avg = calculateBytes(throughput);
    71  
    72    let total = "0";
    73    let unit = "";
    74  
    75    if (avg.total !== 0) {
    76      total = avg.total.toString();
    77      unit = `${avg.unit}/s`;
    78    }
    79  
    80    return (
    81      <SpeedTestUnitBase>
    82        <tr>
    83          <td className={"objectGeneralTitle"}>{title}</td>
    84          <td className={"iconTd"}>{icon}</td>
    85        </tr>
    86        <tr>
    87          <td className={`metricValContainer testUnitRes`}>{total}</td>
    88          <td className={`metricValContainer generalUnit`}>{unit}</td>
    89        </tr>
    90        <tr>
    91          <td className={`metricValContainer objectsUnitRes`}>{objects}</td>
    92          <td className={`metricValContainer objectsUnit`}>
    93            {objects !== 0 && "Objs/S"}
    94          </td>
    95        </tr>
    96      </SpeedTestUnitBase>
    97    );
    98  };
    99  export default SpeedTestUnit;