github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/BasicDashboard/StatusCountCard.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 styled from "styled-components";
    19  import get from "lodash/get";
    20  import { Box, breakPoints, CircleIcon } from "mds";
    21  
    22  const StatusCountBase = styled.div(({ theme }) => ({
    23    fontFamily: "Inter,sans-serif",
    24    maxWidth: "321px",
    25    display: "flex",
    26    marginLeft: "auto",
    27    marginRight: "auto",
    28    cursor: "default",
    29    color: get(theme, "signalColors.main", "#07193E"),
    30    "& .mainBox": {
    31      flex: 1,
    32      display: "flex",
    33      padding: "0 8px 0 8px",
    34      [`@media (max-width: ${breakPoints.sm}px)`]: {
    35        padding: "0 10px 0 10px",
    36      },
    37      "& .indicatorIcon": {
    38        width: "20px",
    39        height: "20px",
    40        marginTop: "8px",
    41        maxWidth: "26px",
    42        "& .min-icon": {
    43          width: "16px",
    44          height: "16px",
    45        },
    46      },
    47      "& .indicatorContainer": {
    48        flex: 1,
    49        display: "flex",
    50        flexFlow: "column",
    51        "& .indicatorLabel": {
    52          fontSize: "16px",
    53          fontWeight: 600,
    54        },
    55        "& .counterIndicator": {
    56          display: "flex",
    57          alignItems: "center",
    58          gap: "5px",
    59          justifyContent: "space-between",
    60          paddingBottom: 0,
    61          fontSize: "55px",
    62          [`@media (max-width: ${breakPoints.sm}px)`]: {
    63            paddingBottom: 10,
    64            fontSize: "35px",
    65          },
    66          [`@media (max-width: ${breakPoints.lg}px)`]: {
    67            fontSize: "45px",
    68          },
    69          [`@media (max-width: ${breakPoints.xl}px)`]: {
    70            fontSize: "50px",
    71          },
    72          flexFlow: "row",
    73          fontWeight: 600,
    74  
    75          "& .stat-text": {
    76            color: get(theme, "mutedText", "#87888D"),
    77            fontSize: "12px",
    78            marginTop: "8px",
    79          },
    80          "& .stat-value": {
    81            textAlign: "center",
    82            height: "50px",
    83          },
    84          "& .min-icon": {
    85            marginRight: "8px",
    86            marginTop: "8px",
    87            height: "10px",
    88            width: "10px",
    89          },
    90        },
    91        "& .onlineCounter": {
    92          display: "flex",
    93          alignItems: "center",
    94          marginTop: "5px",
    95          "& .min-icon": {
    96            fill: get(theme, "signalColors.good", "#4CCB92"),
    97          },
    98        },
    99        "& .offlineCount": {
   100          display: "flex",
   101          alignItems: "center",
   102          marginTop: "8px",
   103          "& .min-icon": {
   104            fill: get(theme, "signalColors.danger", "#C51B3F"),
   105          },
   106        },
   107      },
   108    },
   109  }));
   110  
   111  export const StatusCountCard = ({
   112    onlineCount = 0,
   113    offlineCount = 0,
   114    icon = null,
   115    label = "",
   116    okStatusText = "Online",
   117    notOkStatusText = "Offline",
   118  }: {
   119    icon: any;
   120    onlineCount: number;
   121    offlineCount: number;
   122    label: string;
   123    okStatusText?: string;
   124    notOkStatusText?: string;
   125  }) => {
   126    return (
   127      <StatusCountBase>
   128        <Box className={"mainBox"}>
   129          <Box className={"indicatorContainer"}>
   130            <Box className={"indicatorLabel"}>{label}</Box>
   131  
   132            <Box className={"counterIndicator"}>
   133              <Box>
   134                <Box className="stat-value">{onlineCount}</Box>
   135                <Box className={"onlineCounter"}>
   136                  <CircleIcon />
   137                  <div className="stat-text">{okStatusText}</div>
   138                </Box>
   139              </Box>
   140  
   141              <Box>
   142                <Box className="stat-value">{offlineCount}</Box>
   143                <Box className={"offlineCount"}>
   144                  <CircleIcon />{" "}
   145                  <div className="stat-text">{notOkStatusText}</div>
   146                </Box>
   147              </Box>
   148            </Box>
   149          </Box>
   150          <Box className={"indicatorIcon"}>{icon}</Box>
   151        </Box>
   152      </StatusCountBase>
   153    );
   154  };
   155  
   156  export default StatusCountCard;