@parca/profile 0.8.0 → 0.9.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.2](https://github.com/parca-dev/parca/compare/ui-v0.9.1...ui-v0.9.2) (2022-02-22)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.9.1](https://github.com/parca-dev/parca/compare/ui-v0.9.0...ui-v0.9.1) (2022-02-21)
+
+## [0.8.2](https://github.com/parca-dev/parca/compare/ui-v0.8.1...ui-v0.8.2) (2022-02-14)
+
+**Note:** Version bump only for package @parca/profile
+
+# [0.9.0](https://github.com/parca-dev/parca/compare/ui-v0.8.3...ui-v0.9.0) (2022-02-16)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.8.2](https://github.com/parca-dev/parca/compare/ui-v0.8.1...ui-v0.8.2) (2022-02-14)
+
+# [0.8.0](https://github.com/parca-dev/parca/compare/ui-v0.7.13...ui-v0.8.0) (2022-01-31)
+
+**Note:** Version bump only for package @parca/profile
+
 # [0.8.0](https://github.com/parca-dev/parca/compare/ui-v0.7.13...ui-v0.8.0) (2022-01-31)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.8.0",
+  "version": "0.9.2",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.8.0",
-    "@parca/dynamicsize": "^0.8.0",
-    "@parca/parser": "^0.8.0",
+    "@parca/client": "^0.9.1",
+    "@parca/dynamicsize": "^0.9.0",
+    "@parca/parser": "^0.9.0",
     "d3-scale": "^4.0.2"
   },
   "main": "src/index.tsx",
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b4a7d7d958a4499fae9767c81d5b990531bd0639"
+  "gitHead": "544d4819ace2db4570e2780876108636860ff0d2"
 }

package/src/IcicleGraph.tsx

@@ -4,7 +4,7 @@ import {pointer} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
 import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
 import {usePopper} from 'react-popper';
-import {valueFormatter} from '@parca/functions';
+import {getLastItem, valueFormatter} from '@parca/functions';
 
 const RowHeight = 20;
 
@@ -106,13 +106,6 @@ function diffColor(diff: number, cumulative: number): string {
   return color;
 }
 
-function getLastItem(thePath: string): string {
-  const index = thePath.lastIndexOf('/');
-  if (index === -1) return thePath;
-
-  return thePath.substring(index + 1);
-}
-
 export function nodeLabel(node: FlamegraphNode.AsObject): string {
   if (node.meta === undefined) return '<unknown>';
   const mapping = `${
@@ -280,6 +273,7 @@ const FlamegraphNodeTooltipTableRows = ({
 function generateGetBoundingClientRect(contextElement: Element, x = 0, y = 0) {
   const domRect = contextElement.getBoundingClientRect();
   return () =>
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     ({
       width: 0,
       height: 0,
@@ -292,6 +286,7 @@ function generateGetBoundingClientRect(contextElement: Element, x = 0, y = 0) {
 
 const virtualElement = {
   getBoundingClientRect: () =>
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     ({
       width: 0,
       height: 0,

package/src/ProfileView.styles.css

@@ -0,0 +1,3 @@
+.no-outline-on-buttons {
+  box-shadow: none !important;
+}

package/src/ProfileView.tsx

@@ -1,17 +1,23 @@
-import React, {useEffect, useState, useRef} from 'react';
-// import ProfileSVG from './ProfileSVG'
-// import ProfileTop from './ProfileTop'
+import React, {useEffect, useState} from 'react';
 import {CalcWidth} from '@parca/dynamicsize';
-import ProfileIcicleGraph from './ProfileIcicleGraph';
-import {ProfileSource} from './ProfileSource';
+import {parseParams} from '@parca/functions';
 import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
-import Card from '../../../app/web/src/components/ui/Card';
 import Button from '@parca/web/src/components/ui/Button';
 import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
 
+import ProfileIcicleGraph from './ProfileIcicleGraph';
+import {ProfileSource} from './ProfileSource';
+import Card from '../../../app/web/src/components/ui/Card';
+import TopTable from './TopTable';
+
+import './ProfileView.styles.css';
+
+type NavigateFunction = (path: string, queryParams: any) => void;
+
 interface ProfileViewProps {
   queryClient: QueryServiceClient;
   profileSource: ProfileSource;
+  navigateTo?: NavigateFunction;
 }
 
 export interface IQueryResult {
@@ -52,9 +58,16 @@ export const useQuery = (
   return result;
 };
 
-export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX.Element => {
+export const ProfileView = ({
+  queryClient,
+  profileSource,
+  navigateTo,
+}: ProfileViewProps): JSX.Element => {
+  const router = parseParams(window.location.search);
+  const currentViewFromURL = router.currentProfileView as string;
   const [curPath, setCurPath] = useState<string[]>([]);
   const {response, error} = useQuery(queryClient, profileSource);
+  const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
 
   if (error != null) {
     return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
@@ -100,7 +113,7 @@ export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX
     e.preventDefault();
 
     const req = profileSource.QueryRequest();
-    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_PPROF_UNSPECIFIED);
+    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_PPROF);
 
     queryClient.query(
       req,
@@ -108,6 +121,10 @@ export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX
         error: ServiceError | null,
         responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
       ) => {
+        if (error != null) {
+          console.error('Error while querying', error);
+          return;
+        }
         if (responseMessage !== null) {
           const bytes = responseMessage.getPprof();
           const blob = new Blob([bytes], {type: 'application/octet-stream'});
@@ -116,14 +133,14 @@ export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX
           link.href = window.URL.createObjectURL(blob);
           link.download = 'profile.pb.gz';
           link.click();
+        } else {
+          console.error(error);
         }
       }
     );
   };
 
-  const resetIcicleGraph = (e: React.MouseEvent<HTMLElement>) => {
-    setCurPath([]);
-  };
+  const resetIcicleGraph = () => setCurPath([]);
 
   const setNewCurPath = (path: string[]) => {
     if (!arrayEquals(curPath, path)) {
@@ -131,31 +148,103 @@ export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX
     }
   };
 
+  const switchProfileView = (view: string) => {
+    if (!navigateTo) return;
+
+    setCurrentView(view);
+
+    navigateTo('/', {...router, ...{currentProfileView: view}});
+  };
+
   return (
     <>
       <div className="py-3">
         <Card>
           <Card.Body>
-            <div className="flex space-x-4 py-3">
-              <div className="w-1/4">
-                <Button color="neutral" onClick={resetIcicleGraph} disabled={curPath.length === 0}>
-                  Reset View
+            <div className="flex py-3 w-full">
+              <div className="w-2/5 flex space-x-4">
+                <div>
+                  <Button color="neutral" onClick={downloadPProf}>
+                    Download pprof
+                  </Button>
+                </div>
+              </div>
+
+              <div className="flex ml-auto">
+                <div className="mr-3">
+                  <Button
+                    color="neutral"
+                    onClick={resetIcicleGraph}
+                    disabled={curPath.length === 0}
+                    additionalClasses="whitespace-nowrap text-ellipsis"
+                  >
+                    Reset View
+                  </Button>
+                </div>
+
+                <Button
+                  color={`${currentView === 'table' ? 'primary' : 'neutral'}`}
+                  additionalClasses={`rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  onClick={() => switchProfileView('table')}
+                >
+                  Table
+                </Button>
+
+                <Button
+                  color={`${currentView === 'both' ? 'primary' : 'neutral'}`}
+                  additionalClasses={`rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons no-outline-on-buttons text-ellipsis`}
+                  onClick={() => switchProfileView('both')}
+                >
+                  Both
+                </Button>
+
+                <Button
+                  color={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
+                  additionalClasses={`rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons`}
+                  onClick={() => switchProfileView('icicle')}
+                >
+                  Icicle Graph
                 </Button>
               </div>
+            </div>
 
-              <div className="w-full" />
-              <div className="w-full" />
-              <Button color="neutral" onClick={downloadPProf}>
-                Download pprof
-              </Button>
+            <div className="flex space-x-4">
+              {currentView === 'icicle' && (
+                <div className="w-full">
+                  <CalcWidth throttle={300} delay={2000}>
+                    <ProfileIcicleGraph
+                      curPath={curPath}
+                      setNewCurPath={setNewCurPath}
+                      graph={response.getFlamegraph()?.toObject()}
+                    />
+                  </CalcWidth>
+                </div>
+              )}
+
+              {currentView === 'table' && (
+                <div className="w-full">
+                  <TopTable queryClient={queryClient} profileSource={profileSource} />
+                </div>
+              )}
+
+              {currentView === 'both' && (
+                <>
+                  <div className="w-1/2">
+                    <TopTable queryClient={queryClient} profileSource={profileSource} />
+                  </div>
+
+                  <div className="w-1/2">
+                    <CalcWidth throttle={300} delay={2000}>
+                      <ProfileIcicleGraph
+                        curPath={curPath}
+                        setNewCurPath={setNewCurPath}
+                        graph={response.getFlamegraph()?.toObject()}
+                      />
+                    </CalcWidth>
+                  </div>
+                </>
+              )}
             </div>
-            <CalcWidth throttle={300} delay={2000}>
-              <ProfileIcicleGraph
-                curPath={curPath}
-                setNewCurPath={setNewCurPath}
-                graph={response.getFlamegraph()?.toObject()}
-              />
-            </CalcWidth>
           </Card.Body>
         </Card>
       </div>

package/src/TopTable.styles.css

@@ -0,0 +1,7 @@
+.iciclegraph-table .desc {
+  transform: rotate(0);
+}
+
+.iciclegraph-table .asc {
+  transform: rotate(180deg);
+}

package/src/TopTable.tsx

@@ -0,0 +1,188 @@
+import React, {useEffect, useState} from 'react';
+
+import {ProfileSource} from './ProfileSource';
+import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
+import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
+import {getLastItem, valueFormatter} from '@parca/functions';
+
+import './TopTable.styles.css';
+
+interface ProfileViewProps {
+  queryClient: QueryServiceClient;
+  profileSource: ProfileSource;
+}
+
+export interface IQueryResult {
+  response: QueryResponse | null;
+  error: ServiceError | null;
+}
+
+const Arrow = ({direction}: {direction: string | undefined}) => {
+  return (
+    <svg
+      className={`${direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''}`}
+      fill="#777d87"
+      height="10"
+      viewBox="0 0 11 10"
+      width="11"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path clip-rule="evenodd" d="m.573997 0 5.000003 10 5-10h-9.999847z" fill-rule="evenodd" />
+    </svg>
+  );
+};
+
+const useSortableData = (
+  response: QueryResponse | null,
+  config = {key: 'cumulative', direction: 'desc'}
+) => {
+  const [sortConfig, setSortConfig] = React.useState<{key: string; direction: string} | null>(
+    config
+  );
+
+  const rawTableReport = response?.toObject().top?.listList;
+
+  const items = rawTableReport?.map(node => ({
+    ...node,
+    name: node.meta?.pb_function?.name,
+  }));
+
+  const sortedItems = React.useMemo(() => {
+    if (!items) return;
+
+    let sortableItems = [...items];
+    if (sortConfig !== null) {
+      sortableItems.sort((a, b) => {
+        if (a[sortConfig.key] < b[sortConfig.key]) {
+          return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (a[sortConfig.key] > b[sortConfig.key]) {
+          return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+      });
+    }
+    return sortableItems;
+  }, [items, sortConfig]);
+
+  const requestSort = key => {
+    let direction = 'desc';
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'desc') {
+      direction = 'asc';
+    }
+    setSortConfig({key, direction});
+  };
+
+  return {items: sortedItems, requestSort, sortConfig};
+};
+
+export const useQuery = (
+  client: QueryServiceClient,
+  profileSource: ProfileSource
+): IQueryResult => {
+  const [result, setResult] = useState<IQueryResult>({
+    response: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    const req = profileSource.QueryRequest();
+    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_TOP);
+
+    client.query(
+      req,
+      (
+        error: ServiceError | null,
+        responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
+      ) => {
+        setResult({
+          response: responseMessage,
+          error: error,
+        });
+      }
+    );
+  }, [client, profileSource]);
+
+  return result;
+};
+
+export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.Element => {
+  const {response, error} = useQuery(queryClient, profileSource);
+  const {items, requestSort, sortConfig} = useSortableData(response);
+
+  const unit = response?.toObject().top?.unit as string;
+
+  if (error != null) {
+    return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
+  }
+
+  const total = response?.toObject().top?.listList.length;
+  if (total === 0) return <>Profile has no samples</>;
+
+  const getClassNamesFor = name => {
+    if (!sortConfig) {
+      return;
+    }
+    return sortConfig.key === name ? sortConfig.direction : undefined;
+  };
+
+  return (
+    <>
+      <div className="w-full">
+        <table className="iciclegraph-table table-auto text-left w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800">
+            <tr>
+              <th
+                className="text-sm cursor-pointer pt-2 pb-2 pl-2"
+                onClick={() => requestSort('name')}
+              >
+                Name
+                <span className={`inline-block align-middle ml-2 ${getClassNamesFor('name')}`}>
+                  <Arrow direction={getClassNamesFor('name')} />
+                </span>
+              </th>
+              <th
+                className="text-left text-sm cursor-pointer pt-2 pb-2"
+                onClick={() => requestSort('flat')}
+              >
+                Flat
+                <span className={`inline-block align-middle ml-2 ${getClassNamesFor('flat')}`}>
+                  <Arrow direction={getClassNamesFor('flat')} />
+                </span>
+              </th>
+              <th
+                className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2"
+                onClick={() => requestSort('cumulative')}
+              >
+                Cumulative
+                <span
+                  className={`inline-block align-middle ml-2 ${getClassNamesFor('cumulative')}`}
+                >
+                  <Arrow direction={getClassNamesFor('cumulative')} />
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
+            {items?.map((report, index) => (
+              <tr key={index} className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12]">
+                <td className="text-xs py-1.5 pl-2 min-w-[150px] max-w-[450px]">
+                  {report.meta?.mapping?.file !== '' && [getLastItem(report.meta?.mapping?.file)]}{' '}
+                  {report.meta?.pb_function?.name}
+                </td>
+                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5text-right">
+                  {valueFormatter(report.flat, unit, 2)}
+                </td>
+                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5 text-right pr-2">
+                  {valueFormatter(report.cumulative, unit, 2)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export default TopTable;