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

package/pages/CreateClone/stores/Main.ts

@@ -1,139 +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 { 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/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,51 +0,0 @@
-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

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

@@ -1,253 +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 } 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

@@ -1,70 +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 { 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

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

@@ -1,34 +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 { 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

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