@parca/profile 0.16.447 → 0.16.449

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -0,0 +1,172 @@
+// 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 cx from 'classnames';
+
+import {Label, QueryServiceClient} from '@parca/client';
+import {DateTimeRange} from '@parca/components';
+import {Query} from '@parca/parser';
+
+import {MergedProfileSelection, ProfileSelection} from '..';
+import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
+import {QuerySelection} from './index';
+
+interface MetricsGraphSectionProps {
+  showMetricsGraph: boolean;
+  setDisplayHideMetricsGraphButton: (show: boolean) => void;
+  heightStyle: string;
+  querySelection: QuerySelection;
+  profileSelection: ProfileSelection | null;
+  comparing: boolean;
+  sumBy: string[] | null;
+  defaultSumByLoading: boolean;
+  queryClient: QueryServiceClient;
+  queryExpressionString: string;
+  setTimeRangeSelection: (range: DateTimeRange) => void;
+  selectQuery: (query: QuerySelection) => void;
+  selectProfile: (source: ProfileSelection) => void;
+  query: Query;
+  setNewQueryExpression: (queryExpression: string) => void;
+  setQueryExpression: (updateTs?: boolean) => void;
+}
+
+export function MetricsGraphSection({
+  showMetricsGraph,
+  setDisplayHideMetricsGraphButton,
+  heightStyle,
+  querySelection,
+  profileSelection,
+  comparing,
+  sumBy,
+  defaultSumByLoading,
+  queryClient,
+  queryExpressionString,
+  setTimeRangeSelection,
+  selectQuery,
+  selectProfile,
+  query,
+  setNewQueryExpression,
+}: MetricsGraphSectionProps): JSX.Element {
+  const handleTimeRangeChange = (range: DateTimeRange): void => {
+    const from = range.getFromMs();
+    const to = range.getToMs();
+    let mergedProfileParams = {};
+    if (query.profileType().delta) {
+      mergedProfileParams = {mergeFrom: from, mergeTo: to};
+    }
+    setTimeRangeSelection(range);
+    selectQuery({
+      expression: queryExpressionString,
+      from,
+      to,
+      timeSelection: range.getRangeKey(),
+      ...mergedProfileParams,
+    });
+  };
+
+  const addLabelMatcher = (
+    labels: {key: string; value: string} | Array<{key: string; value: string}>
+  ): void => {
+    // When a user clicks on a label on the metrics graph tooltip,
+    // replace single `\` in the `value` string with doubles `\\` if available.
+    const replaceBackslash = (value: string): string => {
+      return value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
+    };
+
+    let newQuery: Query;
+    let hasChanged: boolean;
+
+    if (Array.isArray(labels)) {
+      const newLabels = labels.map(({key, value}) => {
+        const newValue = replaceBackslash(value);
+        return {key, value: newValue};
+      });
+      const [query, changed] = Query.parse(queryExpressionString).setMultipleMatchers(newLabels);
+      hasChanged = changed;
+      newQuery = query;
+    } else {
+      const {key, value} = labels;
+      const newValue = replaceBackslash(value);
+      const [query, changed] = Query.parse(queryExpressionString).setMatcher(key, newValue);
+      hasChanged = changed;
+      newQuery = query;
+    }
+
+    if (hasChanged) {
+      // TODO: Change this to store the query object
+      setNewQueryExpression(newQuery.toString());
+    }
+  };
+
+  const handlePointClick = (
+    timestamp: number,
+    labels: Label[],
+    queryExpression: string,
+    duration: number
+  ): void => {
+    let query = Query.parse(queryExpression);
+    labels.forEach(l => {
+      const [newQuery, updated] = query.setMatcher(l.name, l.value);
+      if (updated) {
+        query = newQuery;
+      }
+    });
+
+    const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
+    const mergeFrom = timestamp;
+    const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
+    selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
+  };
+
+  return (
+    <div className={cx('relative', {'py-4': !showMetricsGraph})}>
+      <button
+        onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
+        className={cx(
+          'hidden z-10 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900',
+          showMetricsGraph && 'absolute right-0 bottom-3 !flex',
+          !showMetricsGraph && 'relative !flex ml-auto'
+        )}
+      >
+        {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
+      </button>
+      {showMetricsGraph && (
+        <div style={{height: heightStyle}}>
+          {querySelection.expression !== '' &&
+          querySelection.from !== undefined &&
+          querySelection.to !== undefined ? (
+            <ProfileMetricsGraph
+              queryClient={queryClient}
+              queryExpression={querySelection.expression}
+              from={querySelection.from}
+              to={querySelection.to}
+              profile={profileSelection}
+              comparing={comparing}
+              sumBy={querySelection.sumBy ?? sumBy ?? []}
+              sumByLoading={defaultSumByLoading}
+              setTimeRange={handleTimeRangeChange}
+              addLabelMatcher={addLabelMatcher}
+              onPointClick={handlePointClick}
+            />
+          ) : (
+            profileSelection === null && (
+              <div className="p-2">
+                <ProfileMetricsEmptyState message="Please select a profile type and click 'Search' to begin." />
+              </div>
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ProfileSelector/QueryControls.tsx

@@ -0,0 +1,233 @@
+// 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 {Switch} from '@headlessui/react';
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+import Select, {type SelectInstance} from 'react-select';
+
+import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
+import {Button, ButtonGroup, DateTimeRange, DateTimeRangePicker} from '@parca/components';
+import {ProfileType, Query} from '@parca/parser';
+
+import MatchersInput from '../MatchersInput';
+import ProfileTypeSelector from '../ProfileTypeSelector';
+import SimpleMatchers from '../SimpleMatchers';
+import ViewMatchers from '../ViewMatchers';
+
+interface SelectOption {
+  label: string;
+  value: string;
+}
+
+interface QueryControlsProps {
+  showProfileTypeSelector: boolean;
+  showSumBySelector: boolean;
+  disableExplorativeQuerying: boolean;
+  profileTypesData?: ProfileTypesResponse;
+  profileTypesLoading: boolean;
+  selectedProfileName: string;
+  setProfileName: (name: string | undefined) => void;
+  profileTypesError?: RpcError;
+  viewComponent?: {
+    disableProfileTypesDropdown?: boolean;
+    disableExplorativeQuerying?: boolean;
+    labelnames?: string[];
+    createViewComponent?: React.ReactNode;
+  };
+  queryBrowserMode: string;
+  setQueryBrowserMode: (mode: string) => void;
+  advancedModeForQueryBrowser: boolean;
+  setAdvancedModeForQueryBrowser: (mode: boolean) => void;
+  setMatchersString: (matchers: string) => void;
+  setQueryExpression: (updateTs?: boolean) => void;
+  query: Query;
+  queryBrowserRef: React.RefObject<HTMLDivElement>;
+  timeRangeSelection: DateTimeRange;
+  setTimeRangeSelection: (range: DateTimeRange) => void;
+  searchDisabled: boolean;
+  queryClient: QueryServiceClient;
+  labels: string[];
+  sumBySelection: string[];
+  setUserSumBySelection: (sumBy: string[]) => void;
+  sumByRef: React.RefObject<SelectInstance>;
+  profileType: ProfileType;
+}
+
+export function QueryControls({
+  showProfileTypeSelector,
+  profileTypesData,
+  profileTypesLoading,
+  selectedProfileName,
+  setProfileName,
+  viewComponent,
+  setQueryBrowserMode,
+  advancedModeForQueryBrowser,
+  setAdvancedModeForQueryBrowser,
+  setMatchersString,
+  setQueryExpression,
+  query,
+  queryBrowserRef,
+  timeRangeSelection,
+  setTimeRangeSelection,
+  searchDisabled,
+  queryClient,
+  labels,
+  sumBySelection,
+  setUserSumBySelection,
+  sumByRef,
+  profileType,
+  showSumBySelector,
+  profileTypesError,
+}: QueryControlsProps): JSX.Element {
+  return (
+    <div className="flex w-full flex-wrap items-end gap-2">
+      {showProfileTypeSelector && (
+        <div>
+          <label className="text-xs">Profile type</label>
+          <ProfileTypeSelector
+            profileTypesData={profileTypesData}
+            loading={profileTypesLoading}
+            selectedKey={selectedProfileName}
+            onSelection={setProfileName}
+            error={profileTypesError}
+            disabled={viewComponent?.disableProfileTypesDropdown}
+          />
+        </div>
+      )}
+
+      <div className="w-full flex-1 flex flex-col gap-1" ref={queryBrowserRef}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <label className="text-xs">Query</label>
+            {viewComponent?.disableExplorativeQuerying !== true && (
+              <>
+                <Switch
+                  checked={advancedModeForQueryBrowser}
+                  onChange={() => {
+                    setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
+                    setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
+                  }}
+                  className={`${
+                    advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'
+                  } relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
+                >
+                  <span className="sr-only">Use setting</span>
+                  <span
+                    aria-hidden="true"
+                    className={`${
+                      advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'
+                    } pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+                  />
+                </Switch>
+                <label className="text-xs">Advanced Mode</label>
+              </>
+            )}
+          </div>
+        </div>
+
+        {viewComponent?.disableExplorativeQuerying === true &&
+        viewComponent?.labelnames !== undefined &&
+        viewComponent?.labelnames.length >= 1 ? (
+          <ViewMatchers
+            labelNames={viewComponent.labelnames}
+            setMatchersString={setMatchersString}
+            profileType={selectedProfileName}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+            queryClient={queryClient}
+          />
+        ) : advancedModeForQueryBrowser ? (
+          <MatchersInput
+            setMatchersString={setMatchersString}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+            profileType={selectedProfileName}
+            queryClient={queryClient}
+          />
+        ) : (
+          <SimpleMatchers
+            setMatchersString={setMatchersString}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+            profileType={selectedProfileName}
+            queryBrowserRef={queryBrowserRef}
+            queryClient={queryClient}
+          />
+        )}
+      </div>
+
+      {showSumBySelector && (
+        <div>
+          <div className="mb-0.5 mt-1.5 flex items-center justify-between">
+            <label className="text-xs">Sum by</label>
+          </div>
+          <Select<SelectOption, true>
+            id="h-sum-by-selector"
+            defaultValue={[]}
+            isMulti
+            name="colors"
+            options={labels.map(label => ({label, value: label}))}
+            className="parca-select-container text-sm w-full max-w-80"
+            classNamePrefix="parca-select"
+            value={(sumBySelection ?? []).map(sumBy => ({label: sumBy, value: sumBy}))}
+            onChange={newValue => {
+              setUserSumBySelection(newValue.map(option => option.value));
+            }}
+            placeholder="Labels..."
+            styles={{
+              indicatorSeparator: () => ({display: 'none'}),
+              menu: provided => ({...provided, width: 'max-content'}),
+            }}
+            isDisabled={!profileType.delta}
+            // @ts-expect-error
+            ref={sumByRef}
+            onKeyDown={e => {
+              const currentRef = sumByRef.current as unknown as SelectInstance | null;
+              if (currentRef == null) {
+                return;
+              }
+              const inputRef = currentRef.inputRef;
+              if (inputRef == null) {
+                return;
+              }
+
+              if (
+                e.key === 'Enter' &&
+                inputRef.value === '' &&
+                currentRef.state.focusedOptionId === null // menu is not open
+              ) {
+                setQueryExpression(true);
+                currentRef.blur();
+              }
+            }}
+          />
+        </div>
+      )}
+
+      <DateTimeRangePicker onRangeSelection={setTimeRangeSelection} range={timeRangeSelection} />
+
+      <ButtonGroup>
+        <Button
+          disabled={searchDisabled}
+          onClick={(e: React.MouseEvent<HTMLElement>) => {
+            e.preventDefault();
+            setQueryExpression(true);
+          }}
+          id="h-matcher-search-button"
+        >
+          Search
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}