@postgres.ai/shared 4.0.4 → 4.1.0

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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,125 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,133 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,79 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,57 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,102 @@
+/*--------------------------------------------------------------------------
+ * 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>
+  )
+})