@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Instance/components/ClonesList/MenuCell/utils.ts

@@ -0,0 +1,21 @@
+/*--------------------------------------------------------------------------
+ * 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
+ *--------------------------------------------------------------------------
+ */
+
+export const destroyRestriction = (cloneId: string) => {
+  const message = `The clone "${cloneId}" is marked as protected. To destroy it, disable the destroy protection first.`
+  window.alert(message)
+}
+
+export const getResetApprove = (cloneId: string) => {
+  const message = `Are you sure you want to reset the Database Lab clone: "${cloneId}"?`
+  return window.confirm(message)
+}
+
+export const getDestroyApprove = (cloneId: string) => {
+  const message = `Are you sure you want to destroy the Database Lab clone: "${cloneId}"?`
+  return window.confirm(message)
+}

package/pages/Instance/components/ClonesList/index.tsx

@@ -0,0 +1,189 @@
+/*--------------------------------------------------------------------------
+ * 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 { useState } from 'react'
+import cn from 'classnames'
+import { formatDistanceToNowStrict } from 'date-fns'
+import { useHistory } from 'react-router-dom'
+
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeaderCell,
+  TableBody,
+  TableBodyCell,
+} from '@postgres.ai/shared/components/Table'
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+import { ShieldIcon } from '@postgres.ai/shared/icons/Shield'
+import { RenewableIcon } from '@postgres.ai/shared/icons/Renewable'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { Status } from '@postgres.ai/shared/components/Status'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
+import { useHost } from '@postgres.ai/shared/pages/Instance/context'
+import {
+  getCloneStatusType,
+  getCloneStatusText,
+} from '@postgres.ai/shared/utils/clone'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+
+import { MenuCell } from './MenuCell'
+import { ConnectionModal } from './ConnectionModal'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  clones?: Clone[]
+  isDisabled: boolean
+  emptyStubText: string
+}
+
+export const ClonesList = (props: Props) => {
+  const host = useHost()
+  const history = useHistory()
+
+  const [cloneIdForConnect, setCloneIdForConnect] = useState<null | string>(
+    null,
+  )
+  const [isOpenConnectionModal, setIsOpenConnectionModal] = useState(false)
+
+  const openConnectionModal = (cloneId: string) => {
+    setCloneIdForConnect(cloneId)
+    setIsOpenConnectionModal(true)
+  }
+
+  const closeConnectionModal = () => {
+    setIsOpenConnectionModal(false)
+  }
+
+  if (!props.clones?.length)
+    return <p className={styles.emptyStub}>{props.emptyStubText}</p>
+
+  return (
+    <>
+      <HorizontalScrollContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell />
+              <TableHeaderCell>Status</TableHeaderCell>
+              <TableHeaderCell>ID</TableHeaderCell>
+              <TableHeaderCell>
+                <Tooltip content="When enabled, neither manual nor automated deletion of this clone is possible. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.">
+                  <div className={styles.verticalCentered}>
+                    Protected
+                    <InfoIcon className={styles.infoIcon} />
+                  </div>
+                </Tooltip>
+              </TableHeaderCell>
+              <TableHeaderCell>
+                <div className={styles.verticalCentered}>
+                  Created
+                  <ArrowDropDownIcon className={styles.sortIcon} />
+                </div>
+              </TableHeaderCell>
+              <TableHeaderCell>Port</TableHeaderCell>
+              <TableHeaderCell>DB user</TableHeaderCell>
+              <TableHeaderCell>
+                <Tooltip content="Clone's own size – how much data was added or modified.">
+                  <div className={styles.verticalCentered}>
+                    Diff size
+                    <InfoIcon className={styles.infoIcon} />
+                  </div>
+                </Tooltip>
+              </TableHeaderCell>
+              <TableHeaderCell>Disk</TableHeaderCell>
+              <TableHeaderCell>Data state time</TableHeaderCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {props.clones.map((clone) => {
+              const clonePagePath = host.routes.clone(clone.id)
+
+              return (
+                <TableRow
+                  hover={!props.isDisabled}
+                  key={clone.id}
+                  onClick={
+                    props.isDisabled
+                      ? undefined
+                      : () => history.push(clonePagePath)
+                  }
+                  className={cn(!props.isDisabled && styles.interactiveRow)}
+                >
+                  <MenuCell
+                    clone={clone}
+                    onConnect={openConnectionModal}
+                    clonePagePath={clonePagePath}
+                  />
+                  <TableBodyCell>
+                    <Tooltip content={clone.status.message}>
+                      <Status type={getCloneStatusType(clone.status.code)}>
+                        {getCloneStatusText(clone.status.code)}
+                      </Status>
+                    </Tooltip>
+                  </TableBodyCell>
+                  <TableBodyCell>{clone.id}</TableBodyCell>
+                  <TableBodyCell>
+                    {clone.protected ? (
+                      <Tooltip content="Clone is protected from manual and automated deletion. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.">
+                        <ShieldIcon className={styles.protectionIcon} />
+                      </Tooltip>
+                    ) : (
+                      <Tooltip content="Clone is not protected from deletion. To save disk space it will be automatically deleted if there is no activity for a long time.">
+                        <RenewableIcon className={styles.protectionIcon} />
+                      </Tooltip>
+                    )}
+                  </TableBodyCell>
+                  <TableBodyCell>
+                    {clone.createdAt} (
+                    {formatDistanceToNowStrict(clone.createdAtDate, {
+                      addSuffix: true,
+                    })}
+                    )
+                  </TableBodyCell>
+                  <TableBodyCell>{clone.db.port}</TableBodyCell>
+                  <TableBodyCell>{clone.db.username}</TableBodyCell>
+                  <TableBodyCell>
+                    {formatBytesIEC(clone.metadata.cloneDiffSize)}
+                  </TableBodyCell>
+                  <TableBodyCell>{clone.snapshot?.pool ?? '-'}</TableBodyCell>
+                  <TableBodyCell>
+                    {clone.snapshot ? (
+                      <>
+                        {clone.snapshot.dataStateAt} (
+                        {formatDistanceToNowStrict(
+                          clone.snapshot.dataStateAtDate,
+                          {
+                            addSuffix: true,
+                          },
+                        )}
+                        )
+                      </>
+                    ) : (
+                      '-'
+                    )}
+                  </TableBodyCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </HorizontalScrollContainer>
+
+      {cloneIdForConnect && (
+        <ConnectionModal
+          cloneId={cloneIdForConnect}
+          isOpen={isOpenConnectionModal}
+          onClose={closeConnectionModal}
+        />
+      )}
+    </>
+  )
+}

package/pages/Instance/components/ClonesList/styles.module.scss

@@ -0,0 +1,32 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.interactiveRow {
+  cursor: pointer;
+}
+
+.verticalCentered {
+  display: flex;
+  align-items: center;
+}
+
+.infoIcon {
+  margin-left: 4px;
+  height: 12px;
+  width: 12px;
+}
+
+.sortIcon {
+  margin-left: 8px;
+  width: 10px;
+}
+
+.protectionIcon {
+  display: block;
+  margin-left: 5px;
+  height: 1em;
+  color: $color-gray-semi-dark;
+}
+
+.emptyStub {
+  margin-top: 16px;
+}

package/pages/Instance/components/ErrorStub/index.tsx

@@ -0,0 +1,77 @@
+/*--------------------------------------------------------------------------
+ * 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 from 'react'
+import { Paper, makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
+
+type Props = {
+  title?: string
+  message: string
+  className?: string
+  size?: 'big' | 'normal'
+}
+
+const useStyles = makeStyles(
+  {
+    '*': {
+      margin: 0,
+    },
+    root: {
+      color: '#c00111',
+      overflowWrap: 'break-word',
+    },
+    rootBig: {
+      padding: '16px 24px',
+
+      '& $title': {
+        fontSize: '16px',
+      },
+      '& $message': {
+        marginTop: '16px',
+        fontSize: '14px',
+      },
+    },
+    rootNormal: {
+      padding: '8px 16px',
+
+      '& $title': {
+        fontSize: '14px',
+      },
+      '& $message': {
+        marginTop: '12px',
+        fontSize: '12px',
+      },
+    },
+    title: {
+      fontWeight: 700,
+      textTransform: 'uppercase',
+    },
+    message: {},
+  },
+  { index: 1 },
+)
+
+export const ErrorStub = (props: Props) => {
+  const { title = 'Unknown error', message, className, size = 'big' } = props
+
+  const classes = useStyles()
+
+  return (
+    <Paper
+      className={clsx(
+        classes.root,
+        size === 'big' && classes.rootBig,
+        size === 'normal' && classes.rootNormal,
+        className,
+      )}
+    >
+      <h2 className={classes.title}>{title}</h2>
+      <p className={classes.message}>{message}</p>
+    </Paper>
+  )
+}

package/pages/Instance/components/ModalReloadButton/index.tsx

@@ -0,0 +1,43 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeStyles } from '@material-ui/core'
+
+import { Button } from '@postgres.ai/shared/components/Button2'
+
+type Props = {
+  isReloading: boolean
+  onReload: () => void
+}
+
+const useStyles = makeStyles(
+  {
+    spinner: {
+      margin: '5px',
+    },
+    content: {
+      flex: '0 0 auto',
+      alignSelf: 'flex-start',
+    },
+  },
+  { index: 1 },
+)
+
+export const ModalReloadButton = (props: Props) => {
+  const classes = useStyles()
+
+  return (
+    <Button
+      onClick={props.onReload}
+      className={classes.content}
+      isLoading={props.isReloading}
+      isDisabled={props.isReloading}
+    >
+      Reload info
+    </Button>
+  )
+}

package/pages/Instance/components/Tags/Tag/index.tsx

@@ -0,0 +1,60 @@
+/*--------------------------------------------------------------------------
+ * 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 from 'react'
+import { makeStyles } from '@material-ui/core'
+
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { colors } from '@postgres.ai/shared/styles/vars'
+
+type Props = {
+  name: string
+  children: React.ReactNode
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      fontSize: '12px',
+      marginRight: '8px',
+      marginBottom: '8px',
+      borderRadius: '12px',
+      background: colors.gray,
+    },
+    content: {
+      padding: '5px 8px',
+      whiteSpace: 'nowrap',
+    },
+    curtainLeft: {
+      background: 'linear-gradient(to right, rgba(0,0,0,0.1), transparent);',
+    },
+    curtainRight: {
+      background: 'linear-gradient(to left, rgba(0,0,0,0.1), transparent);',
+    },
+    value: {
+      fontWeight: 700,
+    },
+  },
+  { index: 1 },
+)
+
+export const Tag = (props: Props) => {
+  const classes = useStyles()
+
+  return (
+    <HorizontalScrollContainer
+      classes={{
+        root: classes.root,
+        content: classes.content,
+        curtainLeft: classes.curtainLeft,
+        curtainRight: classes.curtainRight,
+      }}
+    >
+      {props.name}: <span className={classes.value}>{props.children}</span>
+    </HorizontalScrollContainer>
+  )
+}

package/pages/Instance/components/Tags/index.tsx

@@ -0,0 +1,42 @@
+/*--------------------------------------------------------------------------
+ * 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 from 'react'
+import { makeStyles } from '@material-ui/core'
+
+import { Tag } from './Tag'
+
+export type TagsProps = {
+  data: { name: string; value: string }[]
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginRight: '-8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Tags = (props: TagsProps) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      {props.data.map((tag) => {
+        return (
+          <Tag key={tag.name} name={tag.name}>
+            {tag.value}
+          </Tag>
+        )
+      })}
+    </div>
+  )
+}

package/pages/Instance/context.ts

@@ -0,0 +1,39 @@
+/*--------------------------------------------------------------------------
+ * 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 { createStrictContext } from '@postgres.ai/shared/utils/react'
+
+import { Api } from './stores/Main'
+import { Stores } from './useCreatedStores'
+
+export type Host = {
+  instanceId: string
+  routes: {
+    createClone: () => string
+    clone: (cloneId: string) => string
+  }
+  api: Api
+  title: string
+  callbacks?: {
+    showDeprecatedApiBanner: () => void
+    hideDeprecatedApiBanner: () => void
+  }
+  elements: {
+    breadcrumbs: React.ReactNode
+  }
+  wsHost?: string
+  isPlatform?: boolean
+  setProjectAlias?: (alias: string) => void
+}
+
+// Host context.
+export const { useStrictContext: useHost, Provider: HostProvider } =
+  createStrictContext<Host>()
+
+// Stores context.
+export const { useStrictContext: useStores, Provider: StoresProvider } =
+  createStrictContext<Stores>()