[GEN-1679]: added useSourceCRUD hook

frontend/webapp/components/notification/toast-list.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getIdFromSseTarget } from '@/utils';
 import { NotificationNote } from '@/reuseable-components';
 import { Notification, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { DrawerBaseItem, useDrawerStore, useNotificationStore } from '@/store';
-import { useActualDestination, useActualSources, useGetActions, useGetInstrumentationRules } from '@/hooks';
-import { getIdFromSseTarget } from '@/utils';
+import { useActionCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useSourceCRUD } from '@/hooks';
 
 const Container = styled.div`
   position: fixed;
@@ -35,10 +35,10 @@ export const ToastList: React.FC = () => {
 const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, target }) => {
   const { markAsDismissed, markAsSeen } = useNotificationStore();
 
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-  const { instrumentationRules } = useGetInstrumentationRules();
+  const { sources } = useSourceCRUD();
+  const { actions } = useActionCRUD();
+  const { destinations } = useDestinationCRUD();
+  const { instrumentationRules } = useInstrumentationRuleCRUD();
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const onClick = () => {
@@ -57,12 +57,7 @@ const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, targ
         case 'InstrumentationInstance':
           drawerItem['type'] = OVERVIEW_ENTITY_TYPES.SOURCE;
           drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.SOURCE);
-          drawerItem['item'] = sources.find(
-            (item) =>
-              item.kind === drawerItem['id']?.['kind'] &&
-              item.name === drawerItem['id']?.['name'] &&
-              item.namespace === drawerItem['id']?.['namespace']
-          );
+          drawerItem['item'] = sources.find((item) => item.kind === drawerItem['id']?.['kind'] && item.name === drawerItem['id']?.['name'] && item.namespace === drawerItem['id']?.['namespace']);
           break;
 
         case OVERVIEW_ENTITY_TYPES.ACTION:

frontend/webapp/components/overview/add-entity/index.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image';
 import theme from '@/styles/theme';
-import { useModalStore } from '@/store';
 import { useOnClickOutside } from '@/hooks';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useBooleanStore } from '@/store/useBooleanStore';
+import { useBooleanStore, useModalStore } from '@/store';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 

frontend/webapp/containers/main/overview/overview-data-flow/index.tsx

@@ -4,17 +4,8 @@ import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { ToastList } from '@/components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
-import { buildNodesAndEdges, NodeBaseDataFlow, } from '@/reuseable-components';
-import {
-  useMetrics,
-  useGetActions,
-  useActualSources,
-  useContainerWidth,
-  useActualDestination,
-  useNodeDataFlowHandlers,
-  useGetInstrumentationRules,
-} from '@/hooks';
-
+import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
+import { useMetrics, useContainerWidth, useNodeDataFlowHandlers, useSourceCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useActionCRUD } from '@/hooks';
 
 const AllDrawers = dynamic(() => import('../all-drawers'), {
   ssr: false,
@@ -35,10 +26,10 @@ const NODE_HEIGHT = 80;
 
 export function OverviewDataFlowContainer() {
   const { metrics } = useMetrics();
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-  const { instrumentationRules } = useGetInstrumentationRules();
+  const { sources } = useSourceCRUD();
+  const { actions } = useActionCRUD();
+  const { destinations } = useDestinationCRUD();
+  const { instrumentationRules } = useInstrumentationRuleCRUD();
   const { containerRef, containerWidth } = useContainerWidth();
   const { handleNodeClick } = useNodeDataFlowHandlers({
     rules: instrumentationRules,

frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
+import type { K8sActualSource } from '@/types';
 import { ChooseSourcesBody } from '../choose-sources-body';
 import { Modal, NavigationButtons } from '@/reuseable-components';
-import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
-import { useActualSources, useConnectSourcesMenuState } from '@/hooks';
+import { useConnectSourcesMenuState, useSourceCRUD } from '@/hooks';
 
 interface AddSourceModalProps {
   isOpen: boolean;
@@ -12,33 +12,11 @@ interface AddSourceModalProps {
 export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose }) => {
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({ sourcesList });
-  const { createSourcesForNamespace, persistNamespaceItems } = useActualSources();
+  const { createSources } = useSourceCRUD({ onSuccess: onClose });
 
-  const handleNextClick = useCallback(async () => {
-    try {
-      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(stateMenu.futureAppsCheckbox).map(([namespaceName, futureSelected]) => ({
-        name: namespaceName,
-        futureSelected,
-      }));
-
-      await persistNamespaceItems(namespaceItems);
-
-      await Promise.all(
-        Object.entries(stateMenu.selectedItems).map(async ([namespaceName, sources]) => {
-          const formattedSources = sources.map((source) => ({
-            kind: source.kind,
-            name: source.name,
-            selected: true,
-          }));
-          await createSourcesForNamespace(namespaceName, formattedSources);
-        })
-      );
-
-      onClose();
-    } catch (error) {
-      console.error('Error during handleNextClick:', error);
-    }
-  }, [stateMenu, onClose, createSourcesForNamespace, persistNamespaceItems]);
+  const handleNextClick = async () => {
+    await createSources(stateMenu.selectedItems, stateMenu.futureAppsCheckbox);
+  };
 
   return (
     <Modal

frontend/webapp/containers/main/sources/source-drawer-container/index.tsx

@@ -1,17 +1,17 @@
 import React, { useMemo, useState } from 'react';
 import { useDrawerStore } from '@/store';
-import { useActualSources } from '@/hooks';
+import { useSourceCRUD } from '@/hooks';
 import { CardDetails } from '@/components';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 
 const SourceDrawer: React.FC = () => {
-  const { selectedItem, setSelectedItem } = useDrawerStore((store) => store);
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
 
-  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
+  const { deleteSources, updateSource } = useSourceCRUD();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
@@ -47,41 +47,15 @@ const SourceDrawer: React.FC = () => {
   };
 
   const handleDelete = async () => {
-    const { namespace, name, kind } = item as K8sActualSource;
+    const { namespace } = item as K8sActualSource;
 
-    try {
-      await deleteSourcesForNamespace(namespace, [
-        {
-          kind,
-          name,
-          selected: false,
-        },
-      ]);
-      setSelectedItem(null);
-    } catch (error) {
-      console.error('Error deleting source:', error);
-    }
+    await deleteSources({ [namespace]: [item as K8sActualSource] });
   };
 
   const handleSave = async (newTitle: string) => {
     const { namespace, name, kind } = item as K8sActualSource;
 
-    const sourceId: WorkloadId = {
-      namespace,
-      kind,
-      name,
-    };
-
-    const patchRequest: PatchSourceRequestInput = {
-      reportedName: newTitle,
-    };
-
-    try {
-      await updateActualSource(sourceId, patchRequest);
-      setSelectedItem(null);
-    } catch (error) {
-      console.error('Error updating source:', error);
-    }
+    await updateSource({ namespace, kind, name }, { reportedName: newTitle });
   };
 
   return (

frontend/webapp/graphql/mutations/source.ts

@@ -1,22 +1,13 @@
 import { gql } from '@apollo/client';
 
 export const PERSIST_SOURCE = gql`
-  mutation PersistSources(
-    $namespace: String!
-    $sources: [PersistNamespaceSourceInput!]!
-  ) {
+  mutation PersistSources($namespace: String!, $sources: [PersistNamespaceSourceInput!]!) {
     persistK8sSources(namespace: $namespace, sources: $sources)
   }
 `;
 
 export const UPDATE_K8S_ACTUAL_SOURCE = gql`
-  mutation UpdateK8sActualSource(
-    $sourceId: K8sSourceId!
-    $patchSourceRequest: PatchSourceRequestInput!
-  ) {
-    updateK8sActualSource(
-      sourceId: $sourceId
-      patchSourceRequest: $patchSourceRequest
-    )
+  mutation UpdateK8sActualSource($sourceId: K8sSourceId!, $patchSourceRequest: PatchSourceRequestInput!) {
+    updateK8sActualSource(sourceId: $sourceId, patchSourceRequest: $patchSourceRequest)
   }
 `;

frontend/webapp/hooks/actions/index.ts

@@ -1,5 +1,4 @@
 export * from './useActionFormData';
 export * from './useActions';
 export * from './useActionState';
-export * from './useGetActions';
 export * from './useActionCRUD';

frontend/webapp/hooks/actions/useActionCRUD.ts

@@ -2,9 +2,9 @@ import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
-import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
+import { ACTION, getSseTargetFromId, NOTIFICATION, safeJsonParse } from '@/utils';
 import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
-import { OVERVIEW_ENTITY_TYPES, type ActionInput, type ActionsType, type NotificationType } from '@/types';
+import { type ActionItem, OVERVIEW_ENTITY_TYPES, type ActionInput, type ActionsType, type NotificationType } from '@/types';
 
 interface UseActionCrudParams {
   onSuccess?: () => void;
@@ -13,7 +13,7 @@ interface UseActionCrudParams {
 
 export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
-  const { refetch } = useComputePlatform();
+  const { data, refetch } = useComputePlatform();
   const notify = useNotify();
 
   const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
@@ -64,6 +64,13 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
 
   return {
     loading: cState.loading || uState.loading || dState.loading,
+    actions:
+      data?.computePlatform?.actions?.map((item) => {
+        const parsedSpec = typeof item.spec === 'string' ? safeJsonParse(item.spec, {} as ActionItem) : item.spec;
+
+        return { ...item, spec: parsedSpec };
+      }) || [],
+
     createAction: (action: ActionInput) => createAction({ variables: { action } }),
     updateAction: (id: string, action: ActionInput) => updateAction({ variables: { id, action } }),
     deleteAction: (id: string, actionType: ActionsType) => deleteAction({ variables: { id, actionType } }),

frontend/webapp/hooks/compute-platform/useComputePlatform.ts

@@ -1,17 +1,36 @@
-import { ComputePlatform } from '@/types';
+import { useCallback } from 'react';
 import { useQuery } from '@apollo/client';
+import { useBooleanStore } from '@/store';
+import type { ComputePlatform } from '@/types';
 import { GET_COMPUTE_PLATFORM } from '@/graphql';
 
 type UseComputePlatformHook = {
   data?: ComputePlatform;
   loading: boolean;
   error?: Error;
   refetch: () => void;
+  startPolling: () => Promise<void>;
 };
 
 export const useComputePlatform = (): UseComputePlatformHook => {
-  const { data, loading, error, refetch } =
-    useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
+  const { data, loading, error, refetch } = useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
+  const { togglePolling } = useBooleanStore();
 
-  return { data, loading, error, refetch };
+  const startPolling = useCallback(async () => {
+    togglePolling(true);
+
+    const maxRetries = 5;
+    const retryInterval = 1000; // Poll every second
+    let retries = 0;
+
+    while (retries < maxRetries) {
+      await new Promise((resolve) => setTimeout(resolve, retryInterval));
+      refetch();
+      retries++;
+    }
+
+    togglePolling(false);
+  }, [refetch, togglePolling]);
+
+  return { data, loading, error, refetch, startPolling };
 };

frontend/webapp/hooks/compute-platform/useNamespace.ts

@@ -1,42 +1,33 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { GET_NAMESPACES, PERSIST_NAMESPACE } from '@/graphql';
-import {
-  ComputePlatform,
-  K8sActualNamespace,
-  PersistNamespaceItemInput,
-} from '@/types';
+import { ComputePlatform, PersistNamespaceItemInput } from '@/types';
+import { useNotify } from '../useNotify';
+import { NOTIFICATION } from '@/utils';
 
-type UseNamespaceHook = {
-  data?: K8sActualNamespace;
-  loading: boolean;
-  error?: Error;
-  persistNamespace: (namespace: PersistNamespaceItemInput) => Promise<void>;
-};
+export const useNamespace = (namespaceName?: string, instrumentationLabeled = null as boolean | null) => {
+  const notify = useNotify();
+
+  const handleError = (title: string, message: string) => {
+    notify({ type: NOTIFICATION.ERROR, title, message });
+  };
+
+  const handleComplete = (title: string, message: string) => {
+    notify({ type: NOTIFICATION.SUCCESS, title, message });
+  };
 
-export const useNamespace = (
-  namespaceName: string | undefined,
-  instrumentationLabeled = null as boolean | null
-): UseNamespaceHook => {
   const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
     skip: !namespaceName,
-    variables: { namespaceName, instrumentationLabeled },
     fetchPolicy: 'cache-first',
+    variables: { namespaceName, instrumentationLabeled },
   });
 
-  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE);
-
-  const persistNamespace = async (namespace: PersistNamespaceItemInput) => {
-    try {
-      await persistNamespaceMutation({
-        variables: { namespace },
-      });
-    } catch (e) {
-      console.error('Error persisting namespace:', e);
-    }
-  };
+  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE, {
+    onError: (error) => handleError('', error.message),
+    onCompleted: (res, req) => {},
+  });
 
   return {
-    persistNamespace,
+    persistNamespace: async (namespace: PersistNamespaceItemInput) => await persistNamespaceMutation({ variables: { namespace } }),
     data: data?.computePlatform.k8sActualNamespace,
     loading,
     error,