@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Instance/index.tsx

@@ -0,0 +1,235 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeStyles } from '@material-ui/core'
+import { observer } from 'mobx-react-lite'
+
+import { Button } from '@postgres.ai/shared/components/Button2'
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+
+import { Tabs } from './Tabs'
+import { Logs } from '../Logs'
+import { Clones } from './Clones'
+import { Info } from './Info'
+import { Configuration } from '../Configuration'
+import { ClonesModal } from './ClonesModal'
+import { SnapshotsModal } from './SnapshotsModal'
+import { InactiveInstance } from './InactiveInstance'
+import { Host, HostProvider, StoresProvider } from './context'
+
+import Typography from '@material-ui/core/Typography'
+import Box from '@mui/material/Box'
+
+import { useCreatedStores } from './useCreatedStores'
+
+import './styles.scss'
+
+type Props = Host
+
+const useStyles = makeStyles(
+  (theme) => ({
+    title: {
+      marginTop: '8px',
+    },
+    reloadButton: {
+      flex: '0 0 auto',
+      alignSelf: 'flex-start',
+    },
+    errorStub: {
+      marginTop: '16px',
+    },
+    content: {
+      display: 'flex',
+      marginTop: '16px',
+      position: 'relative',
+      flex: '1 1 100%',
+      height: '100%',
+
+      [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+      },
+    },
+  }),
+  { index: 1 },
+)
+
+export const Instance = observer((props: Props) => {
+  const classes = useStyles()
+
+  const { instanceId, api } = props
+  const [activeTab, setActiveTab] = React.useState(0)
+  const [hasBeenRedirected, setHasBeenRedirected] = React.useState(false);
+
+  const stores = useCreatedStores(props)
+  const {
+    instance,
+    instanceError,
+    instanceRetrieval,
+    isLoadingInstance,
+    load,
+    reload,
+  } = stores.main
+
+  const switchTab = (_: React.ChangeEvent<{}> | null, tabID: number) => {
+    const contentElement = document.getElementById('content-container')
+    setActiveTab(tabID)
+
+    if (tabID === 0) {
+      load(props.instanceId)
+    }
+    contentElement?.scroll(0, 0)
+  }
+
+  const isInstanceIntegrated =
+    instanceRetrieval ||
+    (!isLoadingInstance && instance && instance?.url && !instanceError)
+
+  const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
+
+  useEffect(() => {
+    load(instanceId)
+  }, [instanceId])
+
+  useEffect(() => {
+    if (props.setProjectAlias) props.setProjectAlias(instance?.projectAlias || '')
+  }, [instance])
+
+  useEffect(() => {
+    if (
+      instance &&
+      instance?.state?.retrieving?.status === 'pending' &&
+      isConfigurationActive &&
+      !props.isPlatform &&
+      !hasBeenRedirected
+    ) {
+      setActiveTab(2)
+      setHasBeenRedirected(true)
+    }
+  }, [instance, hasBeenRedirected])
+
+  return (
+    <HostProvider value={props}>
+      <StoresProvider value={stores}>
+        {props.elements.breadcrumbs}
+        <SectionTitle
+          text={props.title}
+          level={1}
+          tag="h1"
+          className={classes.title}
+          rightContent={
+            <Button
+              onClick={() => reload(props.instanceId)}
+              isDisabled={!instance && !instanceError}
+              className={classes.reloadButton}
+            >
+              Reload info
+            </Button>
+          }
+        >
+          {isInstanceIntegrated && (
+            <Tabs
+              isPlatform={props.isPlatform}
+              value={activeTab}
+              handleChange={switchTab}
+              hasLogs={api.initWS != undefined}
+            />
+          )}
+        </SectionTitle>
+
+        {instanceError && (
+          <ErrorStub {...instanceError} className={classes.errorStub} />
+        )}
+
+        {isInstanceIntegrated ? (
+          <>
+            <TabPanel value={activeTab} index={0}>
+              {!instanceError && (
+                <div className={classes.content}>
+                  {!instance ||
+                    (!instance?.state?.retrieving?.status && <StubSpinner />)}
+
+                  {instance ? (
+                    <>
+                      <Clones />
+                      <Info />
+                    </>
+                  ) : (
+                    <StubSpinner />
+                  )}
+                </div>
+              )}
+
+              <ClonesModal />
+
+              <SnapshotsModal />
+            </TabPanel>
+
+            {!props.isPlatform && (
+              <>
+                <TabPanel value={activeTab} index={1}>
+                  {activeTab === 1 && <Logs api={api} />}
+                </TabPanel>
+
+                <TabPanel value={activeTab} index={2}>
+                  <Configuration
+                    isConfigurationActive={isConfigurationActive}
+                    disableConfigModification={
+                      instance?.state?.engine.disableConfigModification
+                    }
+                    switchActiveTab={switchTab}
+                    reload={() => load(props.instanceId)}
+                  />
+                </TabPanel>
+              </>
+            )}
+          </>
+        ) : !isLoadingInstance && !instanceError ? (
+          <TabPanel value={activeTab} index={activeTab}>
+            <InactiveInstance
+              instance={instance}
+              org={(props.elements.breadcrumbs as any)?.props.org}
+            />
+          </TabPanel>
+        ) : (
+          !instanceError && (
+            <TabPanel value={activeTab} index={0}>
+              <div className={classes.content}>
+                <StubSpinner />
+              </div>
+            </TabPanel>
+          )
+        )}
+      </StoresProvider>
+    </HostProvider>
+  )
+})
+
+function TabPanel(props: {
+  children?: React.ReactNode
+  index: number
+  value: number
+}) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`scrollable-auto-tabpanel-${index}`}
+      aria-labelledby={`scrollable-auto-tab-${index}`}
+      {...other}
+    >
+      <Box p={3} sx={{ height: '100%' }}>
+        {children}
+      </Box>
+    </Typography>
+  )
+}

package/pages/Instance/stores/ClonesModal.ts

@@ -0,0 +1,35 @@
+/*--------------------------------------------------------------------------
+ * 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'
+
+type FilterOptions = {
+  pool?: string | null
+  snapshotId?: string
+}
+
+export class ClonesModalStore {
+  isOpenModal = false
+  pool: string | null = null
+  snapshotId: string | null = null
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  openModal = (filterOptions: FilterOptions | undefined = {}) => {
+    const { pool = null, snapshotId = null } = filterOptions
+
+    this.pool = pool
+    this.snapshotId = snapshotId
+    this.isOpenModal = true
+  }
+
+  closeModal = () => {
+    this.isOpenModal = false
+  }
+}

package/pages/Instance/stores/Main.ts

@@ -0,0 +1,335 @@
+/*--------------------------------------------------------------------------
+ * 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 { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
+import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
+import { Config } from '@postgres.ai/shared/types/api/entities/config'
+import { GetConfig } from '@postgres.ai/shared/types/api/endpoints/getConfig'
+import { UpdateConfig } from '@postgres.ai/shared/types/api/endpoints/updateConfig'
+import { TestDbSource } from '@postgres.ai/shared/types/api/endpoints/testDbSource'
+import { RefreshInstance } from '@postgres.ai/shared/types/api/endpoints/refreshInstance'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
+import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
+import { GetWSToken } from '@postgres.ai/shared/types/api/endpoints/getWSToken'
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
+import { SnapshotsStore } from '@postgres.ai/shared/stores/Snapshots'
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
+import { dbSource } from '@postgres.ai/shared/types/api/entities/dbSource'
+import { GetFullConfig } from '@postgres.ai/shared/types/api/endpoints/getFullConfig'
+import { GetInstanceRetrieval } from '@postgres.ai/shared/types/api/endpoints/getInstanceRetrieval'
+import { InstanceRetrievalType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
+import { GetEngine } from '@postgres.ai/shared/types/api/endpoints/getEngine'
+import { GetSeImages } from '@postgres.ai/shared/types/api/endpoints/getSeImages'
+
+const UNSTABLE_CLONE_STATUS_CODES = ['CREATING', 'RESETTING', 'DELETING']
+
+export type Api = {
+  getInstance: GetInstance
+  getSnapshots: GetSnapshots
+  refreshInstance?: RefreshInstance
+  destroyClone: DestroyClone
+  resetClone: ResetClone
+  getWSToken: GetWSToken
+  initWS?: InitWS
+  getConfig?: GetConfig
+  updateConfig?: UpdateConfig
+  testDbSource?: TestDbSource
+  getFullConfig?: GetFullConfig
+  getSeImages?: GetSeImages
+  getEngine?: GetEngine
+  getInstanceRetrieval?: GetInstanceRetrieval
+}
+
+type Error = {
+  title?: string
+  message?: string
+}
+
+export class MainStore {
+  instance: Instance | null = null
+  instanceRetrieval: InstanceRetrievalType | null = null
+  config: Config | null = null
+  fullConfig?: string
+  platformUrl?: string
+  instanceError: Error | null = null
+  configError: string | null = null
+  getFullConfigError: string | null = null
+  seImagesError: string | undefined | null = null
+
+  unstableClones = new Set<string>()
+
+  readonly snapshots: SnapshotsStore
+
+  isReloadingClones = false
+  isConfigurationLoading = false
+  isReloadingInstance = false
+  isReloadingInstanceRetrieval = false
+  isLoadingInstance = false
+
+  private readonly api: Api
+
+  constructor(api: Api) {
+    makeAutoObservable(this)
+
+    this.api = api
+    this.snapshots = new SnapshotsStore(api)
+  }
+
+  get isDisabledInstance() {
+    if (!this.instance) return true
+    return this.instance.state?.status.code === 'NO_RESPONSE'
+  }
+
+  load = (instanceId: string) => {
+    this.instance = null
+    this.isReloadingInstance = true
+    this.loadInstance(instanceId, false).then(() => {
+      if (this.instance?.createdAt && this.instance?.url || !this.instance?.createdAt) {
+        this.snapshots.load(instanceId)
+      }
+    })
+    this.loadInstanceRetrieval(instanceId).then(() => {
+      if (this.instanceRetrieval) {
+        this.getConfig()
+        this.getFullConfig()
+      }
+    })
+  }
+
+  reload = (instanceId: string) => {
+    this.instance = null
+    this.isReloadingInstance = true
+    this.loadInstance(instanceId, false).then(() => {
+      if (this.api.refreshInstance)
+        this.api.refreshInstance({ instanceId: instanceId })
+
+        if (this.instance?.createdAt && this.instance?.url || !this.instance?.createdAt) {
+        this.snapshots.load(instanceId)
+      }
+    })
+    this.loadInstanceRetrieval(instanceId).then(() => {
+      if (this.instanceRetrieval) {
+        this.getConfig()
+        this.getFullConfig()
+      }
+    })
+  }
+
+  reloadSnapshots = async () => {
+    if (!this.instance) return
+    await this.snapshots.reload(this.instance.id)
+  }
+
+  reloadInstanceRetrieval = async () => {
+    if (!this.instance) return
+    this.isReloadingInstanceRetrieval = true
+    this.loadInstanceRetrieval(this.instance.id)
+    this.isReloadingInstanceRetrieval = false
+  }
+
+  private loadInstanceRetrieval = async (instanceId: string) => {
+    if (!this.api.getInstanceRetrieval) return
+
+    const { response, error } = await this.api.getInstanceRetrieval({
+      instanceId: instanceId,
+    })
+
+    if (response) this.instanceRetrieval = response
+
+    if (error)
+      this.instanceError = { message: await getTextFromUnknownApiError(error) }
+
+    return !!response
+  }
+
+  private loadInstance = async (
+    instanceId: string,
+    refresh: boolean = true,
+  ) => {
+    this.instanceError = null
+    this.isLoadingInstance = true
+
+    if (this.api.refreshInstance && refresh)
+      await this.api.refreshInstance({ instanceId: instanceId })
+
+    const { response, error } = await this.api.getInstance({
+      instanceId: instanceId,
+    })
+
+    this.isLoadingInstance = false
+
+    if (response === null) {
+      this.instanceError = {
+        title: 'Error 404',
+        message: 'Specified instance not found or you have no access.',
+      }
+    }
+
+    if (response) {
+      this.instance = response
+
+      const unstableClones = new Set<string>()
+
+      this.instance.state?.cloning.clones?.forEach((clone) => {
+        if (UNSTABLE_CLONE_STATUS_CODES.includes(clone.status.code)) {
+          unstableClones.add(clone.id)
+        }
+      })
+
+      this.unstableClones = unstableClones
+    }
+
+    if (error)
+      this.instanceError = { message: await getTextFromUnknownApiError(error) }
+
+    return !!response
+  }
+
+  getConfig = async () => {
+    if (!this.api.getConfig) return
+
+    this.isConfigurationLoading = true
+
+    const { response, error } = await this.api.getConfig()
+
+    this.isConfigurationLoading = false
+
+    if (response) {
+      this.config = response
+      this.configError = null
+    }
+
+    if (error) {
+      this.configError = await error.json().then((err) => err.message)
+    }
+
+    return response
+  }
+
+  updateConfig = async (values: Config) => {
+    if (!this.api.updateConfig) return
+
+    const { response, error } = await this.api.updateConfig({ ...values })
+
+    if (error) this.configError = await error.json().then((err) => err.message)
+
+    return response
+  }
+
+  getFullConfig = async () => {
+    if (!this.api.getFullConfig) return
+
+    const { response, error } = await this.api.getFullConfig()
+    if (response) {
+      this.fullConfig = response
+
+      const splitYML = this.fullConfig.split('---')
+      this.platformUrl = splitYML[0]?.split('url: ')[1]?.split('\n')[0]
+    }
+
+    if (error)
+      this.getFullConfigError = await error
+        .json()
+        .then((err: Error) => err.message)
+
+    return response
+  }
+
+  getSeImages = async (values: { packageGroup: string }) => {
+    if (!this.api.getSeImages || !this.platformUrl) return
+
+    const { response, error } = await this.api.getSeImages({
+      packageGroup: values.packageGroup,
+      platformUrl: this.platformUrl,
+    })
+
+    if (response) {
+      this.seImagesError = null
+    }
+
+    if (error) {
+      this.seImagesError = await error.json().then((err: Error) => err.message)
+    }
+
+    return response
+  }
+
+  getEngine = async () => {
+    if (!this.api.getEngine) return
+
+    this.configError = null
+
+    const { response, error } = await this.api.getEngine()
+
+    if (error) await getTextFromUnknownApiError(error)
+    return response
+  }
+
+  testDbSource = async (values: dbSource) => {
+    if (!this.api.testDbSource) return
+
+    const { response, error } = await this.api.testDbSource(values)
+
+    return {
+      response,
+      error,
+    }
+  }
+
+  resetClone = async (cloneId: string, snapshotId: string) => {
+    if (!this.instance) return
+
+    this.unstableClones.add(cloneId)
+
+    const { response, error } = await this.api.resetClone({
+      cloneId,
+      snapshotId,
+      instanceId: this.instance.id,
+    })
+
+    if (response) this.liveUpdateInstance()
+    if (error) await getTextFromUnknownApiError(error)
+
+    return !!response
+  }
+
+  destroyClone = async (cloneId: string) => {
+    if (!this.instance) return
+
+    this.unstableClones.add(cloneId)
+
+    const { response, error } = await this.api.destroyClone({
+      cloneId,
+      instanceId: this.instance.id,
+    })
+
+    if (response) this.liveUpdateInstance()
+    if (error) await getTextFromUnknownApiError(error)
+
+    return !!response
+  }
+
+  private liveUpdateInstance = async () => {
+    if (!this.unstableClones.size) return
+    if (!this.instance) return
+
+    await this.loadInstance(this.instance.id)
+    await this.loadInstanceRetrieval(this.instance.id)
+
+    if (!this.unstableClones.size) return
+  }
+
+  reloadClones = async () => {
+    if (!this.instance) return
+    this.isReloadingClones = true
+    await this.loadInstance(this.instance.id)
+    await this.loadInstanceRetrieval(this.instance.id)
+    this.isReloadingClones = false
+  }
+}

package/pages/Instance/stores/SnapshotsModal.ts

@@ -0,0 +1,35 @@
+/*--------------------------------------------------------------------------
+ * 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'
+
+type FilterOptions = {
+  pool?: string | null
+  date?: Date
+}
+
+export class SnapshotsModalStore {
+  isOpenModal = false
+  pool: string | null = null
+  date: Date | null = null
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  openModal = (filterOptions: FilterOptions | undefined = {}) => {
+    const { pool = null, date = null } = filterOptions
+
+    this.pool = pool
+    this.date = date
+    this.isOpenModal = true
+  }
+
+  closeModal = () => {
+    this.isOpenModal = false
+  }
+}

package/pages/Instance/styles.scss

@@ -0,0 +1,40 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2022, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+ #logs-container {
+  margin: 20px 0 0 0;
+  border: 1px solid #b4b4b4;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+
+  & > p {
+    font-size: small;
+    font-family: 'Fira Code', monospace;
+    padding: 1px 0;
+  }
+}
+
+.error-log {
+  color: red;
+}
+
+.snackbar-tag {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff2e5;
+  color: #000;
+  font-weight: 500;
+  font-size: 11px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: all 40050ms ease;
+  cursor: pointer;
+  z-index: 1;
+}

package/pages/Instance/useCreatedStores.ts

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

package/pages/Logs/Icons/PlusIcon.tsx

@@ -0,0 +1,8 @@
+export const PlusIcon = () => (
+  <svg viewBox="0 0 512 512" focusable="false">
+    <path
+      fill="currentColor"
+      d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"
+    ></path>
+  </svg>
+)