@parca/profile 0.16.0 → 0.16.22

package/src/ProfileSelector/CompareButton.tsx

@@ -0,0 +1,72 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useState} from 'react';
+import {usePopper} from 'react-popper';
+import {Button} from '@parca/components';
+
+const CompareButton = ({
+  disabled,
+  onClick,
+}: {
+  disabled: boolean;
+  onClick: () => void;
+}): JSX.Element => {
+  const [compareHover, setCompareHover] = useState<boolean>(false);
+  const [comparePopperReferenceElement, setComparePopperReferenceElement] =
+    useState<HTMLDivElement | null>(null);
+  const [comparePopperElement, setComparePopperElement] = useState<HTMLDivElement | null>(null);
+  const {styles, attributes} = usePopper(comparePopperReferenceElement, comparePopperElement, {
+    placement: 'bottom',
+  });
+
+  const compareExplanation =
+    'Compare two profiles and see the relative difference between them more clearly.';
+
+  if (disabled) return <></>;
+
+  return (
+    <div ref={setComparePopperReferenceElement}>
+      <Button
+        color="neutral"
+        disabled={disabled}
+        onClick={onClick}
+        onMouseEnter={() => setCompareHover(true)}
+        onMouseLeave={() => setCompareHover(false)}
+      >
+        Compare
+      </Button>
+      {compareHover && (
+        <div
+          ref={setComparePopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+          className="z-50"
+        >
+          <div className="flex">
+            <div className="relative mx-2">
+              <svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
+                <polygon className="fill-current" points="0,127.5 127.5,0 255,127.5" />
+              </svg>
+              <div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40">
+                {compareExplanation}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CompareButton;

package/src/ProfileSelector/MergeButton.tsx

@@ -0,0 +1,72 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useState} from 'react';
+import {usePopper} from 'react-popper';
+import {Button} from '@parca/components';
+
+const MergeButton = ({
+  disabled,
+  onClick,
+}: {
+  disabled: boolean;
+  onClick: () => void;
+}): JSX.Element => {
+  const [mergeHover, setMergeHover] = useState<boolean>(false);
+  const [mergePopperReferenceElement, setMergePopperReferenceElement] =
+    useState<HTMLDivElement | null>(null);
+  const [mergePopperElement, setMergePopperElement] = useState<HTMLDivElement | null>(null);
+  const {styles, attributes} = usePopper(mergePopperReferenceElement, mergePopperElement, {
+    placement: 'bottom',
+  });
+
+  const mergeExplanation =
+    'Merging allows combining all profile samples of a query into a single report.';
+
+  if (disabled) return <></>;
+
+  return (
+    <div ref={setMergePopperReferenceElement}>
+      <Button
+        color="neutral"
+        disabled={disabled}
+        onClick={onClick}
+        onMouseEnter={() => setMergeHover(true)}
+        onMouseLeave={() => setMergeHover(false)}
+      >
+        Merge
+      </Button>
+      {mergeHover && (
+        <div
+          ref={setMergePopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+          className="z-50"
+        >
+          <div className="flex">
+            <div className="relative mx-2">
+              <svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
+                <polygon className="fill-current" points="0,127.5 127.5,0 255,127.5" />
+              </svg>
+              <div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40 z-50">
+                {mergeExplanation}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MergeButton;

package/src/ProfileSelector/index.tsx

@@ -0,0 +1,270 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Query} from '@parca/parser';
+import {QueryServiceClient, ProfileTypesResponse} from '@parca/client';
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+import {ProfileSelection} from '..';
+import React, {useEffect, useState} from 'react';
+import ProfileMetricsGraph from '../ProfileMetricsGraph';
+import MatchersInput from '../MatchersInput/index';
+import MergeButton from './MergeButton';
+import CompareButton from './CompareButton';
+import {
+  Card,
+  DateTimeRangePicker,
+  DateTimeRange,
+  Button,
+  ButtonGroup,
+  useGrpcMetadata,
+} from '@parca/components';
+import {CloseIcon} from '@parca/icons';
+import cx from 'classnames';
+import ProfileTypeSelector from '../ProfileTypeSelector/index';
+
+export interface QuerySelection {
+  expression: string;
+  from: number;
+  to: number;
+  merge: boolean;
+  timeSelection: string;
+}
+
+interface ProfileSelectorProps {
+  queryClient: QueryServiceClient;
+  querySelection: QuerySelection;
+  selectProfile: (source: ProfileSelection) => void;
+  selectQuery: (query: QuerySelection) => void;
+  closeProfile: () => void;
+  enforcedProfileName: string;
+  profileSelection: ProfileSelection | null;
+  comparing: boolean;
+  onCompareProfile: () => void;
+}
+
+export interface IProfileTypesResult {
+  loading: boolean;
+  data?: ProfileTypesResponse;
+  error?: RpcError;
+}
+
+export const useProfileTypes = (client: QueryServiceClient): IProfileTypesResult => {
+  const [result, setResult] = useState<ProfileTypesResponse | undefined>(undefined);
+  const [error, setError] = useState<RpcError | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+  const metadata = useGrpcMetadata();
+
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+    const call = client.profileTypes({}, {meta: metadata});
+    call.response
+      .then(response => setResult(response))
+      .catch(error => setError(error))
+      .finally(() => setLoading(false));
+  }, [client, metadata, loading]);
+
+  return {loading, data: result, error};
+};
+
+const ProfileSelector = ({
+  queryClient,
+  querySelection,
+  selectProfile,
+  selectQuery,
+  closeProfile,
+  enforcedProfileName,
+  profileSelection,
+  comparing,
+  onCompareProfile,
+}: ProfileSelectorProps): JSX.Element => {
+  const {
+    loading: profileTypesLoading,
+    data: profileTypesData,
+    error,
+  } = useProfileTypes(queryClient);
+
+  const [timeRangeSelection, setTimeRangeSelection] = useState(
+    DateTimeRange.fromRangeKey(querySelection.timeSelection)
+  );
+  const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
+
+  useEffect(() => {
+    if (enforcedProfileName !== '') {
+      const [q, changed] = Query.parse(querySelection.expression).setProfileName(
+        enforcedProfileName
+      );
+      if (changed) {
+        setQueryExpressionString(q.toString());
+        return;
+      }
+    }
+    setQueryExpressionString(querySelection.expression);
+  }, [enforcedProfileName, querySelection.expression]);
+
+  const enforcedProfileNameQuery = (): Query => {
+    const pq = Query.parse(queryExpressionString);
+    const [q] = pq.setProfileName(enforcedProfileName);
+    return q;
+  };
+
+  const query =
+    enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
+  const selectedProfileName = query.profileName();
+
+  const setNewQueryExpression = (expr: string, merge: boolean): void => {
+    selectQuery({
+      expression: expr,
+      from: timeRangeSelection.getFromMs(),
+      to: timeRangeSelection.getToMs(),
+      merge,
+      timeSelection: timeRangeSelection.getRangeKey(),
+    });
+  };
+
+  const setQueryExpression = (): void => {
+    setNewQueryExpression(query.toString(), false);
+  };
+
+  const addLabelMatcher = (key: string, value: string): void => {
+    const [newQuery, changed] = Query.parse(queryExpressionString).setMatcher(key, value);
+    if (changed) {
+      setNewQueryExpression(newQuery.toString(), false);
+    }
+  };
+
+  const setMergedSelection = (): void => {
+    setNewQueryExpression(queryExpressionString, true);
+  };
+
+  const setMatchersString = (matchers: string): void => {
+    const newExpressionString = `${selectedProfileName}{${matchers}}`;
+    setQueryExpressionString(newExpressionString);
+  };
+
+  const setProfileName = (profileName: string | undefined): void => {
+    if (profileName === undefined) {
+      return;
+    }
+    const [newQuery, changed] = query.setProfileName(profileName);
+    if (changed) {
+      const q = newQuery.toString();
+      setQueryExpressionString(q);
+    }
+  };
+
+  const handleCompareClick = (): void => onCompareProfile();
+
+  const searchDisabled =
+    queryExpressionString === undefined ||
+    queryExpressionString === '' ||
+    queryExpressionString === '{}';
+
+  const mergeDisabled = selectedProfileName === '' || querySelection.expression === undefined;
+  const compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
+
+  return (
+    <Card>
+      <Card.Header className={cx(comparing && 'overflow-x-scroll')}>
+        <div className="flex space-x-4">
+          {comparing && (
+            <button type="button" onClick={() => closeProfile()}>
+              <CloseIcon />
+            </button>
+          )}
+          <ProfileTypeSelector
+            profileTypesData={profileTypesData}
+            loading={profileTypesLoading}
+            selectedKey={selectedProfileName}
+            onSelection={setProfileName}
+            error={error}
+          />
+          <MatchersInput
+            queryClient={queryClient}
+            setMatchersString={setMatchersString}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+          />
+          <DateTimeRangePicker
+            onRangeSelection={setTimeRangeSelection}
+            range={timeRangeSelection}
+          />
+          {searchDisabled ? (
+            <div>
+              <Button disabled={true}>Search</Button>
+            </div>
+          ) : (
+            <>
+              <ButtonGroup style={{marginRight: 5}}>
+                <MergeButton disabled={mergeDisabled} onClick={setMergedSelection} />
+                {!comparing && (
+                  <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
+                )}
+              </ButtonGroup>
+              <div>
+                <Button
+                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                    e.preventDefault();
+                    setQueryExpression();
+                  }}
+                >
+                  Search
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </Card.Header>
+      {!querySelection.merge && (
+        <Card.Body>
+          {querySelection.expression !== undefined &&
+          querySelection.expression.length > 0 &&
+          querySelection.from !== undefined &&
+          querySelection.to !== undefined &&
+          (profileSelection == null || profileSelection.Type() !== 'merge') ? (
+            <ProfileMetricsGraph
+              queryClient={queryClient}
+              queryExpression={querySelection.expression}
+              from={querySelection.from}
+              to={querySelection.to}
+              select={selectProfile}
+              profile={profileSelection}
+              setTimeRange={(range: DateTimeRange) => {
+                setTimeRangeSelection(range);
+                selectQuery({
+                  expression: queryExpressionString,
+                  from: range.getFromMs(),
+                  to: range.getToMs(),
+                  merge: false,
+                  timeSelection: range.getRangeKey(),
+                });
+              }}
+              addLabelMatcher={addLabelMatcher}
+            />
+          ) : (
+            <>
+              {(profileSelection == null || profileSelection.Type() !== 'merge') && (
+                <div className="my-20 text-center">
+                  <p>Run a query, and the result will be displayed here.</p>
+                </div>
+              )}
+            </>
+          )}
+        </Card.Body>
+      )}
+    </Card>
+  );
+};
+
+export default ProfileSelector;

package/src/ProfileTypeSelector/index.tsx

@@ -0,0 +1,180 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {useMemo} from 'react';
+import {ProfileTypesResponse} from '@parca/client';
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+import {SelectElement, Select} from '@parca/components';
+
+interface WellKnownProfile {
+  name: string;
+  help: string;
+}
+
+interface WellKnownProfiles {
+  [key: string]: WellKnownProfile;
+}
+
+export const wellKnownProfiles: WellKnownProfiles = {
+  'block:contentions:count:contentions:count': {
+    name: 'Block Contentions Total',
+    help: 'Stack traces that led to blocking on synchronization primitives.',
+  },
+  'block:delay:nanoseconds:contentions:count': {
+    name: 'Block Contention Time Total',
+    help: 'Time delayed stack traces caused by blocking on synchronization primitives.',
+  },
+  // Unfortunately, fgprof does not set the period type and unit.
+  'fgprof:samples:count::': {
+    name: 'Fgprof Samples Total',
+    help: 'CPU profile samples observed regardless of their current On/Off CPU scheduling status',
+  },
+  // Unfortunately, fgprof does not set the period type and unit.
+  'fgprof:time:nanoseconds::': {
+    name: 'Fgprof Samples Time Total',
+    help: 'CPU profile measured regardless of their current On/Off CPU scheduling status in nanoseconds',
+  },
+  'goroutine:goroutine:count:goroutine:count': {
+    name: 'Goroutine Created Total',
+    help: 'Stack traces that created all current goroutines.',
+  },
+  'memory:alloc_objects:count:space:bytes': {
+    name: 'Memory Allocated Objects Total',
+    help: 'A sampling of all past memory allocations by objects.',
+  },
+  'memory:alloc_space:bytes:space:bytes': {
+    name: 'Memory Allocated Bytes Total',
+    help: 'A sampling of all past memory allocations in bytes.',
+  },
+  'memory:alloc_objects:count:space:bytes:delta': {
+    name: 'Memory Allocated Objects Delta',
+    help: 'A sampling of all memory allocations during the observation by objects.',
+  },
+  'memory:alloc_space:bytes:space:bytes:delta': {
+    name: 'Memory Allocated Bytes Delta',
+    help: 'A sampling of all memory allocations during the observation in bytes.',
+  },
+  'memory:inuse_objects:count:space:bytes': {
+    name: 'Memory In-Use Objects',
+    help: 'A sampling of memory allocations of live objects by objects.',
+  },
+  'memory:inuse_space:bytes:space:bytes': {
+    name: 'Memory In-Use Bytes',
+    help: 'A sampling of memory allocations of live objects by bytes.',
+  },
+  'mutex:contentions:count:contentions:count': {
+    name: 'Mutex Contentions Total',
+    help: 'Stack traces of holders of contended mutexes.',
+  },
+  'mutex:delay:nanoseconds:contentions:count': {
+    name: 'Mutex Contention Time Total',
+    help: 'Time delayed stack traces caused by contended mutexes.',
+  },
+  'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta': {
+    name: 'Process CPU Nanoseconds',
+    help: 'CPU profile measured by the process itself in nanoseconds.',
+  },
+  'process_cpu:samples:count:cpu:nanoseconds:delta': {
+    name: 'Process CPU Samples',
+    help: 'CPU profile samples observed by the process itself.',
+  },
+  'parca_agent_cpu:samples:count:cpu:nanoseconds:delta': {
+    name: 'CPU Samples',
+    help: 'CPU profile samples observed by Parca Agent.',
+  },
+};
+
+function flexibleWellKnownProfileMatching(name: string): WellKnownProfile | undefined {
+  const prefixExcludedName = name.split(':').slice(1).join(':');
+  const requiredKey = Object.keys(wellKnownProfiles).find(key => {
+    if (key.endsWith(prefixExcludedName)) {
+      return true;
+    }
+    return false;
+  });
+  return requiredKey != null ? wellKnownProfiles[requiredKey] : undefined;
+}
+
+function profileSelectElement(
+  name: string,
+  flexibleKnownProfilesDetection: boolean
+): SelectElement {
+  const wellKnown: WellKnownProfile | undefined = !flexibleKnownProfilesDetection
+    ? wellKnownProfiles[name]
+    : flexibleWellKnownProfileMatching(name);
+  if (wellKnown === undefined) return {active: <>{name}</>, expanded: <>{name}</>};
+
+  const title = wellKnown.name.replace(/ /g, '\u00a0');
+  return {
+    active: <>{title}</>,
+    expanded: (
+      <>
+        <span>{title}</span>
+        <br />
+        <span className="text-xs">{wellKnown.help}</span>
+      </>
+    ),
+  };
+}
+
+interface Props {
+  profileTypesData?: ProfileTypesResponse;
+  loading?: boolean;
+  error: RpcError | undefined;
+  selectedKey: string | undefined;
+  flexibleKnownProfilesDetection?: boolean;
+  onSelection: (value: string | undefined) => void;
+}
+
+const ProfileTypeSelector = ({
+  profileTypesData,
+  loading = false,
+  error,
+  selectedKey,
+  onSelection,
+  flexibleKnownProfilesDetection = false,
+}: Props): JSX.Element => {
+  const profileNames = useMemo(() => {
+    return (error === undefined || error == null) &&
+      profileTypesData !== undefined &&
+      profileTypesData != null
+      ? profileTypesData.types
+          .map(
+            type =>
+              `${type.name}:${type.sampleType}:${type.sampleUnit}:${type.periodType}:${
+                type.periodUnit
+              }${type.delta ? ':delta' : ''}`
+          )
+          .sort((a: string, b: string): number => {
+            return a.localeCompare(b);
+          })
+      : [];
+  }, [profileTypesData, error]);
+
+  const profileLabels = profileNames.map(name => ({
+    key: name,
+    element: profileSelectElement(name, flexibleKnownProfilesDetection),
+  }));
+
+  return (
+    <Select
+      items={profileLabels}
+      selectedKey={selectedKey}
+      onSelection={onSelection}
+      placeholder="Select profile..."
+      loading={loading}
+    />
+  );
+};
+
+export default ProfileTypeSelector;

package/src/ProfileView.tsx

@@ -16,13 +16,8 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {parseParams} from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
 import {QueryServiceClient, Flamegraph, Top, Callgraph} from '@parca/client';
-import {
-  Button,
-  Card,
-  SearchNodes,
-  useParcaTheme,
-  Callgraph as CallgraphComponent,
-} from '@parca/components';
+import {Button, Card, SearchNodes, useParcaTheme} from '@parca/components';
+import {Callgraph as CallgraphComponent} from './';
 import {useContainerDimensions} from '@parca/dynamicsize';
 
 import ProfileShareButton from './components/ProfileShareButton';

package/src/index.tsx

@@ -11,9 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React from 'react';
+import type {Props as CallgraphProps} from '@parca/profile/src/Callgraph';
+import ProfileExplorer from './ProfileExplorer';
+import ProfileTypeSelector from './ProfileTypeSelector';
+
 export * from './IcicleGraph';
 export * from './ProfileIcicleGraph';
 export * from './ProfileSource';
 export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
+
+export type {CallgraphProps};
+
+const Callgraph = React.lazy(async () => await import('@parca/profile/src/Callgraph'));
+
+export {Callgraph, ProfileExplorer, ProfileTypeSelector};

package/src/useQuery.tsx

@@ -53,6 +53,7 @@ export const useQuery = (
       isLoading: true,
     });
     const req = profileSource.QueryRequest();
+    console.log('req', req);
     req.reportType = reportType;
 
     const call = client.query(req, {meta: metadata});

package/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -1,8 +1,12 @@
 {
   "extends": "../../../config/next.tsconfig.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "typings.d.ts"],
   "compilerOptions": {
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "noEmit": false,
+    "declaration": true
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts"]
 }

package/typings.d.ts

@@ -0,0 +1,14 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+declare module '*.svg';