feat: implement callgraph report api

parca-dev · Aug 11, 2022 · 83c81c6 · 83c81c6
1 parent af20686
commit 83c81c6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/ui/packages/shared/profile/src/ProfileView.tsx b/ui/packages/shared/profile/src/ProfileView.tsx
@@ -10,7 +10,7 @@ import {
   useParcaTheme,
   Callgraph as CallgraphComponent,
 } from '@parca/components';
-import testData from './testdata/link_data.json';
+import {useContainerDimensions} from '@parca/dynamicsize';
 
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
@@ -88,6 +88,7 @@ export const ProfileView = ({
   navigateTo,
   profileVisState,
 }: ProfileViewProps): JSX.Element => {
+  const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
   const {currentView, setCurrentView} = profileVisState;
 
@@ -238,7 +239,7 @@ export const ProfileView = ({
               </div>
             </div>
 
-            <div className="flex space-x-4 justify-between">
+            <div ref={ref} className="flex space-x-4 justify-between w-full">
               {currentView === 'icicle' && flamegraphData?.data != null && (
                 <div className="w-full">
                   <ProfileIcicleGraph
@@ -252,7 +253,11 @@ export const ProfileView = ({
 
               {currentView === 'callgraph' && callgraphData?.data != null && (
                 <div className="w-full">
-                  <CallgraphComponent graph={testData} sampleUnit={sampleUnit} />
+                  <CallgraphComponent
+                    graph={callgraphData.data}
+                    sampleUnit={sampleUnit}
+                    width={dimensions?.width}
+                  />
                 </div>
               )}
 

diff --git a/ui/packages/shared/profile/src/ProfileViewWithData.tsx b/ui/packages/shared/profile/src/ProfileViewWithData.tsx
@@ -36,6 +36,14 @@ export const ProfileViewWithData = ({
     skip: currentView != 'table' && currentView != 'both',
   });
 
+  const {
+    isLoading: callgraphLoading,
+    response: callgraphResponse,
+    error: callgraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    skip: currentView != 'callgraph',
+  });
+
   const sampleUnit = profileSource.ProfileType().sampleUnit;
 
   return (
@@ -54,6 +62,14 @@ export const ProfileViewWithData = ({
           topTableResponse?.report.oneofKind === 'top' ? topTableResponse.report.top : undefined,
         error: topTableError,
       }}
+      callgraphData={{
+        loading: callgraphLoading,
+        data:
+          callgraphResponse?.report.oneofKind === 'callgraph'
+            ? callgraphResponse?.report?.callgraph
+            : undefined,
+        error: callgraphError,
+      }}
       profileVisState={profileVisState}
       sampleUnit={sampleUnit}
       profileSource={profileSource}