@postgres.ai/shared 3.5.1-pr-1027.0

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

@@ -0,0 +1,81 @@
+/*--------------------------------------------------------------------------
+ * 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/styles'
+import { observer } from 'mobx-react-lite'
+
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { ShieldIcon } from '@postgres.ai/shared/icons/Shield'
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
+
+import { Section } from '../components/Section'
+import { Property } from '../components/Property'
+import { ValueStatus } from '../components/ValueStatus'
+
+import { ConnectModal } from './ConnectModal'
+
+const useStyles = makeStyles(
+  {
+    connectButton: {
+      marginTop: '10px',
+    },
+    url: {
+      overflowWrap: 'break-word',
+    },
+    icon: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+    },
+  },
+  { index: 1 },
+)
+
+const checkIsSecureUrl = (urlStr: string) => {
+  const url = new URL(urlStr)
+  return url.protocol === 'https:'
+}
+
+export const Connection = observer(() => {
+  const stores = useStores()
+  const classes = useStyles()
+
+  const { instance } = stores.main
+  if (!instance?.url) return null
+
+  const isSecureUrl = checkIsSecureUrl(instance.url) || instance.useTunnel
+
+  return (
+    <Section title="Connection">
+      <Property name="URL">
+        <span className={classes.url}>{instance.url}</span>
+        <br />
+        <ValueStatus
+          type={isSecureUrl ? 'ok' : 'warning'}
+          icon={
+            isSecureUrl ? (
+              <ShieldIcon className={classes.icon} />
+            ) : (
+              <WarningIcon className={classes.icon} />
+            )
+          }
+        >
+          The connection to Database Lab API is{' '}
+          {isSecureUrl ? 'secure' : 'not secure'}
+        </ValueStatus>
+      </Property>
+
+      <Property name="WS tunnels">
+        {instance.useTunnel ? 'used' : 'not used'}
+      </Property>
+
+      <ConnectModal className={classes.connectButton} />
+    </Section>
+  )
+})

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

@@ -0,0 +1,20 @@
+/*--------------------------------------------------------------------------
+ * 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 { Section } from '../components/Section';
+import { Property } from '../components/Property';
+
+export const Details = () => {
+  return (
+    <Section title='Details'>
+      <Property name='Database docker image'>postgres:12</Property>
+      <Property name='Version'>0.4.4</Property>
+    </Section>
+  );
+};

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

@@ -0,0 +1,100 @@
+/*--------------------------------------------------------------------------
+ * 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, { useState } from 'react'
+import { IconButton, makeStyles, Menu, MenuItem } from '@material-ui/core'
+import { MoreVert } from '@material-ui/icons'
+import copy from 'copy-to-clipboard'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+
+type Props = {
+  poolId: string | null
+  poolName: string
+  isActive: boolean
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      padding: '3px 1px',
+      border: `1px solid ${colors.consoleStroke}`,
+      borderRadius: '4px',
+    },
+  },
+  { index: 1 },
+)
+
+export const ActionsMenu = (props: Props) => {
+  const classes = useStyles()
+  const stores = useStores()
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+
+  const isOpen = Boolean(anchorEl)
+
+  const openMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    setAnchorEl(e.currentTarget)
+  }
+
+  const closeMenu = () => setAnchorEl(null)
+
+  return (
+    <>
+      <IconButton className={classes.root} onClick={openMenu}>
+        <MoreVert />
+      </IconButton>
+
+      <Menu
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        anchorEl={anchorEl}
+        keepMounted
+        open={isOpen}
+        onClose={closeMenu}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <MenuItem
+          onClick={() => {
+            closeMenu()
+            copy(props.poolName)
+          }}
+        >
+          Copy name
+        </MenuItem>
+        {props.isActive && (
+          <div>
+            <MenuItem
+              onClick={() => {
+                closeMenu()
+                stores.clonesModal.openModal({ pool: props.poolId })
+              }}
+            >
+              List clones
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                closeMenu()
+                stores.snapshotsModal.openModal({ pool: props.poolId })
+              }}
+            >
+              List snapshots
+            </MenuItem>
+          </div>
+        )}
+      </Menu>
+    </>
+  )
+}

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
+
+import { CircleIcon } from '@postgres.ai/shared/icons/Circle'
+
+type Props = {
+  className: string
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      display: 'inline',
+      verticalAlign: 'middle',
+      width: '10px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Marker = (props: Props) => {
+  const classes = useStyles()
+
+  return <CircleIcon className={clsx(classes.root, props.className)} />
+}

package/pages/Instance/Info/Disks/Disk/ProgressBar/PointerIcon.tsx

@@ -0,0 +1,20 @@
+export const PoinerIcon = ({
+  className,
+  style,
+}: {
+  className?: string
+
+  style?: React.CSSProperties
+}) => (
+  <svg
+    width="5"
+    height="14"
+    viewBox="0 0 5 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+    className={className}
+  >
+    <path d="M2.5 14L-2.06593e-07 -4.37114e-07L5 0L2.5 14Z" fill="#EE0202" />
+  </svg>
+)

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

@@ -0,0 +1,73 @@
+import { makeStyles } from '@material-ui/core'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+
+import { PoinerIcon } from './PointerIcon'
+
+type Props = {
+  value: number
+  total: number
+  thresholdPercent: number
+}
+
+const useStyles = makeStyles(
+  (theme) => ({
+    '@keyframes grow': {
+      '0%': {
+        transform: 'scaleX(0)',
+      },
+      '100%': {
+        transform: 'scaleX(1)',
+      },
+    },
+    root: {
+      height: '12px',
+      position: 'relative',
+      borderRadius: '4px',
+      background: colors.gray,
+      overflow: 'hidden',
+      marginTop: '8px',
+    },
+    indicator: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '30%',
+      background: colors.primary.light,
+      animation: `$grow 500ms ${theme.transitions.easing.easeOut}`,
+      transformOrigin: 0,
+    },
+    pointer: {
+      position: 'absolute',
+      height: '100%',
+      top: 0,
+      transform: 'translateX(-50%)',
+    },
+  }),
+  { index: 1 },
+)
+
+export const ProgressBar = (props: Props) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div
+        className={classes.indicator}
+        style={{ width: `${(props.value / props.total) * 100}%` }}
+      />
+      <Tooltip
+        content={`+${props.thresholdPercent}% disk usage may result in performance degradation`}
+      >
+        <PoinerIcon
+          className={classes.pointer}
+          style={{
+            left: `${props.thresholdPercent}%`,
+          }}
+        />
+      </Tooltip>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { makeStyles } from '@material-ui/core'
+
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+export type Props = {
+  value: 'refreshing' | 'active' | 'empty'
+  hasWarning: boolean
+}
+
+const VALUE_TO_NAME: Record<Props['value'], string> = {
+  refreshing: 'Data refreshing',
+  active: 'Active',
+  empty: 'Empty',
+}
+
+const VALUE_TO_DESC: Record<Props['value'], string> = {
+  refreshing: 'Data retrieval is in progress',
+  active: 'Disk is ready to provision clones',
+  empty: 'Disk is emptied and ready for a data retrieval',
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      display: 'flex',
+      color: colors.white,
+    },
+    warning: {
+      display: 'flex',
+      flex: '0 0 16px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: '4px',
+      height: '16px',
+      background: colors.state.warning,
+      borderRadius: '3px',
+    },
+    icon: {
+      height: '10px',
+    },
+    label: {
+      fontSize: '12px',
+      padding: '1px 6px',
+      borderRadius: '3px',
+      flex: '0 0 auto',
+      background: (props: Props) => {
+        if (props.value === 'refreshing') return colors.state.notice
+        if (props.value === 'active') return colors.state.ok
+        return colors.state.unknown
+      },
+    },
+  },
+  { index: 1 },
+)
+
+export const Status = (props: Props) => {
+  const { value, hasWarning } = props
+
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.root}>
+      {hasWarning && (
+        <div className={classes.warning}>
+          <WarningIcon className={classes.icon} />
+        </div>
+      )}
+      <Tooltip content={VALUE_TO_DESC[value]}>
+        <div className={classes.label}>{VALUE_TO_NAME[value]}</div>
+      </Tooltip>
+    </div>
+  )
+}

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

@@ -0,0 +1,168 @@
+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 { Status as PerformanceStatus } from '@postgres.ai/shared/components/Status'
+import { formatUTC } from '@postgres.ai/shared/utils/date'
+
+import { Property } from '../../components/Property'
+import { ActionsMenu } from './ActionsMenu'
+import { Status } from './Status'
+import { Marker } from './Marker'
+import { ProgressBar } from './ProgressBar'
+
+const WARNING_THRESHOLD_PERCENT = 80
+
+type Props = {
+  id: string | null
+  name: string
+  totalDataSize: number
+  mode: string
+  refreshingStartDate: Date | null
+  clonesCount: number
+  snapshotsCount: number
+  usedDataSize: number
+  freeDataSize: number
+  status: 'refreshing' | 'active' | 'empty'
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      border: `1px solid ${colors.consoleStroke}`,
+      padding: '6px 8px 8px',
+      borderRadius: '4px',
+
+      '& + $root': {
+        marginTop: '8px',
+      },
+    },
+    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',
+    },
+    markerUsed: {
+      color: colors.primary.light,
+    },
+    markerFree: {
+      color: colors.gray,
+    },
+    warningMessage: {
+      fontSize: '10px',
+      marginTop: '6px',
+    },
+    uppercaseContent: {
+      textTransform: 'uppercase',
+    },
+  },
+  { index: 1 },
+)
+
+const getPercent = (value: number, total: number) =>
+  Math.round((value / total) * 100)
+
+export const Disk = (props: Props) => {
+  const classes = useStyles()
+
+  const shouldShowWarning =
+    props.status === 'active' &&
+    getPercent(props.usedDataSize, props.totalDataSize) >
+      WARNING_THRESHOLD_PERCENT
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        <div className={classes.titleWrapper}>
+          <h6 title={props.name} className={classes.title}>
+            {props.name}
+          </h6>
+          <ActionsMenu
+            poolId={props.id}
+            poolName={props.name}
+            isActive={props.status === 'active'}
+          />
+        </div>
+
+        <Status value={props.status} hasWarning={shouldShowWarning} />
+      </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 (
+            {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.totalDataSize)}</Property>
+        <Property
+          name={
+            <>
+              Used&nbsp;
+              <Marker className={classes.markerUsed} />
+            </>
+          }
+        >
+          {formatBytesIEC(props.usedDataSize)} /{' '}
+          {getPercent(props.usedDataSize, props.totalDataSize)} %
+        </Property>
+        <Property
+          name={
+            <>
+              Free&nbsp;
+              <Marker className={classes.markerFree} />
+            </>
+          }
+        >
+          {formatBytesIEC(props.freeDataSize)} /{' '}
+          {getPercent(props.freeDataSize, props.totalDataSize)} %
+        </Property>
+      </div>
+
+      <ProgressBar
+        value={props.usedDataSize}
+        total={props.totalDataSize}
+        thresholdPercent={WARNING_THRESHOLD_PERCENT}
+      />
+
+      {shouldShowWarning && (
+        <PerformanceStatus type="warning" className={classes.warningMessage}>
+          +{WARNING_THRESHOLD_PERCENT}% disk usage may result in performance
+          degradation
+        </PerformanceStatus>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+/*--------------------------------------------------------------------------
+ * 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 { Disk } from './Disk'
+
+export const Disks = observer(() => {
+  const stores = useStores()
+
+  const { instance, snapshots } = stores.main
+  if (!instance) return null
+  if (!snapshots) return null
+
+  return (
+    <Section title="Disks">
+      {instance.state?.pools?.map((pool) => {
+        return (
+          <Disk
+            key={pool.name}
+            status={pool.status}
+            name={pool.name}
+            id={pool.name}
+            mode={pool.mode}
+            clonesCount={pool.cloneList.length}
+            snapshotsCount={
+              snapshots.data?.filter((snapshot) => snapshot.pool === pool.name)
+                .length ?? 0
+            }
+            totalDataSize={pool.fileSystem.size}
+            usedDataSize={pool.fileSystem.used}
+            freeDataSize={pool.fileSystem.free}
+            refreshingStartDate={instance.state?.retrieving?.lastRefresh ?? null}
+          />
+        )
+      }) ??
+        (instance.state?.fileSystem && (
+          <Disk
+            status={'active'}
+            name={'Main'}
+            id={null}
+            mode="ZFS"
+            clonesCount={instance.state?.clones?.length ?? instance.state.cloning.clones.length}
+            snapshotsCount={snapshots.data?.length ?? 0}
+            totalDataSize={instance.state.fileSystem.size}
+            usedDataSize={instance.state.fileSystem.used}
+            freeDataSize={instance.state.fileSystem.free}
+            refreshingStartDate={null}
+          />
+        )) ?? (
+          <>
+            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>
+  )