@postgres.ai/shared 3.5.1-pr-1027.0

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/RefreshFailedAlert/styles.module.scss

@@ -0,0 +1,33 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  padding: 8px 10px;
+  background: #fff2e5;
+  border: 1px solid $color-gray-100;
+  margin-top: 12px;
+  border-radius: $border-radius--small;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 12px;
+  margin-right: 24px;
+  margin: 0;
+}
+
+.icon {
+  width: 10px;
+  color: $color-status-warning;
+  flex: 0 0 auto;
+}
+
+.propertyName {
+  flex: 0 0 123px;
+}

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

@@ -0,0 +1,49 @@
+import { useEffect } from 'react'
+
+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
+
+  useEffect(() => {
+    reloadInstanceRetrieval()
+  },[])
+
+  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/RetrievalModal/styles.module.scss

@@ -0,0 +1,6 @@
+.tableContainer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+}

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

package/pages/Instance/Info/Retrieval/RetrievalTable/styles.module.scss

@@ -0,0 +1,29 @@
+.tableRow {
+  display: inline-table !important;
+  width: 100%;
+}
+
+.tableBody {
+  height: 100%;
+  
+  div:not(:first-child) {
+    padding-top: 0.75rem;
+    border-top: 1px solid rgba(224, 224, 224, 1);
+  }
+
+  div {
+    padding: 0.75rem 0;
+  }
+
+  td {
+    border-bottom: 0;
+    padding: 0px 18px;
+    font-size: 13px;
+    font-family: 'Fira Code', monospace;   
+  }
+}
+
+.tableSubtitle {
+  font-size: 15px;
+  font-weight: bold;
+}

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

@@ -0,0 +1,95 @@
+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 { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+
+import { Section } from '../components/Section'
+import { Property } from '../components/Property'
+
+import { RefreshFailedAlert } from './RefreshFailedAlert'
+
+import { getTypeByStatus, isRetrievalUnknown } from './utils'
+import { RetrievalModal } from './RetrievalModal'
+
+const useStyles = makeStyles(
+  () => ({
+    infoIcon: {
+      height: '12px',
+      width: '12px',
+      marginLeft: '8px',
+      color: '#808080',
+    },
+    detailsButton: {
+      marginLeft: '8px',
+    },
+  }),
+  { index: 1 },
+)
+
+export const Retrieval = observer(() => {
+  const stores = useStores()
+  const classes = useStyles()
+  const [isModalOpen, setIsModalOpen] = 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'
+
+  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>
+              {!isActive && (
+                <Tooltip content="No retrieval activity details">
+                  <InfoIcon className={classes.infoIcon} />
+                </Tooltip>
+              )}
+            </>
+          )}
+        </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)}
+      />
+    </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()