@postgres.ai/shared 4.1.3 → 4.2.0-pr-1200

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

@@ -1,113 +0,0 @@
-import { useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { makeStyles } from '@material-ui/core'
-
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { Status } from '@postgres.ai/shared/components/Status'
-import { capitalize } from '@postgres.ai/shared/utils/strings'
-import { formatDateStd } from '@postgres.ai/shared/utils/date'
-import { Button } from '@postgres.ai/shared/components/Button2'
-
-import { Section } from '../components/Section'
-import { Property } from '../components/Property'
-
-import { RefreshFailedAlert } from './RefreshFailedAlert'
-
-import { getTypeByStatus, isRetrievalUnknown } from './utils'
-import { RetrievalModal } from './RetrievalModal'
-import { ConfirmFullRefreshModal } from './ConfirmFullRefreshModal'
-
-const useStyles = makeStyles(
-  () => ({
-    infoIcon: {
-      height: '12px',
-      width: '12px',
-      marginLeft: '8px',
-      color: '#808080',
-    },
-    detailsButton: {
-      marginLeft: '8px',
-      '@media (max-width: 600px)': {
-        marginTop: '4px',
-      },
-    },
-  }),
-  { index: 1 },
-)
-
-type RetrievalProps = {
-  hideBranchingFeatures?: boolean
-}
-
-export const Retrieval = observer((props: RetrievalProps) => {
-  const stores = useStores()
-  const classes = useStyles()
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
-  const [isFullRefreshModalOpen, setIsFullRefreshModalOpen] = useState<boolean>(false)
-
-  const { instance, instanceRetrieval } = stores.main
-  if (!instance) return null
-
-  const retrieving = instance.state?.retrieving
-  if (!retrieving) return null
-
-  if (!instanceRetrieval) return null
-
-  const { mode, status, activity } = instanceRetrieval
-
-  const isVisible = mode !== 'physical' && !isRetrievalUnknown(mode)
-  const isActive = mode === 'logical' && status === 'refreshing'
-  const canCallFullRefresh = retrieving.status === 'finished' || retrieving.status === 'failed'
-
-  return (
-    <Section title="Retrieval">
-      <Property name="Status">
-        <Status type={getTypeByStatus(retrieving.status)}>
-          {capitalize(retrieving.status)}
-          {isVisible && (
-            <>
-              <Button
-                theme="primary"
-                onClick={() => setIsModalOpen(true)}
-                isDisabled={!isActive}
-                className={classes.detailsButton}
-              >
-                Show details
-              </Button>
-            </>
-          )}
-          {!props.hideBranchingFeatures && <Button
-            theme="secondary"
-            onClick={() => setIsFullRefreshModalOpen(true)}
-            isDisabled={!canCallFullRefresh}
-            className={classes.detailsButton}
-          >
-            Full refresh
-          </Button>}
-        </Status>
-      </Property>
-      <Property name="Mode">{retrieving.mode}</Property>
-      <Property name="Last refresh">
-        {retrieving.lastRefresh
-          ? formatDateStd(retrieving.lastRefresh, { withDistance: true })
-          : '-'}
-      </Property>
-      <Property name="Next refresh">
-        {retrieving.nextRefresh
-          ? formatDateStd(retrieving.nextRefresh, { withDistance: true })
-          : 'Not scheduled'}
-      </Property>
-      <RefreshFailedAlert />
-      <RetrievalModal
-        data={activity}
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-      />
-      <ConfirmFullRefreshModal
-        isOpen={isFullRefreshModalOpen}
-        onClose={() => setIsFullRefreshModalOpen(false)}
-        instanceId={instance.id}
-      />
-    </Section>
-  )
-})

package/pages/Instance/Info/Retrieval/utils.ts

@@ -1,10 +0,0 @@
-export const getTypeByStatus = (status: string | undefined) => {
-  if (status === 'finished') return 'ok'
-  if (status === 'refreshing') return 'waiting'
-  if (status === 'failed') return 'error'
-  return 'unknown'
-}
-
-export const isRetrievalUnknown = (mode: string | undefined) => {
-  return mode === 'unknown' || mode === ''
-}

package/pages/Instance/Info/Snapshots/Calendar/Day/index.tsx

@@ -1,125 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 clsx from 'clsx'
-
-import { isSameDayUTC, formatUTC } from '@postgres.ai/shared/utils/date'
-import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { colors } from '@postgres.ai/shared/styles/colors'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-
-const CELL_SIZE = 28
-
-const useStyles = makeStyles(
-  {
-    root: {
-      position: 'relative',
-      cursor: 'default',
-      flex: `0 0 ${CELL_SIZE}px`,
-      background: '#f4f4f4',
-      height: `${CELL_SIZE}px`,
-      display: 'flex',
-      borderRadius: `${CELL_SIZE / 2}px`,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '16px',
-      fontSize: '12px',
-    },
-    rootHasSnapshots: {
-      background: colors.secondary2.lightLight,
-      cursor: 'pointer',
-    },
-    rootCurrent: {
-      border: `1px solid ${colors.secondary2.main}`,
-    },
-    rootDisabled: {
-      opacity: '0.25',
-      pointerEvents: 'none',
-    },
-    itemsCount: {
-      top: '-8px',
-      right: '-6px',
-      position: 'absolute',
-      fontSize: '8px',
-      backgroundColor: colors.white,
-      border: `1px solid ${colors.secondary2.lightLight}`,
-      borderRadius: '8px',
-      height: '16px',
-      padding: '2px',
-      minWidth: '16px',
-
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    break: {
-      flex: '0 0 100%',
-    },
-  },
-  { index: 1 },
-)
-
-type Props = {
-  date: Date
-  snapshots: Snapshot[]
-  isBreak: boolean
-  isDisabled: boolean
-  onClick: () => void
-}
-
-export const Day = (props: Props) => {
-  const { date, isBreak, snapshots, isDisabled, onClick } = props
-  const classes = useStyles()
-
-  const today = new Date()
-
-  const breakRendered = isBreak && <div className={classes.break} />
-
-  const dayRendered = (
-    <div
-      className={clsx(
-        classes.root,
-        snapshots.length && classes.rootHasSnapshots,
-        isDisabled && classes.rootDisabled,
-        isSameDayUTC(today, date) && classes.rootCurrent,
-      )}
-      onClick={snapshots.length ? onClick : void 0}
-    >
-      {!!snapshots.length && (
-        <div className={classes.itemsCount}>{snapshots.length}</div>
-      )}
-      {formatUTC(date, 'd')}
-    </div>
-  )
-
-  if (snapshots.length) {
-    const contentRendered = (
-      <>
-        {snapshots.map((snapshot) => {
-          return <div key={snapshot.id}>{snapshot.dataStateAt}</div>
-        })}
-      </>
-    )
-
-    return (
-      <>
-        <Tooltip content={contentRendered} disableTouchListener>
-          {dayRendered}
-        </Tooltip>
-        {breakRendered}
-      </>
-    )
-  }
-
-  return (
-    <>
-      {dayRendered}
-      {breakRendered}
-    </>
-  )
-}

package/pages/Instance/Info/Snapshots/Calendar/index.tsx

@@ -1,133 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { makeStyles, IconButton } from '@material-ui/core'
-import { ArrowLeft, ArrowRight } from '@material-ui/icons'
-
-import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { colors } from '@postgres.ai/shared/styles/colors'
-import { formatUTC } from '@postgres.ai/shared/utils/date'
-
-import { Day } from './Day'
-
-import {
-  getPrevMonthStartDate,
-  getNextMonthStartDate,
-  canGetNextMonthStartDate,
-  getMonthStartDate,
-  getCalendar,
-} from './utils'
-
-const useStyles = makeStyles(
-  {
-    root: {
-      marginTop: '8px',
-    },
-    header: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    title: {
-      fontWeight: 700,
-      fontSize: '12px',
-    },
-    button: {
-      padding: '8px',
-
-      '&:disabled': {
-        pointerEvents: 'auto',
-        cursor: 'not-allowed',
-      },
-    },
-    buttonIcon: {
-      fontSize: '20px',
-    },
-    days: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    },
-    weekDay: {
-      fontSize: '12px',
-      flex: '0 0 24px',
-      textAlign: 'center',
-      color: colors.pgaiDarkGray,
-      marginTop: '12px',
-    },
-  },
-  { index: 1 },
-)
-
-type Props = {
-  snapshots: Snapshot[]
-  onSelectDate: (date: Date) => void
-}
-
-export const Calendar = (props: Props) => {
-  const { snapshots, onSelectDate } = props
-
-  const [monthStartDate, setMonthStartDate] = useState(getMonthStartDate)
-
-  const classes = useStyles()
-
-  const nextMonth = () => {
-    const nextMonthStartDate = getNextMonthStartDate(monthStartDate)
-    setMonthStartDate(nextMonthStartDate)
-  }
-
-  const prevMonth = () => {
-    const prevMonthStartDate = getPrevMonthStartDate(monthStartDate)
-    setMonthStartDate(prevMonthStartDate)
-  }
-
-  const calendar = getCalendar(monthStartDate, snapshots)
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.header}>
-        <span className={classes.title}>
-          {formatUTC(monthStartDate, 'MMMM y')} UTC
-        </span>
-        <div>
-          <IconButton onClick={prevMonth} className={classes.button}>
-            <ArrowLeft className={classes.buttonIcon} />
-          </IconButton>
-          <IconButton
-            onClick={nextMonth}
-            disabled={!canGetNextMonthStartDate(monthStartDate)}
-            className={classes.button}
-          >
-            <ArrowRight className={classes.buttonIcon} />
-          </IconButton>
-        </div>
-      </div>
-      <div className={classes.days}>
-        {calendar.weekDays.map((weekDay) => {
-          return (
-            <div key={weekDay} className={classes.weekDay}>
-              {weekDay}
-            </div>
-          )
-        })}
-      </div>
-      <div className={classes.days}>
-        {calendar.days.map((day) => (
-          <Day
-            onClick={() => onSelectDate(day.date)}
-            isBreak={day.isBreak}
-            isDisabled={day.isDisabled}
-            date={day.date}
-            snapshots={day.snapshots}
-            key={day.date.getTime()}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}

package/pages/Instance/Info/Snapshots/Calendar/utils.ts

@@ -1,74 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { daysInWeek } from 'date-fns'
-
-import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { config } from '@postgres.ai/shared/config'
-import {
-  startOfMonthUTC,
-  isSameDayUTC,
-  startOfWeekUTC,
-  endOfMonthUTC,
-  endOfWeekUTC,
-  startOfDayUTC,
-  differenceInDaysUTC,
-  addDaysUTC,
-  addMonthsUTC,
-  isSameMonthUTC,
-  formatUTC
-} from '@postgres.ai/shared/utils/date'
-
-export const getMonthStartDate = () => startOfMonthUTC(new Date())
-
-const getEdgeDates = (monthStartDate: Date) => {
-  return {
-    firstDate: startOfWeekUTC(monthStartDate, { locale: config.dateFnsLocale }),
-    lastDate: startOfDayUTC(
-      endOfWeekUTC(endOfMonthUTC(monthStartDate), {
-        locale: config.dateFnsLocale,
-      }),
-    ),
-  }
-}
-
-export const getCalendar = (monthStartDate: Date, snapshots: Snapshot[]) => {
-  const { firstDate, lastDate } = getEdgeDates(monthStartDate)
-
-  const countDays = differenceInDaysUTC(lastDate, firstDate)
-
-  const days = Array.from({ length: countDays + 1 }, (_, i) => {
-    const date = addDaysUTC(firstDate, i)
-
-    return {
-      date,
-      snapshots: snapshots.filter((snapshot) =>
-        isSameDayUTC(date, snapshot.dataStateAtDate),
-      ),
-      isBreak: i > 0 && (i + 1) % 7 === 0,
-      isDisabled: !isSameMonthUTC(monthStartDate, date),
-    }
-  })
-
-  const weekDays = days
-    .slice(0, daysInWeek)
-    .map((day) => formatUTC(day.date, 'E'))
-
-  return {
-    weekDays,
-    days,
-  }
-}
-
-export const getPrevMonthStartDate = (monthStartDate: Date) =>
-  addMonthsUTC(monthStartDate, -1)
-
-export const getNextMonthStartDate = (monthStartDate: Date) =>
-  addMonthsUTC(monthStartDate, 1)
-
-export const canGetNextMonthStartDate = (monthStartDate: Date) =>
-  monthStartDate < getMonthStartDate()

package/pages/Instance/Info/Snapshots/TimeLine/Day/index.tsx

@@ -1,79 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { colors } from '@postgres.ai/shared/styles/colors'
-
-type Props = {
-  text: string
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      flex: '0 1 auto',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      '&:first-child': {
-        alignItems: 'flex-start',
-
-        '& $division': {
-          marginLeft: '9px',
-        },
-
-        '& $date': {
-          color: colors.black,
-        },
-      },
-      '&:last-child': {
-        alignItems: 'flex-end',
-
-        '& $division': {
-          marginRight: '9px',
-        },
-
-        '& $date': {
-          color: colors.black,
-        },
-      },
-    },
-    point: {
-      width: '19px',
-      flex: '0 0 19px',
-      borderRadius: '50%',
-      background: colors.secondary2.lightLight,
-      border: `1px solid ${colors.secondary2.main}`,
-    },
-    division: {
-      marginTop: '4px',
-      flex: '0 0 4px',
-      width: '1px',
-      background: colors.pgaiDarkGray,
-    },
-    date: {
-      fontSize: '10px',
-      marginTop: '4px',
-      color: colors.pgaiDarkGray,
-    },
-  },
-  { index: 1 },
-)
-
-export const Day = (props: Props) => {
-  const { text } = props
-  const classes = useStyles()
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.point} />
-      <div className={classes.division} />
-      <span className={classes.date}>{text}</span>
-    </div>
-  )
-}

package/pages/Instance/Info/Snapshots/TimeLine/index.tsx

@@ -1,57 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { colors } from '@postgres.ai/shared/styles/colors'
-
-import { Day } from './Day'
-
-const useStyles = makeStyles(
-  {
-    root: {
-      marginTop: '10px',
-    },
-    container: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      position: 'relative',
-    },
-    line: {
-      margin: '0 9px -23px 9px',
-      paddingTop: '22px',
-      borderBottom: `1px solid ${colors.pgaiDarkGray}`,
-    },
-    label: {
-      fontSize: '12px',
-    },
-  },
-  { index: 1 },
-)
-
-export const TimeLine = () => {
-  const classes = useStyles()
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.line} />
-      <div className={classes.container}>
-        <Day text="Jun 20" />
-        <Day text="Jun 21" />
-        <Day text="Jun 22" />
-        <Day text="Jun 23" />
-        <Day text="Jun 24" />
-        <Day text="Jun 25" />
-        <Day text="Jun 26" />
-      </div>
-      <div className={classes.container}>
-        <span className={classes.label}>16:33:20 UTC</span>
-        <span className={classes.label}>10:30:00 UTC</span>
-      </div>
-    </div>
-  )
-}

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

@@ -1,102 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { formatDistanceToNowStrict } from 'date-fns'
-
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { Spinner } from '@postgres.ai/shared/components/Spinner'
-import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { isValidDate } from '@postgres.ai/shared/utils/date'
-
-import { Section } from '../components/Section'
-import { Property } from '../components/Property'
-
-import { getEdgeSnapshots } from './utils'
-import { Calendar } from './Calendar'
-
-const useStyles = makeStyles(
-  {
-    button: {
-      marginTop: '20px',
-    },
-  },
-  { index: 1 },
-)
-
-export const Snapshots = observer(() => {
-  const stores = useStores()
-
-  const { snapshots } = stores.main
-
-  const classes = useStyles()
-
-  const { firstSnapshot, lastSnapshot } = getEdgeSnapshots(snapshots.data ?? [])
-
-  return (
-    <Section
-      title="Snapshots"
-      rightContent={
-        !snapshots.data && !snapshots.error && <Spinner size="sm" />
-      }
-    >
-      {snapshots.error && <ErrorStub message={snapshots.error} size="normal" />}
-
-      {snapshots.data && !snapshots.error && (
-        <>
-          <Property name="Number of snapshots">
-            {snapshots.data.length}
-          </Property>
-
-          <Property name="Oldest data state time">
-            {lastSnapshot && (
-              <>
-                {lastSnapshot.dataStateAt} (
-                {isValidDate(lastSnapshot.dataStateAtDate)
-                  ? formatDistanceToNowStrict(lastSnapshot.dataStateAtDate, {
-                      addSuffix: true,
-                    })
-                  : '-'}
-                )
-              </>
-            )}
-            {!lastSnapshot && '-'}
-          </Property>
-
-          <Property name="Newest data state time">
-            {firstSnapshot && (
-              <>
-                {firstSnapshot.dataStateAt} (
-                {isValidDate(firstSnapshot.dataStateAtDate)
-                  ? formatDistanceToNowStrict(firstSnapshot.dataStateAtDate, {
-                      addSuffix: true,
-                    })
-                  : '-'}
-                )
-              </>
-            )}
-            {!firstSnapshot && '-'}
-          </Property>
-
-          <Calendar
-            snapshots={snapshots.data}
-            onSelectDate={(date) => stores.snapshotsModal.openModal({ date })}
-          />
-
-          <Button
-            className={classes.button}
-            onClick={() => stores.snapshotsModal.openModal()}
-          >
-            Show all snapshots
-          </Button>
-        </>
-      )}
-    </Section>
-  )
-})