feat(frontend): avoid waiting time to get data (#30)

Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com>

Author: rozzilla

web/frontend/src/components/application-logs/AppLogs.jsx

@@ -34,7 +34,6 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
   const logContentRef = useRef()
   const [lastScrollTop, setLastScrollTop] = useState(0)
   const [displayGoToBottom, setDisplayGoToBottom] = useState(false)
-  const [showPreviousLogs] = useState(false)
   const [statusPausedLogs, setStatusPausedLogs] = useState('')
   const [filteredLogsLengthAtPause, setFilteredLogsLengthAtPause] = useState(0)
   const bottomRef = useRef()
@@ -110,10 +109,13 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
     filteredServices
   ])
 
-  useInterval(async () => {
+  const getData = async () => {
     const logs = await getLogs(runtimePid)
     setApplicationLogs(logs)
-  }, REFRESH_INTERVAL_LOGS)
+  }
+
+  useInterval(() => { getData() }, REFRESH_INTERVAL_LOGS)
+  useEffect(() => { getData() }, [runtimePid])
 
   useEffect(() => {
     if (scrollDirection !== DIRECTION_TAIL && filteredLogsLengthAtPause > 0 && filteredLogsLengthAtPause < filteredLogs.length) {
@@ -127,13 +129,6 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
     setFilteredLogsLengthAtPause(0)
   }
 
-  async function loadPreviousLogs () {
-  }
-
-  /* function onlyUnique (value, index, array) {
-    return array.indexOf(value) === index
-  } */
-
   function saveLogs () {
     let fileData = ''
     applicationLogs.forEach(log => {
@@ -168,7 +163,6 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
   }
 
   function handleScroll (event) {
-    // setStatusPausedLogs(STATUS_PAUSED_LOGS)
     const st = event.currentTarget.scrollTop // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
     if (st > lastScrollTop) {
       // downscroll code
@@ -219,12 +213,6 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
             </div>
             <HorizontalSeparator marginBottom={MARGIN_0} color={WHITE} opacity={OPACITY_15} />
             <div className={`${styles.logsContainer} ${styles.lateralPadding}`} ref={logContentRef} onScroll={handleScroll}>
-              {showPreviousLogs && (
-                <div className={styles.previousLogContainer}>
-                  <p className={`${typographyStyles.desktopBodySmall} ${typographyStyles.textWhite} ${typographyStyles.textCenter} ${commonStyles.fullWidth} `}><span className={`${commonStyles.cursorPointer} ${typographyStyles.textTertiaryBlue}`} onClick={() => loadPreviousLogs()}>Click Here</span> to load previous logs</p>
-                </div>
-              )}
-
               {filteredLogs?.length > 0 && (
                 <>
                   <hr className={styles.logDividerTop} />

web/frontend/src/components/application/NodeJSMetrics.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useInterval } from '~/hooks/useInterval'
 import PropTypes from 'prop-types'
 import { WHITE, MEDIUM, BLACK_RUSSIAN, TRANSPARENT, RICH_BLACK } from '@platformatic/ui-components/src/components/constants'
@@ -24,7 +24,7 @@ function NodeJSMetrics ({
   const [latestRefreshDate, setLatestRefreshDate] = useState(new Date())
   const { runtimePid } = useAdminStore()
 
-  useInterval(async () => {
+  const getData = async () => {
     try {
       const data = await getApiMetricsPod(runtimePid)
       setAllData(data)
@@ -34,7 +34,10 @@ function NodeJSMetrics ({
     } finally {
       setInitialLoading(false)
     }
-  }, [REFRESH_INTERVAL_METRICS])
+  }
+
+  useInterval(() => { getData() }, [REFRESH_INTERVAL_METRICS])
+  useEffect(() => { getData() }, [runtimePid])
 
   return (
     <BorderedBox classes={`${styles.borderexBoxContainer} ${gridClassName}`} backgroundColor={BLACK_RUSSIAN} color={TRANSPARENT}>

web/frontend/src/components/metrics/ServicesMetrics.jsx

@@ -43,13 +43,8 @@ const ServicesMetrics = React.forwardRef(({
     }
   }
 
-  useInterval(() => {
-    getData()
-  }, REFRESH_INTERVAL_METRICS)
-
-  useEffect(() => {
-    getData()
-  }, [serviceId])
+  useInterval(() => { getData() }, REFRESH_INTERVAL_METRICS)
+  useEffect(() => { getData() }, [runtimePid, serviceId])
 
   return (
     <div className={styles.container} ref={ref}>