Refetch compute status (#558)

* WIP

* use interval to refetch every minute

* fixes

* get jobs after verifications

* refetch jobs on button click

* fix loading when no jobs, hide refresh button then no jobs

* button UI changes

* styling updates

Co-authored-by: Norbi <katunanorbert@gmai.com>
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/pages/History/ComputeJobs/index.module.css

@@ -2,3 +2,25 @@
   text-transform: uppercase;
   color: var(--color-secondary);
 }
+
+.computeTableContainer {
+  display: flex;
+  align-items: center;
+}
+
+.refresh,
+.refresh:first-child {
+  margin-bottom: calc(var(--spacer) / 2);
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.refresh svg {
+  display: inline-block;
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+  margin-right: calc(var(--spacer) / 6);
+  margin-bottom: -0.1rem;
+}

src/components/pages/History/ComputeJobs/index.tsx

@@ -6,6 +6,7 @@ import { DDO, Logger, Service, Provider } from '@oceanprotocol/lib'
 import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData'
 import Dotdotdot from 'react-dotdotdot'
 import Table from '../../../atoms/Table'
+import Button from '../../../atoms/Button'
 import { useOcean } from '../../../../providers/Ocean'
 import { gql, useQuery } from '@apollo/client'
 import { useWeb3 } from '../../../../providers/Web3'
@@ -13,8 +14,9 @@ import { queryMetadata } from '../../../../utils/aquarius'
 import axios, { CancelToken } from 'axios'
 import { ComputeOrders } from '../../../../@types/apollo/ComputeOrders'
 import Details from './Details'
-import styles from './index.module.css'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
+import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
+import styles from './index.module.css'
 
 const getComputeOrders = gql`
   query ComputeOrders($user: String!) {
@@ -99,7 +101,7 @@ async function getAssetMetadata(
 export default function ComputeJobs(): ReactElement {
   const { ocean, account, config } = useOcean()
   const { accountId } = useWeb3()
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const { data } = useQuery<ComputeOrders>(getComputeOrders, {
     variables: {
@@ -107,9 +109,6 @@ export default function ComputeJobs(): ReactElement {
     }
   })
 
-  useEffect(() => {
-    if (data === undefined || !config?.metadataCacheUri) return
-
   async function getJobs() {
     if (!ocean || !account) return
 
@@ -229,11 +228,32 @@ export default function ComputeJobs(): ReactElement {
     } finally {
       setIsLoading(false)
     }
+    return true
+  }
+
+  useEffect(() => {
+    if (data === undefined || !config?.metadataCacheUri) {
+      setIsLoading(false)
+      return
     }
     getJobs()
   }, [ocean, account, data, config?.metadataCacheUri])
 
   return (
+    <>
+      {jobs.length > 0 && (
+        <Button
+          style="text"
+          size="small"
+          title="Refresh compute jobs"
+          onClick={() => getJobs()}
+          disabled={isLoading}
+          className={styles.refresh}
+        >
+          <Refresh />
+          Refresh
+        </Button>
+      )}
       <Table
         columns={columns}
         data={jobs}
@@ -241,5 +261,6 @@ export default function ComputeJobs(): ReactElement {
         defaultSortField="row.dateCreated"
         defaultSortAsc={false}
       />
+    </>
   )
 }