@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/Clone/index.tsx

@@ -0,0 +1,756 @@
+/*--------------------------------------------------------------------------
+ * 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 protection"
+              items={
+                clone.protected && clone.protectedTillDate
+                  ? [
+                      { value: 'current', children: `Protected until ${clone.protectedTillDate.toLocaleString()}` },
+                      ...protectionOptions,
+                    ]
+                  : protectionOptions
+              }
+              value={getCurrentProtectionValue()}
+              onChange={handleProtectionChange}
+              disabled={isDisabledControls}
+              style={{ minWidth: 100 }}
+            />
+            {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>
+    </>
+  )
+})