@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/Instance/Info/Disks/PoolSection/DatasetRow/index.tsx

@@ -0,0 +1,117 @@
+import { makeStyles } from '@material-ui/core'
+import { formatDistanceToNowStrict } from 'date-fns'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { formatUTC, isValidDate } from '@postgres.ai/shared/utils/date'
+
+import { Property } from '../../../components/Property'
+import { ActionsMenu } from '../../Disk/ActionsMenu'
+import { Status } from '../../Disk/Status'
+
+export type DatasetInfo = {
+  id: string | null
+  name: string
+  showName: boolean
+  status: 'refreshing' | 'active' | 'empty'
+  mode: string
+  usedDataSize: number
+  clonesCount: number
+  snapshotsCount: number
+  refreshingStartDate: Date | null
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      border: `1px solid ${colors.consoleStroke}`,
+      padding: '6px 8px 8px',
+      borderRadius: '4px',
+      backgroundColor: colors.white,
+    },
+    header: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    titleWrapper: {
+      display: 'flex',
+      flex: '1 1 auto',
+      alignItems: 'center',
+      marginRight: '16px',
+      minWidth: 0,
+    },
+    title: {
+      fontWeight: 700,
+      fontSize: '14px',
+      margin: '0 4px 0 0',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+    content: {
+      marginTop: '8px',
+    },
+    uppercaseContent: {
+      textTransform: 'uppercase',
+    },
+  },
+  { index: 1 },
+)
+
+export const DatasetRow = (props: DatasetInfo) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        {props.showName ? (
+          <div className={classes.titleWrapper}>
+            <h6 title={props.name} className={classes.title}>
+              {props.name}
+            </h6>
+            <ActionsMenu
+              poolId={props.id}
+              poolName={props.id ?? props.name}
+              isActive={props.status === 'active'}
+            />
+          </div>
+        ) : (
+          <ActionsMenu
+            poolId={props.id}
+            poolName={props.id ?? props.name}
+            isActive={props.status === 'active'}
+          />
+        )}
+        <Status value={props.status} hasWarning={false} />
+      </div>
+
+      <Property name="Mode" classes={{ content: classes.uppercaseContent }}>
+        {props.mode}
+      </Property>
+
+      {props.status === 'refreshing' && props.refreshingStartDate && (
+        <div className={classes.content}>
+          <Property name="Refreshing started at">
+            {formatUTC(props.refreshingStartDate, 'yyyy-MM-dd HH:mm:ss')} UTC (
+            {isValidDate(props.refreshingStartDate)
+              ? formatDistanceToNowStrict(props.refreshingStartDate, {
+                  addSuffix: true,
+                })
+              : '-'}
+            )
+          </Property>
+        </div>
+      )}
+
+      <div className={classes.content}>
+        <Property name="Clones">{props.clonesCount}</Property>
+        <Property name="Snapshots">{props.snapshotsCount}</Property>
+      </div>
+
+      <div className={classes.content}>
+        <Property name="Size">{formatBytesIEC(props.usedDataSize)}</Property>
+      </div>
+    </div>
+  )
+}

package/pages/Instance/Info/Disks/PoolSection/index.tsx

@@ -0,0 +1,112 @@
+import { makeStyles } from '@material-ui/core'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { Status as PerformanceStatus } from '@postgres.ai/shared/components/Status'
+
+import { ProgressBar } from '../Disk/ProgressBar'
+import { DatasetRow, DatasetInfo } from './DatasetRow'
+
+const WARNING_THRESHOLD_PERCENT = 80
+
+type Props = {
+  poolName: string
+  totalSize: number
+  freeSize: number
+  datasets: DatasetInfo[]
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      border: `1px solid ${colors.consoleStroke}`,
+      padding: '6px 8px 8px',
+      borderRadius: '4px',
+      backgroundColor: colors.consoleMenuBackground,
+
+      '& + $root': {
+        marginTop: '8px',
+      },
+    },
+    headerRow: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      marginBottom: '4px',
+    },
+    poolName: {
+      fontWeight: 700,
+      fontSize: '14px',
+    },
+    poolSize: {
+      fontSize: '13px',
+      fontWeight: 700,
+    },
+    progressBarWrapper: {
+      marginTop: '4px',
+    },
+    poolStats: {
+      fontSize: '12px',
+      marginTop: '2px',
+    },
+    warningMessage: {
+      fontSize: '10px',
+      marginTop: '4px',
+    },
+    datasets: {
+      marginTop: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6px',
+    },
+  },
+  { index: 1 },
+)
+
+const getPercent = (value: number, total: number) =>
+  total === 0 ? 0 : Math.round((value / total) * 100)
+
+export const PoolSection = (props: Props) => {
+  const classes = useStyles()
+  const { poolName, totalSize, freeSize, datasets } = props
+
+  const usedSize = Math.max(0, totalSize - freeSize)
+  const usedPercent = getPercent(usedSize, totalSize)
+  const freePercent = Math.min(100, getPercent(freeSize, totalSize))
+  const hasActiveDataset = datasets.some((d) => d.status === 'active')
+  const shouldShowWarning =
+    hasActiveDataset && usedPercent > WARNING_THRESHOLD_PERCENT
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.headerRow}>
+        <span className={classes.poolName}>{poolName}</span>
+        <span className={classes.poolSize}>{formatBytesIEC(totalSize)}</span>
+      </div>
+      <div className={classes.progressBarWrapper}>
+        <ProgressBar
+          value={usedSize}
+          total={totalSize}
+          thresholdPercent={WARNING_THRESHOLD_PERCENT}
+          style={{ marginTop: 0 }}
+        />
+      </div>
+      <div className={classes.poolStats}>
+        <strong>{formatBytesIEC(usedSize)}</strong> used ({usedPercent}%) · {freePercent}% free
+      </div>
+
+      {shouldShowWarning && (
+        <PerformanceStatus type="warning" className={classes.warningMessage}>
+          +{WARNING_THRESHOLD_PERCENT}% disk usage may result in performance
+          degradation
+        </PerformanceStatus>
+      )}
+
+      <div className={classes.datasets}>
+        {datasets.map((dataset) => (
+          <DatasetRow key={dataset.id ?? dataset.name} {...dataset} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/pages/Instance/Info/Disks/index.tsx

@@ -0,0 +1,114 @@
+/*--------------------------------------------------------------------------
+ * 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 { observer } from 'mobx-react-lite'
+
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+
+import { Section } from '../components/Section'
+
+import { PoolSection } from './PoolSection'
+import { DatasetInfo } from './PoolSection/DatasetRow'
+
+export const Disks = observer(() => {
+  const stores = useStores()
+
+  const { instance, snapshots } = stores.main
+  if (!instance) return null
+  if (!snapshots) return null
+
+  const pools = instance.state?.pools
+
+  if (pools && pools.length > 0) {
+    const poolGroups: Record<string, typeof pools[number][]> = {}
+    for (const pool of pools) {
+      const slashIdx = pool.name.indexOf('/')
+      const poolName =
+        slashIdx !== -1 ? pool.name.slice(0, slashIdx) : pool.name
+      if (!poolGroups[poolName]) poolGroups[poolName] = []
+      poolGroups[poolName].push(pool)
+    }
+
+    return (
+      <Section title="Disks">
+        {Object.entries(poolGroups).map(([poolName, poolList]) => {
+          const firstPool = poolList[0]
+
+          const datasets: DatasetInfo[] = poolList.map((pool) => {
+            const slashIdx = pool.name.indexOf('/')
+            const datasetName =
+              slashIdx !== -1 ? pool.name.slice(slashIdx + 1) : pool.name
+
+            const datasetSnapshots =
+              snapshots.data?.filter((s) => s.pool === pool.name) ?? []
+
+            return {
+              id: pool.name,
+              name: datasetName,
+              showName: slashIdx !== -1,
+              status: pool.status,
+              mode: pool.mode,
+              usedDataSize: pool.fileSystem.used,
+              clonesCount: pool.cloneList.length,
+              snapshotsCount: datasetSnapshots.length,
+              refreshingStartDate:
+                instance.state?.retrieving?.lastRefresh ?? null,
+            }
+          })
+
+          return (
+            <PoolSection
+              key={poolName}
+              poolName={poolName}
+              totalSize={firstPool.fileSystem.size}
+              freeSize={firstPool.fileSystem.free}
+              datasets={datasets}
+            />
+          )
+        })}
+      </Section>
+    )
+  }
+
+  if (instance.state?.fileSystem) {
+    const allSnapshots = snapshots.data ?? []
+
+    const dataset: DatasetInfo = {
+      id: null,
+      name: 'Main',
+      showName: false,
+      status: 'active',
+      mode: 'zfs',
+      usedDataSize: instance.state.fileSystem.used,
+      clonesCount:
+        instance.state?.clones?.length ??
+        instance.state.cloning.clones.length,
+      snapshotsCount: allSnapshots.length,
+      refreshingStartDate:
+        instance.state?.retrieving?.lastRefresh ?? null,
+    }
+
+    return (
+      <Section title="Disks">
+        <PoolSection
+          poolName="Main"
+          totalSize={instance.state.fileSystem.size}
+          freeSize={instance.state.fileSystem.free}
+          datasets={[dataset]}
+        />
+      </Section>
+    )
+  }
+
+  return (
+    <Section title="Disks">
+      <>
+        Disk information is <strong>unavailable</strong>.
+      </>
+    </Section>
+  )
+})

package/pages/Instance/Info/Icons/index.tsx

@@ -0,0 +1,39 @@
+export const ArrowLeft = ({ className }: { className?: string }) => (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M0.307554 9.50891L9.50896 0.307513C9.91902 -0.102504 10.583 -0.102504 10.9931 0.307513C11.4031 0.7172 11.4031 1.38195 10.9931 1.79163L2.53369 10.251L10.993 18.7103C11.403 19.12 11.403 19.7847 10.993 20.1944C10.788 20.3995 10.5196 20.502 10.251 20.502C9.98229 20.502 9.71356 20.3995 9.50891 20.1944L0.307507 10.993C-0.102512 10.5833 -0.10251 9.9186 0.307554 9.50891Z"
+        fill="white"
+      />
+      <path
+        d="M9.00696 9.50891L18.2084 0.307513C18.6181 -0.102504 19.2828 -0.102504 19.6925 0.307513C20.1025 0.7172 20.1025 1.38195 19.6925 1.79163L11.2335 10.251L19.6924 18.7103C20.1025 19.12 20.1025 19.7847 19.6924 20.1944C19.4878 20.3995 19.2191 20.502 18.9504 20.502C18.6817 20.502 18.413 20.3995 18.2083 20.1944L9.00692 10.993C8.59695 10.5833 8.59695 9.9186 9.00696 9.50891Z"
+        fill="white"
+      />
+    </svg>
+  )
+  
+  export const ArrowRight = ({ className }: { className?: string }) => (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M20.211 9.5089L10.8896 0.307513C10.4742 -0.102504 9.80151 -0.102504 9.38609 0.307513C8.97073 0.717199 8.97073 1.38195 9.38609 1.79163L17.9558 10.251L9.38614 18.7103C8.97078 19.12 8.97078 19.7847 9.38614 20.1944C9.59385 20.3994 9.8657 20.502 10.1379 20.502C10.4101 20.502 10.6823 20.3994 10.8896 20.1944L20.211 10.993C20.6264 10.5833 20.6264 9.91859 20.211 9.5089Z"
+        fill="white"
+      />
+      <path
+        d="M11.3981 9.5089L2.07672 0.307513C1.66169 -0.102504 0.988271 -0.102504 0.573242 0.307513C0.157878 0.717199 0.157878 1.38195 0.573242 1.79163L9.14256 10.251L0.57329 18.7103C0.157926 19.12 0.157926 19.7847 0.57329 20.1944C0.780613 20.3994 1.05284 20.502 1.32503 20.502C1.59721 20.502 1.86944 20.3994 2.07677 20.1944L11.3982 10.993C11.8135 10.5833 11.8135 9.91859 11.3981 9.5089Z"
+        fill="white"
+      />
+    </svg>
+  )

package/pages/Instance/Info/Retrieval/ConfirmFullRefreshModal/index.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import { makeStyles } from '@material-ui/core'
+
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  instanceId: string
+}
+
+interface ErrorResponse {
+  error?: {
+    message?: string
+    details?: string
+  }
+}
+
+const useStyles = makeStyles(
+  {
+    errorMessage: {
+      color: 'red',
+      marginTop: '10px',
+      wordBreak: 'break-all',
+    },
+    checkboxRoot: {
+      padding: '9px 10px',
+    },
+    grayText: {
+      color: '#8a8a8a',
+      fontSize: '12px',
+      wordBreak: 'break-word',
+    },
+    marginTop: {
+      marginTop: '6px',
+    },
+  },
+  { index: 1 },
+)
+
+export const ConfirmFullRefreshModal = ({
+  isOpen,
+  onClose,
+  instanceId,
+}: Props) => {
+  const classes = useStyles()
+  const stores = useStores()
+  
+  const { fullRefresh } = stores.main
+
+  const [fullRefreshError, setFullRefreshError] = useState<ErrorResponse | null>(null)
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  const handleConfirm = async () => {
+    const result = await fullRefresh(instanceId);
+    if (!result) {
+      setFullRefreshError({ error: { message: 'Unexpected error occurred.' } });
+      return;
+    }
+    const { response, error } = result;
+    if (error) {
+      setFullRefreshError({
+        error: {
+          message: error.message,
+        },
+      })
+      return
+    }
+    if (response) {
+      onClose()
+    }
+  }
+
+
+  return (
+    <Modal
+      title={'Confirmation'}
+      onClose={handleClose}
+      isOpen={isOpen}
+      size="sm"
+    >
+      <Text>
+        Are you sure you want to perform a full refresh of the instance? 
+        This action cannot be undone.
+      </Text>
+      {fullRefreshError && <p className={classes.errorMessage}>{fullRefreshError.error?.message}</p>}
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: handleClose,
+          },
+          {
+            text: 'Confirm',
+            variant: 'primary',
+            onClick: handleConfirm,
+            isDisabled: fullRefreshError !== null,
+          },
+        ]}
+      />
+    </Modal>
+  )
+}

package/pages/Instance/Info/Retrieval/RefreshFailedAlert/index.tsx

@@ -0,0 +1,32 @@
+import { observer } from 'mobx-react-lite'
+
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
+import { formatDateStd } from '@postgres.ai/shared/utils/date'
+
+import { Property } from '../../components/Property'
+
+import styles from './styles.module.scss'
+
+export const RefreshFailedAlert = observer(() => {
+  const stores = useStores()
+
+  const refreshFailed =
+    stores.main.instance?.state?.retrieving?.alerts?.refreshFailed
+  if (!refreshFailed) return null
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <h6 className={styles.title}>{refreshFailed.message}</h6>
+        <WarningIcon className={styles.icon} />
+      </div>
+      <Property classes={{ name: styles.propertyName }} name="Last seen">
+        {formatDateStd(refreshFailed.lastSeen, { withDistance: true })}
+      </Property>
+      <Property classes={{ name: styles.propertyName }} name="Count">
+        {refreshFailed.count}
+      </Property>
+    </div>
+  )
+})

package/pages/Instance/Info/Retrieval/RetrievalModal/index.tsx

@@ -0,0 +1,43 @@
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton'
+import { ActivityType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
+import { RetrievalTable } from '../RetrievalTable'
+
+import styles from './styles.module.scss'
+
+export const RetrievalModal = ({
+  isOpen,
+  onClose,
+  data,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  data: {
+    source: ActivityType[]
+    target: ActivityType[]
+  }
+}) => {
+  const stores = useStores()
+  const { isReloadingInstanceRetrieval, reloadInstanceRetrieval } = stores.main
+
+  return (
+    <Modal
+      title="Retrieval activity details"
+      isOpen={isOpen}
+      onClose={onClose}
+      size="md"
+      titleRightContent={
+        <ModalReloadButton
+          isReloading={isReloadingInstanceRetrieval}
+          onReload={reloadInstanceRetrieval}
+        />
+      }
+    >
+      <div className={styles.tableContainer}>
+        <RetrievalTable data={data?.source} activity="source" />
+        <RetrievalTable data={data?.target} activity="target" />
+      </div>
+    </Modal>
+  )
+}

package/pages/Instance/Info/Retrieval/RetrievalTable/index.tsx

@@ -0,0 +1,53 @@
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from '@material-ui/core'
+import { ActivityType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
+
+import styles from './styles.module.scss'
+
+export const RetrievalTable = ({
+  data,
+  activity,
+}: {
+  data: ActivityType[]
+  activity: string
+}) => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell className={styles.tableSubtitle}>
+            Activity on the {activity}
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody className={styles.tableBody}>
+        {data && data.length > 0 ? (
+          data.map((item, index) => (
+            <div key={index}>
+              {Object.entries(item).map((val, index) => (
+                <TableRow key={index} hover className={styles.tableRow}>
+                  <TableCell>
+                    {val[0]}: {val[1]}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </div>
+          ))
+        ) : (
+          <TableBody className={styles.tableBody}>
+            <div>
+              <TableRow className={styles.tableRow}>
+                <TableCell>No activity on the {activity}</TableCell>
+              </TableRow>
+            </div>
+          </TableBody>
+        )}
+      </TableBody>
+    </Table>
+  )
+}