Updates to overview tabs

ui/src/data-services/hooks/captures/useCaptures.ts

@@ -5,6 +5,8 @@ import { getFetchUrl } from 'data-services/utils'
 import { useMemo } from 'react'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
 
+const REFETCH_INTERVAL = 10000 // Refetch every 10 second
+
 const convertServerRecord = (record: ServerCapture) => new Capture(record)
 
 export const useCaptures = (
@@ -24,6 +26,7 @@ export const useCaptures = (
   }>({
     queryKey: [API_ROUTES.CAPTURES, params],
     url: fetchUrl,
+    refetchInterval: REFETCH_INTERVAL,
   })
 
   const captures = useMemo(() => data?.results.map(convertServerRecord), [data])

ui/src/data-services/hooks/collections/useCollectionDetails.ts

@@ -3,6 +3,8 @@ import { Collection, ServerCollection } from 'data-services/models/collection'
 import { useMemo } from 'react'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
 
+const REFETCH_INTERVAL = 10000 // Refetch every 10 second
+
 const convertServerRecord = (record: ServerCollection) => new Collection(record)
 
 export const useCollectionDetails = (
@@ -17,6 +19,7 @@ export const useCollectionDetails = (
     {
       queryKey: [API_ROUTES.COLLECTIONS, id],
       url: `${API_URL}/${API_ROUTES.COLLECTIONS}/${id}/`,
+      refetchInterval: REFETCH_INTERVAL,
     }
   )
 

ui/src/data-services/hooks/collections/useCollections.ts

@@ -6,6 +6,8 @@ import { useMemo } from 'react'
 import { UserPermission } from 'utils/user/types'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
 
+const REFETCH_INTERVAL = 10000 // Refetch every 10 second
+
 const convertServerRecord = (record: ServerCollection) => new Collection(record)
 
 export const useCollections = (
@@ -27,6 +29,7 @@ export const useCollections = (
   }>({
     queryKey: [API_ROUTES.COLLECTIONS, params],
     url: fetchUrl,
+    refetchInterval: REFETCH_INTERVAL,
   })
 
   const collections = useMemo(

ui/src/pages/overview/collections/collection-actions.tsx

@@ -1,42 +1,31 @@
 import { usePopulateCollection } from 'data-services/hooks/collections/usePopulateCollection'
+import { Collection } from 'data-services/models/collection'
 import { Button, ButtonTheme } from 'design-system/components/button/button'
-import { IconType } from 'design-system/components/icon/icon'
+import { useState } from 'react'
 import { STRING, translate } from 'utils/language'
 
 export const PopulateCollection = ({
-  collectionId,
+  collection,
 }: {
-  collectionId: string
+  collection: Collection
 }) => {
-  const { populateCollection, isLoading, isSuccess } = usePopulateCollection()
+  const [timestamp, setTimestamp] = useState<string>()
+  const { populateCollection, isLoading } = usePopulateCollection()
 
-  if (isSuccess) {
-    return (
-      <Button
-        label={translate(STRING.QUEUED)}
-        icon={IconType.RadixClock}
-        theme={ButtonTheme.Neutral}
-        disabled={true}
-      />
-    )
-  }
-
-  if (isSuccess) {
-    return (
-      <Button
-        label={translate(STRING.QUEUED)}
-        icon={IconType.RadixClock}
-        theme={ButtonTheme.Neutral}
-      />
-    )
-  }
+  // When the collection is updated, we consider the population to be completed.
+  // TODO: It would be better to inspect task status here, but we currently don't have this information.
+  const isPopulating = isLoading || timestamp === collection.updatedAtDetailed
 
   return (
     <Button
       label={translate(STRING.POPULATE)}
-      loading={isLoading}
+      loading={isPopulating}
+      disabled={isPopulating}
       theme={ButtonTheme.Success}
-      onClick={() => populateCollection(collectionId)}
+      onClick={() => {
+        populateCollection(collection.id)
+        setTimestamp(collection.updatedAtDetailed)
+      }}
     />
   )
 }

ui/src/pages/overview/collections/collection-columns.tsx

@@ -54,7 +54,7 @@ export const columns: (projectId: string) => TableColumn<Collection>[] = (
     id: 'created-at',
     name: translate(STRING.FIELD_LABEL_CREATED_AT),
     sortField: 'created_at',
-    renderCell: (item: Collection) => <BasicTableCell value={item.updatedAt} />,
+    renderCell: (item: Collection) => <BasicTableCell value={item.createdAt} />,
   },
   {
     id: 'updated-at',
@@ -71,7 +71,7 @@ export const columns: (projectId: string) => TableColumn<Collection>[] = (
     },
     renderCell: (item: Collection) => (
       <div className={styles.entityActions}>
-        {item.canPopulate && <PopulateCollection collectionId={item.id} />}
+        {item.canPopulate && <PopulateCollection collection={item} />}
       </div>
     ),
   },

ui/src/pages/overview/overview.tsx

@@ -6,6 +6,7 @@ import * as Tabs from 'design-system/components/tabs/tabs'
 import { Error } from 'pages/error/error'
 import { useOutletContext } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
+import { useSelectedView } from 'utils/useSelectedView'
 import { Collections } from './collections/collections'
 import { DeploymentsMap } from './deployments-map/deployments-map'
 import { Entities } from './entities/entities'
@@ -15,6 +16,7 @@ import { StorageSources } from './storage/storage'
 import { Summary } from './summary/summary'
 
 export const Overview = () => {
+  const { selectedView, setSelectedView } = useSelectedView('summary')
   const { project, isLoading, error } = useOutletContext<{
     project?: Project
     isLoading: boolean
@@ -54,7 +56,7 @@ export const Overview = () => {
           <DeploymentsMap deployments={project.deployments} />
         </div>
       </div>
-      <Tabs.Root defaultValue="summary">
+      <Tabs.Root value={selectedView} onValueChange={setSelectedView}>
         <Tabs.List>
           <Tabs.Trigger
             value="summary"