github.com/minio/console@v1.4.1/web-app/src/screens/Console/Configurations/SiteReplication/ReplicationSites.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, { Fragment, useState } from "react";
    18  import {
    19    Box,
    20    CircleIcon,
    21    ConfirmDeleteIcon,
    22    DataTable,
    23    IColumns,
    24    ItemActions,
    25    Tooltip,
    26  } from "mds";
    27  import styled from "styled-components";
    28  import get from "lodash/get";
    29  import { ReplicationSite } from "./SiteReplication";
    30  import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
    31  import EditSiteEndPoint from "./EditSiteEndPoint";
    32  
    33  const EndpointRender = styled.div(({ theme }) => ({
    34    display: "flex",
    35    gap: 10,
    36    "& .currentIndicator": {
    37      "& .min-icon": {
    38        width: 12,
    39        height: 12,
    40        fill: get(theme, "signalColors.good", "#4CCB92"),
    41      },
    42    },
    43    "& .endpointName": {
    44      overflow: "hidden",
    45      textOverflow: "ellipsis",
    46      whiteSpace: "nowrap",
    47    },
    48  }));
    49  
    50  const ReplicationSites = ({
    51    sites,
    52    onDeleteSite,
    53    onRefresh,
    54  }: {
    55    sites: ReplicationSite[];
    56    onDeleteSite: (isAll: boolean, sites: string[]) => void;
    57    onRefresh: () => void;
    58  }) => {
    59    const [deleteSiteKey, setIsDeleteSiteKey] = useState<string>("");
    60    const [editSite, setEditSite] = useState<any>(null);
    61  
    62    const replicationColumns: IColumns[] = [
    63      { label: "Site Name", elementKey: "name" },
    64      {
    65        label: "Endpoint",
    66        elementKey: "endpoint",
    67        renderFullObject: true,
    68        renderFunction: (siteInfo) => (
    69          <EndpointRender>
    70            {siteInfo.isCurrent ? (
    71              <Tooltip tooltip={"This site/cluster"} placement="top">
    72                <Box className={"currentIndicator"}>
    73                  <CircleIcon />
    74                </Box>
    75              </Tooltip>
    76            ) : null}
    77            <Tooltip tooltip={siteInfo.endpoint}>
    78              <Box className={"endpointName"}>{siteInfo.endpoint}</Box>
    79            </Tooltip>
    80          </EndpointRender>
    81        ),
    82      },
    83    ];
    84  
    85    const actions: ItemActions[] = [
    86      {
    87        type: "edit",
    88        onClick: (valueToSend) => setEditSite(valueToSend),
    89        tooltip: "Edit Endpoint",
    90      },
    91      {
    92        type: "delete",
    93        onClick: (valueToSend) => setIsDeleteSiteKey(valueToSend.name),
    94        tooltip: "Delete Site",
    95      },
    96    ];
    97  
    98    return (
    99      <Fragment>
   100        <DataTable
   101          columns={replicationColumns}
   102          records={sites}
   103          itemActions={actions}
   104          idField={"name"}
   105          customPaperHeight={"calc(100vh - 660px)"}
   106          sx={{ marginBottom: 20 }}
   107        />
   108  
   109        {deleteSiteKey !== "" && (
   110          <ConfirmDialog
   111            title={`Delete Replication Site`}
   112            confirmText={"Delete"}
   113            isOpen={deleteSiteKey !== ""}
   114            titleIcon={<ConfirmDeleteIcon />}
   115            isLoading={false}
   116            onConfirm={() => {
   117              onDeleteSite(false, [deleteSiteKey]);
   118            }}
   119            onClose={() => {
   120              setIsDeleteSiteKey("");
   121            }}
   122            confirmationContent={
   123              <Fragment>
   124                Are you sure you want to remove the replication site:{" "}
   125                <strong>{deleteSiteKey}</strong>?
   126              </Fragment>
   127            }
   128          />
   129        )}
   130  
   131        {editSite !== null && (
   132          <EditSiteEndPoint
   133            onComplete={() => {
   134              setEditSite(null);
   135              onRefresh();
   136            }}
   137            editSite={editSite}
   138            onClose={() => {
   139              setEditSite(null);
   140            }}
   141          />
   142        )}
   143      </Fragment>
   144    );
   145  };
   146  
   147  export default ReplicationSites;