@parca/profile 0.12.6 → 0.12.13

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.13](https://github.com/parca-dev/parca/compare/ui-v0.12.12...ui-v0.12.13) (2022-04-05)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.12](https://github.com/parca-dev/parca/compare/ui-v0.12.11...ui-v0.12.12) (2022-04-05)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.12.8](https://github.com/parca-dev/parca/compare/ui-v0.12.7...ui-v0.12.8) (2022-03-30)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.12.6](https://github.com/parca-dev/parca/compare/ui-v0.12.5...ui-v0.12.6) (2022-03-24)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@parca/profile",
-  "version": "0.12.6",
+  "version": "0.12.13",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.12.6",
+    "@parca/client": "^0.12.12",
     "@parca/dynamicsize": "^0.12.0",
     "@parca/parser": "^0.12.3",
     "d3-scale": "^4.0.2"
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "5ac2cede2384a48df3df2615bcccfaaf0f4933f5"
+  "gitHead": "d75d40dee66420f703879f7b572d5f14ec09cce8"
 }

package/src/ProfileView.tsx

@@ -2,12 +2,11 @@ import React, {useEffect, useState} from 'react';
 import {CalcWidth} from '@parca/dynamicsize';
 import {parseParams} from '@parca/functions';
 import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
-import {Button} from '@parca/components';
+import {Button, Card, useGrpcMetadata} from '@parca/components';
 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 '@parca/components';
 import TopTable from './TopTable';
 
 import './ProfileView.styles.css';
@@ -18,6 +17,7 @@ interface ProfileViewProps {
   queryClient: QueryServiceClient;
   profileSource: ProfileSource;
   navigateTo?: NavigateFunction;
+  compare?: boolean;
 }
 
 export interface IQueryResult {
@@ -44,6 +44,7 @@ export const useQuery = (
     response: null,
     error: null,
   });
+  const metadata = useGrpcMetadata();
 
   useEffect(() => {
     setResult({
@@ -53,13 +54,17 @@ export const useQuery = (
     const req = profileSource.QueryRequest();
     req.setReportType(QueryRequest.ReportType.REPORT_TYPE_FLAMEGRAPH_UNSPECIFIED);
 
-    client.query(req, (error: ServiceError | null, responseMessage: QueryResponse | null) => {
-      setResult({
-        isLoading: false,
-        response: responseMessage,
-        error: error,
-      });
-    });
+    client.query(
+      req,
+      metadata,
+      (error: ServiceError | null, responseMessage: QueryResponse | null) => {
+        setResult({
+          isLoading: false,
+          response: responseMessage,
+          error: error,
+        });
+      }
+    );
   }, [client, profileSource]);
 
   return result;
@@ -76,6 +81,7 @@ export const ProfileView = ({
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   const {isLoading, response, error} = useQuery(queryClient, profileSource);
   const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
+  const grpcMetadata = useGrpcMetadata();
 
   useEffect(() => {
     let showLoaderTimeout;
@@ -138,6 +144,7 @@ export const ProfileView = ({
 
     queryClient.query(
       req,
+      grpcMetadata,
       (
         error: ServiceError | null,
         responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null

package/src/TopTable.tsx

@@ -1,6 +1,4 @@
 import React, {useEffect, useState} from 'react';
-
-import {ProfileSource} from './ProfileSource';
 import {
   QueryRequest,
   QueryResponse,
@@ -10,7 +8,9 @@ import {
 } 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 {useGrpcMetadata} from '@parca/components';
 
+import {ProfileSource} from './ProfileSource';
 import './TopTable.styles.css';
 
 interface ProfileViewProps {
@@ -90,6 +90,7 @@ export const useQuery = (
     response: null,
     error: null,
   });
+  const metadata = useGrpcMetadata();
 
   useEffect(() => {
     const req = profileSource.QueryRequest();
@@ -97,6 +98,7 @@ export const useQuery = (
 
     client.query(
       req,
+      metadata,
       (
         error: ServiceError | null,
         responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
@@ -187,6 +189,15 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
                   <Arrow direction={getClassNamesFor('cumulative')} />
                 </span>
               </th>
+              <th
+                className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2"
+                onClick={() => requestSort('diff')}
+              >
+                Diff
+                <span className={`inline-block align-middle ml-2 ${getClassNamesFor('diff')}`}>
+                  <Arrow direction={getClassNamesFor('diff')} />
+                </span>
+              </th>
             </tr>
           </thead>
           <tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
@@ -195,12 +206,15 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
                 <td className="text-xs py-1.5 pl-2 min-w-[150px] max-w-[450px]">
                   {RowLabel(report.meta)}
                 </td>
-                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5text-right">
+                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5 text-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>
+                <td className="text-xs min-w-[150px] max-w-[150px] py-1.5 text-right pr-2">
+                  {valueFormatter(report.diff, unit, 2)}
+                </td>
               </tr>
             ))}
           </tbody>