@postgres.ai/shared 4.0.4 → 4.1.0

package/pages/Clone/stores/Main.ts

@@ -0,0 +1,215 @@
+/*--------------------------------------------------------------------------
+ * 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 { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
+import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
+import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
+import { UpdateClone } from '@postgres.ai/shared/types/api/endpoints/updateClone'
+import {
+  SnapshotsStore,
+  SnapshotsApi,
+} from '@postgres.ai/shared/stores/Snapshots'
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
+import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
+
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
+
+export type Api = SnapshotsApi & {
+  getInstance: GetInstance
+  getClone: GetClone
+  resetClone: ResetClone
+  destroyClone: DestroyClone
+  updateClone: UpdateClone
+  initWS?: InitWS
+}
+
+type Error = {
+  title?: string
+  message: string
+}
+
+export class MainStore {
+  instance: Instance | null = null
+  instanceError: Error | null = null
+
+  clone: Clone | null = null
+  cloneError: Error | null = null
+
+  readonly snapshots: SnapshotsStore
+
+  isResettingClone = false
+  resetCloneError: string | null = null
+
+  isDestroyingClone = false
+  destroyCloneError: string | null = null
+
+  isUpdatingClone = false
+  updateCloneError: string | null = null
+
+  isReloading = false
+
+  private cloneUpdateTimeout?: number
+
+  private readonly api: Api
+
+  constructor(api: Api) {
+    this.snapshots = new SnapshotsStore(api)
+    this.api = api
+
+    makeAutoObservable(this)
+  }
+
+  get isCloneStable() {
+    if (!this.clone) return false
+    return checkIsCloneStable(this.clone)
+  }
+
+  load = async (instanceId: string, cloneId: string) => {
+    const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
+      this.loadInstance(instanceId),
+      this.loadClone(instanceId, cloneId),
+      this.snapshots.load(instanceId),
+    ])
+
+    return isInstanceOk && isCloneOk && isSnapshotsLoaded
+  }
+
+  reload = async () => {
+    if (!this.instance || !this.clone) return false
+    this.isReloading = true
+    const isSuccess = await this.load(this.instance.id, this.clone.id)
+    this.isReloading = false
+    return isSuccess
+  }
+
+  private loadInstance = async (instanceId: string) => {
+    const { response, error } = await this.api.getInstance({
+      instanceId,
+    })
+
+    if (response) {
+      this.instance = response
+    } else {
+      this.instanceError = {
+        title: 'Error',
+        message: `Instance "${instanceId}" not found`,
+      }
+    }
+
+    if (error) {
+      this.instanceError = {
+        message: await getTextFromUnknownApiError(error),
+      }
+    }
+
+    return Boolean(response)
+  }
+
+  private loadClone = async (instanceId: string, cloneId: string) => {
+    window.clearTimeout(this.cloneUpdateTimeout)
+
+    const { response, error } = await this.api.getClone({ instanceId, cloneId })
+
+    if (response) {
+      this.clone = response
+
+      if (!this.isCloneStable)
+        this.cloneUpdateTimeout = window.setTimeout(
+          () => this.loadClone(instanceId, cloneId),
+          UNSTABLE_CLONE_UPDATE_TIMEOUT,
+        )
+    }
+
+    if (error) {
+      if (error.status === 404) {
+        this.cloneError = {
+          title: 'Error',
+          message: `Clone "${cloneId}" not found`,
+        }
+      } else {
+        this.cloneError = {
+          message: await getTextFromUnknownApiError(error),
+        }
+      }
+    }
+
+    return Boolean(response)
+  }
+
+  resetClone = async (snapshotId: string) => {
+    if (!this.instance || !this.clone) return false
+
+    this.isResettingClone = true
+
+    const { response, error } = await this.api.resetClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+      snapshotId,
+    })
+
+    if (response) await this.loadClone(this.instance.id, this.clone.id)
+
+    if (error) this.resetCloneError = await getTextFromUnknownApiError(error)
+
+    this.isResettingClone = false
+
+    return Boolean(response)
+  }
+
+  destroyClone = async () => {
+    if (!this.instance || !this.clone) return false
+
+    this.isDestroyingClone = true
+
+    const { response, error } = await this.api.destroyClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+    })
+
+    if (error) this.destroyCloneError = await getTextFromUnknownApiError(error)
+
+    this.isDestroyingClone = false
+
+    return Boolean(response)
+  }
+
+  updateCloneProtection = async (durationMinutes: number | null) => {
+    if (!this.instance || !this.clone) return
+
+    this.isUpdatingClone = true
+
+    const prevIsProtected = this.clone.protected
+    const isProtected = durationMinutes !== null
+
+    this.clone.protected = isProtected
+
+    const { response, error } = await this.api.updateClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+      clone: {
+        isProtected,
+        protectionDurationMinutes: durationMinutes ?? undefined,
+      },
+    })
+
+    if (response) {
+      await this.loadClone(this.instance.id, this.clone.id)
+    } else {
+      this.clone.protected = prevIsProtected
+    }
+
+    if (error) this.updateCloneError = await getTextFromUnknownApiError(error)
+
+    this.isUpdatingClone = false
+  }
+}

package/pages/Clone/useCreatedStores.ts

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

package/pages/Clone/utils/index.ts

@@ -0,0 +1,15 @@
+export const getCliResetCloneCommand = (cloneId: string) => {
+  return `dblab clone reset ${cloneId ? cloneId : `<CLONE_ID>`}`
+}
+
+export const getCliDestroyCloneCommand = (cloneId: string) => {
+  return `dblab clone destroy ${cloneId ? cloneId : `<CLONE_ID>`}`
+}
+
+export const getCliProtectedCloneCommand = (enabled: boolean) => {
+  return `dblab clone update --protected ${enabled ? '' : 'false'}`
+}
+
+export const getCreateSnapshotCommand = (cloneId: string) => {
+  return `dblab branch snapshot --clone-id ${cloneId}`
+}

package/pages/CreateBranch/index.tsx

@@ -0,0 +1,322 @@
+/*--------------------------------------------------------------------------
+ * 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 cn from 'classnames'
+import { useHistory } from 'react-router'
+import { observer } from 'mobx-react-lite'
+import React, { useEffect, useState } from 'react'
+import { TextField, 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 { CreateBranchFormValues } from '@postgres.ai/shared/types/api/endpoints/createBranch'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+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 { useForm } from './useForm'
+import { MainStoreApi } from './stores/Main'
+import { useCreatedStores } from './useCreatedStores'
+import { getCliBranchListCommand, getCliCreateBranchCommand } from './utils'
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+
+interface CreateBranchProps {
+  instanceId: string
+  api: MainStoreApi
+  routes: {
+    branch: (branchName: 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',
+    },
+    title: {
+      marginTop: '8px',
+      lineHeight: '26px'
+    },
+    form: {
+      marginTop: '16px',
+    },
+    spinner: {
+      marginLeft: '8px',
+      color: '#fff',
+    },
+    snapshotOverflow: {
+      width: '100%',
+      wordWrap: 'break-word',
+      whiteSpace: 'initial',
+    },
+  },
+  { index: 1 },
+)
+
+export const CreateBranchPage = observer(
+  ({ instanceId, api, elements, routes, isPlatform, hideBranchingFeatures }: CreateBranchProps) => {
+    const stores = useCreatedStores(api)
+    const classes = useStyles()
+    const history = useHistory()
+    const [branchSnapshots, setBranchSnapshots] = useState<Snapshot[]>([])
+    const [selectedBranchKey, setSelectedBranchKey] = useState<string>('main|')
+
+    const {
+      load,
+      branchesList,
+      getBranchesError,
+      createBranch,
+      createBranchError,
+      isBranchesLoading,
+      isCreatingBranch,
+      getSnapshots,
+      snapshotsError,
+    } = stores.main
+
+    const handleSubmit = async (values: CreateBranchFormValues) => {
+      await createBranch({
+        ...values,
+        instanceId,
+      }).then((branch) => {
+        if (branch && branch?.name) {
+          history.push(routes.branch(branch.name))
+        }
+      })
+    }
+
+    const fetchSnapshots = async (branchName: string, dataset?: string) => {
+      await getSnapshots(instanceId, branchName, dataset).then((response) => {
+        if (response) {
+          setBranchSnapshots(response)
+          formik.setFieldValue('snapshotID', response[0]?.id)
+        }
+      })
+    }
+
+    const handleParentBranchChange = async (
+      e: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+      const compositeKey = e.target.value
+      const [branchName, dataset] = compositeKey.split('|')
+
+      setSelectedBranchKey(compositeKey)
+      formik.setFieldValue('baseBranch', branchName)
+      await fetchSnapshots(branchName, dataset)
+    }
+
+    const [{ formik }] = useForm(handleSubmit)
+
+      useEffect(() => {
+          load(instanceId);
+      }, [instanceId]);
+
+      useEffect(() => {
+          if (!branchesList?.length) return;
+          const selected = branchesList.find(b => b.name === formik.values.baseBranch);
+          if (!selected) return;
+          const compositeKey = `${selected.name}|${selected.baseDataset || ''}`;
+          setSelectedBranchKey(compositeKey);
+          fetchSnapshots(selected.name, selected.baseDataset);
+      }, [branchesList]);
+
+    if (isBranchesLoading) {
+      return <StubSpinner />
+    }
+
+    return (
+      <>
+        {elements.breadcrumbs}
+        <SectionTitle tag="h1" level={1} text="Create branch" className={classes.title}>
+          <InstanceTabs
+            tab={TABS_INDEX.BRANCHES}
+            isPlatform={isPlatform}
+            instanceId={instanceId}
+            hasLogs={api.initWS !== undefined}
+            hideInstanceTabs={hideBranchingFeatures}
+          />
+        </SectionTitle>
+        <div className={classes.wrapper}>
+          <div className={classes.container}>
+            {(snapshotsError || getBranchesError) && (
+              <div className={classes.marginTop}>
+                <ErrorStub
+                  message={snapshotsError?.message || getBranchesError?.message}
+                />
+              </div>
+            )}
+            <div className={classes.form}>
+              <TextField
+                label="Branch name"
+                variant="outlined"
+                required
+                fullWidth
+                size="small"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+                value={formik.values.branchName}
+                error={Boolean(formik.errors.branchName)}
+                helperText={formik.errors.branchName}
+                className={classes.marginBottom}
+                onChange={(e) =>
+                  formik.setFieldValue('branchName', e.target.value)
+                }
+              />
+              <p className={cn(classes.marginTop, classes.marginBottom)}>
+                Choose an existing branch. The new branch will initially point
+                at the same snapshot as the parent branch but going further,
+                their evolution paths will be independent - new snapshots can be
+                created for both branches.
+              </p>
+              <Select
+                fullWidth
+                label="Parent branch"
+                value={selectedBranchKey}
+                disabled={!branchesList || formik.isSubmitting}
+                onChange={handleParentBranchChange}
+                error={Boolean(formik.errors.baseBranch)}
+                items={
+                  branchesList
+                    ? branchesList.map((branch) => {
+                        const displayName = branch.baseDataset
+                          ? `${branch.name} (${branch.baseDataset})`
+                          : branch.name
+                        const compositeValue = `${branch.name}|${branch.baseDataset || ''}`
+                        return {
+                          value: compositeValue,
+                          children: displayName,
+                        }
+                      })
+                    : []
+                }
+              />
+              <strong>Snapshot ID</strong>
+              <p className={cn(classes.marginTop, classes.marginBottom)}>
+                Choose an existing snapshot. This snapshot will be memorized as
+                a forking point for the new branch; it cannot be deleted while
+                the branch exists.
+              </p>
+              <Select
+                fullWidth
+                className={classes.marginBottom2x}
+                label="Snapshot ID"
+                value={formik.values.snapshotID}
+                disabled={!branchesList || formik.isSubmitting}
+                onChange={(e) =>
+                  formik.setFieldValue('snapshotID', e.target.value)
+                }
+                error={Boolean(formik.errors.baseBranch)}
+                items={
+                  branchSnapshots
+                    ? branchSnapshots.map((snapshot, i) => {
+                        const isLatest = i === 0
+                        return {
+                          value: snapshot.id,
+                          children: (
+                            <div>
+                              <strong className={classes.snapshotOverflow}>
+                                {snapshot?.id} {isLatest && <span>Latest</span>}
+                              </strong>
+                              {snapshot?.dataStateAt && (
+                                <p>Data state at: {snapshot?.dataStateAt}</p>
+                              )}
+                            </div>
+                          ),
+                        }
+                      })
+                    : []
+                }
+              />
+              <Button
+                variant="primary"
+                size="medium"
+                className={classes.marginTop}
+                onClick={formik.submitForm}
+              >
+                Create branch
+                {isCreatingBranch && (
+                  <Spinner size="sm" className={classes.spinner} />
+                )}
+              </Button>
+              {createBranchError && (
+                <ResponseMessage type={'error'} message={createBranchError} />
+              )}
+            </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 branch using CLI. Fill the
+              form, copy the command below and paste it into your terminal.
+            </p>
+            <SyntaxHighlight
+              content={getCliCreateBranchCommand(
+                formik.values.branchName,
+                formik.values.baseBranch,
+              )}
+            />
+            <SectionTitle
+              className={classes.marginTop}
+              tag="h2"
+              level={2}
+              text={'Get branches using CLI'}
+            />
+            <p className={classes.marginTop}>
+              You can get a list of all branches using CLI. Copy the command
+              below and paste it into your terminal.
+            </p>
+            <SyntaxHighlight content={getCliBranchListCommand()} />
+          </div>
+        </div>
+      </>
+    )
+  },
+)

package/pages/CreateBranch/stores/Main.ts

@@ -0,0 +1,99 @@
+/*--------------------------------------------------------------------------
+ * 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 { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import {
+  CreateBranch,
+  CreateBranchFormValues,
+} from '@postgres.ai/shared/types/api/endpoints/createBranch'
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
+
+type Error = {
+  title?: string
+  message: string
+}
+
+export type MainStoreApi = {
+  getBranches: GetBranches
+  createBranch: CreateBranch
+  getSnapshots: GetSnapshots
+  initWS?: InitWS
+}
+
+export class MainStore {
+  snapshotsError: Error | null = null
+  getBranchesError: Error | null = null
+  createBranchError: string | null = null
+
+  isBranchesLoading = false
+  isCreatingBranch = false
+
+  branchesList: Branch[] = []
+  private readonly api: MainStoreApi
+
+  constructor(api: MainStoreApi) {
+    this.api = api
+    makeAutoObservable(this)
+  }
+
+  load = async (instanceId: string) => {
+    await this.getBranches(instanceId).then((response) => {
+      if (response) {
+        this.branchesList = response
+      }
+    })
+  }
+
+  createBranch = async (values: CreateBranchFormValues) => {
+    if (!this.api.createBranch) return
+
+    this.isCreatingBranch = true
+    this.createBranchError = null
+
+    const { response, error } = await this.api.createBranch(values)
+
+    this.isCreatingBranch = false
+
+    if (error)
+      this.createBranchError = await error.json().then((err) => err.details)
+
+    return response
+  }
+
+  getBranches = async (instanceId: string) => {
+    if (!this.api.getBranches) return
+    this.isBranchesLoading = true
+
+    const { response, error } = await this.api.getBranches(instanceId)
+
+    this.isBranchesLoading = false
+
+    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.snapshotsError = await error.json().then((err) => err)
+    }
+
+    return response
+  }
+}

package/pages/CreateBranch/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 }