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

package/pages/Logs/index.tsx

@@ -1,287 +0,0 @@
-import classNames from 'classnames'
-import { makeStyles } from '@material-ui/core'
-import { Alert, AlertTitle } from '@material-ui/lab'
-import React, { useEffect, useReducer } from 'react'
-
-import { Spinner } from '@postgres.ai/shared/components/Spinner'
-import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main'
-import {
-  establishConnection,
-  restartConnection,
-} from '@postgres.ai/shared/pages/Logs/wsLogs'
-import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll'
-
-import { LAPTOP_WIDTH_PX } from './constants'
-import { PlusIcon } from './Icons/PlusIcon'
-
-const useStyles = makeStyles(
-  () => ({
-    spinnerContainer: {
-      display: 'flex',
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    filterSection: {
-      marginTop: '10px',
-      display: 'flex',
-      flexDirection: 'row',
-      gap: 10,
-      flexWrap: 'wrap',
-
-      '&  > span': {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        border: '1px solid #898E9A',
-        padding: '3px 8px',
-        borderRadius: 5,
-        fontSize: '13px',
-        textTransform: 'capitalize',
-        cursor: 'pointer',
-      },
-
-      '&  > span > button': {
-        background: 'none',
-        outline: 'none',
-        border: 0,
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-        paddingBottom: 0,
-        paddingRight: 0,
-      },
-    },
-    //  we need important since id has higher priority than class
-    logsContainer: {
-      overflow: 'auto !important',
-      margin: '10px 0 0 0 !important',
-      maxHeight: 'calc(100vh - 360px)',
-      position: 'relative',
-
-      '& p': {
-        fontSize: '10px !important',
-        maxWidth: 'calc(100% - 25px)',
-
-        '@media (max-width: 982px)': {
-          maxWidth: '100%',
-        },
-      },
-    },
-    activeButton: {
-      border: '1px solid #3F51B5 !important',
-      color: '#3F51B5 !important',
-
-      '& svg': {
-        '& path': {
-          fill: '#3F51B5 !important',
-        },
-      },
-    },
-    passiveButton: {
-      '& svg': {
-        transform: 'rotate(45deg) scale(0.75)',
-      },
-    },
-    buttonClassName: {
-      '& svg': {
-        width: '14px',
-        height: '14px',
-      },
-    },
-    activeError: {
-      border: '1px solid #F44336 !important',
-      color: '#F44336 !important',
-
-      '& svg': {
-        '& path': {
-          fill: '#F44336 !important',
-        },
-      },
-    },
-    utilFilter: {
-      '& > span': {
-        textTransform: 'lowercase',
-      },
-
-      '& > span:last-child': {
-        textTransform: 'capitalize',
-      },
-    },
-  }),
-  { index: 1 },
-)
-
-export const Logs = ({ api, instanceId }: { api: Api; instanceId: string }) => {
-  const classes = useStyles()
-  const [isLoading, setIsLoading] = React.useState(true)
-  const targetNode = document.getElementById('logs-container')
-  useWsScroll(isLoading)
-
-  const logsFilterState =
-    localStorage?.getItem('logsFilter') &&
-    JSON?.parse(localStorage?.getItem('logsFilter') || '')
-
-  const isEmpty = (obj: Record<string, boolean>) => {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) return false
-    }
-    return true
-  }
-
-  const initialState = (obj: Record<string, boolean>) => {
-    const filters = {
-      '[DEBUG]': true,
-      '[INFO]': true,
-      '[ERROR]': true,
-      '[base.go]': true,
-      '[runners.go]': true,
-      '[snapshots.go]': true,
-      '[util.go]': true,
-      '[logging.go]': false,
-      '[ws.go]': false,
-      '[other]': true,
-    }
-
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        filters[key as keyof typeof filters] = obj[key]
-      }
-    }
-    return filters
-  }
-
-  const reducer = (
-    state: Record<string, boolean>,
-    action: { type: string },
-  ) => {
-    switch (action.type) {
-      case 'DEBUG':
-        return { ...state, '[DEBUG]': !state['[DEBUG]'] }
-      case 'INFO':
-        return { ...state, '[INFO]': !state['[INFO]'] }
-      case 'ERROR':
-        return { ...state, '[ERROR]': !state['[ERROR]'] }
-      case 'base.go':
-        return { ...state, '[base.go]': !state['[base.go]'] }
-      case 'runners.go':
-        return { ...state, '[runners.go]': !state['[runners.go]'] }
-      case 'snapshots.go':
-        return { ...state, '[snapshots.go]': !state['[snapshots.go]'] }
-      case 'logging.go':
-        return { ...state, '[logging.go]': !state['[logging.go]'] }
-      case 'util.go':
-        return { ...state, '[util.go]': !state['[util.go]'] }
-      case 'ws.go':
-        return { ...state, '[ws.go]': !state['[ws.go]'] }
-      case 'other':
-        return { ...state, '[other]': !state['[other]'] }
-      default:
-        throw new Error()
-    }
-  }
-
-  const [state, dispatch] = useReducer(reducer, initialState(logsFilterState))
-
-  const FormCheckbox = ({ type }: { type: string }) => {
-    const filterType = (state as Record<string, boolean>)[`[${type}]`]
-    return (
-      <span
-        onClick={() => {
-          dispatch({ type })
-          restartConnection(api, instanceId)
-        }}
-        className={
-          filterType && type !== 'ERROR'
-            ? classes.activeButton
-            : filterType && type === 'ERROR'
-            ? classes.activeError
-            : classes.passiveButton
-        }
-      >
-        <span>{type.toLowerCase()}</span>
-        <button
-          aria-label="close"
-          type="button"
-          className={classes.buttonClassName}
-        >
-          <PlusIcon />
-        </button>
-      </span>
-    )
-  }
-
-  useEffect(() => {
-    if (api.initWS != undefined) {
-      establishConnection(api, instanceId)
-    }
-  }, [api])
-
-  useEffect(() => {
-    localStorage.setItem('logsFilter', JSON.stringify(state))
-  }, [state])
-
-  useEffect(() => {
-    const config = { attributes: false, childList: true, subtree: true }
-
-    if (isLoading && targetNode?.querySelectorAll('p').length === 1) {
-      setIsLoading(false)
-    }
-
-    const callback = (mutationList: MutationRecord[]) => {
-      for (const mutation of mutationList) {
-        if (mutation.type === 'childList') {
-          setIsLoading(false)
-        }
-      }
-    }
-
-    const observer = new MutationObserver(callback)
-    targetNode && observer.observe(targetNode, config)
-  }, [isLoading, targetNode])
-
-  return (
-    <>
-      <Alert severity="info">
-        <AlertTitle>Sensitive values are masked.</AlertTitle>
-        You can see the raw log data connecting to the machine and running{' '}
-        <strong>'docker logs --since 5m -f dblab_server'</strong>.
-      </Alert>
-      {window.innerWidth > LAPTOP_WIDTH_PX && (
-        <>
-          <section className={classes.filterSection}>
-            {Object.keys(state)
-              .slice(0, 3)
-              .map((key) => (
-                <FormCheckbox
-                  key={key}
-                  type={key.replace('[', '').replace(']', '')}
-                />
-              ))}
-          </section>
-          <section
-            className={classNames(classes.filterSection, classes.utilFilter)}
-          >
-            {Object.keys(state)
-              .slice(3, 10)
-              .map((key) => (
-                <FormCheckbox
-                  key={key}
-                  type={key.replace('[', '').replace(']', '')}
-                />
-              ))}
-          </section>
-        </>
-      )}
-      <div id="logs-container" className={classes.logsContainer}>
-        {isLoading ? (
-          <div className={classes.spinnerContainer}>
-            <Spinner />
-          </div>
-        ) : null}
-      </div>
-    </>
-  )
-}

package/pages/Logs/utils/index.ts

@@ -1,20 +0,0 @@
-export const stringWithoutBrackets = (val: string | undefined) =>
-  String(val).replace(/[\[\]]/g, '')
-
-export const stringContainsPattern = (
-  target: string,
-  pattern = [
-    'base.go',
-    'runners.go',
-    'snapshots.go',
-    'util.go',
-    'logging.go',
-    'ws.go',
-  ],
-) => {
-  let value: number = 0
-  pattern.forEach(function (word) {
-    value = value + Number(target?.includes(word))
-  })
-  return value === 1
-}

package/pages/Logs/wsLogs.ts

@@ -1,126 +0,0 @@
-import moment from 'moment'
-import { Api } from '../Instance/stores/Main'
-import { stringContainsPattern, stringWithoutBrackets } from './utils'
-
-const logsEndpoint = '/instance/logs'
-
-const LOGS_TIME_LIMIT = 20
-const LOGS_LINE_LIMIT = 1000
-
-export const establishConnection = async (api: Api, instanceId: string) => {
-  if (!api.getWSToken) return
-
-  const logElement = document.getElementById('logs-container')
-
-  if (logElement === null) {
-    console.log('Not found container element')
-    return
-  }
-
-  const appendLogElement = (logEntry: string, logType?: string) => {
-    const tag = document.createElement('p')
-    const logLevel = logEntry.split(' ')[3]
-    const logInitiator = logEntry.split(' ')[2]
-    const logsFilterState = JSON.parse(localStorage.getItem('logsFilter') || '')
-
-    const filterInitiators = Object.keys(logsFilterState).some((state) => {
-      if (logsFilterState[state]) {
-        if (state === '[other]') {
-          return !stringContainsPattern(logInitiator)
-        }
-        return logInitiator?.includes(stringWithoutBrackets(state))
-      }
-    })
-
-    if (
-      filterInitiators &&
-      (logsFilterState[logInitiator] ||
-        logsFilterState[logLevel] ||
-        logEntry === 'Connection Error')
-    ) {
-      tag.appendChild(document.createTextNode(logEntry))
-      logElement.appendChild(tag)
-    }
-
-    // we need to check both second and third element of logEntry,
-    // since the pattern of the response returned isn't always consistent
-    if (logInitiator === '[ERROR]' || logLevel === '[ERROR]') {
-      tag.classList.add('error-log')
-    }
-
-    if (logType === 'message') {
-      const logEntryTime = moment.utc(
-        logElement.children[0].innerHTML.split(' ').slice(0, 2).join(' '),
-      )
-
-      const timeDifference =
-        moment(logEntryTime).isValid() &&
-        moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes()
-
-      if (
-        logElement.childElementCount > LOGS_LINE_LIMIT &&
-        Number(timeDifference) > LOGS_TIME_LIMIT
-      ) {
-        logElement.removeChild(logElement.children[0])
-      }
-    }
-
-    if (
-      logEntry.split(' ')[2] === '[ERROR]' ||
-      logEntry.split(' ')[3] === '[ERROR]'
-    ) {
-      tag.classList.add('error-log')
-    }
-  }
-
-  const { response, error } = await api.getWSToken({
-    instanceId: instanceId,
-  })
-
-  if (error || response == null) {
-    console.log('Not authorized:', error)
-    appendLogElement('Not authorized')
-    return
-  }
-
-  if (api.initWS == null) {
-    console.log('WebSocket Connection is not configured')
-    appendLogElement('WebSocket Connection is not configured')
-    return
-  }
-
-  const socket = api.initWS(logsEndpoint, response.token)
-
-  socket.onopen = () => {
-    console.log('Successfully Connected')
-  }
-
-  socket.onclose = (event) => {
-    console.log('Socket Closed Connection: ', event)
-    socket.send('Client Closed')
-    appendLogElement('DBLab Connection Closed')
-  }
-
-  socket.onerror = (error) => {
-    console.log('Socket Error: ', error)
-
-    appendLogElement('Connection Error')
-  }
-
-  socket.onmessage = function (event) {
-    const logEntry = decodeURIComponent(atob(event.data))
-    appendLogElement(logEntry, 'message')
-  }
-}
-
-export const restartConnection = (api: Api, instanceId: string) => {
-  const logElement = document.getElementById('logs-container')
-
-  if (logElement && logElement.childElementCount > 1) {
-    while (logElement.firstChild) {
-      logElement.removeChild(logElement.firstChild)
-    }
-  }
-
-  establishConnection(api, instanceId)
-}

package/pages/Logs/wsSnackbar.ts

@@ -1,26 +0,0 @@
-const LOGS_NEW_DATA_MESSAGE =
-  'New data arrived below - scroll down to see it 👇🏻'
-
-export const wsSnackbar = (clientAtBottom: boolean, isNewData: boolean) => {
-  const targetNode = document.getElementById('logs-container')
-  const snackbarTag = document.createElement('div')
-
-  if (!clientAtBottom && isNewData) {
-    if (!targetNode?.querySelector('.snackbar-tag')) {
-      targetNode?.appendChild(snackbarTag)
-      snackbarTag.classList.add('snackbar-tag')
-      if (snackbarTag.childNodes.length === 0) {
-        snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE))
-      }
-      snackbarTag.onclick = () => {
-        targetNode?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-          inline: 'end',
-        })
-      }
-    }
-  } else {
-    targetNode?.querySelector('.snackbar-tag')?.remove()
-  }
-}

package/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx

@@ -1,144 +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 {
-  Checkbox,
-  FormControlLabel,
-  Typography,
-  makeStyles,
-} from '@material-ui/core'
-
-import { Modal } from '@postgres.ai/shared/components/Modal'
-import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
-import { Text } from '@postgres.ai/shared/components/Text'
-import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
-import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
-
-type Props = {
-  snapshotId: string
-  instanceId: string
-  isOpen: boolean
-  onClose: () => void
-  afterSubmitClick: () => void
-  destroySnapshot: DestroySnapshot
-}
-
-interface ErrorResponse {
-  error?: {
-    message?: string
-    details?: string
-  }
-}
-
-const useStyles = makeStyles(
-  {
-    errorMessage: {
-      color: 'red',
-      marginTop: '10px',
-      wordBreak: 'break-all',
-    },
-    checkboxRoot: {
-      padding: '9px 10px',
-    },
-    grayText: {
-      color: '#8a8a8a',
-      fontSize: '12px',
-      wordBreak: 'break-word',
-    },
-    marginTop: {
-      marginTop: '6px',
-    },
-  },
-  { index: 1 },
-)
-
-export const DestroySnapshotModal = ({
-  snapshotId,
-  instanceId,
-  isOpen,
-  onClose,
-  afterSubmitClick,
-  destroySnapshot,
-}: Props) => {
-  const classes = useStyles()
-  const [forceDelete, setForceDelete] = useState(false)
-  const [deleteError, setDeleteError] = useState<string | null>(null)
-  const [isForceDeleteOptionVisible, setForceDeleteOptionVisible] =
-    useState(false)
-
-  const handleClose = () => {
-    setDeleteError(null)
-    onClose()
-  }
-
-  const handleClickDestroy = () => {
-    destroySnapshot(snapshotId, forceDelete, instanceId).then((res) => {
-      if (res?.error) {
-        const errorMessage =
-          (res as ErrorResponse)?.error?.message ||
-          (res as ErrorResponse)?.error?.details
-        setDeleteError(errorMessage || null)
-        setForceDeleteOptionVisible(true)
-      } else {
-        afterSubmitClick()
-        handleClose()
-      }
-    })
-  }
-
-  return (
-    <Modal
-      title={'Confirmation'}
-      onClose={handleClose}
-      isOpen={isOpen}
-      size="sm"
-    >
-      <Text>
-        Are you sure you want to delete snapshot{' '}
-        <ImportantText>{snapshotId}</ImportantText>? This action cannot be
-        undone.
-      </Text>
-      {deleteError && <p className={classes.errorMessage}>{deleteError}</p>}
-      {isForceDeleteOptionVisible && (
-        <div className={classes.marginTop}>
-          <FormControlLabel
-            control={
-              <Checkbox
-                name="debug"
-                checked={forceDelete}
-                onChange={(e) => setForceDelete(e.target.checked)}
-                classes={{
-                  root: classes.checkboxRoot,
-                }}
-              />
-            }
-            label={'Force delete'}
-          />
-          <Typography className={classes.grayText}>
-            If the snapshot cannot be deleted due to dependencies, enabling
-            “Force delete” will remove it along with all dependent snapshots and
-            clones.
-          </Typography>
-        </div>
-      )}
-      <SimpleModalControls
-        items={[
-          {
-            text: 'Cancel',
-            onClick: handleClose,
-          },
-          {
-            text: 'Delete snapshot',
-            variant: 'primary',
-            onClick: handleClickDestroy,
-          },
-        ]}
-      />
-    </Modal>
-  )
-}

package/pages/Snapshots/Snapshot/context.ts

@@ -1,26 +0,0 @@
-import { createStrictContext } from '@postgres.ai/shared/utils/react'
-
-import { Api } from './stores/Main'
-import { Stores } from './useCreatedStores'
-
-export type Host = {
-  instanceId: string
-  snapshotId: string
-  routes: {
-    snapshot: () => string
-    snapshots: () => string
-    branch: (branchName: string) => string
-    clone: (cloneId: string) => string
-    createClone: (branchId: string, snapshotId: string) => string
-  }
-  api: Api
-  elements: {
-    breadcrumbs: React.ReactNode
-  }
-}
-
-export const { useStrictContext: useHost, Provider: HostProvider } =
-  createStrictContext<Host>()
-
-export const { useStrictContext: useStores, Provider: StoresProvider } =
-  createStrictContext<Stores>()