platformatic · mcollina · Mar 21, 2025 · Mar 20, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/web/frontend/index.html b/web/frontend/index.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
     <script src="/browser-source-map-support.js"></script>
     <script>sourceMapSupport.install();</script>
   </body>

diff --git a/web/frontend/package.json b/web/frontend/package.json
@@ -15,6 +15,8 @@
   "type": "module",
   "devDependencies": {
     "@platformatic/ui-components": "^0.13.1",
+    "@types/d3": "^7.4.3",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "d3": "~7.9.0",
@@ -24,6 +26,7 @@
     "react-router-dom": "^7.0.0",
     "react-use-websocket": "^4.11.1",
     "snazzy": "^9.0.0",
+    "source-map-support": "^0.5.21",
     "standard": "^17.1.2",
     "tailwindcss": "^3.4.15",
     "use-error-boundary": "^2.0.6",
@@ -32,8 +35,7 @@
     "zustand": "^5.0.2"
   },
   "dependencies": {
-    "@platformatic/vite": "^2.53.1",
-    "source-map-support": "^0.5.21"
+    "@platformatic/vite": "^2.53.1"
   },
   "standard": {
     "ignore": [

diff --git a/web/frontend/platformatic-ui.d.ts b/web/frontend/platformatic-ui.d.ts
@@ -2,12 +2,22 @@
 declare module '@platformatic/ui-components' {
   import { ReactElement, ComponentType } from 'react';
 
+  export interface VerticalSeparatorProps {
+    color?: string;
+    backgroundColorOpacity?: string;
+    classes?: string;
+    height?: string;
+    width?: string;
+    marginLeft?: string;
+    marginRight?: string;
+  }
   export const Checkbox: ComponentType<CheckboxProps>;
   export const BorderedBox: ComponentType<BorderedBoxProps>;
   export const Button: ComponentType<ButtonProps>;
   export const HorizontalSeparator: ComponentType<HorizontalSeparatorProps>;
   export const LoadingSpinnerV2: ComponentType<LoadingSpinnerV2Props>;
   export const Tooltip: ComponentType<TooltipProps>;
+  export const VerticalSeparator: ComponentType<VerticalSeparatorProps>;
   export const TooltipAbsolute: ComponentType<TooltipProps>;
 
   export interface PlatformaticIconProps {

diff --git a/web/frontend/src/App.jsx → web/frontend/src/App.tsx b/web/frontend/src/App.jsx → web/frontend/src/App.tsx
@@ -19,7 +19,13 @@ import AppDetails from './components/application/AppDetails'
 import ServicesLogs from './components/services/ServicesLogs'
 import ServicesCharts from './components/services/ServicesCharts'
 
-export default function App () {
+interface ErrorBoundaryResult {
+  ErrorBoundary: React.ComponentType<{ children: React.ReactNode }>;
+  error: Error | null;
+  didCatch: boolean;
+}
+
+export default function App(): React.ReactElement {
   const globalState = useAdminStore()
   const { setCurrentWindowWidth } = globalState
   const [innerLoading, setInnerLoading] = useState(false)
@@ -28,15 +34,15 @@ export default function App () {
   const {
     ErrorBoundary,
     error
-  } = useErrorBoundary({
-    onDidCatch: (error) => {
+  }: ErrorBoundaryResult = useErrorBoundary({
+    onDidCatch: (error: Error) => {
       setShowErrorComponent(true)
       console.error(error)
     }
   })
 
   useEffect(() => {
-    async function getUserLocal () {
+    async function getUserLocal(): Promise<void> {
       setInnerLoading(false)
     }
     getUserLocal()
@@ -45,7 +51,7 @@ export default function App () {
   useEffect(() => {
     setCurrentWindowWidth(window.innerWidth)
 
-    const handleResize = () => {
+    const handleResize = (): void => {
       setCurrentWindowWidth(window.innerWidth)
     }
 
@@ -56,7 +62,7 @@ export default function App () {
     }
   }, [])
 
-  function handleDismiss () {
+  function handleDismiss(): void {
     setShowErrorComponent(false)
   }
 
@@ -77,7 +83,7 @@ export default function App () {
     )
   }
 
-  if (showErrorComponent) {
+  if (showErrorComponent && error) {
     return (
       <ErrorComponent
         error={error}
@@ -124,4 +130,4 @@ export default function App () {
       </HashRouter>
     </ErrorBoundary>
   )
-}
+}
diff --git a/...src/components/application/AppDetails.jsx → ...src/components/application/AppDetails.tsx b/...src/components/application/AppDetails.jsx → ...src/components/application/AppDetails.tsx
@@ -1,28 +1,28 @@
 import React, { useState, useEffect } from 'react'
 import styles from './AppDetails.module.css'
-import AppNameBox from './AppNameBox'
+import AppNameBox, { ApiApplication } from './AppNameBox'
 import ServicesBox from './ServicesBox'
 import ErrorComponent from '../errors/ErrorComponent'
 import NodeJSMetrics from './NodeJSMetrics'
 import useAdminStore from '../../useAdminStore'
 import { getApiApplication } from '../../api'
 
-const AppDetails = () => {
-  const [error, setError] = useState('')
-  const [apiApplication, setApiApplication] = useState({})
+const AppDetails: React.FC = () => {
+  const [error, setError] = useState<string | Error>('')
+  const [apiApplication, setApiApplication] = useState<ApiApplication>({} as ApiApplication)
   const { setRuntimePid } = useAdminStore()
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchData = async (): Promise<void> => {
       try {
         const response = await getApiApplication()
         if (response.id) {
-          setApiApplication(response)
+          setApiApplication(response as ApiApplication)
           setRuntimePid(response.id)
           setError('')
         }
       } catch (error) {
-        setError(error)
+        setError(error as Error)
       }
     }
     fetchData()
@@ -52,4 +52,4 @@ const AppDetails = () => {
   )
 }
 
-export default AppDetails
+export default AppDetails
diff --git a/web/frontend/src/components/application/AppNameBox.tsx b/web/frontend/src/components/application/AppNameBox.tsx
@@ -11,7 +11,7 @@ import Icons from '@platformatic/ui-components/src/components/icons'
 import ApplicationStatusPills from '../ui/ApplicationStatusPills'
 import { restartApiApplication, isWattpmVersionOutdated } from '../../api'
 
-interface ApiApplication {
+export interface ApiApplication {
   id: number;
   name: string;
   pltVersion?: string;

diff --git a/...c/components/application/NodeJSMetric.jsx → ...c/components/application/NodeJSMetric.tsx b/...c/components/application/NodeJSMetric.jsx → ...c/components/application/NodeJSMetric.tsx
@@ -12,7 +12,34 @@ import colorSetMem from '../metrics/memory.module.css'
 import colorSetCpu from '../metrics/cpu.module.css'
 import colorSetLatency from '../metrics/latency.module.css'
 
-export const generateLegend = (options, colorStyles) => {
+interface MetricOption {
+  label: string;
+  internalKey: string;
+  unit: string;
+}
+
+interface TimeValue { time: Date; values?: number[] }
+
+export interface DataValue {
+  date: string | Date;
+  [key: string]: string | Date | number;
+}
+
+interface NodeJSMetricProps {
+  title?: string;
+  metricURL?: 'mem' | 'cpu' | 'latency';
+  initialLoading?: boolean;
+  dataValues?: DataValue[];
+  unit?: string;
+  options?: MetricOption[];
+  backgroundColor?: string;
+  chartTooltipPosition?: string;
+  showLegend?: boolean;
+  timeline?: boolean;
+  slimCss?: boolean;
+}
+
+export const generateLegend = (options: string[], colorStyles: Record<string, string>): React.ReactElement => {
   return (
     <div className={`${commonStyles.tinyFlexRow}`}>
       {
@@ -31,9 +58,10 @@ export const generateLegend = (options, colorStyles) => {
     </div>
   )
 }
-function NodeJSMetric ({
+
+function NodeJSMetric({
   title = '',
-  metricURL = '',
+  metricURL,
   initialLoading = false,
   dataValues = [],
   unit = '',
@@ -43,9 +71,9 @@ function NodeJSMetric ({
   showLegend = true,
   timeline = false,
   slimCss = false
-}) {
+}: NodeJSMetricProps): React.ReactElement {
   const [showNoResult, setShowNoResult] = useState(false)
-  const [seriesValues, setSeriesValues] = useState([])
+  const [seriesValues, setSeriesValues] = useState<Array<TimeValue>>([])
   const styleCss = slimCss ? `${styles.borderexBoxSlim}` : `${styles.borderexBoxContainer} ${styles.borderedBoxHeigthLoading}`
   const [borderexBoxClassName, setBorderexBoxClassName] = useState(`${styleCss}`)
   const [lowerMaxY, setLowerMaxY] = useState(10)
@@ -54,7 +82,7 @@ function NodeJSMetric ({
 
   useEffect(() => {
     setBorderexBoxClassName(`${styles.borderexBoxContainer}`)
-    let newValues = []
+    let newValues: Array<TimeValue> = []
     let lowerMaxY = 0
     if (dataValues.length > 0) {
       if (metricURL === 'latency') {
@@ -64,7 +92,7 @@ function NodeJSMetric ({
         }))
       } else {
         dataValues.forEach(dataValue => {
-          const values = options.map(option => dataValue[option.internalKey])
+          const values = options.map(option => Number(dataValue[option.internalKey]) || 0)
           newValues.push({ time: new Date(dataValue.date), values: [...values] })
           lowerMaxY = Math.max(lowerMaxY, ...values)
         })
@@ -77,7 +105,7 @@ function NodeJSMetric ({
     }
   }, [dataValues])
 
-  function renderComponent () {
+  function renderComponent(): React.ReactNode {
     if (initialLoading) {
       return (
         <LoadingSpinnerV2
@@ -141,4 +169,4 @@ function NodeJSMetric ({
   )
 }
 
-export default NodeJSMetric
+export default NodeJSMetric
diff --git a/.../components/application/NodeJSMetrics.jsx → .../components/application/NodeJSMetrics.tsx b/.../components/application/NodeJSMetrics.jsx → .../components/application/NodeJSMetrics.tsx
@@ -6,21 +6,27 @@ import typographyStyles from '../../styles/Typography.module.css'
 import commonStyles from '../../styles/CommonStyles.module.css'
 import { BorderedBox } from '@platformatic/ui-components'
 import Icons from '@platformatic/ui-components/src/components/icons'
-import NodeJSMetric from './NodeJSMetric'
+import NodeJSMetric, { DataValue } from './NodeJSMetric'
 import { REFRESH_INTERVAL_METRICS, MEMORY_UNIT_METRICS, LATENCY_UNIT_METRICS, CPU_UNIT_METRICS } from '../../ui-constants'
 import { getApiMetricsPod } from '../../api'
 import useAdminStore from '../../useAdminStore'
 
-function NodeJSMetrics () {
+interface MetricsData {
+  dataMem: Array<DataValue>;
+  dataCpu: Array<DataValue>;
+  dataLatency: Array<DataValue>;
+}
+
+function NodeJSMetrics(): React.ReactElement {
   const [initialLoading, setInitialLoading] = useState(true)
-  const [allData, setAllData] = useState({
+  const [allData, setAllData] = useState<MetricsData>({
     dataMem: [],
     dataCpu: [],
     dataLatency: []
   })
   const { runtimePid } = useAdminStore()
 
-  const getData = async () => {
+  const getData = async (): Promise<void> => {
     try {
       if (runtimePid) {
         const data = await getApiMetricsPod(runtimePid)
@@ -119,4 +125,4 @@ function NodeJSMetrics () {
   )
 }
 
-export default NodeJSMetrics
+export default NodeJSMetrics