@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/CreateClone/stores/Main.ts

@@ -0,0 +1,139 @@
+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 { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
+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'
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
+
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
+
+export type MainStoreApi = SnapshotsApi & {
+  getInstance: GetInstance
+  createClone: CreateClone
+  getClone: GetClone
+  getBranches?: GetBranches
+  getSnapshots?: GetSnapshots
+  initWS?: InitWS
+}
+
+export class MainStore {
+  instance: Instance | null = null
+  instanceError: string | null = null
+  getBranchesError: Error | null = null
+  getSnapshotsError: Error | 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
+    if (!api.getSnapshots) {
+      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) ?? true,
+    ])
+
+    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)
+  }
+
+  getBranches = async (instanceId: string) => {
+    if (!this.api.getBranches) return
+    const { response, error } = await this.api.getBranches(instanceId)
+
+    if (error) this.getBranchesError = await error.json().then((err) => err)
+
+    return response
+  }
+
+  getSnapshots = async (instanceId: string, branchName?: string, dataset?: string) => {
+    if (!this.api.getSnapshots) return
+    const { response, error } = await this.api.getSnapshots({
+      instanceId,
+      branchName,
+      dataset,
+    })
+
+    if (error) this.getSnapshotsError = await error.json().then((err) => err)
+
+    return 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

@@ -111,4 +111,18 @@
 .pageTitle {
   margin-top: 8px;
   line-height: 26px;
+}
+
+.passwordActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.passwordHint {
+  font-size: 12px;
+  color: #f57c00;
+  font-weight: 500;
 }

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,51 @@
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+
+export type FormValues = {
+  branch: string
+  dataset: string
+  cloneId: string
+  snapshotId: string
+  dbUser: string
+  dbPassword: string
+  protectionDurationMinutes: string
+}
+
+const Schema = Yup.object().shape({
+  cloneId: Yup.string()
+    .max(63, 'Clone ID cannot exceed 63 characters')
+    .test(
+      'valid-docker-name',
+      'Clone ID must start with a letter or number and can only contain letters, numbers, underscores, periods, and hyphens',
+      (value) => {
+        if (!value) return true;
+        // Docker container name requirements: start with letter/number, contain only ASCII [a-zA-Z0-9_.-]
+        const validDockerName = /^[a-zA-Z0-9][a-zA-Z0-9_.-]*$/;
+        return validDockerName.test(value);
+      }
+    ),
+  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'),
+  protectionDurationMinutes: Yup.string(),
+})
+
+export const useForm = (onSubmit: (values: FormValues) => void) => {
+  const formik = useFormik<FormValues>({
+    initialValues: {
+      branch: '',
+      dataset: '',
+      cloneId: '',
+      snapshotId: '',
+      dbUser: '',
+      dbPassword: '',
+      protectionDurationMinutes: 'none',
+    },
+    validationSchema: Schema,
+    onSubmit,
+    validateOnBlur: false,
+    validateOnChange: false,
+  })
+
+  return formik
+}

package/pages/CreateClone/utils/index.ts

@@ -0,0 +1,38 @@
+import { FormValues } from '@postgres.ai/shared/pages/CreateClone/useForm'
+
+// escape string for use in single-quoted shell argument
+const shellEscape = (str: string): string => {
+  // replace single quotes with: end quote, escaped quote, start quote
+  return "'" + str.replace(/'/g, "'\\''") + "'"
+}
+
+export const getCliCreateCloneCommand = (values: FormValues, showPassword?: boolean) => {
+  const { dbUser, dbPassword, snapshotId, protectionDurationMinutes, cloneId } = values
+
+  const usernameDisplay = dbUser ? shellEscape(dbUser) : `<USERNAME>`
+
+  const passwordDisplay = dbPassword
+    ? (showPassword ? shellEscape(dbPassword) : dbPassword.replace(/./g, '*'))
+    : `<PASSWORD>`
+
+  const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`
+
+  const protectedFlag = protectionDurationMinutes !== 'none' ? `--protected ${protectionDurationMinutes}` : ''
+
+  return `dblab clone create \
+
+  --username ${usernameDisplay} \
+
+  --password ${passwordDisplay} \
+
+  ${snapshotId ? `--snapshot-id ${shellEscape(snapshotId)}` : ``} \
+
+  ${protectedFlag} \
+
+  --id ${cloneIdDisplay} \ `
+}
+
+export const getCliCloneStatus = (cloneId: string) => {
+  const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`
+  return `dblab clone status ${cloneIdDisplay}`
+}

package/pages/CreateSnapshot/index.tsx

@@ -0,0 +1,253 @@
+/*--------------------------------------------------------------------------
+ * 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 } from 'react'
+import { useHistory } from 'react-router'
+import { observer } from 'mobx-react-lite'
+import { makeStyles } from '@material-ui/core'
+
+import { Button } from '@postgres.ai/shared/components/Button'
+import { ResponseMessage } from '@postgres.ai/shared/pages/Instance/Configuration/ResponseMessage'
+import { Select } from '@postgres.ai/shared/components/Select'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight'
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
+import { TextField } from '@postgres.ai/shared/components/TextField'
+
+import { FormValues, useForm } from './useForm'
+import { MainStoreApi } from './stores/Main'
+import { useCreatedStores } from './useCreatedStores'
+import { getCliCreateSnapshotCommand } from './utils'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+
+interface CreateSnapshotProps {
+  instanceId: string
+  api: MainStoreApi
+  routes: {
+    snapshot: (snapshotId: string) => string
+  }
+  elements: {
+    breadcrumbs: React.ReactNode
+  }
+  isPlatform?: boolean
+  hideBranchingFeatures?: boolean
+}
+
+const useStyles = makeStyles(
+  {
+    wrapper: {
+      display: 'flex',
+      gap: '60px',
+      maxWidth: '1200px',
+      fontSize: '14px',
+      marginTop: '20px',
+
+      '@media (max-width: 1300px)': {
+        flexDirection: 'column',
+        gap: '20px',
+      },
+    },
+    container: {
+      maxWidth: '100%',
+      flex: '1 1 0',
+      minWidth: 0,
+
+      '&  p,span': {
+        fontSize: 14,
+      },
+    },
+    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',
+    },
+    marginBottom: {
+      marginBottom: '8px',
+    },
+    marginBottom2x: {
+      marginBottom: '16px',
+    },
+    marginTop: {
+      marginTop: '8px',
+    },
+    marginTop2x: {
+      marginTop: '16px',
+    },
+    spinner: {
+      marginLeft: '8px',
+      color: '#fff',
+    },
+    title: {
+      marginTop: '8px',
+      lineHeight: '26px'
+    },
+  },
+  { index: 1 },
+)
+
+export const CreateSnapshotPage = observer(
+  ({ instanceId, api, elements, routes, isPlatform, hideBranchingFeatures }: CreateSnapshotProps) => {
+    const stores = useCreatedStores(api)
+    const classes = useStyles()
+    const history = useHistory()
+
+    const {
+      load,
+      instance,
+      createSnapshot,
+      isCreatingSnapshot,
+      snapshotError,
+    } = stores.main
+
+    const clonesList = instance?.instance?.state?.cloning.clones || []
+
+    const handleSubmit = async (values: FormValues) => {
+      await createSnapshot(values.cloneID, values.message, instanceId).then(
+        (snapshot) => {
+          if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
+            history.push(
+              routes.snapshot(
+                generateSnapshotPageId(snapshot.snapshotID) as string,
+              ),
+            )
+          }
+        },
+      )
+    }
+
+    const [{ formik }] = useForm(handleSubmit)
+
+    if (!clonesList) {
+      return <StubSpinner />
+    }
+
+    useEffect(() => {
+      load(instanceId)
+    }, [])
+
+    useEffect(() => {
+      if (!history.location.search) return
+
+      const queryString = history.location.search.split('?')[1]
+
+      if (!queryString) return
+
+      const params = new URLSearchParams(queryString)
+
+      const cloneID = params.get('clone_id')
+
+      if (!cloneID) return
+
+      formik.setFieldValue('cloneID', cloneID)
+
+    }, [history.location.search, formik.initialValues])
+
+    return (
+      <>
+        {elements.breadcrumbs}
+        <SectionTitle tag="h1" level={1} text="Create snapshot" className={classes.title}>
+          <InstanceTabs
+            tab={TABS_INDEX.SNAPSHOTS}
+            isPlatform={isPlatform}
+            instanceId={instanceId}
+            hasLogs={api.initWS !== undefined}
+            hideInstanceTabs={hideBranchingFeatures}
+          />
+        </SectionTitle>
+        <div className={classes.wrapper}>
+          <div className={classes.container}>
+            <div className={classes.marginTop2x}>
+              <strong>Clone ID</strong>
+              <p className={classes.marginTop}>
+                Choose a clone ID from the dropdown below. This will be the
+                starting point for your new snapshot.
+              </p>
+              <Select
+                fullWidth
+                label="Clone ID *"
+                value={formik.values.cloneID}
+                disabled={formik.isSubmitting}
+                className={classes.marginBottom2x}
+                onChange={(e) =>
+                  formik.setFieldValue('cloneID', e.target.value)
+                }
+                error={Boolean(formik.errors.cloneID)}
+                items={
+                  clonesList
+                    ? clonesList.map((clone, i) => {
+                        const isLatest = i === 0
+                        return {
+                          value: clone.id,
+                          children: (
+                            <div>
+                              <strong>
+                                {clone.id} {isLatest && <span>Latest</span>}
+                              </strong>
+                              <p>Created: {clone?.snapshot?.createdAt}</p>
+                              <p>
+                                Data state at: {clone?.snapshot?.dataStateAt}
+                              </p>
+                            </div>
+                          ),
+                        }
+                      })
+                    : []
+                }
+              />
+              <strong>Message</strong>
+              <p className={classes.marginTop}>
+                Message to be added to the snapshot.
+              </p>
+              <TextField
+                label="Message *"
+                fullWidth
+                className={classes.marginBottom2x}
+                value={formik.values.message}
+                error={Boolean(formik.errors.message)}
+                onChange={(e) =>
+                  formik.setFieldValue('message', e.target.value)
+                }
+              />
+              <Button
+                variant="primary"
+                size="medium"
+                className={classes.marginTop}
+                onClick={formik.submitForm}
+              >
+                Create snapshot
+                {isCreatingSnapshot && (
+                  <Spinner size="sm" className={classes.spinner} />
+                )}
+              </Button>
+              {snapshotError && (
+                <ResponseMessage type={'error'} message={snapshotError} />
+              )}
+            </div>
+          </div>{' '}
+          <div className={classes.snippetContainer}>
+            <SectionTitle tag="h1" level={1} text="The same using CLI" />
+            <p className={classes.marginTop}>
+              Alternatively, you can create a new snapshot using CLI. Fill the
+              form, copy the command below and paste it into your terminal.
+            </p>
+            <SyntaxHighlight
+              content={getCliCreateSnapshotCommand(
+                formik.values.cloneID,
+                formik.values.message,
+              )}
+            />
+          </div>
+        </div>
+      </>
+    )
+  },
+)

package/pages/CreateSnapshot/stores/Main.ts

@@ -0,0 +1,70 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx'
+
+import { CreateSnapshot } from '@postgres.ai/shared/types/api/endpoints/createSnapshot'
+import {
+  MainStore as InstanceStore,
+  Api as InstanceStoreApi,
+} from '@postgres.ai/shared/pages/Instance/stores/Main'
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
+
+type Error = {
+  title?: string
+  message: string
+}
+
+export type MainStoreApi = InstanceStoreApi & {
+  createSnapshot: CreateSnapshot
+  initWS?: InitWS
+}
+
+export class MainStore {
+  snapshotError: Error | null = null
+
+  isCreatingSnapshot = false
+
+  readonly instance: InstanceStore
+
+  private readonly api: MainStoreApi
+
+  constructor(api: MainStoreApi) {
+    this.api = api
+    this.instance = new InstanceStore(api)
+
+    makeAutoObservable(this)
+  }
+
+  load = async (instanceId: string) => {
+    this.instance.load(instanceId)
+  }
+
+  createSnapshot = async (
+    cloneID: string,
+    message: string,
+    instanceId: string,
+  ) => {
+    if (!this.api.createSnapshot) return
+
+    this.snapshotError = null
+    this.isCreatingSnapshot = true
+
+    const { response, error } = await this.api.createSnapshot(
+      cloneID,
+      message,
+      instanceId,
+    )
+
+    this.isCreatingSnapshot = false
+
+    if (error)
+      this.snapshotError = await error.json().then((err) => err.message)
+
+    return response
+  }
+}

package/pages/CreateSnapshot/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/CreateSnapshot/useForm.ts

@@ -0,0 +1,34 @@
+/*--------------------------------------------------------------------------
+ * 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 { useFormik } from 'formik'
+import * as Yup from 'yup'
+
+export type FormValues = {
+  cloneID: string
+  message: string
+}
+
+const Schema = Yup.object().shape({
+  cloneID: Yup.string().required('Clone ID is required'),
+  message: Yup.string().required('Message is required'),
+})
+
+export const useForm = (onSubmit: (values: FormValues) => void) => {
+  const formik = useFormik<FormValues>({
+    initialValues: {
+      cloneID: '',
+      message: '',
+    },
+    validationSchema: Schema,
+    onSubmit,
+    validateOnBlur: false,
+    validateOnChange: false,
+  })
+
+  return [{ formik }]
+}

package/pages/CreateSnapshot/utils/index.ts

@@ -0,0 +1,8 @@
+export const getCliCreateSnapshotCommand = (
+  cloneID: string,
+  message: string,
+) => {
+  return `dblab commit --clone-id ${cloneID || '<CLONE_ID>'} --message ${
+    message || '<MESSAGE>'
+  }`
+}