feat(frontend): refactor (#32)

Author: rozzilla

package-lock.json

@@ -19,7 +19,6 @@
     "borp": "^0.17.0",
     "d3": "~7.9.0",
     "dayjs": "^1.11.13",
-    "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0",

web/frontend/package.json

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { HashRouter, Routes, Route } from 'react-router-dom'
 import './App.css'
 import NotFound from '~/pages/NotFound'
@@ -28,9 +28,6 @@ export default function App () {
   const { setCurrentWindowWidth } = globalState
   const [innerLoading, setInnerLoading] = useState(false)
   const [showErrorComponent, setShowErrorComponent] = useState(false)
-  const applicationsRef = useRef(null)
-  const podServicesRef = useRef(null)
-  const podLogsRef = useRef(null)
 
   const {
     ErrorBoundary,
@@ -111,10 +108,7 @@ export default function App () {
             element={
               <PrivateRouteContainer>
                 <ApplicationContainer>
-                  <AppDetails
-                    ref={applicationsRef}
-                    key={HOME_PATH}
-                  />
+                  <AppDetails />
                 </ApplicationContainer>
               </PrivateRouteContainer>
             }
@@ -124,10 +118,7 @@ export default function App () {
             element={
               <PrivateRouteContainer>
                 <ApplicationContainer>
-                  <ServicesCharts
-                    ref={podServicesRef}
-                    key={POD_SERVICES_PATH}
-                  />
+                  <ServicesCharts />
                 </ApplicationContainer>
               </PrivateRouteContainer>
             }
@@ -137,10 +128,7 @@ export default function App () {
             element={
               <PrivateRouteContainer>
                 <ApplicationContainer>
-                  <ServicesLogs
-                    ref={podLogsRef}
-                    key={POD_LOGS_PATH}
-                  />
+                  <ServicesLogs />
                 </ApplicationContainer>
               </PrivateRouteContainer>
             }

web/frontend/src/App.jsx

@@ -43,7 +43,6 @@ export const getLogs = async (id) => {
 export const getApiMetricsPod = async (id) => {
   try {
     const response = await fetch(`${host}/runtimes/${id}/metrics`)
-
     const data = await response.json()
     return data
   } catch (error) {
@@ -55,7 +54,6 @@ export const getApiMetricsPod = async (id) => {
 export const getApiMetricsPodService = async (podId, serviceId) => {
   try {
     const response = await fetch(`${host}/runtimes/${podId}/metrics/${serviceId}`)
-
     const data = await response.json()
     return data
   } catch (error) {

web/frontend/src/api.js

@@ -23,7 +23,7 @@ import useOnScreen from '~/hooks/useOnScreen'
 import useAdminStore from '~/useAdminStore'
 import { getLogs } from '../../api'
 
-const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
+const AppLogs = ({ filteredServices }) => {
   const { runtimePid } = useAdminStore()
   const [displayLog, setDisplayLog] = useState(PRETTY)
   const [filterLogsByLevel, setFilterLogsByLevel] = useState('')
@@ -110,8 +110,14 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
   ])
 
   const getData = async () => {
-    const logs = await getLogs(runtimePid)
-    setApplicationLogs(logs)
+    try {
+      if (runtimePid) {
+        const logs = await getLogs(runtimePid)
+        setApplicationLogs(logs)
+      }
+    } catch (error) {
+      console.error('Failed to fetch logs:', error)
+    }
   }
 
   useInterval(() => { getData() }, REFRESH_INTERVAL_LOGS)
@@ -181,7 +187,7 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
   }
 
   return (
-    <div className={styles.container} ref={ref}>
+    <div className={styles.container}>
       <div className={styles.content}>
         <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth} ${styles.flexGrow}`}>
           <BorderedBox classes={styles.borderexBoxPodContainer} backgroundColor={RICH_BLACK} color={TRANSPARENT}>
@@ -248,6 +254,6 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
       </div>
     </div>
   )
-})
+}
 
 export default AppLogs

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
 import typographyStyles from '~/styles/Typography.module.css'
 import styles from './Log.module.css'
 import { CopyAndPaste, PlatformaticIcon } from '@platformatic/ui-components'
@@ -130,20 +129,4 @@ function Log ({ log, onClickArrow }) {
   )
 }
 
-Log.propTypes = {
-  /**
-   * log
-    */
-  log: PropTypes.string,
-  /**
-   * onClickArrow
-   */
-  onClickArrow: PropTypes.func
-}
-
-Log.defaultProps = {
-  log: '',
-  onClickArrow: () => {}
-}
-
 export default Log

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './LogFilterSelector.module.css'
 import typographyStyles from '~/styles/Typography.module.css'
 
@@ -88,15 +87,4 @@ function LogFilterSelector ({
   )
 }
 
-LogFilterSelector.propTypes = {
-  /**
-   * defaultLevelSelected
-    */
-  defaultLevelSelected: PropTypes.number,
-  /**
-   * onChangeLevelSelected
-    */
-  onChangeLevelSelected: PropTypes.func
-}
-
 export default LogFilterSelector

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

@@ -7,7 +7,7 @@ import NodeJSMetrics from './NodeJSMetrics'
 import useAdminStore from '~/useAdminStore'
 import { getApiApplication } from '../../api'
 
-const AppDetails = React.forwardRef(({ _ }, ref) => {
+const AppDetails = () => {
   const [showErrorComponent, setShowErrorComponent] = useState(false)
   const [error, setError] = useState(false)
   const [apiApplication, setApiApplication] = useState({})
@@ -31,21 +31,18 @@ const AppDetails = React.forwardRef(({ _ }, ref) => {
   }
 
   return (
-    <div className={styles.container} ref={ref}>
+    <div className={styles.container}>
       <div className={styles.containerElement}>
         <div className={styles.content}>
           <div className={styles.leftSection}>
             <AppNameBox
-              gridClassName={styles.appNameBox}
               onErrorOccurred={(error) => {
                 setError(error)
                 setShowErrorComponent(true)
               }}
               apiApplication={apiApplication}
             />
-            <NodeJSMetrics
-              gridClassName={styles.nodeJsMetricsBox}
-            />
+            <NodeJSMetrics />
           </div>
           <div className={styles.rightSection}>
             <ServicesBox />
@@ -54,6 +51,6 @@ const AppDetails = React.forwardRef(({ _ }, ref) => {
       </div>
     </div>
   )
-})
+}
 
 export default AppDetails

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { WARNING_YELLOW, WHITE, TRANSPARENT, SMALL, BLACK_RUSSIAN, MEDIUM } from '@platformatic/ui-components/src/components/constants'
 import styles from './AppNameBox.module.css'
 import typographyStyles from '~/styles/Typography.module.css'
@@ -14,7 +13,6 @@ import { restartApiApplication, isWattpmVersionOutdated } from '../../api'
 
 function AppNameBox ({
   onErrorOccurred = () => {},
-  gridClassName = '',
   apiApplication
 }) {
   const [appStatus, setAppStatus] = useState(STATUS_STOPPED)
@@ -50,7 +48,7 @@ function AppNameBox ({
   }
 
   return apiApplication && (
-    <BorderedBox classes={`${styles.borderexBoxContainer} ${gridClassName}`} backgroundColor={BLACK_RUSSIAN} color={TRANSPARENT}>
+    <BorderedBox classes={`${styles.borderexBoxContainer}`} backgroundColor={BLACK_RUSSIAN} color={TRANSPARENT}>
       <div className={`${commonStyles.smallFlexBlock} ${commonStyles.fullWidth}`}>
         <div className={`${commonStyles.smallFlexResponsiveRow} ${commonStyles.fullWidth}`}>
           <div className={`${commonStyles.tinyFlexResponsiveRow} ${commonStyles.fullWidth}`}>
@@ -145,16 +143,4 @@ function AppNameBox ({
   )
 }
 
-AppNameBox.propTypes = {
-  /**
-   * onErrorOccurred
-    */
-  onErrorOccurred: PropTypes.func,
-  /**
-   * gridClassName
-    */
-  gridClassName: PropTypes.string
-
-}
-
 export default AppNameBox

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { WHITE, BLACK_RUSSIAN, TRANSPARENT, RICH_BLACK, OPACITY_30 } from '@platformatic/ui-components/src/components/constants'
+import { WHITE, BLACK_RUSSIAN, TRANSPARENT, OPACITY_30 } from '@platformatic/ui-components/src/components/constants'
 import styles from './NodeJSMetric.module.css'
 import typographyStyles from '~/styles/Typography.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
@@ -9,7 +8,7 @@ import loadingSpinnerStyles from '~/styles/LoadingSpinnerStyles.module.css'
 import NoDataAvailable from '~/components/ui/NoDataAvailable'
 import NodeJSMetricChart from '~/components//metrics/NodeJSMetricChart'
 import LatencyChart from '~/components//metrics/LatencyChart'
-import { POSITION_ABSOLUTE, POSITION_FIXED } from '~/ui-constants'
+import { POSITION_ABSOLUTE } from '~/ui-constants'
 import colorSetMem from '~/components/metrics/memory.module.css'
 import colorSetCpu from '~/components/metrics/cpu.module.css'
 import colorSetLatency from '~/components/metrics/latency.module.css'
@@ -77,7 +76,7 @@ function NodeJSMetric ({
     } else {
       setShowNoResult(true)
     }
-  }, [])
+  }, [dataValues])
 
   function renderComponent () {
     if (initialLoading) {
@@ -143,55 +142,4 @@ function NodeJSMetric ({
   )
 }
 
-NodeJSMetric.propTypes = {
-  /**
-   * title
-    */
-  title: PropTypes.string,
-  /**
-   * metricURL
-    */
-  metricURL: PropTypes.string,
-  /**
-   * unit
-    */
-  unit: PropTypes.string,
-  /**
-   * data
-    */
-  data: PropTypes.object,
-  /**
-   * initialLoading
-    */
-  initialLoading: PropTypes.bool,
-  /**
-   * options
-    */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    key: PropTypes.string,
-    unit: PropTypes.string
-  })),
-  /**
-   * backgroundColor
-    */
-  backgroundColor: PropTypes.oneOf([BLACK_RUSSIAN, RICH_BLACK]),
-  /**
-   * chartTooltipPositionPropTypes
-  */
-  chartTooltipPosition: PropTypes.oneOf([POSITION_ABSOLUTE, POSITION_FIXED]),
-  /**
-   * showLegend
-    */
-  showLegend: PropTypes.bool,
-  /**
-   * timeline
-    */
-  timeline: PropTypes.bool,
-  /**
-   * slimCss
-    */
-  slimCss: PropTypes.bool
-}
-
 export default NodeJSMetric