@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028.1

package/pages/CreateClone/index.tsx

@@ -1,311 +0,0 @@
-import cn from 'classnames'
-import { useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
-import { observer } from 'mobx-react-lite'
-import { useTimer } from 'use-timer'
-import { Paper, FormControlLabel, Checkbox } from '@material-ui/core'
-import { Info as InfoIcon } from '@material-ui/icons'
-
-import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex'
-import { TextField } from '@postgres.ai/shared/components/TextField'
-import { Select } from '@postgres.ai/shared/components/Select'
-import { Button } from '@postgres.ai/shared/components/Button'
-import { Spinner } from '@postgres.ai/shared/components/Spinner'
-import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
-import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
-import { round } from '@postgres.ai/shared/utils/numbers'
-import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import {
-  MIN_ENTROPY,
-  getEntropy,
-  validatePassword,
-} from '@postgres.ai/shared/helpers/getEntropy'
-
-import { useCreatedStores, MainStoreApi } from './useCreatedStores'
-import { useForm, FormValues } from './useForm'
-
-import styles from './styles.module.scss'
-
-type Host = {
-  instanceId: string
-  routes: {
-    clone: (cloneId: string) => string
-  }
-  api: MainStoreApi
-  elements: {
-    breadcrumbs: React.ReactNode
-  }
-}
-
-type Props = Host
-
-export const CreateClone = observer((props: Props) => {
-  const history = useHistory()
-  const stores = useCreatedStores(props.api)
-  const cloneError = stores.main.cloneError
-  const timer = useTimer()
-
-  // Form.
-  const onSubmit = async (values: FormValues) => {
-    if (!values.dbPassword || getEntropy(values.dbPassword) < MIN_ENTROPY) {
-      formik.setFieldError(
-        'dbPassword',
-        validatePassword(values.dbPassword, MIN_ENTROPY),
-      )
-      return
-    }
-
-    timer.start()
-
-    const isSuccess = await stores.main.createClone(values)
-
-    formik.setFieldError('dbPassword', '')
-
-    if (!isSuccess || cloneError) {
-      timer.pause()
-      timer.reset()
-    }
-  }
-
-  const formik = useForm(onSubmit)
-
-  // Initial loading data.
-  useEffect(() => {
-    stores.main.load(props.instanceId)
-  }, [])
-
-  // Redirect when clone is created and stable.
-  useEffect(() => {
-    if (!stores.main.clone) return
-    if (!stores.main.isCloneStable) return
-
-    history.push(props.routes.clone(stores.main.clone.id))
-  }, [stores.main.clone, stores.main.isCloneStable])
-
-  // Snapshots.
-  const sortedSnapshots = stores.main.snapshots.data
-    ?.slice()
-    .sort(compareSnapshotsDesc)
-
-  useEffect(() => {
-    const [firstSnapshot] = sortedSnapshots ?? []
-    if (!firstSnapshot) return
-
-    formik.setFieldValue('snapshotId', firstSnapshot.id)
-  }, [Boolean(sortedSnapshots)])
-
-  const headRendered = (
-    <>
-      {/* //TODO: make global reset styles. */}
-      <style>{'p { margin: 0; }'}</style>
-
-      {props.elements.breadcrumbs}
-      <SectionTitle
-        className={styles.title}
-        tag="h1"
-        level={1}
-        text="Create clone"
-      />
-    </>
-  )
-
-  // Initial loading spinner.
-  if (!stores.main.instance || !stores.main.snapshots.data)
-    return (
-      <>
-        {headRendered}
-
-        <StubSpinner />
-      </>
-    )
-
-  // Instance getting error.
-  if (stores.main.instanceError)
-    return (
-      <>
-        {headRendered}
-
-        <ErrorStub message={stores.main.instanceError} />
-      </>
-    )
-
-  // Snapshots getting error.
-  if (stores.main.snapshots.error)
-    return <ErrorStub message={stores.main.snapshots.error} />
-
-  const isCloneUnstable = Boolean(
-    stores.main.clone && !stores.main.isCloneStable,
-  )
-  const isCreatingClone = formik.isSubmitting || isCloneUnstable
-
-  return (
-    <>
-      {headRendered}
-
-      <div className={styles.form}>
-        {stores.main.cloneError && (
-          <div className={styles.section}>
-            <ErrorStub message={stores.main.cloneError} />
-          </div>
-        )}
-
-        <div className={styles.section}>
-          <TextField
-            fullWidth
-            label="Clone ID"
-            value={formik.values.cloneId}
-            onChange={(e) => formik.setFieldValue('cloneId', e.target.value)}
-            error={Boolean(formik.errors.cloneId)}
-            disabled={isCreatingClone}
-          />
-
-          <Select
-            fullWidth
-            label="Data state time *"
-            value={formik.values.snapshotId}
-            disabled={!sortedSnapshots || isCreatingClone}
-            onChange={(e) => formik.setFieldValue('snapshotId', e.target.value)}
-            error={Boolean(formik.errors.snapshotId)}
-            items={
-              sortedSnapshots?.map((snapshot, i) => {
-                const isLatest = i === 0
-                return {
-                  value: snapshot.id,
-                  children: (
-                    <>
-                      {snapshot.dataStateAt}
-                      {isLatest && (
-                        <span className={styles.snapshotTag}>Latest</span>
-                      )}
-                    </>
-                  ),
-                }
-              }) ?? []
-            }
-          />
-
-          <p className={styles.remark}>
-            By default latest snapshot of database is used. You can select&nbsp;
-            different snapshots if earlier database state is needed
-          </p>
-        </div>
-
-        <div className={styles.section}>
-          <h2 className={styles.title}>Database credentials *</h2>
-
-          <p className={styles.text}>
-            Set custom credentials for the new clone. Save the password in
-            reliable place, it can’t be read later.
-          </p>
-
-          <TextField
-            fullWidth
-            label="Database username *"
-            value={formik.values.dbUser}
-            onChange={(e) => formik.setFieldValue('dbUser', e.target.value)}
-            error={Boolean(formik.errors.dbUser)}
-            disabled={isCreatingClone}
-          />
-
-          <TextField
-            fullWidth
-            label="Database password *"
-            type="password"
-            value={formik.values.dbPassword}
-            onChange={(e) => {
-              formik.setFieldValue('dbPassword', e.target.value)
-              if (formik.errors.dbPassword) {
-                formik.setFieldError('dbPassword', '')
-              }
-            }}
-            error={Boolean(formik.errors.dbPassword)}
-            disabled={isCreatingClone}
-          />
-          <p
-            className={cn(
-              formik.errors.dbPassword && styles.error,
-              styles.remark,
-            )}
-          >
-            {formik.errors.dbPassword}
-          </p>
-        </div>
-
-        <div className={styles.section}>
-          <Paper className={styles.summary}>
-            <InfoIcon className={styles.summaryIcon} />
-
-            <div className={styles.params}>
-              <p className={styles.param}>
-                <span>Data size:</span>
-                <strong>
-                  {stores.main.instance.state?.dataSize
-                    ? formatBytesIEC(stores.main.instance.state.dataSize)
-                    : '-'}
-                </strong>
-              </p>
-
-              <p className={styles.param}>
-                <span>Expected cloning time:</span>
-                <strong>
-                  {round(
-                    stores.main.instance.state?.cloning
-                      .expectedCloningTime as number,
-                    2,
-                  )}{' '}
-                  s
-                </strong>
-              </p>
-            </div>
-          </Paper>
-        </div>
-
-        <div className={styles.section}>
-          <FormControlLabel
-            label="Enable deletion protection"
-            control={
-              <Checkbox
-                checked={formik.values.isProtected}
-                onChange={(e) =>
-                  formik.setFieldValue('isProtected', e.target.checked)
-                }
-                name="protected"
-                disabled={isCreatingClone}
-              />
-            }
-          />
-
-          <p className={styles.remark}>
-            When enabled no one can delete this clone and automated deletion is
-            also disabled.
-            <br />
-            Please be careful: abandoned clones with this checkbox enabled may
-            cause out-of-disk-space events. Check disk space on daily basis and
-            delete this clone once the work is done.
-          </p>
-        </div>
-
-        <div className={styles.section}>
-          <div className={styles.controls}>
-            <Button
-              onClick={formik.submitForm}
-              variant="primary"
-              size="medium"
-              isDisabled={isCreatingClone}
-            >
-              Create clone
-              {isCreatingClone && (
-                <Spinner size="sm" className={styles.spinner} />
-              )}
-            </Button>
-
-            {isCreatingClone && (
-              <p className={styles.elapsedTime}>Elapsed time: {timer.time} s</p>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-})

package/pages/CreateClone/stores/Main.ts

@@ -1,107 +0,0 @@
-import { makeAutoObservable } from 'mobx'
-
-import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
-import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
-import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
-import { CreateClone } from '@postgres.ai/shared/types/api/endpoints/createClone'
-import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
-import {
-  SnapshotsStore,
-  SnapshotsApi,
-} from '@postgres.ai/shared/stores/Snapshots'
-import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
-import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
-
-import { FormValues } from '../useForm'
-
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
-
-export type MainStoreApi = SnapshotsApi & {
-  getInstance: GetInstance
-  createClone: CreateClone
-  getClone: GetClone
-}
-
-export class MainStore {
-  instance: Instance | null = null
-  instanceError: string | null = null
-
-  clone: Clone | null = null
-  cloneError: string | null = null
-
-  private cloneUpdateTimeout?: number
-
-  private readonly api: MainStoreApi
-
-  readonly snapshots: SnapshotsStore
-
-  constructor(api: MainStoreApi) {
-    makeAutoObservable(this)
-
-    this.api = api
-    this.snapshots = new SnapshotsStore(api)
-  }
-
-  get isCloneStable() {
-    if (!this.clone) return
-    return checkIsCloneStable(this.clone)
-  }
-
-  load = async (instanceId: string) => {
-    const [instance, isLoadedSnapshots] = await Promise.all([
-      this.api.getInstance({ instanceId }),
-      this.snapshots.load(instanceId),
-    ])
-
-    if (instance.response) this.instance = instance.response
-    if (instance.error)
-      this.instanceError = await getTextFromUnknownApiError(instance.error)
-
-    return Boolean(instance.response) && isLoadedSnapshots
-  }
-
-  createClone = async (data: FormValues) => {
-    if (!this.instance) return false
-
-    const { response, error } = await this.api.createClone({
-      ...data,
-      instanceId: this.instance.id,
-    })
-
-    if (response) {
-      this.clone = response
-
-      this.updateCloneUntilStable({
-        instanceId: this.instance.id,
-        cloneId: this.clone.id,
-      })
-    }
-
-    if (error)
-      this.cloneError = await error.json().then((err) => err?.message || err)
-
-    return Boolean(response)
-  }
-
-  private updateCloneUntilStable = async (args: {
-    instanceId: string
-    cloneId: string
-  }) => {
-    window.clearTimeout(this.cloneUpdateTimeout)
-
-    const { response, error } = await this.api.getClone(args)
-
-    if (response) {
-      this.clone = response
-
-      if (!this.isCloneStable)
-        this.cloneUpdateTimeout = window.setTimeout(
-          () => this.updateCloneUntilStable(args),
-          UNSTABLE_CLONE_UPDATE_TIMEOUT,
-        )
-    }
-
-    if (error)
-      this.cloneError = await error.json().then((err) => err?.message || err)
-  }
-}

package/pages/CreateClone/useCreatedStores.ts

@@ -1,11 +0,0 @@
-import { useMemo } from 'react'
-
-import { MainStore, MainStoreApi } from './stores/Main'
-
-export const useCreatedStores = (api: MainStoreApi) => ({
-  main: useMemo(() => new MainStore(api), []),
-})
-
-export type Stores = ReturnType<typeof useCreatedStores>
-
-export type { MainStoreApi }

package/pages/CreateClone/useForm.ts

@@ -1,36 +0,0 @@
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-
-export type FormValues = {
-  cloneId: string
-  snapshotId: string
-  dbUser: string
-  dbPassword: string
-  isProtected: boolean
-}
-
-const Schema = Yup.object().shape({
-  cloneId: Yup.string(),
-  snapshotId: Yup.string().required('Date state time is required'),
-  dbUser: Yup.string().required('Database username is required'),
-  dbPassword: Yup.string().required('Database password is required'),
-  isProtected: Yup.boolean(),
-})
-
-export const useForm = (onSubmit: (values: FormValues) => void) => {
-  const formik = useFormik<FormValues>({
-    initialValues: {
-      cloneId: '',
-      snapshotId: '',
-      dbUser: '',
-      dbPassword: '',
-      isProtected: false,
-    },
-    validationSchema: Schema,
-    onSubmit,
-    validateOnBlur: false,
-    validateOnChange: false,
-  })
-
-  return formik
-}

package/pages/Instance/Clones/Header/Item/index.tsx

@@ -1,15 +0,0 @@
-import styles from './styles.module.scss'
-
-type Props = {
-  value: React.ReactNode
-  children: React.ReactNode
-}
-
-export const Item = (props: Props) => {
-  return (
-    <div className={styles.root}>
-      <div className={styles.value}>{props.value}</div>
-      <div className={styles.description}>{props.children}</div>
-    </div>
-  )
-}

package/pages/Instance/Clones/Header/index.tsx

@@ -1,74 +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 { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-
-import { Item } from './Item'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  expectedCloningTimeS: number
-  logicalSize: number | null
-  clonesCount: number
-  clonesCountLastMonth?: number
-}
-
-export const Header = (props: Props) => {
-  const {
-    expectedCloningTimeS,
-    logicalSize,
-    clonesCount,
-    clonesCountLastMonth,
-  } = props
-
-  return (
-    <div className={styles.root}>
-      <Item value={expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-'}>
-        average
-        <br />
-        cloning time
-      </Item>
-
-      <Item
-        value={
-          logicalSize ? formatBytesIEC(logicalSize, { precision: 2 }) : '-'
-        }
-      >
-        logical
-        <br />
-        data size
-      </Item>
-
-      <Item value={clonesCount}>
-        clones
-        <br />
-        now
-      </Item>
-
-      <Item
-        value={
-          logicalSize
-            ? formatBytesIEC(logicalSize * clonesCount, { precision: 2 })
-            : '-'
-        }
-      >
-        total
-        <br />
-        size of clones
-      </Item>
-
-      {clonesCountLastMonth && (
-        <Item value={clonesCountLastMonth}>
-          clones
-          <br />
-          in last month
-        </Item>
-      )}
-    </div>
-  )
-}

package/pages/Instance/Clones/index.tsx

@@ -1,135 +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 { useState } from 'react'
-import { makeStyles, Theme, useMediaQuery } from '@material-ui/core'
-import { useHistory } from 'react-router-dom'
-import { observer } from 'mobx-react-lite'
-
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { round } from '@postgres.ai/shared/utils/numbers'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { InfoIcon } from '@postgres.ai/shared/icons/Info'
-
-import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
-
-import { ClonesList } from '../components/ClonesList'
-
-import { Header } from './Header'
-
-const SHORT_LIST_SIZE = 3
-
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      width: 0,
-      flex: '1 1 100%',
-      marginRight: '40px',
-      height: '100%',
-
-      [theme.breakpoints.down('sm')]: {
-        width: '100%',
-        marginRight: 0,
-      },
-    },
-    tableTitle: {
-      marginTop: '5px',
-    },
-    listSizeButton: {
-      marginTop: '12px',
-    },
-    infoIcon: {
-      height: '12px',
-      width: '12px',
-      marginLeft: '8px',
-      color: '#808080',
-    },
-  }),
-  { index: 1 },
-)
-
-export const Clones = observer(() => {
-  const classes = useStyles()
-  const history = useHistory()
-  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
-  const [isShortListForMobile, setIsShortListForMobile] = useState(true)
-
-  const stores = useStores()
-  const host = useHost()
-
-  const { instance } = stores.main
-  if (!instance || !instance.state) return null
-
-  const isShortList = isMobile && isShortListForMobile
-  const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile)
-
-  const goToCloneAddPage = () => history.push(host.routes.createClone())
-
-  const showListSizeButton =
-    instance.state?.cloning.clones?.length > SHORT_LIST_SIZE && isMobile
-
-  const isLoadingSnapshots = stores.main.snapshots.isLoading
-  const hasSnapshots = Boolean(stores.main.snapshots.data?.length)
-  const canCreateClone = hasSnapshots && !stores.main.isDisabledInstance
-
-  return (
-    <div className={classes.root}>
-      <SectionTitle level={2} tag="h2" text="Cloning summary" />
-
-      <Header
-        expectedCloningTimeS={round(
-          instance.state.cloning.expectedCloningTime,
-          2,
-        )}
-        logicalSize={instance.state.dataSize}
-        clonesCount={instance.state.cloning.clones.length}
-      />
-
-      <SectionTitle
-        className={classes.tableTitle}
-        level={2}
-        tag="h3"
-        text={`Clones (${instance.state.cloning.clones.length})`}
-        rightContent={
-          <>
-            <Button
-              theme="primary"
-              onClick={goToCloneAddPage}
-              isDisabled={!canCreateClone}
-              isLoading={isLoadingSnapshots}
-            >
-              Create clone
-            </Button>
-
-            {!hasSnapshots && (
-              <Tooltip content="No snapshots">
-                <InfoIcon className={classes.infoIcon} />
-              </Tooltip>
-            )}
-          </>
-        }
-      />
-
-      <ClonesList
-        clones={
-          isShortList
-            ? instance.state.cloning.clones.slice(0, SHORT_LIST_SIZE)
-            : instance.state.cloning.clones
-        }
-        isDisabled={stores.main.isDisabledInstance}
-        emptyStubText="This instance has no active clones"
-      />
-
-      {showListSizeButton && (
-        <Button className={classes.listSizeButton} onClick={toggleListSize}>
-          {isShortList ? 'Show more' : 'Show less'}
-        </Button>
-      )}
-    </div>
-  )
-})