github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/NetworkItem.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 from "react";
    18  import styled from "styled-components";
    19  import get from "lodash/get";
    20  import { Box, breakPoints, SpeedtestIcon } from "mds";
    21  import { IDashboardPanel } from "../types";
    22  import SingleValueWidget from "./SingleValueWidget";
    23  import NetworkGetItem from "./NetworkGetItem";
    24  import NetworkPutItem from "./NetworkPutItem";
    25  
    26  const NetworkItemBase = styled.div(({ theme }) => ({
    27    flex: 1,
    28    display: "flex",
    29    alignItems: "center",
    30    flexFlow: "row",
    31    gap: "15px",
    32    "& .unitText": {
    33      fontSize: "14px",
    34      color: get(theme, "mutedText", "#87888d"),
    35      marginLeft: "5px",
    36    },
    37    "& .unit": {
    38      color: get(theme, "mutedText", "#87888d"),
    39      fontSize: "18px",
    40      marginLeft: "12px",
    41      marginTop: "10px",
    42    },
    43    [`@media (max-width: ${breakPoints.sm}px)`]: {
    44      flexFlow: "column",
    45    },
    46  }));
    47  
    48  const NetworkItem = ({
    49    value,
    50    timeStart,
    51    timeEnd,
    52    apiPrefix,
    53  }: {
    54    value: IDashboardPanel;
    55    timeStart: any;
    56    timeEnd: any;
    57    apiPrefix: string;
    58  }) => {
    59    const { mergedPanels = [] } = value;
    60    const [leftPanel, rightPanel] = mergedPanels;
    61  
    62    const rightCmp = (
    63      <SingleValueWidget
    64        title={value.title}
    65        panelItem={leftPanel}
    66        timeStart={timeStart}
    67        timeEnd={timeEnd}
    68        apiPrefix={apiPrefix}
    69        renderFn={({ valueToRender, loading, title, id }) => {
    70          return (
    71            <NetworkPutItem
    72              value={valueToRender}
    73              loading={loading}
    74              title={title}
    75              id={id}
    76            />
    77          );
    78        }}
    79      />
    80    );
    81    const leftCmp = (
    82      <SingleValueWidget
    83        title={value.title}
    84        panelItem={rightPanel}
    85        timeStart={timeStart}
    86        timeEnd={timeEnd}
    87        apiPrefix={apiPrefix}
    88        renderFn={({ valueToRender, loading, title, id }) => {
    89          return (
    90            <NetworkGetItem
    91              value={valueToRender}
    92              loading={loading}
    93              title={title}
    94              id={id}
    95            />
    96          );
    97        }}
    98      />
    99    );
   100  
   101    return (
   102      <NetworkItemBase>
   103        <Box
   104          sx={{
   105            fontSize: "16px",
   106            fontWeight: 600,
   107          }}
   108        >
   109          Network
   110        </Box>
   111        <Box
   112          sx={{
   113            position: "relative",
   114            width: 110,
   115            height: 110,
   116            marginLeft: "auto",
   117            [`@media (max-width: ${breakPoints.sm}px)`]: {
   118              marginLeft: "0",
   119            },
   120          }}
   121        >
   122          <Box
   123            sx={{
   124              position: "absolute",
   125              display: "flex",
   126              flexFlow: "column",
   127              alignItems: "center",
   128              top: "50%",
   129              left: "50%",
   130              transform: "translate(-50%, -50%)",
   131              fontWeight: "bold",
   132              fontSize: 12,
   133            }}
   134          >
   135            {leftCmp}
   136          </Box>
   137        </Box>
   138        <Box
   139          sx={{
   140            display: "flex",
   141            alignItems: "center",
   142            marginLeft: "auto",
   143            [`@media (max-width: ${breakPoints.sm}px)`]: {
   144              marginLeft: "0",
   145            },
   146          }}
   147        >
   148          <Box
   149            sx={{
   150              display: "flex",
   151              alignItems: "center",
   152              "& .value": { fontSize: "50px", fontFamily: "Inter" },
   153            }}
   154          >
   155            {rightCmp}
   156          </Box>
   157        </Box>
   158        <Box
   159          sx={{
   160            marginLeft: "15px",
   161            height: "100%",
   162            display: "flex",
   163            alignItems: "flex-start",
   164            "& .min-icon": {
   165              height: "15px",
   166              width: "15px",
   167            },
   168          }}
   169        >
   170          <SpeedtestIcon />
   171        </Box>
   172      </NetworkItemBase>
   173    );
   174  };
   175  
   176  export default NetworkItem;