@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Logs/constants/index.ts

@@ -0,0 +1,7 @@
+export const LOGS_NEW_DATA_MESSAGE =
+  'New data arrived below - scroll down to see it 👇🏻'
+
+export const LAPTOP_WIDTH_PX = 982
+export const LOGS_TIME_LIMIT = 20
+export const LOGS_LINE_LIMIT = 1000
+export const LOGS_ENDPOINT = '/instance/logs'

package/pages/Logs/hooks/useWsScroll.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react'
+import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar'
+
+export const useWsScroll = (isLoading: boolean, simpleInstall?: boolean) => {
+  const [isNewData, setIsNewData] = useState(false)
+  const [isAtBottom, setIsAtBottom] = useState(true)
+
+  useEffect(() => {
+    !isLoading && wsSnackbar(isAtBottom, isNewData)
+    const targetNode = simpleInstall
+      ? document.getElementById('logs-container')?.parentElement
+      : document.getElementById('logs-container')
+
+    const clientAtBottom = (element: HTMLElement) =>
+      element.scrollHeight - element.scrollTop - 50 < element.clientHeight
+
+    const handleScroll = (e: Event) => {
+      if (clientAtBottom(e.target as HTMLElement)) {
+        setIsAtBottom(true)
+        setIsNewData(false)
+      } else {
+        setIsAtBottom(false)
+      }
+    }
+
+    const handleInsert = (e: Event | any) => {
+      if (e.srcElement?.tagName !== 'DIV') {
+        isAtBottom &&
+          targetNode?.scroll({
+            top: targetNode.scrollHeight,
+          })
+        setIsNewData(true)
+      }
+    }
+
+    targetNode?.addEventListener('scroll', handleScroll, false)
+    targetNode?.addEventListener('DOMNodeInserted', handleInsert, false)
+
+    return () => {
+      targetNode?.removeEventListener('scroll', handleScroll, false)
+      targetNode?.removeEventListener('DOMNodeInserted', handleInsert, false)
+    }
+  }, [isAtBottom, isNewData, isLoading])
+}

package/pages/Logs/index.tsx

@@ -0,0 +1,267 @@
+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 } from '@postgres.ai/shared/pages/Logs/wsLogs'
+import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll'
+import { LAPTOP_WIDTH_PX } from '@postgres.ai/shared/pages/Logs/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,
+
+      '&  > span': {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '5px',
+        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: '18px',
+        height: '18px',
+        cursor: 'pointer',
+      },
+    },
+    //  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)',
+      },
+    },
+    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 }: { api: Api }) => {
+  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 = {
+    '[DEBUG]': !isEmpty(logsFilterState) ? logsFilterState?.['[DEBUG]'] : true,
+    '[INFO]': !isEmpty(logsFilterState) ? logsFilterState?.['[INFO]'] : true,
+    '[ERROR]': !isEmpty(logsFilterState) ? logsFilterState?.['[ERROR]'] : true,
+    '[base.go]': !isEmpty(logsFilterState)
+      ? logsFilterState?.['[base.go]']
+      : true,
+    '[runners.go]': !isEmpty(logsFilterState)
+      ? logsFilterState?.['[runners.go]']
+      : true,
+    '[snapshots.go]': !isEmpty(logsFilterState)
+      ? logsFilterState?.['[snapshots.go]']
+      : true,
+    '[util.go]': !isEmpty(logsFilterState)
+      ? logsFilterState?.['[util.go]']
+      : true,
+    '[logging.go]': !isEmpty(logsFilterState)
+      ? logsFilterState?.['[logging.go]']
+      : false,
+    '[ws.go]': !isEmpty(logsFilterState) ? logsFilterState?.['[ws.go]'] : false,
+    '[other]': !isEmpty(logsFilterState) ? logsFilterState?.['[other]'] : true,
+  }
+
+  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)
+
+  const FormCheckbox = ({ type }: { type: string }) => {
+    const filterType = (state as Record<string, boolean>)[`[${type}]`]
+    return (
+      <span
+        onClick={() => dispatch({ type })}
+        className={
+          filterType && type !== 'ERROR'
+            ? classes.activeButton
+            : filterType && type === 'ERROR'
+            ? classes.activeError
+            : classes.passiveButton
+        }
+      >
+        <span>{type.toLowerCase()}</span>
+        <button aria-label="close" type="button">
+          <PlusIcon />
+        </button>
+      </span>
+    )
+  }
+
+  useEffect(() => {
+    if (api.initWS != undefined) {
+      establishConnection(api)
+    }
+  }, [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

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

@@ -0,0 +1,110 @@
+import moment from 'moment'
+
+import {
+  LOGS_ENDPOINT,
+  LOGS_LINE_LIMIT,
+  LOGS_TIME_LIMIT,
+} from '@postgres.ai/shared/pages/Logs/constants'
+import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main'
+import {
+  stringWithoutBrackets,
+  stringContainsPattern,
+} from '@postgres.ai/shared/pages/Logs/utils'
+
+export const establishConnection = async (api: Api) => {
+  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 = logElement.children[1]?.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[1])
+      }
+    }
+  }
+
+  const { response, error } = await api.getWSToken({
+    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(LOGS_ENDPOINT, 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')
+  }
+}

package/pages/Logs/wsSnackbar.ts

@@ -0,0 +1,27 @@
+import { LOGS_NEW_DATA_MESSAGE } from '@postgres.ai/shared/pages/Logs/constants'
+
+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 &&
+        targetNode?.querySelector('p')?.textContent !== 'Not authorized'
+      ) {
+        snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE))
+      }
+      snackbarTag.onclick = () => {
+        targetNode?.scroll({
+          top: targetNode.scrollHeight,
+          behavior: 'smooth',
+        })
+      }
+    }
+  } else {
+    targetNode?.querySelector('.snackbar-tag')?.remove()
+  }
+}

package/react-app-env.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/scripts/copy-assets.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+const OUT_DIR = 'dist';
+
+const PATTERNS = [
+  '**/*.scss',
+  '**/*.module.scss',
+  '**/*.json',
+  'react-app-env.d.ts',
+];
+
+const files = PATTERNS.flatMap(pattern =>
+  glob.sync(pattern, {
+    cwd: '.',
+    ignore: ['node_modules/**', 'dist/**'],
+    nodir: true,
+  })
+);
+
+files.forEach((file) => {
+  const from = path.resolve(file);
+  const to = path.join(OUT_DIR, file);
+  const dir = path.dirname(to);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.copyFileSync(from, to);
+});
+
+console.log(`✅ Copied ${files.length} assets to dist`);

package/scripts/pack.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const TMP_DIR = 'build-tmp';
+const DIST_DIR = 'dist';
+const PACKAGE_JSON = 'package.json';
+
+function cleanTmp() {
+  if (fs.existsSync(TMP_DIR)) {
+    fs.rmSync(TMP_DIR, { recursive: true, force: true });
+  }
+}
+
+function run(cmd, options = {}) {
+  console.log(`$ ${cmd}`);
+  execSync(cmd, { stdio: 'inherit', ...options });
+}
+
+function copyDistToTmp() {
+  run(`rsync -a ${DIST_DIR}/ ${TMP_DIR}/`);
+}
+
+function copyExtraFiles() {
+  const extras = ['react-app-env.d.ts'];
+  extras.forEach((file) => {
+    if (fs.existsSync(file)) {
+      fs.copyFileSync(file, path.join(TMP_DIR, file));
+    }
+  });
+}
+
+function sanitizePackageJson() {
+  const original = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf8'));
+  const cleaned = {
+    name: original.name,
+    version: original.version,
+    description: original.description,
+    author: original.author,
+    license: original.license,
+    main: original.main || 'index.js',
+    types: original.types || 'index.d.ts',
+    peerDependencies: original.peerDependencies,
+    dependencies: original.dependencies,
+  };
+
+  fs.writeFileSync(
+    path.join(TMP_DIR, 'package.json'),
+    JSON.stringify(cleaned, null, 2),
+    'utf8'
+  );
+}
+
+function pack() {
+  run('npm pack', { cwd: TMP_DIR });
+  const tarball = fs.readdirSync(TMP_DIR).find(f => f.endsWith('.tgz'));
+  fs.renameSync(path.join(TMP_DIR, tarball), path.join('.', tarball));
+  console.log(`✅ Packed to ./${tarball}`);
+}
+
+function buildTmpAndPack() {
+  cleanTmp();
+  run('pnpm run build');
+  copyDistToTmp();
+  sanitizePackageJson();
+  pack();
+  cleanTmp();
+}
+
+buildTmpAndPack();