github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/EntityStateItemRenderer.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 { CircleIcon, DrivesIcon, ServersIcon, Box } from "mds";
    21  import EntityStateStatItem from "./EntityStateStatItem";
    22  import DualStatCard from "./DualStatCard";
    23  import { IDashboardPanel } from "../types";
    24  
    25  const StateIndicator = styled.div(({ theme }) => ({
    26    display: "flex",
    27    alignItems: "center",
    28    marginTop: "5px",
    29    gap: 8,
    30    "&.online": {
    31      "& .min-icon": {
    32        margin: 0,
    33        fill: get(theme, "signalColors.good", "#4CCB92"),
    34      },
    35    },
    36    "&.offline": {
    37      "& .min-icon": {
    38        margin: 0,
    39        fill: get(theme, "signalColors.danger", "#C51B3F"),
    40      },
    41    },
    42    "& .indicatorText": {
    43      color: get(theme, "mutedText", "#C51B3F"),
    44      fontSize: 12,
    45    },
    46  }));
    47  
    48  const EntityStateItemRenderer = ({
    49    info,
    50    timeStart,
    51    timeEnd,
    52    apiPrefix,
    53  }: {
    54    info: IDashboardPanel;
    55    timeStart: any;
    56    timeEnd: any;
    57    apiPrefix: string;
    58  }) => {
    59    const { mergedPanels = [], id } = info;
    60    const [leftPanel, rightPanel] = mergedPanels;
    61  
    62    const lStatItem = (
    63      <EntityStateStatItem
    64        panelItem={leftPanel}
    65        timeStart={timeStart}
    66        timeEnd={timeEnd}
    67        apiPrefix={apiPrefix}
    68        statLabel={
    69          <StateIndicator className={"online"}>
    70            <CircleIcon />
    71            <Box className="indicatorText">Online</Box>
    72          </StateIndicator>
    73        }
    74      />
    75    );
    76    const rStatItem = (
    77      <EntityStateStatItem
    78        panelItem={rightPanel}
    79        timeStart={timeStart}
    80        timeEnd={timeEnd}
    81        apiPrefix={apiPrefix}
    82        statLabel={
    83          <StateIndicator className={"offline"}>
    84            <CircleIcon />
    85            <Box className="indicatorText">Offline</Box>
    86          </StateIndicator>
    87        }
    88      />
    89    );
    90  
    91    let statIcon = null;
    92    let statLabel = "";
    93    if (id === 500) {
    94      statIcon = <ServersIcon />;
    95      statLabel = "Servers";
    96    } else if (id === 501) {
    97      statIcon = <DrivesIcon />;
    98      statLabel = "Drives";
    99    }
   100  
   101    return (
   102      <DualStatCard
   103        statItemLeft={lStatItem}
   104        statItemRight={rStatItem}
   105        icon={statIcon}
   106        label={statLabel}
   107      />
   108    );
   109  };
   110  export default EntityStateItemRenderer;