github.com/minio/console@v1.4.1/web-app/src/screens/Console/Configurations/SiteReplication/LookupStatus/LookupStatusTable.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, CircleIcon } from "mds";
    21  
    22  const LookupTableBase = styled.div(({ theme }) => ({
    23    marginTop: 15,
    24    table: {
    25      width: "100%",
    26      borderCollapse: "collapse",
    27      "& .feature-cell": {
    28        fontWeight: 600,
    29        fontSize: 14,
    30        paddingLeft: 15,
    31      },
    32      "& .status-cell": {
    33        textAlign: "center",
    34      },
    35      "& .header-cell": {
    36        textAlign: "center",
    37      },
    38      "& tr": {
    39        height: 38,
    40        "& td": {
    41          borderBottom: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`,
    42        },
    43        "& th": {
    44          borderBottom: `2px solid ${get(theme, "borderColor", "#E2E2E2")}`,
    45        },
    46      },
    47      "& .indicator": {
    48        display: "flex",
    49        alignItems: "center",
    50        justifyContent: "center",
    51        "& .min-icon": {
    52          height: 15,
    53          width: 15,
    54        },
    55        "&.active": {
    56          "& .min-icon": {
    57            fill: get(theme, "signalColors.good", "#4CCB92"),
    58          },
    59        },
    60        "&.deactivated": {
    61          "& .min-icon": {
    62            fill: get(theme, "signalColors.danger", "#C51B3F"),
    63          },
    64        },
    65      },
    66    },
    67  }));
    68  
    69  const LookupStatusTable = ({
    70    matrixData = [],
    71    entityName = "",
    72    entityType = "",
    73  }: {
    74    matrixData: any;
    75    entityName: string;
    76    entityType: string;
    77  }) => {
    78    //Assumes 1st row should be a header row.
    79    const [header = [], ...rows] = matrixData;
    80  
    81    const tableHeader = header.map((hC: string, hcIdx: number) => {
    82      return (
    83        <th className="header-cell" key={`${0}${hcIdx}`}>
    84          {hC}
    85        </th>
    86      );
    87    });
    88  
    89    const tableRowsToRender = rows.map((r: any, rIdx: number) => {
    90      return (
    91        <tr key={`r-${rIdx + 1}`}>
    92          {r.map((v: any, cIdx: number) => {
    93            let indicator = null;
    94  
    95            if (cIdx === 0) {
    96              indicator = v;
    97            } else if (v === "") {
    98              indicator = "";
    99            }
   100            if (v === true) {
   101              indicator = (
   102                <Box className={`indicator active`}>
   103                  <CircleIcon />
   104                </Box>
   105              );
   106            } else if (v === false) {
   107              indicator = (
   108                <Box className={`indicator deactivated`}>
   109                  <CircleIcon />
   110                </Box>
   111              );
   112            }
   113  
   114            return (
   115              <td
   116                key={`${rIdx + 1}${cIdx}`}
   117                className={cIdx === 0 ? "feature-cell" : "status-cell"}
   118              >
   119                {indicator}
   120              </td>
   121            );
   122          })}
   123        </tr>
   124      );
   125    });
   126  
   127    return (
   128      <LookupTableBase>
   129        <Box sx={{ marginTop: 15, marginBottom: 15 }}>
   130          Replication status for {entityType}: <strong>{entityName}</strong>.
   131        </Box>
   132        <table>
   133          <thead>
   134            <tr>{tableHeader}</tr>
   135          </thead>
   136          <tbody>{tableRowsToRender}</tbody>
   137        </table>
   138      </LookupTableBase>
   139    );
   140  };
   141  
   142  export default LookupStatusTable;