Merge branch '448-fix-ui-logs-tab' into 'master'

fix: Refactor Logs tab, enable user scroll and fix loader issue (#448)

Closes #448

See merge request postgres-ai/database-lab!636

Author: agneum

ui/packages/ce/src/App/Layout/index.tsx

@@ -9,7 +9,7 @@ export const Layout = (props: Props) => {
   return (
     <div className={styles.root}>
       <div className={styles.menu}>{props.menu}</div>
-      <div className={styles.content}>{props.children}</div>
+      <div id="content-container" className={styles.content}>{props.children}</div>
     </div>
   )
 }

ui/packages/shared/pages/Configuration/InputWithTooltip/index.tsx

@@ -107,6 +107,7 @@ export const InputWithChip = ({
                     key={index}
                     className={styles.chip}
                     label={database}
+                    disabled={disabled}
                     onDelete={(event) => handleDeleteDatabase(event, database)}
                     color="primary"
                   />

ui/packages/shared/pages/Configuration/index.tsx

@@ -56,7 +56,7 @@ export const Configuration = observer(
     isConfigurationActive,
     allowModifyingConfig,
   }: {
-    switchActiveTab: (activeTab: number) => void
+    switchActiveTab: (_: null, activeTab: number) => void
     activeTab: number
     reload: () => void
     isConfigurationActive: boolean
@@ -91,7 +91,7 @@ export const Configuration = observer(
 
     const switchTab = async () => {
       reload()
-      switchActiveTab(0)
+      switchActiveTab(null, 0)
     }
 
     const onSubmit = async (values: FormValues) => {
@@ -414,7 +414,7 @@ export const Configuration = observer(
               <Button
                 variant="secondary"
                 size="medium"
-                onClick={() => switchActiveTab(0)}
+                onClick={() => switchActiveTab(null, 0)}
               >
                 Cancel
               </Button>

ui/packages/shared/pages/Instance/index.tsx

@@ -11,24 +11,21 @@ import { observer } from 'mobx-react-lite'
 
 import { Button } from '@postgres.ai/shared/components/Button2'
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner'
-import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
 
 import { Tabs } from './Tabs'
+import { Logs } from '../Logs'
 import { Clones } from './Clones'
 import { Info } from './Info'
-import { establishConnection } from './wsLogs'
 import { Configuration } from '../Configuration'
 import { ClonesModal } from './ClonesModal'
 import { SnapshotsModal } from './SnapshotsModal'
 import { Host, HostProvider, StoresProvider } from './context'
 
-import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import Alert from '@material-ui/lab/Alert';
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import PropTypes from 'prop-types'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
 
 import { useCreatedStores } from './useCreatedStores'
 
@@ -57,12 +54,6 @@ const useStyles = makeStyles((theme) => ({
       flexDirection: 'column',
     },
   },
-  spinnerContainer: {
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center"
-  }
 }))
 
 export const Instance = observer((props: Props) => {
@@ -97,16 +88,10 @@ export const Instance = observer((props: Props) => {
 
   const [activeTab, setActiveTab] = React.useState(0);
 
-  const [isLogConnectionEnabled, enableLogConnection] = React.useState(false);
-
-  const switchTab = (_: React.ChangeEvent<{}>, tabID: number) => {
-    if (tabID == 1 && api.initWS != undefined && !isLogConnectionEnabled) {
-      establishConnection(api).then(() => {
-        enableLogConnection(true)
-      });
-    }
-
+  const switchTab = (_: React.ChangeEvent<{} | null>, tabID: number) => {
+    const contentElement = document.getElementById('content-container')
     setActiveTab(tabID);
+    contentElement.scroll(0, 0)
   };
 
   return (
@@ -160,25 +145,15 @@ export const Instance = observer((props: Props) => {
           </TabPanel>
 
           <TabPanel value={activeTab} index={1}>
-            <Alert severity="info">
-              <AlertTitle>Sensitive data are masked.</AlertTitle>
-              You can see the raw log data connecting to the machine and running the <strong>'docker logs'</strong> command.
-            </Alert>
-            <div id="logs-container">
-              {!isLogConnectionEnabled && (
-                <div className={classes.spinnerContainer}>
-                  <Spinner />
-                </div>
-              )}
-            </div>
+            {activeTab === 1 && <Logs api={api} />}
           </TabPanel>
         </>
 
         <TabPanel value={activeTab} index={2}>
           <Configuration 
               isConfigurationActive={isConfigurationActive}
               allowModifyingConfig={instance?.state.engine.allowModifyingConfig}
-              switchActiveTab={(id: number) => setActiveTab(id)} 
+              switchActiveTab={switchTab} 
               activeTab={activeTab} 
               reload={() => stores.main.load(props.instanceId)} 
             />

ui/packages/shared/pages/Instance/styles.scss

@@ -6,19 +6,32 @@
  */
 
 #logs-container {
-    margin: 1rem 0;
-    border: 1px solid #b4b4b4;
-    border-radius: 4px;
-    margin-top: 20px;
-    overflow: hidden;
-    padding: 0.5rem 1rem;
-    & > p {
-      font-size: medium;
-      font-family: 'Fira Code', monospace;   
-      padding: 4px 0;
-    }
+  margin: 20px 0 0 0;
+  border: 1px solid #b4b4b4;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+  & > p {
+    font-size: small;
+    font-family: 'Fira Code', monospace;
+    padding: 1px 0;
+  }
 }
 
 .error-log {
   color: red;
-}
+}
+
+.snackbar-tag {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff2e5;
+  color: #000;
+  font-weight: 500;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: all 40050ms ease;
+  cursor: pointer;
+}

ui/packages/shared/pages/Instance/wsLogs.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar'
+
+export const useWsScroll = () => {
+  const snackbarTag = document.createElement('div')
+  const contentElement = document.getElementById('content-container')
+
+  useEffect(() => {
+    const targetNode = document.getElementById('logs-container')
+    contentElement.addEventListener(
+      'scroll',
+      () => {
+        wsSnackbar(contentElement, targetNode, snackbarTag)
+      },
+      false,
+    )
+
+    return () =>
+      contentElement.removeEventListener(
+        'scroll',
+        () => {
+          wsSnackbar(contentElement, targetNode, snackbarTag)
+        },
+        false,
+      )
+  }, [])
+}

ui/packages/shared/pages/Logs/hooks/useWsScroll.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import { makeStyles } from '@material-ui/core'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+
+import { Api } from 'pages/Instance/stores/Main'
+import { establishConnection } from '@postgres.ai/shared/pages/Logs/wsLogs'
+import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll'
+
+const useStyles = makeStyles(() => ({
+  spinnerContainer: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}))
+
+export const Logs = ({ api }: { api: Api }) => {
+  useWsScroll()
+  const classes = useStyles()
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  useEffect(() => {
+    if (api.initWS != undefined) {
+      establishConnection(api)
+    }
+  }, [api])
+
+  useEffect(() => {
+    const config = { attributes: false, childList: true, subtree: true }
+    const targetNode = document.getElementById('logs-container')
+
+    if (isLoading && targetNode.querySelectorAll('p').length === 1) {
+      setIsLoading(false)
+    }
+
+    const callback = (mutationList: MutationRecord[]) => {
+      const isScrolling = !targetNode.querySelector('.snackbar-tag')
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          setIsLoading(false)
+        }
+      }
+      if (isScrolling) {
+        targetNode.scrollIntoView(false)
+      }
+    }
+
+    const observer = new MutationObserver(callback)
+    observer.observe(targetNode, config)
+  }, [isLoading])
+
+  return (
+    <>
+      <Alert severity="info">
+        <AlertTitle>Sensitive data are masked.</AlertTitle>
+        You can see the raw log data connecting to the machine and running the{' '}
+        <strong>'docker logs'</strong> command.
+      </Alert>
+      <div id="logs-container">
+        {isLoading && (
+          <div className={classes.spinnerContainer}>
+            <Spinner />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}