github.com/minio/console@v1.4.1/web-app/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.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, { useEffect, useState } from "react";
    18  import { DateTime } from "luxon";
    19  import {
    20    Button,
    21    DateTimeInput,
    22    FormLayout,
    23    Grid,
    24    ProgressBar,
    25    Switch,
    26  } from "mds";
    27  import { useSelector } from "react-redux";
    28  import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
    29  import { AppState, useAppDispatch } from "../../../../../../store";
    30  import {
    31    resetRewind,
    32    setReloadObjectsList,
    33    setRewindEnable,
    34  } from "../../../../ObjectBrowser/objectBrowserSlice";
    35  import { modalStyleUtils } from "../../../../Common/FormComponents/common/styleLibrary";
    36  
    37  interface IRewindEnable {
    38    closeModalAndRefresh: () => void;
    39    open: boolean;
    40    bucketName: string;
    41  }
    42  
    43  const RewindEnable = ({
    44    closeModalAndRefresh,
    45    open,
    46    bucketName,
    47  }: IRewindEnable) => {
    48    const dispatch = useAppDispatch();
    49  
    50    const rewindEnabled = useSelector(
    51      (state: AppState) => state.objectBrowser.rewind.rewindEnabled,
    52    );
    53    const dateRewind = useSelector(
    54      (state: AppState) => state.objectBrowser.rewind.dateToRewind,
    55    );
    56  
    57    const [rewindEnabling, setRewindEnabling] = useState<boolean>(false);
    58    const [rewindEnableButton, setRewindEnableButton] = useState<boolean>(true);
    59    const [dateSelected, setDateSelected] = useState<DateTime>(
    60      DateTime.fromJSDate(new Date()),
    61    );
    62  
    63    useEffect(() => {
    64      if (rewindEnabled) {
    65        setRewindEnableButton(true);
    66        setDateSelected(
    67          DateTime.fromISO(dateRewind || DateTime.now().toISO() || ""),
    68        );
    69      }
    70    }, [rewindEnabled, dateRewind]);
    71  
    72    const rewindApply = () => {
    73      if (!rewindEnableButton && rewindEnabled) {
    74        dispatch(resetRewind());
    75      } else {
    76        setRewindEnabling(true);
    77        dispatch(
    78          setRewindEnable({
    79            state: true,
    80            bucket: bucketName,
    81            dateRewind: dateSelected.toISO(),
    82          }),
    83        );
    84      }
    85      dispatch(setReloadObjectsList(true));
    86  
    87      closeModalAndRefresh();
    88    };
    89  
    90    return (
    91      <ModalWrapper
    92        modalOpen={open}
    93        onClose={() => {
    94          closeModalAndRefresh();
    95        }}
    96        title={`Rewind - ${bucketName}`}
    97      >
    98        <FormLayout withBorders={false} containerPadding={false}>
    99          <DateTimeInput
   100            value={dateSelected}
   101            onChange={(dateTime) => (dateTime ? setDateSelected(dateTime) : null)}
   102            id="rewind-selector"
   103            label="Rewind to"
   104            timeFormat={"24h"}
   105            secondsSelector={false}
   106            disabled={!rewindEnableButton}
   107          />
   108  
   109          {rewindEnabled && (
   110            <Switch
   111              value="status"
   112              id="status"
   113              name="status"
   114              checked={rewindEnableButton}
   115              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
   116                setRewindEnableButton(e.target.checked);
   117              }}
   118              label={"Current Status"}
   119              indicatorLabels={["Enabled", "Disabled"]}
   120            />
   121          )}
   122          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   123            <Button
   124              type="button"
   125              variant="callAction"
   126              disabled={rewindEnabling || (!dateSelected && rewindEnableButton)}
   127              onClick={rewindApply}
   128              id={"rewind-apply-button"}
   129              label={
   130                !rewindEnableButton && rewindEnabled
   131                  ? "Show Current Data"
   132                  : "Show Rewind Data"
   133              }
   134            />
   135          </Grid>
   136  
   137          {rewindEnabling && (
   138            <Grid item xs={12}>
   139              <ProgressBar />
   140            </Grid>
   141          )}
   142        </FormLayout>
   143      </ModalWrapper>
   144    );
   145  };
   146  
   147  export default RewindEnable;