[FEAT] Add search functionality to LLMs, VectorDBs, Embeddings, and Connectors pages (#1694)

chandrasekharan-zipstack · claude · coderabbitai[bot] · web-flow · commit 0149d0481474 · 2025-12-08T20:02:24.000+05:30
* UN-2454 [FIX] Avoid polling infinitely for in-progress execution - Update DetailedLogs and ExecutionLogs components to properly handle polling state - Update index.js dependencies - Update workers dependencies in pyproject.toml and uv.lock 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * Revert accidental changes to index.js and workers dependencies Reverted files that were not part of the intended fix: - frontend/src/index.js - workers/pyproject.toml - workers/uv.lock 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2454 [FIX] Fix date handling and polling logic in logging components - Fixed date calculation bug: use raw ISO timestamps instead of formatted display strings - Added createdAtRaw and modified_atRaw fields to preserve parseable date values - Implement stale interval re-check: stop polling when execution is >1 hour old via executionDetailsRef - Replace forEach loops with for...of for improved performance (4 instances) Fixes CodeRabbit comments about infinite polling and ensures logging components correctly handle timestamp calculations and respect staleness thresholds. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * Update frontend/src/components/logging/detailed-logs/DetailedLogs.jsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Chandrasekharan M <117059509+chandrasekharan-zipstack@users.noreply.github.com> * UN-2454 [FIX] Use isFinite() for robust date validation in logging components Replace isNaN() with isFinite() for date validation in ExecutionLogs and DetailedLogs to prevent infinite polling when invalid timestamps occur. - DetailedLogs.jsx: Changed isNaN() to isFinite() check - ExecutionLogs.jsx: Added missing isFinite() date validation 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2454 [FIX] Resolve stale closure bug in polling state management Use ref instead of state for pollingIds to prevent stale closure issues in polling logic: - Added pollingIdsRef to track actively polling execution IDs - Updated all polling operations to directly mutate ref (no re-renders needed) - Removed redundant pollingIds state to eliminate unnecessary re-renders - Prevents duplicate polling loops and potential memory leaks 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * minor: Addressed a code smell * wip: Refresh and data filter above table * UN-2966 [FEAT] Auto-refresh toggle and controls for execution logs - Add reusable LogsRefreshControls component (toggle + refresh button) - Move date picker from nav bar to content area in ExecutionLogs - Update DetailedLogs to use shared LogsRefreshControls component - Fix table height to fill available space using flexbox layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FEAT] Enhanced execution logs UI with improved layout and controls - Added sticky table header for better scrolling experience - Improved pagination positioning and styling with reduced padding - Enhanced table layout with scrollbar isolated to table body - Fixed layout spacing in DetailedLogs header with refresh controls - Updated CSS for better visual consistency across logs components 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [REFACTOR] Clean up DetailedLogs layout and improve UI - Moved "View Logs" button from header to cards row for better layout - Kept LogsRefreshControls in header top-right - Changed "View Logs" from link to button with FileTextOutlined icon - Removed unnecessary .detailed-logs-header-controls wrapper div - Updated header padding and button margins for consistency - Fixed pagination label in LogsTable (items → executions) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FEAT] Table layout, column visibility controls and pagination fixes for execution/detailed logs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [REFACTOR] Improve DetailedLogs table column sizing with percentage-based widths - Implement responsive column widths using fixed px for predictable content - Status Message column gets 30% (most important variable content) - File Name gets 12%, File Path gets 20% for variable content - Reduced fixed columns: Executed At (140px), Status (110px), File Size (70px) - Execution Time (90px), Action (60px) for better space distribution - Added explanatory comment for width allocation strategy * UN-2966 [FEATURE] Add sorting and execution ID filter to logs - Add file_size and execution_time sorting to DetailedLogs and LogsTable - Add execution ID filter search to ExecutionLogs page - Implement field mapping for proper backend sort ordering - Update API filter backend with id field for search capability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Resolve CodeRabbit review comments Fixed RangePicker null guard to prevent runtime errors on partial date selection. Removed unused createdAtRaw field from ExecutionLogs and DetailedLogs components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Use UUIDFilter for execution id field Changed `id` filter from `CharFilter(lookup_expr="icontains")` to `UUIDFilter()` in ExecutionFilter. UUIDs don't support icontains lookup, so this fixes a potential FieldError. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Disable refresh controls when execution reaches terminal state - Added terminal state detection for COMPLETED/ERROR/STOPPED statuses - Auto-refresh automatically disables when execution completes - Refresh button and toggle are disabled with visual feedback - Tooltip shows execution completion message when disabled 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Add PropTypes validation for StatusMessageCell Added PropTypes import and validation for StatusMessageCell component's 'text' prop to resolve ESLint error and prevent potential runtime issues. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Address SonarQube code smells in logging components - ExecutionLogs.jsx: Use optional chaining (value?.[0]) for cleaner null checks - LogsTable.jsx: Extract inline components (SearchFilterDropdown, SearchFilterIcon) with proper PropTypes for reusability and maintainability 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Prevent Action column from being hidden in visibility menu Excluded "action" column from the visibility menu to prevent users from losing access to the column visibility dropdown. This ensures the Action column remains always visible, maintaining user ability to interact with the table controls. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [FIX] Add error handling for clipboard operations * UN-2966 [FIX] Mark StatusMessageCell text prop as required * UN-2966 [FIX] Add missing id dependency to useEffect * UN-2966 [REFACTOR] Move SearchFilterIcon inline style to CSS 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [REFACTOR] Extract inline component definitions to module level - DetailedLogs.jsx: Extracted ActionColumnHeader component to module level - LogsTable.jsx: Removed unnecessary arrow function wrappers for filterDropdown and filterIcon - Resolves SonarQube code smell for inline component definitions 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * UN-2966 [REFACTOR] Remove unnecessary arrow function wrapper from title prop Simplified the title prop by removing redundant arrow function wrapper. The title prop accepts JSX elements directly, so the wrapper was unnecessary. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add search functionality to LLMs, VectorDBs, Embeddings, and Connectors pages - Create reusable useListSearch hook for client-side search - Add search to ToolSettings (LLMs, VectorDBs, Embeddings pages) - Add search to ConnectorsPage - Search is case-insensitive, debounced (600ms), filters by name 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Preserve search filter when updating master list in useListSearch hook Previously, CRUD operations (add/edit/delete) would clear the active search filter because updateMasterList directly set displayList to the full updated list. Now a searchTextRef stores the current search text and re-applies the filter when the master list is updated. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Refactor handleDelete to reduce nesting depth in ToolSettings Extract handleDeleteSuccess function to avoid nesting callbacks more than 4 levels deep, fixing SonarQube code smell. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Signed-off-by: Chandrasekharan M <117059509+chandrasekharan-zipstack@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
diff --git a/frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx b/frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx
@@ -15,6 +15,7 @@ import { ToolNavBar } from "../../navigations/tool-nav-bar/ToolNavBar";
 import { ViewTools } from "../../custom-tools/view-tools/ViewTools";
 import { SharePermission } from "../../widgets/share-permission/SharePermission";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
+import { useListSearch } from "../../../hooks/useListSearch";
 
 const titles = {
   llm: "LLMs",
@@ -33,7 +34,6 @@ const btnText = {
 };
 
 function ToolSettings({ type }) {
-  const [tableRows, setTableRows] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isShareLoading, setIsShareLoading] = useState(false);
   const [adapterDetails, setAdapterDetails] = useState(null);
@@ -48,9 +48,16 @@ function ToolSettings({ type }) {
   const axiosPrivate = useAxiosPrivate();
   const handleException = useExceptionHandler();
   const { posthogEventText, setPostHogCustomEvent } = usePostHogEvents();
+  const {
+    displayList,
+    setDisplayList,
+    setMasterList,
+    updateMasterList,
+    onSearch,
+  } = useListSearch("adapter_name");
 
   useEffect(() => {
-    setTableRows([]);
+    setMasterList([]);
     if (!type) {
       return;
     }
@@ -67,7 +74,7 @@ function ToolSettings({ type }) {
     setIsLoading(true);
     axiosPrivate(requestOptions)
       .then((res) => {
-        setTableRows(res?.data);
+        setMasterList(res?.data || []);
       })
       .catch((err) => {
         setAlertDetails(handleException(err));
@@ -79,21 +86,29 @@ function ToolSettings({ type }) {
 
   const addNewItem = (row, isEdit) => {
     if (isEdit) {
-      const rowsModified = [...tableRows].map((tableRow) => {
-        if (tableRow?.id !== row?.id) {
-          return tableRow;
-        }
-        tableRow["adapter_name"] = row?.adapter_name;
-        return tableRow;
-      });
-      setTableRows(rowsModified);
+      updateMasterList((currentList) =>
+        currentList.map((tableRow) => {
+          if (tableRow?.id !== row?.id) {
+            return tableRow;
+          }
+          return { ...tableRow, adapter_name: row?.adapter_name };
+        })
+      );
     } else {
-      const rowsModified = [...tableRows];
-      rowsModified.push(row);
-      setTableRows(rowsModified);
+      updateMasterList((currentList) => [...currentList, row]);
     }
   };
 
+  const handleDeleteSuccess = (adapterId) => {
+    updateMasterList((currentList) =>
+      currentList.filter((row) => row?.id !== adapterId)
+    );
+    setAlertDetails({
+      type: "success",
+      content: "Successfully deleted",
+    });
+  };
+
   const handleDelete = (_event, adapter) => {
     const requestOptions = {
       method: "DELETE",
@@ -105,20 +120,9 @@ function ToolSettings({ type }) {
 
     setIsLoading(true);
     axiosPrivate(requestOptions)
-      .then((res) => {
-        const filteredList = tableRows.filter((row) => row?.id !== adapter?.id);
-        setTableRows(filteredList);
-        setAlertDetails({
-          type: "success",
-          content: "Successfully deleted",
-        });
-      })
-      .catch((err) => {
-        setAlertDetails(handleException(err));
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
+      .then(() => handleDeleteSuccess(adapter?.id))
+      .catch((err) => setAlertDetails(handleException(err)))
+      .finally(() => setIsLoading(false));
   };
 
   const handleShare = (_event, adapter, isEdit) => {
@@ -221,6 +225,9 @@ function ToolSettings({ type }) {
     <div className="plt-tool-settings-layout">
       <ToolNavBar
         title={titles[type]}
+        enableSearch
+        setSearchList={setDisplayList}
+        onSearch={onSearch}
         CustomButtons={() => {
           return (
             <CustomButton
@@ -237,7 +244,7 @@ function ToolSettings({ type }) {
         <div className="plt-tool-settings-layout-2">
           <div className="plt-tool-settings-body">
             <ViewTools
-              listOfTools={tableRows}
+              listOfTools={displayList}
               isLoading={isLoading}
               handleDelete={handleDelete}
               setOpenAddTool={setOpenAddSourcesModal}
@@ -257,7 +264,7 @@ function ToolSettings({ type }) {
               titleProp="adapter_name"
               descriptionProp="description"
               iconProp="icon"
-              isEmpty={!tableRows?.length}
+              isEmpty={!displayList?.length}
               centered
               isClickable={false}
               handleShare={handleShare}
diff --git a/frontend/src/hooks/useListSearch.js b/frontend/src/hooks/useListSearch.js
@@ -0,0 +1,55 @@
+import { useRef, useState, useCallback } from "react";
+
+function useListSearch(searchField) {
+  const listRef = useRef([]);
+  const searchTextRef = useRef("");
+  const [displayList, setDisplayList] = useState([]);
+
+  const filterList = useCallback(
+    (list, searchText) => {
+      if (!searchText.trim()) {
+        return list;
+      }
+      return list.filter((item) =>
+        item[searchField]?.toLowerCase().includes(searchText.toLowerCase())
+      );
+    },
+    [searchField]
+  );
+
+  const setMasterList = useCallback(
+    (list) => {
+      listRef.current = list;
+      setDisplayList(filterList(list, searchTextRef.current));
+    },
+    [filterList]
+  );
+
+  const onSearch = useCallback(
+    (searchText, setSearchList) => {
+      searchTextRef.current = searchText;
+      setSearchList(filterList(listRef.current, searchText));
+    },
+    [filterList]
+  );
+
+  const updateMasterList = useCallback(
+    (updateFn) => {
+      const updatedList = updateFn(listRef.current);
+      listRef.current = updatedList;
+      setDisplayList(filterList(updatedList, searchTextRef.current));
+    },
+    [filterList]
+  );
+
+  return {
+    listRef,
+    displayList,
+    setDisplayList,
+    setMasterList,
+    updateMasterList,
+    onSearch,
+  };
+}
+
+export { useListSearch };
diff --git a/frontend/src/pages/ConnectorsPage.jsx b/frontend/src/pages/ConnectorsPage.jsx
@@ -7,14 +7,14 @@ import { useSessionStore } from "../store/session-store";
 import { useAlertStore } from "../store/alert-store";
 import { useExceptionHandler } from "../hooks/useExceptionHandler";
 import useRequestUrl from "../hooks/useRequestUrl";
+import { useListSearch } from "../hooks/useListSearch";
 import "./ConnectorsPage.css";
 import { ToolNavBar } from "../components/navigations/tool-nav-bar/ToolNavBar";
 import { ViewTools } from "../components/custom-tools/view-tools/ViewTools";
 import { SharePermission } from "../components/widgets/share-permission/SharePermission";
 import { AddSourceModal } from "../components/input-output/add-source-modal/AddSourceModal";
 
 function ConnectorsPage() {
-  const [connectors, setConnectors] = useState([]);
   const [loading, setLoading] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [editingConnector, setEditingConnector] = useState(null);
@@ -29,6 +29,8 @@ function ConnectorsPage() {
   const { setAlertDetails } = useAlertStore();
   const handleException = useExceptionHandler();
   const { getUrl } = useRequestUrl();
+  const { displayList, setDisplayList, setMasterList, onSearch } =
+    useListSearch("connector_name");
 
   useEffect(() => {
     fetchConnectors();
@@ -39,7 +41,7 @@ function ConnectorsPage() {
     setLoading(true);
     try {
       const response = await axiosPrivate.get(getUrl("connector/"));
-      setConnectors(response.data || []);
+      setMasterList(response.data || []);
     } catch (error) {
       setAlertDetails(handleException(error, "Failed to load connectors"));
     } finally {
@@ -155,12 +157,15 @@ function ConnectorsPage() {
     <div className="connectors-layout">
       <ToolNavBar
         title="Connectors"
+        enableSearch
+        setSearchList={setDisplayList}
+        onSearch={onSearch}
         CustomButtons={renderCreateConnectorButtons}
       />
       <div className="connectors-pg-layout">
         <div className="connectors-pg-body">
           <ViewTools
-            listOfTools={connectors}
+            listOfTools={displayList}
             isLoading={loading}
             handleDelete={handleDeleteConnector}
             handleEdit={handleEditConnector}
@@ -172,7 +177,7 @@ function ConnectorsPage() {
             iconProp="icon"
             showOwner={true}
             type="Connector"
-            isEmpty={!connectors.length}
+            isEmpty={!displayList.length}
             centered
             isClickable={false}
           />
