github.com/minio/console@v1.4.1/web-app/src/screens/Console/Configurations/SiteReplication/EditSiteEndPoint.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, { useState } from "react";
    18  import { Box, Button, EditIcon, Grid, InputBox, InputLabel } from "mds";
    19  import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
    20  import useApi from "../../Common/Hooks/useApi";
    21  import {
    22    setErrorSnackMessage,
    23    setSnackBarMessage,
    24  } from "../../../../systemSlice";
    25  import { useAppDispatch } from "../../../../store";
    26  import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
    27  import styled from "styled-components";
    28  import get from "lodash/get";
    29  
    30  const SiteEndpointContainer = styled.div(({ theme }) => ({
    31    "& .alertText": {
    32      color: get(theme, "signalColors.danger", "#C51B3F"),
    33    },
    34  }));
    35  
    36  const EditSiteEndPoint = ({
    37    editSite = {},
    38    onClose,
    39    onComplete,
    40  }: {
    41    editSite: any;
    42    onClose: () => void;
    43    onComplete: () => void;
    44  }) => {
    45    const dispatch = useAppDispatch();
    46    const [editEndPointName, setEditEndPointName] = useState<string>("");
    47  
    48    const [isEditing, invokeSiteEditApi] = useApi(
    49      (res: any) => {
    50        if (res.success) {
    51          dispatch(setSnackBarMessage(res.status));
    52        } else {
    53          dispatch(
    54            setErrorSnackMessage({
    55              errorMessage: "Error",
    56              detailedError: res.status,
    57            }),
    58          );
    59        }
    60        onComplete();
    61      },
    62      (err: any) => {
    63        dispatch(setErrorSnackMessage(err));
    64        onComplete();
    65      },
    66    );
    67  
    68    const updatePeerSite = () => {
    69      invokeSiteEditApi("PUT", `api/v1/admin/site-replication`, {
    70        endpoint: editEndPointName,
    71        name: editSite.name,
    72        deploymentId: editSite.deploymentID, // readonly
    73      });
    74    };
    75  
    76    let isValidEndPointUrl = false;
    77  
    78    try {
    79      new URL(editEndPointName);
    80      isValidEndPointUrl = true;
    81    } catch (err) {
    82      isValidEndPointUrl = false;
    83    }
    84  
    85    return (
    86      <ModalWrapper
    87        title={`Edit Replication Endpoint `}
    88        modalOpen={true}
    89        titleIcon={<EditIcon />}
    90        onClose={onClose}
    91      >
    92        <SiteEndpointContainer>
    93          <Box
    94            sx={{
    95              display: "flex",
    96              flexFlow: "column",
    97              marginBottom: "15px",
    98            }}
    99          >
   100            <Box sx={{ marginBottom: "10px" }}>
   101              <strong>Site:</strong> {"  "}
   102              {editSite.name}
   103            </Box>
   104            <Box sx={{ marginBottom: "10px" }}>
   105              <strong>Current Endpoint:</strong> {"  "}
   106              {editSite.endpoint}
   107            </Box>
   108          </Box>
   109  
   110          <Grid item xs={12}>
   111            <InputLabel sx={{ marginBottom: 5 }}>New Endpoint:</InputLabel>
   112            <InputBox
   113              id="edit-rep-peer-endpoint"
   114              name="edit-rep-peer-endpoint"
   115              placeholder={"https://dr.minio-storage:9000"}
   116              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
   117                setEditEndPointName(event.target.value);
   118              }}
   119              label=""
   120              value={editEndPointName}
   121            />
   122          </Grid>
   123          <Grid
   124            item
   125            xs={12}
   126            sx={{
   127              marginBottom: 15,
   128              fontStyle: "italic",
   129              display: "flex",
   130              alignItems: "center",
   131              fontSize: "12px",
   132              marginTop: 2,
   133            }}
   134          >
   135            <strong>Note:</strong>&nbsp;
   136            <span className={"alertText"}>
   137              Access Key and Secret Key should be same on the new site/endpoint.
   138            </span>
   139          </Grid>
   140        </SiteEndpointContainer>
   141  
   142        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   143          <Button
   144            id={"close"}
   145            type="button"
   146            variant="regular"
   147            onClick={onClose}
   148            label={"Cancel"}
   149          />
   150          <Button
   151            id={"update"}
   152            type="button"
   153            variant="callAction"
   154            disabled={isEditing || !isValidEndPointUrl}
   155            onClick={updatePeerSite}
   156            label={"Update"}
   157          />
   158        </Grid>
   159      </ModalWrapper>
   160    );
   161  };
   162  export default EditSiteEndPoint;