@parca/profile 0.19.67 → 0.19.68

package/src/SelectWithRefresh/index.tsx

@@ -0,0 +1,98 @@
+// 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 {useCallback, useState} from 'react';
+
+import ReactSelect, {type MenuListProps, type Props as ReactSelectProps} from 'react-select';
+
+import {RefreshButton} from '@parca/components';
+
+export interface SelectWithRefreshProps<Option, IsMulti extends boolean>
+  extends ReactSelectProps<Option, IsMulti> {
+  onRefresh?: () => Promise<void>;
+  refreshTitle?: string;
+  refreshTestId?: string;
+  menuTestId?: string;
+}
+
+export function SelectWithRefresh<Option, IsMulti extends boolean = false>(
+  props: SelectWithRefreshProps<Option, IsMulti>
+): JSX.Element {
+  const {
+    onRefresh,
+    refreshTitle = 'Refresh label names',
+    refreshTestId = 'select-refresh-button',
+    menuTestId,
+    components,
+    ...selectProps
+  } = props;
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefetch = useCallback(async () => {
+    if (onRefresh == null || isRefreshing) return;
+
+    setIsRefreshing(true);
+    try {
+      await onRefresh();
+    } catch (error) {
+      console.error('Error during refresh:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [onRefresh, isRefreshing]);
+
+  const MenuListWithRefresh = useCallback(
+    ({children, innerProps}: MenuListProps<Option, IsMulti>) => {
+      const testIdProps = menuTestId != null ? {'data-testid': menuTestId} : {};
+
+      return (
+        <div className="flex flex-col" style={{maxHeight: '332px'}}>
+          <div
+            className="overflow-y-auto flex-1"
+            {...innerProps}
+            {...testIdProps}
+            style={{...innerProps?.style, fontSize: '14px'}}
+          >
+            {children}
+          </div>
+          {onRefresh != null && (
+            <RefreshButton
+              onClick={() => void handleRefetch()}
+              disabled={isRefreshing}
+              title={refreshTitle}
+              testId={refreshTestId}
+            />
+          )}
+        </div>
+      );
+    },
+    [onRefresh, isRefreshing, handleRefetch, refreshTitle, refreshTestId, menuTestId]
+  );
+
+  const combinedLoadingState = isRefreshing || (selectProps.isLoading ?? false);
+
+  return (
+    <ReactSelect<Option, IsMulti>
+      {...selectProps}
+      isLoading={combinedLoadingState}
+      components={{
+        ...components,
+        // eslint-disable-next-line react/display-name
+        MenuList: MenuListWithRefresh,
+      }}
+    />
+  );
+}
+
+export default SelectWithRefresh;

package/src/SimpleMatchers/Select.tsx

@@ -17,7 +17,7 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
 
-import {Button, DividerWithLabel, useParcaContext} from '@parca/components';
+import {Button, DividerWithLabel, RefreshButton, useParcaContext} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils/dist/test-ids';
 
 export interface SelectElement {
@@ -56,7 +56,7 @@ interface CustomSelectProps {
   searchable?: boolean;
   onButtonClick?: () => void;
   editable?: boolean;
-  refetchValues?: () => void;
+  refetchValues?: () => Promise<void>;
   showLoadingInButton?: boolean;
 }
 
@@ -374,34 +374,14 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
               )}
             </div>
             {refetchValues !== undefined && loading !== true && (
-              <div className="sticky bottom-0 w-full flex items-center justify-center px-3 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 z-20 mt-auto">
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    void handleRefetch();
-                  }}
-                  disabled={isRefetching}
-                  className={cx(
-                    'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
-                    isRefetching
-                      ? 'cursor-wait opacity-50'
-                      : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
-                  )}
-                  title="Refresh label values"
-                  type="button"
-                  {...testId(TEST_IDS.LABEL_VALUE_REFRESH_BUTTON)}
-                >
-                  <Icon
-                    icon="system-uicons:reset"
-                    className={cx(
-                      'w-3 h-3 text-gray-500 dark:text-gray-400',
-                      isRefetching && 'animate-spin'
-                    )}
-                  />
-                  <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
-                </button>
-              </div>
+              <RefreshButton
+                onClick={() => void handleRefetch()}
+                disabled={isRefetching}
+                title="Refresh label values"
+                testId={TEST_IDS.LABEL_VALUE_REFRESH_BUTTON}
+                sticky={true}
+                loading={isRefetching}
+              />
             )}
           </div>
         </div>

package/src/SimpleMatchers/index.tsx

@@ -485,7 +485,7 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
-            refetchValues={() => refetchLabelValues(row.labelName)}
+            refetchValues={async () => await refetchLabelValues(row.labelName)}
             showLoadingInButton={true}
           />
           <button

package/src/contexts/SimpleMatchersLabelContext.tsx

@@ -31,8 +31,8 @@ interface LabelContextValue {
   labelNameOptions: LabelNameSection[];
   isLoading: boolean;
   error: Error | null;
-  refetchLabelValues: (labelName?: string) => void;
-  refetchLabelNames: () => void;
+  refetchLabelValues: (labelName?: string) => Promise<void>;
+  refetchLabelNames: () => Promise<void>;
 }
 
 const LabelContext = createContext<LabelContextValue | null>(null);
@@ -141,8 +141,8 @@ export function LabelProvider({
   }, [profileValues, utilizationValues, labelNameFromMatchers]);
 
   const refetchLabelValues = useCallback(
-    (labelName?: string) => {
-      void reactQueryClient.refetchQueries({
+    async (labelName?: string) => {
+      await reactQueryClient.refetchQueries({
         predicate: query => {
           const key = query.queryKey;
           const matchesStructure =
@@ -164,8 +164,8 @@ export function LabelProvider({
     [reactQueryClient, profileType]
   );
 
-  const refetchLabelNames = useCallback(() => {
-    refetchLabelNamesQuery();
+  const refetchLabelNames = useCallback(async () => {
+    await refetchLabelNamesQuery();
   }, [refetchLabelNamesQuery]);
 
   const contextValue = useMemo(

package/src/index.tsx

@@ -14,6 +14,7 @@
 import {useLabelNames} from './MatchersInput';
 import ProfileExplorer, {getExpressionAsAString} from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
+import SelectWithRefresh from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
 
 export * from './ProfileFlameGraph';
@@ -37,4 +38,11 @@ export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
   dashboard_items: 'flamegraph',
 };
 
-export {ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, useLabelNames};
+export {
+  ProfileExplorer,
+  ProfileTypeSelector,
+  getExpressionAsAString,
+  CustomSelect,
+  SelectWithRefresh,
+  useLabelNames,
+};

package/src/useQuery.tsx

@@ -25,6 +25,7 @@ export interface IQueryResult {
   response: QueryResponse | null;
   error: RpcError | null;
   isLoading: boolean;
+  refetch?: () => Promise<void>;
 }
 
 interface UseQueryOptions {
@@ -37,6 +38,7 @@ interface UseQueryOptions {
   invertCallStack?: boolean;
   sandwichByFunction?: string;
   protoFilters?: any[]; // Using any[] to match the Filter type from hook
+  staleTime?: number;
 }
 
 export const useQuery = (
@@ -52,7 +54,7 @@ export const useQuery = (
     return JSON.stringify(options?.protoFilters ?? []);
   }, [options?.protoFilters]);
 
-  const {data, isLoading, error} = useGrpcQuery<QueryResponse | undefined>({
+  const {data, isLoading, error, refetch} = useGrpcQuery<QueryResponse | undefined>({
     key: [
       'query',
       profileSource.toKey(),
@@ -104,9 +106,16 @@ export const useQuery = (
     options: {
       retry: false,
       enabled: !skip,
-      staleTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: options?.staleTime ?? 1000 * 60 * 5, // 5 minutes
     },
   });
 
-  return {isLoading, error: error as RpcError | null, response: data ?? null};
+  return {
+    isLoading,
+    error: error as RpcError | null,
+    response: data ?? null,
+    refetch: async () => {
+      await refetch();
+    },
+  };
 };