feat(ui) :disable button when refetching data, add loading boolean; improved Logs view; log filters

Author: Adrinlol

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

@@ -306,7 +306,7 @@ export const Clone = observer((props: Props) => {
             variant="outlined"
             color="secondary"
             onClick={reloadClone}
-            disabled={isDisabledControls}
+            disabled={isDisabledControls || isReloading}
             title={'Refresh clone information'}
             className={classes.actionButton}
           >

ui/packages/shared/pages/Instance/Info/Retrieval/RetrievalModal/index.tsx

@@ -1,3 +1,5 @@
+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'
@@ -21,6 +23,10 @@ export const RetrievalModal = ({
   const stores = useStores()
   const { isReloadingInstanceRetrieval, reloadInstanceRetrieval } = stores.main
 
+  useEffect(() => {
+    reloadInstanceRetrieval()
+  },[])
+
   return (
     <Modal
       title="Retrieval activity details"

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

@@ -35,6 +35,7 @@ export const ModalReloadButton = (props: Props) => {
       onClick={props.onReload}
       className={classes.content}
       isLoading={props.isReloading}
+      isDisabled={props.isReloading}
     >
       Reload info
     </Button>

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

@@ -66,14 +66,19 @@ export const Instance = observer((props: Props) => {
   const { instanceId, api } = props
 
   const stores = useCreatedStores(props)
+  const {
+    instance,
+    instanceError,
+    instanceRetrieval,
+    load,
+    isReloadingInstance,
+  } = stores.main
+  const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
 
   useEffect(() => {
-    stores.main.load(instanceId)
+    load(instanceId)
   }, [instanceId])
 
-  const { instance, instanceError, instanceRetrieval } = stores.main
-  const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
-
   useEffect(() => {
     if (
       instance &&
@@ -110,8 +115,10 @@ export const Instance = observer((props: Props) => {
             className={classes.title}
             rightContent={
               <Button
-                onClick={() => stores.main.load(props.instanceId)}
-                isDisabled={!instance && !instanceError}
+                onClick={() => load(props.instanceId)}
+                isDisabled={
+                  (!instance && !instanceError) || isReloadingInstance
+                }
                 className={classes.reloadButton}
               >
                 Reload info
@@ -165,7 +172,7 @@ export const Instance = observer((props: Props) => {
                 instance?.state.engine.disableConfigModification
               }
               switchActiveTab={switchTab}
-              reload={() => stores.main.load(props.instanceId)}
+              reload={() => load(props.instanceId)}
             />
           )}
         </TabPanel>

ui/packages/shared/pages/Instance/stores/Main.ts

@@ -67,6 +67,7 @@ export class MainStore {
   readonly snapshots: SnapshotsStore
 
   isReloadingClones = false
+  isReloadingInstance = false
   isReloadingInstanceRetrieval = false
 
   private readonly api: Api
@@ -85,8 +86,10 @@ export class MainStore {
 
   load = (instanceId: string) => {
     this.instance = null
+    this.isReloadingInstance = true
     this.loadInstance(instanceId)
     this.loadInstanceRetrieval(instanceId).then(() => {
+    this.isReloadingInstance = false
       if (this.instanceRetrieval?.mode !== 'physical') {
         this.getConfig()
       }

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

@@ -5,12 +5,13 @@
  *--------------------------------------------------------------------------
  */
 
-#logs-container {
+ #logs-container {
   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;
@@ -30,8 +31,10 @@
   background-color: #fff2e5;
   color: #000;
   font-weight: 500;
+  font-size: 11px;
   padding: 6px 8px;
   border-radius: 4px;
   transition: all 40050ms ease;
   cursor: pointer;
+  z-index: 1;
 }

ui/packages/shared/pages/Logs/Icons/PlusIcon.tsx

@@ -0,0 +1,8 @@
+export const PlusIcon = () => (
+  <svg viewBox="0 0 512 512" focusable="false">
+    <path
+      fill="currentColor"
+      d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"
+    ></path>
+  </svg>
+)

ui/packages/shared/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'

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

@@ -7,8 +7,6 @@ export const useWsScroll = (isLoading: boolean) => {
 
   useEffect(() => {
     !isLoading && wsSnackbar(isAtBottom, isNewData)
-
-    const contentElement = document.getElementById('content-container')
     const targetNode = document.getElementById('logs-container')
 
     const clientAtBottom = (element: HTMLElement) =>
@@ -25,21 +23,20 @@ export const useWsScroll = (isLoading: boolean) => {
 
     const handleInsert = (e: Event | any) => {
       if (e.srcElement?.tagName !== 'DIV') {
-        isAtBottom && targetNode?.scrollIntoView(false)
+        isAtBottom &&
+          targetNode?.scroll({
+            top: targetNode.scrollHeight,
+          })
         setIsNewData(true)
       }
     }
 
-    contentElement?.addEventListener('scroll', handleScroll, false)
-    contentElement?.addEventListener('DOMNodeInserted', handleInsert, false)
+    targetNode?.addEventListener('scroll', handleScroll, false)
+    targetNode?.addEventListener('DOMNodeInserted', handleInsert, false)
 
     return () => {
-      contentElement?.removeEventListener('scroll', handleScroll, false)
-      contentElement?.removeEventListener(
-        'DOMNodeInserted',
-        handleInsert,
-        false,
-      )
+      targetNode?.removeEventListener('scroll', handleScroll, false)
+      targetNode?.removeEventListener('DOMNodeInserted', handleInsert, false)
     }
   }, [isAtBottom, isNewData, isLoading])
 }