Fix healthcheck and tradingbot positions

src/Managing.Application/Bots/TradingBot.cs

@@ -411,6 +411,8 @@ public class TradingBot : Bot, ITradingBot
                     {
                         Logger.LogInformation(
                             $"Position {signal.Identifier} don't need to be update. Position still opened");
+
+                        await SetPositionStatus(signal.Identifier, PositionStatus.Filled);
                     }
                 }
 
@@ -445,6 +447,10 @@ public class TradingBot : Bot, ITradingBot
                     {
                         Logger.LogInformation(
                             $"Position {signal.Identifier} don't need to be update. Position still opened");
+
+                        position.Status = PositionStatus.Filled;
+
+                        await SetPositionStatus(signal.Identifier, PositionStatus.Filled);
                     }
                 }
             }

src/Managing.WebApp/src/components/mollecules/Table/Table.tsx

@@ -1,14 +1,8 @@
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid'
+import {ArrowDownIcon, ArrowUpIcon} from '@heroicons/react/solid'
 import React from 'react'
-import {
-  useTable,
-  usePagination,
-  useSortBy,
-  useFilters,
-  useExpanded,
-} from 'react-table'
+import {useExpanded, useFilters, usePagination, useSortBy, useTable,} from 'react-table'
 
-import type { TableInstanceWithHooks } from '../../../global/type'
+import type {TableInstanceWithHooks} from '../../../global/type'
 
 // Define a default UI for filtering
 function DefaultColumnFilter({
@@ -31,7 +25,7 @@ export default function Table({
   columns,
   data,
   renderRowSubCompontent,
-  showPagination,
+  showPagination = true,
   hiddenColumns,
   showTotal = false,
 }: any) {
@@ -49,10 +43,7 @@ export default function Table({
     headerGroups,
     prepareRow,
     visibleColumns,
-    page, // Instead of using 'rows', we'll use page,
-    // which has only the rows for the active page
-
-    // The rest of these things are super handy, too ;)
+    page,
     canPreviousPage,
     canNextPage,
     pageOptions,

src/Managing.WebApp/src/components/organism/ActiveBots/ActiveBots.tsx

@@ -1,25 +1,14 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  PlayIcon,
-} from '@heroicons/react/solid'
-import React, { useEffect, useState } from 'react'
+import {ArrowDownIcon, ArrowUpIcon, ChevronDownIcon, ChevronRightIcon, PlayIcon,} from '@heroicons/react/solid'
+import React, {useEffect, useState} from 'react'
 
-import { Hub } from '../../../app/providers/Hubs'
+import {Hub} from '../../../app/providers/Hubs'
 import useApiUrlStore from '../../../app/store/apiStore'
-import type { Account, TradingBot } from '../../../generated/ManagingApi'
-import {
-  AccountClient,
-  BotClient,
-  TradeDirection,
-  TradeStatus,
-} from '../../../generated/ManagingApi'
-import { SelectColumnFilter, Table } from '../../mollecules'
-import BacktestRowDetails from '../Backtest/backtestRowDetails'
+import type {Account, TradingBot} from '../../../generated/ManagingApi'
+import {AccountClient, BotClient, TradeDirection, TradeStatus,} from '../../../generated/ManagingApi'
+import {SelectColumnFilter, Table} from '../../mollecules'
 import StatusBadge from '../StatusBadge/StatusBadge'
 import Summary from '../Trading/Summary'
+import BotRowDetails from './botRowDetails'
 
 export default function ActiveBots() {
   const [bots, setBots] = useState<TradingBot[]>([])
@@ -63,10 +52,14 @@ export default function ActiveBots() {
         Header: 'Status',
         accessor: 'status',
         disableFilters: true,
-        sortType: 'basic',
+        disableSortBy: true,
+        search: false,
       },
       {
         accessor: 'isForWatchingOnly',
+        disableFilters: true,
+        disableSortBy: true,
+        search: false,
       },
       {
         Filter: SelectColumnFilter,
@@ -185,10 +178,9 @@ export default function ActiveBots() {
   const renderRowSubComponent = React.useCallback(
     ({ row }: any) => (
       <>
-        <BacktestRowDetails
-          candles={row.original.candles}
-          positions={row.original.positions}
-        ></BacktestRowDetails>
+        <BotRowDetails
+          bot={row.original}
+        ></BotRowDetails>
       </>
     ),
     []
@@ -204,6 +196,7 @@ export default function ActiveBots() {
           columns={columns}
           data={bots}
           renderRowSubCompontent={renderRowSubComponent}
+          hiddenColumns={['isForWatchingOnly']}
         />
       </div>
     </>

src/Managing.WebApp/src/pages/settingsPage/healthchecks/healthChecks.tsx

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from 'react'
-
+import React from 'react'
+import {useQuery} from '@tanstack/react-query'
 import useApiUrlStore from '../../../app/store/apiStore'
 import {Table} from '../../../components/mollecules'
 
@@ -36,45 +36,31 @@ interface Web3ProxyHealthDetail {
 }
 
 const HealthChecks: React.FC = () => {
-  const { apiUrl, workerUrl } = useApiUrlStore()
-  const [apiHealth, setApiHealth] = useState<HealthCheckResponse | null>(null)
-  const [workerHealth, setWorkerHealth] = useState<HealthCheckResponse | null>(null)
-  const [web3ProxyHealth, setWeb3ProxyHealth] = useState<HealthCheckResponse | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+    const {apiUrl, workerUrl} = useApiUrlStore()
 
-  useEffect(() => {
-    const fetchHealthChecks = async () => {
-      setIsLoading(true)
-      try {
-        // Fetch API health check
-        const apiResponse = await fetch(`${apiUrl}/health`)
-        if (apiResponse.ok) {
-          const data = await apiResponse.json()
-          setApiHealth(data)
+    // Use TanStack Query for API health check
+    const {data: apiHealth, isLoading: isLoadingApi} = useQuery({
+        queryKey: ['health', 'api'],
+        queryFn: async () => {
+            const response = await fetch(`${apiUrl}/health`)
+            if (!response.ok) throw new Error('Failed to fetch API health')
+            return response.json() as Promise<HealthCheckResponse>
         }
+    })
 
-        // Fetch Worker health check
-        const workerResponse = await fetch(`${workerUrl}/health`)
-        if (workerResponse.ok) {
-          const data = await workerResponse.json()
-          setWorkerHealth(data)
+    // Use TanStack Query for Worker health check
+    const {data: workerHealth, isLoading: isLoadingWorker} = useQuery({
+        queryKey: ['health', 'worker'],
+        queryFn: async () => {
+            const response = await fetch(`${workerUrl}/health`)
+            if (!response.ok) throw new Error('Failed to fetch Worker health')
+            return response.json() as Promise<HealthCheckResponse>
         }
+    })
 
-        // Fetch Web3Proxy health check - use the dedicated endpoint we created
-        const web3Response = await fetch(`${apiUrl}/health/web3proxy`)
-        if (web3Response.ok) {
-          const data = await web3Response.json()
-          setWeb3ProxyHealth(data)
-        }
-      } catch (error) {
-        console.error('Error fetching health checks:', error)
-      } finally {
-        setIsLoading(false)
-      }
-    }
 
-    fetchHealthChecks()
-  }, [apiUrl, workerUrl])
+    // Determine overall loading state
+    const isLoading = isLoadingApi || isLoadingWorker
 
     // Helper function to prepare table data from health response
     const prepareHealthData = (
@@ -219,9 +205,8 @@ const HealthChecks: React.FC = () => {
 
     // Combine all health check data for display
     const healthData = [
-    ...prepareHealthData('Managing API', apiHealth),
-    ...prepareHealthData('Managing Worker', workerHealth),
-    ...prepareHealthData('Web3 Proxy', web3ProxyHealth),
+        ...prepareHealthData('Managing API', apiHealth || null),
+        ...prepareHealthData('Managing Worker', workerHealth || null),
     ]
 
     // Define columns for the table
@@ -242,7 +227,7 @@ const HealthChecks: React.FC = () => {
             {
                 Header: 'Status',
                 accessor: 'status',
-        Cell: ({ value }: { value: string }) => (
+                Cell: ({value}: { value: string }) => (
                     <span
                         className={`badge ${
                             value === 'Healthy' || value === 'healthy'
@@ -263,7 +248,7 @@ const HealthChecks: React.FC = () => {
                 accessor: 'description',
                 disableSortBy: true,
                 disableFilters: true,
-        Cell: ({ value, row }: any) => (
+                Cell: ({value, row}: any) => (
                     <div>
                         <div>{value}</div>
                         {row.original.details && (
@@ -305,7 +290,7 @@ const HealthChecks: React.FC = () => {
                 <Table
                     columns={columns}
                     data={healthData}
-          showPagination={false}
+                    showPagination={true}
                 />
             )}
         </div>