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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 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 styled from "styled-components";
    19  import get from "lodash/get";
    20  import { Box } from "mds";
    21  import { Link } from "react-router-dom";
    22  import { widgetCommon } from "../Common/FormComponents/common/styleLibrary";
    23  
    24  export interface ISubInterface {
    25    message: string;
    26    fontWeight?: "normal" | "bold";
    27  }
    28  
    29  interface ICommonCard {
    30    title: string;
    31    metricValue: any;
    32    metricUnit?: string;
    33    subMessage?: ISubInterface;
    34    moreLink?: string;
    35    rightComponent?: any;
    36    extraMargin?: boolean;
    37  }
    38  
    39  const CommonCardItem = styled.div(({ theme }) => ({
    40    ...widgetCommon(theme),
    41    "& .metricText": {
    42      fontSize: 70,
    43      lineHeight: 1.1,
    44      color: get(theme, "signalColors.main", "#07193E"),
    45      fontWeight: "bold",
    46    },
    47    "& .unitText": {
    48      fontSize: 10,
    49      color: get(theme, "mutedText", "#87888d"),
    50      fontWeight: "normal",
    51    },
    52    "& .subHeaderContainer": {
    53      display: "flex",
    54      flexDirection: "row",
    55      justifyContent: "space-between",
    56      alignItems: "center",
    57    },
    58    "& .subMessage": {
    59      fontSize: 10,
    60      color: get(theme, "mutedText", "#87888d"),
    61      "&.bold": {
    62        fontWeight: "bold",
    63      },
    64    },
    65    "& .headerContainer": {
    66      display: "flex",
    67      justifyContent: "space-between",
    68    },
    69    "& .viewAll": {
    70      fontSize: 10,
    71      color: get(theme, "signalColors.danger", "#C83B51"),
    72      textTransform: "capitalize",
    73  
    74      "& a, & a:hover, & a:visited, & a:active": {
    75        color: get(theme, "signalColors.danger", "#C83B51"),
    76      },
    77    },
    78  }));
    79  
    80  const CommonCard = ({
    81    title,
    82    metricValue,
    83    metricUnit,
    84    subMessage,
    85    moreLink,
    86    rightComponent,
    87    extraMargin = false,
    88  }: ICommonCard) => {
    89    const SubHeader = () => {
    90      return (
    91        <Fragment>
    92          <div className={"subHeaderContainer"}>
    93            <div className={"leftSide"}>
    94              <div>
    95                <span className={"metricText"}>
    96                  {metricValue}
    97                  <span className={"unitText"}>{metricUnit}</span>
    98                </span>
    99              </div>
   100              {subMessage && (
   101                <Box
   102                  sx={{
   103                    fontWeight: subMessage.fontWeight || "normal",
   104                  }}
   105                >
   106                  {subMessage.message}
   107                </Box>
   108              )}
   109            </div>
   110            <div className={"rightSide"}>{rightComponent}</div>
   111          </div>
   112        </Fragment>
   113      );
   114    };
   115  
   116    const Header = () => {
   117      return (
   118        <Fragment>
   119          <div className={"headerContainer"}>
   120            <span className={"titleContainer"}>{title}</span>
   121            {moreLink && (
   122              <Fragment>
   123                <span className={"viewAll"}>
   124                  <Link to={moreLink}>View All</Link>
   125                </span>
   126              </Fragment>
   127            )}
   128          </div>
   129        </Fragment>
   130      );
   131    };
   132  
   133    return (
   134      <Fragment>
   135        <Box
   136          withBorders
   137          sx={{
   138            height: 200,
   139            padding: 16,
   140            margin: extraMargin ? "10px 20px 10px 0" : "",
   141          }}
   142        >
   143          {metricValue !== "" && (
   144            <CommonCardItem>
   145              <Header />
   146              <SubHeader />
   147            </CommonCardItem>
   148          )}
   149        </Box>
   150      </Fragment>
   151    );
   152  };
   153  
   154  export default CommonCard;