@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/CreateClone/index.tsx

@@ -0,0 +1,311 @@
+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

@@ -0,0 +1,107 @@
+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/styles.module.scss

@@ -0,0 +1,71 @@
+.title {
+  margin-top: 16px;
+}
+
+.form {
+  max-width: 425px;
+  margin-top: 8px;
+}
+
+.section {
+  & + .section {
+    margin-top: 32px;
+  }
+}
+
+.title {
+  font-size: inherit;
+  font-weight: 700;
+}
+
+.text {
+  margin-top: 8px;
+}
+
+.remark {
+  font-size: 12px;
+}
+
+.error {
+  color: red;
+}
+
+.snapshotTag {
+  font-weight: 700;
+  margin-left: 4px;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  background-color: rgba(#808080, 0.15) !important;
+  padding: 12px;
+}
+
+.summaryIcon {
+  width: 30px;
+  color: silver;
+  margin-right: 12px;
+}
+
+.params {
+  flex: 1 1 100%;
+}
+
+.param {
+  display: flex;
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.elapsedTime {
+  margin-left: 24px;
+}

package/pages/CreateClone/useCreatedStores.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,15 @@
+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/Item/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  font-size: 12px;
+  text-align: center;
+  color: $color-gray-semi-dark;
+}
+
+.value {
+  font-weight: bold;
+  font-size: 14px;
+  color: $color-black;
+}
+
+.description {
+  margin-top: 4px;
+}

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

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------------------
+ * 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/Header/styles.module.scss

@@ -0,0 +1,11 @@
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+
+  @include sm {
+    padding: 20px 0;
+  }
+}