feat: add single dependency graph view for a specific resource relations

dashboard/components/explorer/hooks/useDependencyGraph.tsx → dashboard/components/explorer/dependency-graph/hooks/useDependencyGraph.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 
 import { InventoryFilterData } from '@components/inventory/hooks/useInventory/types/useInventoryTypes';
@@ -9,6 +9,10 @@ export type ReactFlowData = {
   edges: any[];
 };
 
+export type DependencyGraphProps = {
+  data: ReactFlowData;
+};
+
 // converting the json object into data that reactflow needs
 // TODO - based on selected library
 function GetData(res: any) {
@@ -66,7 +70,7 @@ function GetData(res: any) {
   return d;
 }
 
-function useDependencyGraph() {
+function useDependencyGraph(resourceId?: string) {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState<ReactFlowData>();
   const [error, setError] = useState(false);
@@ -75,26 +79,55 @@ function useDependencyGraph() {
     useState<InventoryFilterData[]>();
 
   const router = useRouter();
+  const fetchRelationsByResourceId = useCallback(
+    (id: string) => {
+      settingsService
+        .getResourceById(`?resourceId=${id}`)
+        .then(res => {
+          if (res === Error) {
+            setLoading(false);
+            setError(true);
+          } else {
+            setLoading(false);
+            setData(GetData([].concat(res)));
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [resourceId]
+  );
+
+  const fetchAllRelations = useCallback(() => {
+    settingsService
+      .getRelations(filters)
+      .then(res => {
+        if (res === Error) {
+          setLoading(false);
+          setError(true);
+        } else {
+          setLoading(false);
+          setData(GetData([].concat(res)));
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [filters]);
 
-  function fetch() {
+  const fetch = useCallback(() => {
     if (!loading) {
       setLoading(true);
     }
 
     if (error) {
       setError(false);
     }
-
-    settingsService.getRelations(filters).then(res => {
-      if (res === Error) {
-        setLoading(false);
-        setError(true);
-      } else {
-        setLoading(false);
-        setData(GetData(res));
-      }
-    });
-  }
+    if (resourceId) {
+      fetchRelationsByResourceId(resourceId);
+    } else fetchAllRelations();
+  }, [filters, resourceId]);
 
   function deleteFilter(idx: number) {
     const updatedFilters: InventoryFilterData[] = [...filters!];