@parca/profile 0.16.0 → 0.16.22

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -0,0 +1,109 @@
+// 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 {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
+import {Query} from '@parca/parser';
+import {QueryServiceClient} from '@parca/client';
+
+import {NavigateFunction} from '.';
+import ProfileSelector, {QuerySelection} from '../ProfileSelector';
+
+interface ProfileExplorerCompareProps {
+  queryClient: QueryServiceClient;
+
+  queryA: QuerySelection;
+  queryB: QuerySelection;
+  profileA: ProfileSelection | null;
+  profileB: ProfileSelection | null;
+  selectQueryA: (query: QuerySelection) => void;
+  selectQueryB: (query: QuerySelection) => void;
+  selectProfileA: (source: ProfileSelection) => void;
+  selectProfileB: (source: ProfileSelection) => void;
+  closeProfile: (card: string) => void;
+
+  navigateTo: NavigateFunction;
+}
+
+const ProfileExplorerCompare = ({
+  queryClient,
+  queryA,
+  queryB,
+  profileA,
+  profileB,
+  selectQueryA,
+  selectQueryB,
+  selectProfileA,
+  selectProfileB,
+  closeProfile,
+  navigateTo,
+}: ProfileExplorerCompareProps): JSX.Element => {
+  const closeProfileA = (): void => {
+    closeProfile('A');
+  };
+
+  const closeProfileB = (): void => {
+    closeProfile('B');
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-2">
+        <div className="pr-2">
+          <ProfileSelector
+            queryClient={queryClient}
+            querySelection={queryA}
+            profileSelection={profileA}
+            selectProfile={selectProfileA}
+            selectQuery={selectQueryA}
+            closeProfile={closeProfileA}
+            enforcedProfileName={''}
+            comparing={true}
+            onCompareProfile={() => {}}
+          />
+        </div>
+        <div className="pl-2">
+          <ProfileSelector
+            queryClient={queryClient}
+            querySelection={queryB}
+            profileSelection={profileB}
+            selectProfile={selectProfileB}
+            selectQuery={selectQueryB}
+            closeProfile={closeProfileB}
+            enforcedProfileName={Query.parse(queryA.expression).profileName()}
+            comparing={true}
+            onCompareProfile={() => {}}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-1">
+        {profileA != null && profileB != null ? (
+          <ProfileViewWithData
+            navigateTo={navigateTo}
+            queryClient={queryClient}
+            profileSource={
+              new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
+            }
+          />
+        ) : (
+          <div>
+            <div className="my-20 text-center">
+              <p>Select a profile on both sides.</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ProfileExplorerCompare;

package/src/ProfileExplorer/ProfileExplorerSingle.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 {QueryServiceClient} from '@parca/client';
+import {ProfileSelection, ProfileViewWithData} from '..';
+
+import {NavigateFunction} from '../ProfileExplorer';
+import ProfileSelector, {QuerySelection} from '../ProfileSelector';
+interface ProfileExplorerSingleProps {
+  queryClient: QueryServiceClient;
+  query: QuerySelection;
+  selectQuery: (query: QuerySelection) => void;
+  selectProfile: (source: ProfileSelection) => void;
+  profile: ProfileSelection | null;
+  compareProfile: () => void;
+  navigateTo: NavigateFunction;
+}
+
+const ProfileExplorerSingle = ({
+  queryClient,
+  query,
+  selectQuery,
+  selectProfile,
+  profile,
+  compareProfile,
+  navigateTo,
+}: ProfileExplorerSingleProps): JSX.Element => {
+  return (
+    <>
+      <div className="grid grid-cols-1">
+        <div>
+          <ProfileSelector
+            queryClient={queryClient}
+            querySelection={query}
+            selectQuery={selectQuery}
+            selectProfile={selectProfile}
+            closeProfile={() => {}}
+            profileSelection={profile}
+            comparing={false}
+            onCompareProfile={compareProfile}
+            enforcedProfileName={''} // TODO
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-1">
+        <div>
+          {profile != null ? (
+            <ProfileViewWithData
+              queryClient={queryClient}
+              profileSource={profile.ProfileSource()}
+              navigateTo={navigateTo}
+            />
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProfileExplorerSingle;

package/src/ProfileExplorer/index.tsx

@@ -0,0 +1,377 @@
+// 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 {QuerySelection} from '../ProfileSelector';
+import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
+import ProfileExplorerSingle from './ProfileExplorerSingle';
+import ProfileExplorerCompare from './ProfileExplorerCompare';
+import {QueryServiceClient} from '@parca/client';
+import {
+  useAppSelector,
+  useAppDispatch,
+  setCompare,
+  selectCompareMode,
+  setSearchNodeString,
+  store,
+} from '@parca/store';
+import {Provider, batch} from 'react-redux';
+import {DateTimeRange} from '@parca/components';
+import {useEffect} from 'react';
+
+export type NavigateFunction = (path: string, queryParams: any) => void;
+
+interface ProfileExplorerProps {
+  queryClient: QueryServiceClient;
+  queryParams: any;
+  navigateTo: NavigateFunction;
+}
+
+const getExpressionAsAString = (expression: string | []): string => {
+  const x = Array.isArray(expression) ? expression.join() : expression;
+  return x;
+};
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const sanitizeDateRange = (
+  time_selection_a: string,
+  from_a: number,
+  to_a: number
+): {time_selection_a: string; from_a: number; to_a: number} => {
+  const range = DateTimeRange.fromRangeKey(time_selection_a);
+  if (from_a == null && to_a == null) {
+    from_a = range.getFromMs();
+    to_a = range.getToMs();
+  }
+  return {time_selection_a: range.getRangeKey(), from_a, to_a};
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const ProfileExplorerApp = ({
+  queryClient,
+  queryParams,
+  navigateTo,
+}: ProfileExplorerProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const compareMode = useAppSelector(selectCompareMode);
+
+  /* eslint-disable @typescript-eslint/naming-convention */
+  let {
+    from_a,
+    to_a,
+    merge_a,
+    profile_name_a,
+    labels_a,
+    time_a,
+    time_selection_a,
+    compare_a,
+    from_b,
+    to_b,
+    merge_b,
+    profile_name_b,
+    labels_b,
+    time_b,
+    time_selection_b,
+    compare_b,
+  } = queryParams;
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  const sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
+  time_selection_a = sanitizedRange.time_selection_a;
+  from_a = sanitizedRange.from_a;
+  to_a = sanitizedRange.to_a;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const expression_a = getExpressionAsAString(queryParams.expression_a);
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const expression_b = getExpressionAsAString(queryParams.expression_b);
+
+  if ((queryParams?.expression_a ?? '') !== '') queryParams.expression_a = expression_a;
+  if ((queryParams?.expression_b ?? '') !== '') queryParams.expression_b = expression_b;
+
+  useEffect(() => {
+    if (compare_a === 'true' && compare_b === 'true') {
+      dispatch(setCompare(true));
+    } else {
+      dispatch(setCompare(false));
+    }
+  }, [dispatch, compare_a, compare_b]);
+
+  const filterSuffix = (
+    o: {[key: string]: string | string[] | undefined},
+    suffix: string
+  ): {[key: string]: string | string[] | undefined} =>
+    Object.fromEntries(Object.entries(o).filter(([key]) => !key.endsWith(suffix)));
+
+  const swapQueryParameters = (o: {
+    [key: string]: string | string[] | undefined;
+  }): {[key: string]: string | string[] | undefined} => {
+    Object.entries(o).forEach(([key, value]) => {
+      if (key.endsWith('_b')) {
+        o[key.slice(0, -2) + '_a'] = value;
+      }
+    });
+    return o;
+  };
+
+  const selectProfileA = (p: ProfileSelection): void => {
+    queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+    queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+    return navigateTo('/', {
+      ...queryParams,
+      ...SuffixParams(p.HistoryParams(), '_a'),
+    });
+  };
+
+  const selectProfileB = (p: ProfileSelection): void => {
+    queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+    queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
+    return navigateTo('/', {
+      ...queryParams,
+      ...SuffixParams(p.HistoryParams(), '_b'),
+    });
+  };
+
+  // Show the SingleProfileExplorer when not comparing
+  if (compare_a !== 'true' && compare_b !== 'true') {
+    const query = {
+      expression: expression_a,
+      from: parseInt(from_a as string),
+      to: parseInt(to_a as string),
+      merge: (merge_a as string) === 'true',
+      profile_name: profile_name_a as string,
+      timeSelection: time_selection_a as string,
+    };
+
+    const profile = ProfileSelectionFromParams(
+      expression_a,
+      from_a as string,
+      to_a as string,
+      merge_a as string,
+      labels_a as string[],
+      profile_name_a as string,
+      time_a as string
+    );
+
+    const selectQuery = (q: QuerySelection): void => {
+      return navigateTo(
+        '/',
+        // Filtering the _a suffix causes us to reset potential profile
+        // selection when running a new query.
+        {
+          ...filterSuffix(queryParams, '_a'),
+          ...{
+            expression_a: encodeURIComponent(q.expression),
+            from_a: q.from.toString(),
+            to_a: q.to.toString(),
+            merge_a: q.merge,
+            time_selection_a: q.timeSelection,
+            currentProfileView: 'icicle',
+          },
+        }
+      );
+    };
+
+    const selectProfile = (p: ProfileSelection): void => {
+      queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
+      return navigateTo('/', {
+        ...queryParams,
+        ...SuffixParams(p.HistoryParams(), '_a'),
+      });
+    };
+
+    const compareProfile = (): void => {
+      let compareQuery = {
+        compare_a: 'true',
+        expression_a: encodeURIComponent(query.expression),
+        from_a: query.from.toString(),
+        to_a: query.to.toString(),
+        merge_a: query.merge,
+        time_selection_a: query.timeSelection,
+        profile_name_a: query.profile_name,
+
+        compare_b: 'true',
+        expression_b: encodeURIComponent(query.expression),
+        from_b: query.from.toString(),
+        to_b: query.to.toString(),
+        merge_b: query.merge,
+        time_selection_b: query.timeSelection,
+        profile_name_b: query.profile_name,
+      };
+
+      if (profile != null) {
+        compareQuery = {
+          ...SuffixParams(profile.HistoryParams(), '_a'),
+          ...compareQuery,
+        };
+      }
+
+      compareQuery = {
+        ...compareQuery,
+        ...{
+          currentProfileView: 'icicle',
+        },
+      };
+
+      batch(() => {
+        dispatch(setCompare(!compareMode));
+        dispatch(setSearchNodeString(undefined));
+      });
+
+      void navigateTo('/', compareQuery);
+    };
+
+    return (
+      <ProfileExplorerSingle
+        queryClient={queryClient}
+        query={query}
+        profile={profile}
+        selectQuery={selectQuery}
+        selectProfile={selectProfile}
+        compareProfile={compareProfile}
+        navigateTo={navigateTo}
+      />
+    );
+  }
+
+  const queryA = {
+    expression: expression_a,
+    from: parseInt(from_a as string),
+    to: parseInt(to_a as string),
+    merge: (merge_a as string) === 'true',
+    timeSelection: time_selection_a as string,
+    profile_name: profile_name_a as string,
+  };
+  const queryB = {
+    expression: expression_b,
+    from: parseInt(from_b as string),
+    to: parseInt(to_b as string),
+    merge: (merge_b as string) === 'true',
+    timeSelection: time_selection_b as string,
+    profile_name: profile_name_b as string,
+  };
+
+  const profileA = ProfileSelectionFromParams(
+    expression_a,
+    from_a as string,
+    to_a as string,
+    merge_a as string,
+    labels_a as string[],
+    profile_name_a as string,
+    time_a as string
+  );
+  const profileB = ProfileSelectionFromParams(
+    expression_b,
+    from_b as string,
+    to_b as string,
+    merge_b as string,
+    labels_b as string[],
+    profile_name_b as string,
+    time_b as string
+  );
+
+  const selectQueryA = (q: QuerySelection): void => {
+    return navigateTo(
+      '/',
+      // Filtering the _a suffix causes us to reset potential profile
+      // selection when running a new query.
+      {
+        ...filterSuffix(queryParams, '_a'),
+        ...{
+          compare_a: 'true',
+          expression_a: encodeURIComponent(q.expression),
+          expression_b: encodeURIComponent(expression_b),
+          from_a: q.from.toString(),
+          to_a: q.to.toString(),
+          merge_a: q.merge,
+          time_selection_a: q.timeSelection,
+        },
+      }
+    );
+  };
+
+  const selectQueryB = (q: QuerySelection): void => {
+    return navigateTo(
+      '/',
+      // Filtering the _b suffix causes us to reset potential profile
+      // selection when running a new query.
+      {
+        ...filterSuffix(queryParams, '_b'),
+        ...{
+          compare_b: 'true',
+          expression_b: encodeURIComponent(q.expression),
+          expression_a: encodeURIComponent(expression_a),
+          from_b: q.from.toString(),
+          to_b: q.to.toString(),
+          merge_b: q.merge,
+          time_selection_b: q.timeSelection,
+        },
+      }
+    );
+  };
+
+  const closeProfile = (card: string): void => {
+    let newQueryParameters = queryParams;
+    if (card === 'A') {
+      newQueryParameters = swapQueryParameters(queryParams);
+    }
+
+    batch(() => {
+      dispatch(setCompare(!compareMode));
+      dispatch(setSearchNodeString(undefined));
+    });
+
+    return navigateTo('/', {
+      ...filterSuffix(newQueryParameters, '_b'),
+      ...{
+        compare_a: 'false',
+      },
+    });
+  };
+
+  return (
+    <ProfileExplorerCompare
+      queryClient={queryClient}
+      queryA={queryA}
+      queryB={queryB}
+      profileA={profileA}
+      profileB={profileB}
+      selectQueryA={selectQueryA}
+      selectQueryB={selectQueryB}
+      selectProfileA={selectProfileA}
+      selectProfileB={selectProfileB}
+      closeProfile={closeProfile}
+      navigateTo={navigateTo}
+    />
+  );
+};
+
+const ProfileExplorer = ({
+  queryClient,
+  queryParams,
+  navigateTo,
+}: ProfileExplorerProps): JSX.Element => {
+  const {store: reduxStore} = store();
+
+  return (
+    <Provider store={reduxStore}>
+      <ProfileExplorerApp
+        queryClient={queryClient}
+        queryParams={queryParams}
+        navigateTo={navigateTo}
+      />
+    </Provider>
+  );
+};
+
+export default ProfileExplorer;

package/src/ProfileMetricsGraph/index.tsx

@@ -0,0 +1,143 @@
+// 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, useEffect} from 'react';
+import MetricsGraph from '../MetricsGraph';
+import {ProfileSelection, SingleProfileSelection} from '..';
+import {QueryServiceClient, QueryRangeResponse, Label, Timestamp} from '@parca/client';
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+import {DateTimeRange, useGrpcMetadata, useParcaTheme} from '@parca/components';
+import {Query} from '@parca/parser';
+import useDelayedLoader from '../useDelayedLoader';
+
+interface ProfileMetricsGraphProps {
+  queryClient: QueryServiceClient;
+  queryExpression: string;
+  profile: ProfileSelection | null;
+  from: number;
+  to: number;
+  select: (source: ProfileSelection) => void;
+  setTimeRange: (range: DateTimeRange) => void;
+  addLabelMatcher: (key: string, value: string) => void;
+}
+
+export interface IQueryRangeResult {
+  response: QueryRangeResponse | null;
+  isLoading: boolean;
+  error: RpcError | null;
+}
+
+export const useQueryRange = (
+  client: QueryServiceClient,
+  queryExpression: string,
+  start: number,
+  end: number
+): IQueryRangeResult => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(null);
+  const [response, setResponse] = useState<QueryRangeResponse | null>(null);
+  const metadata = useGrpcMetadata();
+
+  useEffect(() => {
+    void (async () => {
+      setIsLoading(true);
+
+      try {
+        const {response} = await client.queryRange(
+          {
+            query: queryExpression,
+            start: Timestamp.fromDate(new Date(start)),
+            end: Timestamp.fromDate(new Date(end)),
+            limit: 0,
+          },
+          {meta: metadata}
+        );
+        setResponse(response);
+      } catch (e) {
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [client, queryExpression, start, end, metadata]);
+
+  return {isLoading, error, response};
+};
+
+const ProfileMetricsGraph = ({
+  queryClient,
+  queryExpression,
+  profile,
+  from,
+  to,
+  select,
+  setTimeRange,
+  addLabelMatcher,
+}: ProfileMetricsGraphProps): JSX.Element => {
+  const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
+  const isLoaderVisible = useDelayedLoader(isLoading);
+  const {loader} = useParcaTheme();
+
+  if (isLoaderVisible) {
+    return <>{loader}</>;
+  }
+
+  if (error !== null) {
+    return (
+      <div
+        className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        role="alert"
+      >
+        <strong className="font-bold">Error! </strong>
+        <span className="block sm:inline">{error.message}</span>
+      </div>
+    );
+  }
+
+  const series = response?.series;
+  if (series !== null && series !== undefined && series?.length > 0) {
+    const handleSampleClick = (timestamp: number, _value: number, labels: Label[]): void => {
+      select(
+        new SingleProfileSelection(Query.parse(queryExpression).profileName(), labels, timestamp)
+      );
+    };
+
+    return (
+      <div
+        className="dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500"
+        style={{borderWidth: 1}}
+      >
+        <MetricsGraph
+          data={series}
+          from={from}
+          to={to}
+          profile={profile as SingleProfileSelection}
+          setTimeRange={setTimeRange}
+          onSampleClick={handleSampleClick}
+          onLabelClick={addLabelMatcher}
+          width={0}
+          sampleUnit={Query.parse(queryExpression).profileType().sampleUnit}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="grid grid-cols-1">
+      <div className="py-20 flex justify-center">
+        <p className="m-0">No data found. Try a different query.</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileMetricsGraph;