@postgres.ai/shared 4.1.3 → 4.2.0-pr-1200

package/pages/Clone/index.tsx

@@ -1,756 +0,0 @@
-/*--------------------------------------------------------------------------
- * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
- * All Rights Reserved. Proprietary and confidential.
- * Unauthorized copying of this file, via any medium is strictly prohibited
- *--------------------------------------------------------------------------
- */
-
-import React, { useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { useHistory } from 'react-router-dom'
-import copyToClipboard from 'copy-to-clipboard'
-import {
-  makeStyles,
-  Button,
-  TextField,
-  IconButton,
-} from '@material-ui/core'
-
-import { Select } from '@postgres.ai/shared/components/Select'
-
-import {
-  getSshPortForwardingCommand,
-  getPsqlConnectionStr,
-  getJdbcConnectionStr,
-} from '@postgres.ai/shared/utils/connection'
-import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
-import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner'
-import { DestroyCloneRestrictionModal } from '@postgres.ai/shared/components/DestroyCloneRestrictionModal'
-import { DestroyCloneModal } from '@postgres.ai/shared/components/DestroyCloneModal'
-import { ResetCloneModal } from '@postgres.ai/shared/components/ResetCloneModal'
-import { Spinner } from '@postgres.ai/shared/components/Spinner'
-import { round } from '@postgres.ai/shared/utils/numbers'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import { icons } from '@postgres.ai/shared/styles/icons'
-import { styles } from '@postgres.ai/shared/styles/styles'
-import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight'
-
-import { Status } from './Status'
-import { useCreatedStores } from './useCreatedStores'
-import { Host } from './context'
-import {
-  getCliDestroyCloneCommand,
-  getCliProtectedCloneCommand,
-  getCliResetCloneCommand,
-  getCreateSnapshotCommand,
-} from './utils'
-import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
-
-const textFieldWidth = 525
-
-const useStyles = makeStyles(
-  (theme) => ({
-    wrapper: {
-      display: 'flex',
-      gap: '40px',
-      maxWidth: '1200px',
-      fontSize: '14px !important',
-      marginTop: '20px',
-
-      '@media (max-width: 1300px)': {
-        flexDirection: 'column',
-        gap: '20px',
-      },
-    },
-    title: {
-      marginTop: '8px',
-      lineHeight: '26px'
-    },
-    tooltip: {
-      marginTop: '8px',
-    },
-    container: {
-      maxWidth: textFieldWidth + 25,
-      marginTop: '16px',
-    },
-    text: {
-      marginTop: '4px',
-    },
-    errorStub: {
-      margin: '24px 0',
-    },
-    spinner: {
-      marginLeft: '8px',
-    },
-    summary: {
-      flex: '1.5 1 0',
-      minWidth: 0,
-    },
-    snippetContainer: {
-      flex: '1 1 0',
-      minWidth: 0,
-      boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px',
-      padding: '10px 20px 10px 20px',
-      height: 'max-content',
-      borderRadius: '4px',
-    },
-    paramTitle: {
-      display: 'inline-block',
-      width: 200,
-    },
-    readyStatus: {
-      color: 'green',
-    },
-    failedStatus: {
-      color: 'red',
-    },
-    startingStatus: {
-      color: 'orange',
-    },
-    fieldBlock: {
-      width: '100%',
-      maxWidth: textFieldWidth + 25,
-      position: 'relative',
-    },
-    saveButton: {
-      padding: 8,
-      marginLeft: 10,
-      marginBottom: -56,
-    },
-    actions: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      rowGap: '16px',
-      marginBottom: '20px',
-    },
-    actionButton: {
-      marginRight: '10px',
-    },
-    remark: {
-      fontSize: '12px',
-      lineHeight: '14px',
-      maxWidth: textFieldWidth,
-      display: 'inline-block',
-    },
-    textField: {
-      ...styles.inputField,
-      'max-width': textFieldWidth,
-      display: 'inline-block',
-      '& .MuiOutlinedInput-input': {
-        paddingRight: '32px!important',
-      },
-    },
-    errorMessage: {
-      color: 'red',
-      marginBottom: 10,
-    },
-    textFieldInfo: {
-      position: 'absolute',
-      top: '25px',
-      marginLeft: '5px',
-      display: 'inline-block',
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    checkBoxInfo: {
-      'margin-top': '0px',
-      'margin-left': '3px',
-      display: 'inline-block',
-      '& svg': {
-        verticalAlign: 'middle',
-      },
-    },
-    checkboxLabel: {
-      marginRight: '0px',
-    },
-    copyFieldContainer: {
-      position: 'relative',
-      display: 'inline-block',
-      maxWidth: textFieldWidth,
-      width: '100%',
-    },
-    status: {
-      maxWidth: `${textFieldWidth}px`,
-    },
-    copyButton: {
-      position: 'absolute',
-      top: 16,
-      right: 0,
-      zIndex: 100,
-      width: 32,
-      height: 32,
-      padding: 8,
-    },
-  }),
-  { index: 1 },
-)
-
-type Props = Host & { isPlatform?: boolean, hideBranchingFeatures?: boolean }
-
-export const Clone = observer((props: Props) => {
-  const classes = useStyles()
-  const history = useHistory()
-  const stores = useCreatedStores(props)
-
-  // Clone modals.
-  const [isOpenRestrictionModal, setIsOpenRestrictionModal] = useState(false)
-  const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false)
-  const [isOpenResetModal, setIsOpenResetModal] = useState(false)
-
-  // Initial loading data.
-  useEffect(() => {
-    stores.main.load(props.instanceId, props.cloneId)
-  }, [])
-
-  const {
-    instance,
-    snapshots,
-    clone,
-    isResettingClone,
-    isDestroyingClone,
-    isReloading,
-    isUpdatingClone,
-    isCloneStable,
-  } = stores.main
-
-  const headRendered = (
-    <>
-      {/* //TODO(Anton): make global reset styles. */}
-      <style>{'p { margin: 0;}'}</style>
-
-      {props.elements.breadcrumbs}
-
-      <SectionTitle
-        className={classes.title}
-        tag="h1"
-        level={1}
-        text={`Clone ${props.cloneId}`}
-      >
-        <InstanceTabs
-          tab={TABS_INDEX.CLONES}
-          isPlatform={props.isPlatform}
-          instanceId={props.instanceId}
-          hasLogs={props.api.initWS !== undefined}
-          hideInstanceTabs={props.hideBranchingFeatures}
-        />
-      </SectionTitle>
-    </>
-  )
-
-  const cloneErrorMessage =
-    stores.main.instanceError?.message || stores.main.cloneError?.message
-  const cloneErrorTitle =
-    stores.main.instanceError?.title || stores.main.cloneError?.title
-
-  if (cloneErrorMessage && cloneErrorTitle)
-    return (
-      <>
-        {headRendered}
-
-        <ErrorStub title={cloneErrorTitle} message={cloneErrorMessage} />
-      </>
-    )
-
-  // Initial getting data spinner.
-  if (!instance || !clone) {
-    return (
-      <>
-        {headRendered}
-
-        <PageSpinner />
-      </>
-    )
-  }
-
-  // Clone reset.
-  const requestResetClone = () => setIsOpenResetModal(true)
-
-  const resetClone = (snapshotId: string) => stores.main.resetClone(snapshotId)
-
-  // Clone destroy.
-  const requestDestroyClone = () => {
-    if (clone.protected) {
-      setIsOpenRestrictionModal(true)
-    } else {
-      setIsOpenDestroyModal(true)
-    }
-  }
-
-  const destroyClone = async () => {
-    const isSuccess = await stores.main.destroyClone()
-    if (isSuccess) history.push(props.routes.instance())
-  }
-
-  const createSnapshot = async () => {
-    history.push(props.routes.createSnapshot(props.cloneId))
-  }
-
-  // Clone reload.
-  const reloadClone = () => stores.main.reload()
-
-  // Data protection - build options based on admin config.
-  const maxDurationMinutes = instance.state?.cloning?.protectionMaxDurationMinutes ?? 0
-  const allowForever = maxDurationMinutes === 0
-
-  const allDurationOptions = [
-    { value: '60', minutes: 60, children: '1 hour' },
-    { value: '720', minutes: 720, children: '12 hours' },
-    { value: '1440', minutes: 1440, children: '1 day' },
-    { value: '2880', minutes: 2880, children: '2 days' },
-    { value: '4320', minutes: 4320, children: '3 days' },
-    { value: '5760', minutes: 5760, children: '4 days' },
-    { value: '7200', minutes: 7200, children: '5 days' },
-    { value: '8640', minutes: 8640, children: '6 days' },
-    { value: '10080', minutes: 10080, children: '7 days' },
-    { value: '20160', minutes: 20160, children: '14 days' },
-    { value: '43200', minutes: 43200, children: '30 days' },
-  ]
-
-  const protectionOptions = [
-    { value: 'none', children: 'No protection' },
-    ...allDurationOptions
-      .filter((opt) => maxDurationMinutes === 0 || opt.minutes <= maxDurationMinutes)
-      .map(({ value, children }) => ({ value, children })),
-    ...(allowForever ? [{ value: '0', children: 'Forever' }] : []),
-  ]
-
-  const handleProtectionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    if (value === 'none') {
-      stores.main.updateCloneProtection(null)
-    } else {
-      stores.main.updateCloneProtection(parseInt(value, 10))
-    }
-  }
-
-  const getCurrentProtectionValue = () => {
-    if (!clone.protected) return 'none'
-    if (!clone.protectedTillDate) return '0'
-    return 'current'
-  }
-
-  // Commands.
-  const sshPortForwardingUrl = getSshPortForwardingCommand(instance, clone)
-  const jdbcConnectionStr = getJdbcConnectionStr(clone)
-  const psqlConnectionStr = getPsqlConnectionStr(clone)
-
-  const hasConnectionInfo =
-    sshPortForwardingUrl || jdbcConnectionStr || psqlConnectionStr
-
-  // Controls.
-  const isDisabledControls =
-    isResettingClone ||
-    isDestroyingClone ||
-    isReloading ||
-    isUpdatingClone ||
-    !isCloneStable
-
-  return (
-    <>
-      {headRendered}
-      <div className={classes.wrapper}>
-        <div className={classes.summary}>
-          <div className={classes.actions}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={requestResetClone}
-              disabled={isDisabledControls}
-              title={'Reset clone'}
-              className={classes.actionButton}
-            >
-              Reset clone
-              {isResettingClone && (
-                <Spinner size="sm" className={classes.spinner} />
-              )}
-            </Button>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={requestDestroyClone}
-              disabled={isDisabledControls}
-              title={'Delete this clone'}
-              className={classes.actionButton}
-            >
-              Delete clone
-              {isDestroyingClone && (
-                <Spinner size="sm" className={classes.spinner} />
-              )}
-            </Button>
-            {!props.hideBranchingFeatures && <Button
-              variant="contained"
-              color="primary"
-              onClick={createSnapshot}
-              disabled={isDisabledControls}
-              title={'Create snapshot'}
-              className={classes.actionButton}
-            >
-              Create snapshot
-              {snapshots.snapshotDataLoading && (
-                <Spinner size="sm" className={classes.spinner} />
-              )}
-            </Button>}
-            <Button
-              variant="outlined"
-              color="secondary"
-              onClick={reloadClone}
-              disabled={isDisabledControls}
-              title={'Refresh clone information'}
-              className={classes.actionButton}
-            >
-              Reload info
-              {isReloading && <Spinner size="sm" className={classes.spinner} />}
-            </Button>
-          </div>
-          {stores.main.destroyCloneError ||
-            (stores.main.resetCloneError && (
-              <ErrorStub
-                title={'Resetting error'}
-                message={stores.main.resetCloneError}
-                className={classes.errorStub}
-              />
-            ))}
-          {!props.hideBranchingFeatures && <div>
-            <p>
-              <strong>Branch</strong>
-            </p>
-            <p className={classes.text}>{clone.branch}</p>
-          </div>}
-
-          <div className={classes.title}>
-            <p>
-              <strong>Created</strong>
-            </p>
-            <p className={classes.text}>{clone.createdAt}</p>
-          </div>
-          <br />
-          <div>
-            <p>
-              <strong>Data state at</strong>&nbsp;
-              <Tooltip
-                content={
-                  <>
-                    <strong>Data state time</strong> is a time at which data
-                    is&nbsp; recovered for this clone.
-                  </>
-                }
-              >
-                {icons.infoIcon}
-              </Tooltip>
-            </p>
-            <p className={classes.text}>{clone.snapshot?.dataStateAt}</p>
-          </div>
-          <br />
-          <div>
-            <p>
-              <strong>Status</strong>
-            </p>
-
-            <Status rawClone={clone} className={classes.status} />
-          </div>
-          <br />
-          <div>
-            <p>
-              <strong>Summary</strong>&nbsp;
-              <Tooltip
-                content={
-                  <>
-                    <strong>Logical data size</strong> is a logical size of
-                    files in PGDATA which is being thin-cloned.
-                    <br />
-                    <br />
-                    <strong>Physical data diff size</strong> is an actual size
-                    of a&nbsp; thin clone. On creation there is no diff between
-                    clone’s&nbsp; and initial data state, all data blocks match.
-                    During work&nbsp; with the clone data diverges and data diff
-                    size increases.
-                    <br />
-                    <br />
-                    <strong>Clone creation time</strong> is time which was&nbsp;
-                    spent to provision the clone.
-                  </>
-                }
-              >
-                {icons.infoIcon}
-              </Tooltip>
-            </p>
-
-            <p className={classes.text}>
-              <span className={classes.paramTitle}>Logical data size:</span>
-              {instance.state?.dataSize
-                ? formatBytesIEC(instance.state.dataSize)
-                : '-'}
-            </p>
-
-            <p className={classes.text}>
-              <span className={classes.paramTitle}>
-                Physical data diff size:
-              </span>
-              {clone.metadata.cloneDiffSize
-                ? formatBytesIEC(clone.metadata.cloneDiffSize)
-                : '-'}
-            </p>
-
-            <p className={classes.text}>
-              <span className={classes.paramTitle}>Clone creation time:</span>
-              {clone.metadata.cloningTime
-                ? `${round(clone.metadata.cloningTime, 2)} s`
-                : '-'}
-            </p>
-          </div>
-
-          <br />
-
-          {hasConnectionInfo && (
-            <>
-              <p>
-                <strong>Connection info</strong>
-              </p>
-
-              {sshPortForwardingUrl && (
-                <div className={classes.fieldBlock}>
-                  In a separate console, set up SSH port forwarding (and keep it
-                  running):
-                  <div className={classes.copyFieldContainer}>
-                    <TextField
-                      variant="outlined"
-                      label="SSH port forwarding"
-                      value={sshPortForwardingUrl}
-                      className={classes.textField}
-                      margin="normal"
-                      fullWidth
-                      // @ts-ignore
-                      readOnly
-                      InputLabelProps={{
-                        shrink: true,
-                        style: styles.inputFieldLabel,
-                      }}
-                      FormHelperTextProps={{
-                        style: styles.inputFieldHelper,
-                      }}
-                    />
-                    <IconButton
-                      className={classes.copyButton}
-                      aria-label="Copy"
-                      onClick={() => copyToClipboard(sshPortForwardingUrl)}
-                    >
-                      {icons.copyIcon}
-                    </IconButton>
-                  </div>
-                </div>
-              )}
-
-              {psqlConnectionStr && (
-                <div className={classes.fieldBlock}>
-                  <div className={classes.copyFieldContainer}>
-                    <TextField
-                      variant="outlined"
-                      id="psqlConnStr"
-                      label="psql connection string"
-                      value={psqlConnectionStr}
-                      className={classes.textField}
-                      margin="normal"
-                      fullWidth
-                      // @ts-ignore
-                      readOnly
-                      InputLabelProps={{
-                        shrink: true,
-                        style: styles.inputFieldLabel,
-                      }}
-                      FormHelperTextProps={{
-                        style: styles.inputFieldHelper,
-                      }}
-                    />
-                    <IconButton
-                      className={classes.copyButton}
-                      aria-label="Copy"
-                      onClick={() => copyToClipboard(psqlConnectionStr)}
-                    >
-                      {icons.copyIcon}
-                    </IconButton>
-                  </div>
-                  &nbsp;
-                  <Tooltip
-                    content={
-                      <>
-                        Used to connect to PostgreSQL using psql. Change DBNAME
-                        to the name of the database you want to connect to. Use
-                        the PGPASSWORD environment variable to set the database
-                        password or type it when prompted.
-                      </>
-                    }
-                  >
-                    <span className={classes.textFieldInfo}>
-                      {icons.infoIcon}
-                    </span>
-                  </Tooltip>
-                </div>
-              )}
-
-              {jdbcConnectionStr && (
-                <div className={classes.fieldBlock}>
-                  <div className={classes.copyFieldContainer}>
-                    <TextField
-                      variant="outlined"
-                      label="JDBC connection string"
-                      value={jdbcConnectionStr}
-                      className={classes.textField}
-                      margin="normal"
-                      fullWidth
-                      // @ts-ignore
-                      readOnly
-                      InputLabelProps={{
-                        shrink: true,
-                        style: styles.inputFieldLabel,
-                      }}
-                      FormHelperTextProps={{
-                        style: styles.inputFieldHelper,
-                      }}
-                    />
-                    <IconButton
-                      className={classes.copyButton}
-                      aria-label="Copy"
-                      onClick={() => copyToClipboard(jdbcConnectionStr)}
-                    >
-                      {icons.copyIcon}
-                    </IconButton>
-                  </div>
-                  &nbsp;
-                  <Tooltip
-                    content={
-                      <>
-                        Used to connect to PostgreSQL using JDBC. Change DBNAME
-                        to the name of the database you want to connect to, and
-                        change DBPASSWORD to the password you used when creating
-                        the clone.
-                      </>
-                    }
-                  >
-                    <span className={classes.textFieldInfo}>
-                      {icons.infoIcon}
-                    </span>
-                  </Tooltip>
-                </div>
-              )}
-            </>
-          )}
-          <br />
-          <div className={classes.fieldBlock}>
-            <span className={classes.remark}>
-              Password was set during clone creation. It’s not being stored.
-              <br />
-              You would need to recreate a clone if the password is lost.
-            </span>
-          </div>
-          <br />
-          <p>
-            <strong>Protection</strong>
-          </p>
-          <div style={{ marginTop: '8px', marginBottom: '16px' }}>
-            <Select
-              label={"Deletion\u00a0protection"}
-              items={
-                clone.protected && clone.protectedTillDate
-                  ? [
-                      { value: 'current', children: `Protected until ${clone.protectedTillDate.toLocaleString()}` },
-                      ...protectionOptions,
-                    ]
-                  : protectionOptions
-              }
-              value={getCurrentProtectionValue()}
-              onChange={handleProtectionChange}
-              disabled={isDisabledControls}
-              style={{ minWidth: 200 }}
-            />
-            {isUpdatingClone && <Spinner size="sm" className={classes.spinner} />}
-          </div>
-          <span className={classes.remark}>
-            Select how long this clone should be protected from deletion.
-            Protected clones cannot be deleted manually or automatically.
-            <br />
-            Check disk space regularly and delete this clone once your work is done.
-          </span>
-          {stores.main.updateCloneError && (
-            <ErrorStub
-              title="Updating error"
-              message={stores.main.updateCloneError}
-              className={classes.errorStub}
-            />
-          )}
-        </div>
-
-        <div className={classes.snippetContainer}>
-          <SectionTitle tag="h2" level={2} text={'Reset clone using CLI'} />
-          <p className={classes.tooltip}>
-            You can reset the clone using CLI using the following command:
-          </p>
-          <SyntaxHighlight content={getCliResetCloneCommand(props.cloneId)} />
-
-          <SectionTitle
-            className={classes.title}
-            tag="h2"
-            level={2}
-            text={'Delete clone using CLI'}
-          />
-          <p className={classes.tooltip}>
-            You can delete the clone using CLI using the following command:
-          </p>
-          <SyntaxHighlight content={getCliDestroyCloneCommand(props.cloneId)} />
-
-          <SectionTitle
-            className={classes.title}
-            tag="h2"
-            level={2}
-            text={'Toggle deletion protection using CLI'}
-          />
-          <p className={classes.tooltip}>
-            You can toggle deletion protection using CLI for this clone using
-            the following command:
-          </p>
-          <SyntaxHighlight content={getCliProtectedCloneCommand(true)} />
-
-          <SyntaxHighlight content={getCliProtectedCloneCommand(false)} />
-
-          <SectionTitle
-            className={classes.title}
-            tag="h2"
-            level={2}
-            text={'Create snapshot for this clone using CLI'}
-          />
-          <p className={classes.tooltip}>
-            You can create a snapshot for this clone using CLI using the
-            following command:
-          </p>
-          <SyntaxHighlight content={getCreateSnapshotCommand(props.cloneId)} />
-        </div>
-
-        <>
-          <DestroyCloneRestrictionModal
-            isOpen={isOpenRestrictionModal}
-            onClose={() => setIsOpenRestrictionModal(false)}
-            cloneId={clone.id}
-          />
-
-          <DestroyCloneModal
-            isOpen={isOpenDestroyModal}
-            onClose={() => setIsOpenDestroyModal(false)}
-            cloneId={clone.id}
-            onDestroyClone={destroyClone}
-          />
-
-          <ResetCloneModal
-            isOpen={isOpenResetModal}
-            onClose={() => setIsOpenResetModal(false)}
-            clone={clone}
-            snapshots={snapshots.data}
-            onResetClone={resetClone}
-            version={instance.state?.engine.version}
-          />
-        </>
-      </div>
-    </>
-  )
-})