Merge pull request #48 from nebulabroadcast/enhancement/handle_object…

…_changed_message

Use websocket object_changed message to reload browser when content changes

backend/api/browse.py

@@ -242,7 +242,7 @@ def build_query(
 
     query = f"""
         SELECT meta FROM assets {conds}
-        ORDER BY {order_by} {request.order_dir}
+        ORDER BY {order_by} {request.order_dir}, id DESC
         LIMIT {request.limit}
         OFFSET {request.offset}
     """

backend/api/services.py

@@ -13,6 +13,7 @@ class ServiceItemModel(RequestModel):
     id: int = Field(..., title="Service ID")
     name: str = Field(..., title="Service name")
     type: str = Field(..., title="Service type")
+    hostname: str = Field(..., title="Hostname")
     status: ServiceState = Field(
         ...,
         title="Service status",
@@ -86,6 +87,7 @@ async def handle(
                 id,
                 title,
                 service_type,
+                host,
                 state,
                 autostart,
                 last_seen
@@ -100,6 +102,7 @@ async def handle(
                     id=row["id"],
                     name=row["title"],
                     type=row["service_type"],
+                    hostname=row["host"],
                     status=row["state"],
                     autostart=row["autostart"],
                     last_seen=time.time() - row["last_seen"],

frontend/src/components/ContextMenu.jsx

@@ -113,18 +113,17 @@ const ContextMenu = ({ target, options }) => {
       }}
     >
       {options().map((option, idx) => (
-        <>
+        <span key={idx}>
           {option.separator && <hr />}
           <Button
-            key={idx}
             label={option.label}
             icon={option.icon}
             onClick={() => {
               setContextData({ ...contextData, visible: false })
               option.onClick && option.onClick()
             }}
           />
-        </>
+        </span>
       ))}
     </ContextMenuWrapper>
   )

frontend/src/components/Dropdown.jsx

@@ -85,14 +85,13 @@ const Dropdown = ({
       <div className="dropdown-content" style={contentStyle}>
         {options &&
           options.map((option, idx) => (
-            <>
+            <span key={idx}>
               {option.separator && <hr />}
               <Button
-                key={idx}
                 {...option}
                 disabled={option.disabled || value === option.value}
               />
-            </>
+            </span>
           ))}
       </div>
     </DropdownContainer>

frontend/src/containers/Browser/Browser.jsx

@@ -1,14 +1,14 @@
 import nebula from '/src/nebula'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { toast } from 'react-toastify'
+import { debounce } from 'lodash'
 
 import { Table, Navbar, Button, Spacer } from '/src/components'
 import {
   setCurrentView,
   setSelectedAssets,
   setFocusedAsset,
-  reloadBrowser,
   showSendToDialog,
 } from '/src/actions'
 
@@ -62,9 +62,13 @@ const BrowserTable = () => {
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(false)
   const [ConfirmDialog, confirm] = useConfirm()
+  const dataRef = useRef(data)
+
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data])
 
   const loadData = () => {
-    setLoading(true)
     nebula
       .request('browse', {
         view: currentView,
@@ -95,13 +99,36 @@ const BrowserTable = () => {
       .finally(() => setLoading(false))
   }
 
+  const debouncingLoadData = useCallback(debounce(loadData, 100), [loadData])
+
+  const handlePubSub = useCallback((topic, message) => {
+    if (topic !== 'objects_changed') return
+    if (message.object_type !== 'asset') return
+    let changed = false
+    for (const obj of message.objects) {
+      if (dataRef.current.find((row) => row.id === obj)) {
+        changed = true;
+        break;
+      }
+    }
+    if (changed){
+      debouncingLoadData()
+    }
+  }, [loadData])
+
+  useEffect(() => {
+    const token = PubSub.subscribe('objects_changed', handlePubSub)
+    return () => PubSub.unsubscribe(token)
+  }, [])
+
   useEffect(() => {
     if (!currentView) {
       if (nebula.settings.views.length) {
         dispatch(setCurrentView(nebula.settings.views[0]))
       }
       return
     }
+    setLoading(true) // show loading indicator only if the user initiated the refresh
     loadData()
   }, [currentView, searchQuery, browserRefresh, sortBy, sortDirection, page])
 
@@ -171,7 +198,7 @@ const BrowserTable = () => {
       .request('ops', { operations })
       .then(() => {
         toast.success('Status updated')
-        dispatch(reloadBrowser())
+        //dispatch(reloadBrowser())
       })
       .catch((error) => {
         console.error(error)

frontend/src/pages/AssetEditor/AssetEditor.jsx

@@ -186,7 +186,7 @@ const AssetEditor = () => {
         nebula
           .request('set', { id: assetData.id, data: assetData })
           .then(() => {
-            dispatch(reloadBrowser())
+            assetData.id || dispatch(reloadBrowser())
           })
           .catch((error) => {
             toast.error(
@@ -248,16 +248,16 @@ const AssetEditor = () => {
 
   const onSave = (payload) => {
     if (!enabledActions.save && !payload) {
-      console.log('Save disabled')
       return
     }
     setLoading(true)
     console.log('Saving...', assetData)
     nebula
       .request('set', { id: assetData.id, data: payload || assetData })
       .then((response) => {
+        //reload browser if it's a new asset
+        assetData.id || dispatch(reloadBrowser())
         loadAsset(response.data.id)
-        dispatch(reloadBrowser())
       })
       .catch((error) => {
         toast.error(

frontend/src/pages/JobsPage/JobsPage.jsx

@@ -154,6 +154,7 @@ const JobsPage = () => {
   ]
 
   const handlePubSub = (topic, message) => {
+    if (topic !== 'job_progress') return
     setJobs((prevData) => {
       const newData = [...prevData]
       const index = newData.findIndex((job) => job.id === message.id)

frontend/src/pages/ServicesPage.jsx

@@ -114,6 +114,7 @@ const ServicesPage = () => {
     { name: 'id', title: '#', width: 1 },
     { name: 'name', title: 'Name' },
     { name: 'type', title: 'Type', width: 200 },
+    { name: 'hostname', title: 'Hostname', width: 200 },
     { name: 'status', title: 'Status', width: 200, formatter: formatStatus },
     {
       name: 'last_seen',