@parca/profile 0.10.0 → 0.12.2

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.2](https://github.com/parca-dev/parca/compare/ui-v0.12.1...ui-v0.12.2) (2022-03-14)
+
+**Note:** Version bump only for package @parca/profile
+
+# [0.12.0](https://github.com/parca-dev/parca/compare/ui-v0.11.2...ui-v0.12.0) (2022-03-09)
+
+**Note:** Version bump only for package @parca/profile
+
+# [0.11.0](https://github.com/parca-dev/parca/compare/ui-v0.10.4...ui-v0.11.0) (2022-03-02)
+
+### Features
+
+- convert moment.js to date-fns ([9431e15](https://github.com/parca-dev/parca/commit/9431e156d9438353e5542b11e33ed8e0de93547f)), closes [#613](https://github.com/parca-dev/parca/issues/613)
+
+## [0.10.3](https://github.com/parca-dev/parca/compare/ui-v0.10.2...ui-v0.10.3) (2022-03-02)
+
+## 0.10.1 (2022-02-28)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.10.2](https://github.com/parca-dev/parca/compare/ui-v0.10.1...ui-v0.10.2) (2022-03-01)
+
+**Note:** Version bump only for package @parca/profile
+
 # [0.10.0](https://github.com/parca-dev/parca/compare/ui-v0.9.3...ui-v0.10.0) (2022-02-28)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.10.0",
+  "version": "0.12.2",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.10.0",
-    "@parca/dynamicsize": "^0.10.0",
-    "@parca/parser": "^0.10.0",
+    "@parca/client": "^0.12.2",
+    "@parca/dynamicsize": "^0.12.0",
+    "@parca/parser": "^0.12.0",
     "d3-scale": "^4.0.2"
   },
   "main": "src/index.tsx",
@@ -19,5 +19,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "5ec1e79324d80272b4bae300bcec3162687d3e92"
+  "gitHead": "55e2a33548e27fdb1efb8bb0a1598084e0d5ddf1"
 }

package/src/ProfileSource.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import {formatDate} from '@parca/functions';
 import {Query} from '@parca/parser';
 import {
   Label,
@@ -25,8 +25,8 @@ export interface ProfileSelection {
   Type: () => string;
 }
 
-export const timeFormat = 'MMM D, [at] h:mm:s a [(UTC)]';
-export const timeFormatShort = 'MMM D, h:mma';
+export const timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
+export const timeFormatShort = 'MMM d, h:mma';
 
 export function ParamsString(params: {[key: string]: string}): string {
   return Object.keys(params)
@@ -157,7 +157,7 @@ export class SingleProfileSource implements ProfileSource {
 
     const singleProfile = new SingleProfile();
     const ts = new Timestamp();
-    ts.fromDate(moment(this.time).toDate());
+    ts.fromDate(new Date(this.time));
     singleProfile.setTime(ts);
     singleProfile.setQuery(this.query());
     sel.setSingle(singleProfile);
@@ -170,7 +170,7 @@ export class SingleProfileSource implements ProfileSource {
     req.setMode(QueryRequest.Mode.MODE_SINGLE_UNSPECIFIED);
     const singleQueryRequest = new SingleProfile();
     const ts = new Timestamp();
-    ts.fromDate(moment(this.time).toDate());
+    ts.fromDate(new Date(this.time));
     singleQueryRequest.setTime(ts);
     singleQueryRequest.setQuery(this.query());
     req.setSingle(singleQueryRequest);
@@ -201,7 +201,7 @@ export class SingleProfileSource implements ProfileSource {
               </button>
             ))}
         </p>
-        <p>{moment(this.time).utc().format(timeFormat)}</p>
+        <p>{formatDate(this.time, timeFormat)}</p>
       </>
     );
   }
@@ -215,7 +215,7 @@ export class SingleProfileSource implements ProfileSource {
   toString(): string {
     return `single profile of type ${this.profileName()} with labels ${this.stringLabels().join(
       ', '
-    )} collected at ${moment(this.time).utc().format(timeFormat)}`;
+    )} collected at ${formatDate(this.time, timeFormat)}`;
   }
 }
 
@@ -275,11 +275,11 @@ export class MergedProfileSource implements ProfileSource {
     const mergeProfile = new MergeProfile();
 
     const startTs = new Timestamp();
-    startTs.fromDate(moment(this.from).toDate());
+    startTs.fromDate(new Date(this.from));
     mergeProfile.setStart(startTs);
 
     const endTs = new Timestamp();
-    endTs.fromDate(moment(this.to).toDate());
+    endTs.fromDate(new Date(this.to));
     mergeProfile.setEnd(endTs);
 
     mergeProfile.setQuery(this.query);
@@ -296,11 +296,11 @@ export class MergedProfileSource implements ProfileSource {
     const mergeQueryRequest = new MergeProfile();
 
     const startTs = new Timestamp();
-    startTs.fromDate(moment(this.from).toDate());
+    startTs.fromDate(new Date(this.from));
     mergeQueryRequest.setStart(startTs);
 
     const endTs = new Timestamp();
-    endTs.fromDate(moment(this.to).toDate());
+    endTs.fromDate(new Date(this.to));
     mergeQueryRequest.setEnd(endTs);
 
     mergeQueryRequest.setQuery(this.query);
@@ -313,15 +313,16 @@ export class MergedProfileSource implements ProfileSource {
   Describe(): JSX.Element {
     return (
       <a>
-        Merge of "{this.query}" from {moment(this.from).utc().format(timeFormat)} to{' '}
-        {moment(this.to).utc().format(timeFormat)}
+        Merge of "{this.query}" from {formatDate(this.from, timeFormat)} to{' '}
+        {formatDate(this.to, timeFormat)}
       </a>
     );
   }
 
   toString(): string {
-    return `merged profiles of query "${this.query}" from ${moment(this.from)
-      .utc()
-      .format(timeFormat)} to ${moment(this.to).utc().format(timeFormat)}`;
+    return `merged profiles of query "${this.query}" from ${formatDate(
+      this.from,
+      timeFormat
+    )} to ${formatDate(this.to, timeFormat)}`;
   }
 }

package/src/ProfileView.tsx

@@ -2,12 +2,12 @@ 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/web/src/components/ui/Button';
+import {Button} 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 '../../../app/web/src/components/ui/Card';
+import {Card} from '@parca/components';
 import TopTable from './TopTable';
 
 import './ProfileView.styles.css';
@@ -21,6 +21,7 @@ interface ProfileViewProps {
 }
 
 export interface IQueryResult {
+  isLoading: boolean;
   response: QueryResponse | null;
   error: ServiceError | null;
 }
@@ -39,16 +40,22 @@ export const useQuery = (
   profileSource: ProfileSource
 ): IQueryResult => {
   const [result, setResult] = useState<IQueryResult>({
+    isLoading: false,
     response: null,
     error: null,
   });
 
   useEffect(() => {
+    setResult({
+      ...result,
+      isLoading: true,
+    });
     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,
       });
@@ -66,14 +73,24 @@ export const ProfileView = ({
   const router = parseParams(window.location.search);
   const currentViewFromURL = router.currentProfileView as string;
   const [curPath, setCurPath] = useState<string[]>([]);
-  const {response, error} = useQuery(queryClient, profileSource);
+  const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
+  const {isLoading, 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>;
-  }
+  useEffect(() => {
+    let showLoaderTimeout;
+    if (isLoading && !isLoaderVisible) {
+      // if the request takes longer than half a second, show the loading icon
+      showLoaderTimeout = setTimeout(() => {
+        setIsLoaderVisible(true);
+      }, 500);
+    } else {
+      setIsLoaderVisible(false);
+    }
+    return () => clearTimeout(showLoaderTimeout);
+  }, [isLoading]);
 
-  if (response == null) {
+  if (isLoaderVisible) {
     return (
       <div
         style={{
@@ -109,6 +126,10 @@ export const ProfileView = ({
     );
   }
 
+  if (error) {
+    return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
+  }
+
   const downloadPProf = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
 
@@ -215,7 +236,7 @@ export const ProfileView = ({
                     <ProfileIcicleGraph
                       curPath={curPath}
                       setNewCurPath={setNewCurPath}
-                      graph={response.getFlamegraph()?.toObject()}
+                      graph={response?.getFlamegraph()?.toObject()}
                     />
                   </CalcWidth>
                 </div>
@@ -238,7 +259,7 @@ export const ProfileView = ({
                       <ProfileIcicleGraph
                         curPath={curPath}
                         setNewCurPath={setNewCurPath}
-                        graph={response.getFlamegraph()?.toObject()}
+                        graph={response?.getFlamegraph()?.toObject()}
                       />
                     </CalcWidth>
                   </div>

package/src/TopTable.tsx

@@ -1,7 +1,13 @@
 import React, {useEffect, useState} from 'react';
 
 import {ProfileSource} from './ProfileSource';
-import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
+import {
+  QueryRequest,
+  QueryResponse,
+  QueryServiceClient,
+  ServiceError,
+  TopNodeMeta,
+} 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';
 
@@ -106,6 +112,26 @@ export const useQuery = (
   return result;
 };
 
+export const RowLabel = (meta: TopNodeMeta.AsObject | undefined): string => {
+  if (meta === undefined) return '<unknown>';
+  const mapping = `${
+    meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
+      ? `[${getLastItem(meta.mapping.file)}]`
+      : ''
+  }`;
+  if (meta.pb_function?.name !== undefined && meta.pb_function?.name !== '')
+    return `${mapping} ${meta.pb_function.name}`;
+
+  const address = `${
+    meta.location?.address !== undefined && meta.location?.address !== 0
+      ? `0x${meta.location.address.toString(16)}`
+      : ''
+  }`;
+  const fallback = `${mapping} ${address}`;
+
+  return fallback === '' ? '<unknown>' : fallback;
+};
+
 export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.Element => {
   const {response, error} = useQuery(queryClient, profileSource);
   const {items, requestSort, sortConfig} = useSortableData(response);
@@ -167,8 +193,7 @@ export const TopTable = ({queryClient, profileSource}: ProfileViewProps): JSX.El
             {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}
+                  {RowLabel(report.meta)}
                 </td>
                 <td className="text-xs min-w-[150px] max-w-[150px] py-1.5text-right">
                   {valueFormatter(report.flat, unit, 2)}