@postgres.ai/shared 4.0.4 → 4.1.0

package/pages/Instance/Snapshots/utils/index.ts

@@ -0,0 +1,39 @@
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
+
+export const generateSnapshotPageId = (id: string) => {
+  if (!id.includes('@')) return null
+
+  const snapshotIdPart = id.split('@')[1]
+  return snapshotIdPart.startsWith('snapshot_')
+    ? snapshotIdPart.substring(9)
+    : snapshotIdPart
+}
+
+export const groupSnapshotsByCreatedAtDate = (snapshots: Snapshot[]) => {
+  const groups: Snapshot[][] = []
+
+  snapshots.forEach((snapshot) => {
+    let grouped = false
+
+    for (const group of groups) {
+      const groupDate = new Date(group[0].createdAtDate)
+
+      if (isSameDayUTC(snapshot.createdAtDate, groupDate)) {
+        group.push(snapshot)
+        grouped = true
+        break
+      }
+    }
+
+    if (!grouped) {
+      groups.push([snapshot])
+    }
+  })
+
+  groups.sort((a, b) => {
+    return b[0].createdAtDate.getTime() - a[0].createdAtDate.getTime()
+  })
+
+  return groups
+}

package/pages/Instance/SnapshotsModal/index.tsx

@@ -0,0 +1,159 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeStyles } from '@material-ui/core'
+import copy from 'copy-to-clipboard'
+
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+import { Modal as ModalBase } from '@postgres.ai/shared/components/Modal'
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeaderCell,
+  TableBodyCell,
+  TableBodyCellMenu,
+} from '@postgres.ai/shared/components/Table'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { isSameDayUTC, formatDateWithDistance } from '@postgres.ai/shared/utils/date'
+
+import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags'
+import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton'
+import { getTags } from '../Snapshots/components/SnapshotsModal/utils'
+
+const useStyles = makeStyles(
+  {
+    root: {
+      fontSize: '14px',
+      marginTop: 0,
+      display: 'block',
+    },
+    container: {
+      maxHeight: '400px',
+    },
+    cellContentCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    sortIcon: {
+      marginLeft: '8px',
+      width: '10px',
+    },
+    emptyStub: {
+      marginTop: '16px',
+    },
+  },
+  { index: 1 },
+)
+
+export const SnapshotsModal = observer(() => {
+  const classes = useStyles()
+  const stores = useStores()
+
+  const { snapshots } = stores.main
+  if (!snapshots.data) return null
+
+  const filteredSnapshots = snapshots.data.filter((snapshot) => {
+    const isMatchedByDate =
+      !stores.snapshotsModal.date ||
+      isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date)
+
+    const isMatchedByPool =
+      !stores.snapshotsModal.pool ||
+      snapshot.pool === stores.snapshotsModal.pool
+
+    return isMatchedByDate && isMatchedByPool
+  })
+
+  const isEmpty = !filteredSnapshots.length
+
+  return (
+    <ModalBase
+      isOpen={stores.snapshotsModal.isOpenModal}
+      onClose={stores.snapshotsModal.closeModal}
+      title={`Snapshots (${filteredSnapshots.length})`}
+      classes={{ content: classes.root }}
+      size="md"
+      titleRightContent={
+        <ModalReloadButton
+          isReloading={stores.main.snapshots.isLoading}
+          onReload={stores.main.reloadSnapshots}
+        />
+      }
+      headerContent={
+        <Tags
+          data={getTags({
+            date: stores.snapshotsModal.date,
+            pool: stores.snapshotsModal.pool,
+          })}
+        />
+      }
+    >
+      {isEmpty && <p className={classes.emptyStub}>No snapshots found</p>}
+
+      {!isEmpty && (
+        <HorizontalScrollContainer classes={{ content: classes.container }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell />
+                <TableHeaderCell>Data state time</TableHeaderCell>
+                <TableHeaderCell>
+                  <div className={classes.cellContentCentered}>
+                    Created
+                    <ArrowDropDownIcon className={classes.sortIcon} />
+                  </div>
+                </TableHeaderCell>
+                <TableHeaderCell>Disk</TableHeaderCell>
+                <TableHeaderCell>Size</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filteredSnapshots.map((snapshot) => {
+                return (
+                  <TableRow key={snapshot.id}>
+                    <TableBodyCellMenu
+                      actions={[
+                        {
+                          name: 'Copy snapshot ID',
+                          onClick: () => copy(snapshot.id),
+                        },
+                        {
+                          name: 'Show related clones',
+                          onClick: () =>
+                            stores.clonesModal.openModal({
+                              snapshotId: snapshot.id,
+                            }),
+                        },
+                      ]}
+                    />
+                    <TableBodyCell>
+                      {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
+                    </TableBodyCell>
+                    <TableBodyCell>
+                      {formatDateWithDistance(snapshot.createdAt, snapshot.createdAtDate)}
+                    </TableBodyCell>
+                    <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
+                    <TableBodyCell>
+                      {snapshot.physicalSize
+                        ? formatBytesIEC(snapshot.physicalSize)
+                        : '-'}
+                    </TableBodyCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </HorizontalScrollContainer>
+      )}
+    </ModalBase>
+  )
+})

package/pages/Instance/Tabs/PlatformTabs.tsx

@@ -0,0 +1,83 @@
+/*--------------------------------------------------------------------------
+ * 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 { Link, useParams } from 'react-router-dom'
+import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
+
+import { TABS_INDEX } from '.'
+import { useTabsStyles } from './styles'
+import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
+
+type Props = {
+  value: number
+  handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
+  hasLogs: boolean
+  isPlatform?: boolean
+  hideInstanceTabs?: boolean
+}
+
+export const PlatformTabs = ({
+  value,
+  handleChange,
+  hasLogs,
+  hideInstanceTabs,
+}: Props) => {
+  const classes = useTabsStyles()
+  const { org, instanceId } = useParams<{ org: string; instanceId: string }>()
+
+  const tabs = [
+    {
+      label: '👁️ Overview',
+      to: 'overview',
+      value: TABS_INDEX.OVERVIEW,
+    },
+    {
+      label: '🖖 Branches',
+      to: 'branches',
+      value: TABS_INDEX.BRANCHES,
+      hide: hideInstanceTabs,
+    },
+    {
+      label: '⚡ Snapshots',
+      to: 'snapshots',
+      value: TABS_INDEX.SNAPSHOTS,
+      hide: hideInstanceTabs,
+    },
+    {
+      label: (
+        <div className={classes.flexRow}>
+          <PostgresSQLIcon /> Clones
+        </div>
+      ),
+      to: 'clones',
+      value: TABS_INDEX.CLONES,
+      hide: hideInstanceTabs,
+    }
+  ]
+
+  return (
+    <TabsComponent
+      value={value}
+      onChange={handleChange}
+      classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
+    >
+      {tabs.map(({ label, to, value, hide }) => (
+        <Link key={value} to={`/${org}/instances/${instanceId}/${to}`}>
+          <TabComponent
+            label={label}
+            value={value}
+            classes={{
+              root: hide ? classes.tabHidden : classes.tabRoot,
+            }}
+            onClick={(event) => handleChange(event, value)}
+          />
+        </Link>
+      ))}
+    </TabsComponent>
+  )
+}

package/pages/Instance/Tabs/index.tsx

@@ -0,0 +1,140 @@
+/*--------------------------------------------------------------------------
+ * 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 { Link } from 'react-router-dom'
+import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
+
+import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
+import { useTabsStyles } from './styles'
+import { PlatformTabs } from "./PlatformTabs";
+import { useCreatedStores } from "../useCreatedStores";
+import { Host } from '../context'
+
+
+export const TABS_INDEX = {
+  OVERVIEW: 0,
+  BRANCHES: 1,
+  SNAPSHOTS: 2,
+  CLONES: 3,
+  LOGS: 4,
+  CONFIGURATION: 5,
+}
+export interface TabsProps {
+  value: number
+  handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
+  hasLogs: boolean
+  isPlatform?: boolean
+  hideInstanceTabs?: boolean
+}
+
+export const Tabs = ({
+  value,
+  handleChange,
+  hasLogs,
+  hideInstanceTabs,
+}: TabsProps) => {
+  const classes = useTabsStyles()
+
+  const tabData = [
+    { label: '👁️ Overview', to: '/instance', value: TABS_INDEX.OVERVIEW },
+    {
+      label: '🖖 Branches',
+      to: '/instance/branches',
+      value: TABS_INDEX.BRANCHES,
+      hide: hideInstanceTabs,
+    },
+    {
+      label: '⚡ Snapshots',
+      to: '/instance/snapshots',
+      value: TABS_INDEX.SNAPSHOTS,
+      hide: hideInstanceTabs,
+    },
+    {
+      label: (
+        <div className={classes.flexRow}>
+          <PostgresSQLIcon /> Clones
+        </div>
+      ),
+      to: '/instance/clones',
+      value: TABS_INDEX.CLONES,
+      hide: hideInstanceTabs,
+    },
+    {
+      label: '📓 Logs',
+      to: '/instance/logs',
+      value: TABS_INDEX.LOGS,
+      disabled: !hasLogs,
+    },
+    {
+      label: '🛠️ Configuration',
+      to: '/instance/configuration',
+      value: TABS_INDEX.CONFIGURATION,
+      hide: hideInstanceTabs,
+    },
+  ]
+
+  return (
+    <TabsComponent
+      value={value}
+      onChange={handleChange}
+      classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
+    >
+      {tabData.map(({ label, to, value, hide, disabled }) => (
+        <Link key={value} to={to}>
+          <TabComponent
+            label={label}
+            value={value}
+            disabled={disabled}
+            classes={{
+              root: hide ? classes.tabHidden : classes.tabRoot,
+            }}
+          />
+        </Link>
+      ))}
+    </TabsComponent>
+  )
+}
+
+type InstanceTabProps = {
+  tab: number
+  isPlatform?: boolean
+  onTabChange?: (tabID: number) => void
+  instanceId: string
+  hasLogs: boolean
+  hideInstanceTabs?: boolean
+}
+
+export const InstanceTabs = (props: InstanceTabProps) => {
+  const { instanceId, onTabChange, tab, hasLogs, hideInstanceTabs = false } = props;
+  const stores = useCreatedStores({} as unknown as Host)
+  const {
+    load,
+  } = stores.main
+
+  const switchTab = (_: React.ChangeEvent<{}> | null, tabID: number) => {
+    const contentElement = document.getElementById('content-container')
+    if (onTabChange) {
+      onTabChange(tabID)
+    }
+
+    if (tabID === 0) {
+      load(instanceId)
+    }
+
+    contentElement?.scrollTo(0, 0)
+  }
+
+  const tabProps = {
+    value: tab,
+    handleChange: switchTab,
+    hasLogs: Boolean(hasLogs),
+    hideInstanceTabs: hideInstanceTabs,
+  }
+
+  return props.isPlatform ? <PlatformTabs {...tabProps} /> : <Tabs {...tabProps} />
+}

package/pages/Instance/Tabs/styles.ts

@@ -0,0 +1,68 @@
+import { makeStyles } from '@material-ui/core'
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+export const useTabsStyles = makeStyles(
+  {
+    tabsRoot: {
+      minHeight: 0,
+      marginTop: '-8px',
+      '& .MuiTabs-fixed': {
+        overflowX: 'auto!important',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+
+        '& div:first-child': {
+          '@media (max-width: 700px)': {
+            display: 'flex',
+          },
+        },
+      },
+      '& .postgres-logo': {
+        width: '18px',
+        height: '18px',
+      },
+      '& a': {
+        color: colors.black,
+        textDecoration: 'none',
+
+        '@media (max-width: 700px)': {
+          display: 'flex',
+          width: '100%',
+        },
+      },
+    },
+    flexRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '5px',
+      width: '100%',
+    },
+    tabsIndicator: {
+      height: '3px',
+    },
+    tabRoot: {
+      fontWeight: 400,
+      minWidth: 0,
+      minHeight: 0,
+      width: '100%',
+      padding: '6px 16px',
+      borderBottom: `3px solid ${colors.consoleStroke}`,
+      '& + $tabRoot': {
+        marginLeft: '10px',
+      },
+      '&.Mui-disabled': {
+        opacity: 1,
+        color: colors.pgaiDarkGray,
+      },
+      '@media (max-width: 700px)': {
+        width: 'max-content',
+      },
+    },
+    tabHidden: {
+      display: 'none',
+    },
+  },
+  { index: 1 },
+)

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,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 { 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}
+    >
+      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>
+  )
+}