ui: Add reusable RefreshButton component and add to group by dropdown

yomete · yomete · commit 2205569b88ca · 2025-10-20T17:59:08.000+02:00
diff --git a/ui/packages/shared/components/src/RefreshButton/index.tsx b/ui/packages/shared/components/src/RefreshButton/index.tsx
@@ -0,0 +1,68 @@
+// 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 {Icon} from '@iconify/react';
+import cx from 'classnames';
+
+interface RefreshButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+  title: string;
+  testId: string;
+  loading?: boolean;
+  sticky?: boolean;
+}
+
+const RefreshButton = ({
+  onClick,
+  disabled,
+  title,
+  testId,
+  loading,
+  sticky = false,
+}: RefreshButtonProps): JSX.Element => {
+  return (
+    <div
+      className={cx(
+        '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',
+        sticky && 'sticky bottom-0 z-20 mt-auto'
+      )}
+    >
+      <button
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick();
+        }}
+        disabled={disabled}
+        className={cx(
+          'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
+          disabled
+            ? 'cursor-wait opacity-50'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
+        )}
+        title={title}
+        type="button"
+        data-testid={testId}
+      >
+        <Icon
+          icon="system-uicons:reset"
+          className={cx('w-3 h-3 text-gray-500 dark:text-gray-400', disabled && 'animate-spin')}
+        />
+        <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
+      </button>
+    </div>
+  );
+};
+
+export default RefreshButton;
diff --git a/ui/packages/shared/components/src/index.tsx b/ui/packages/shared/components/src/index.tsx
@@ -26,6 +26,7 @@ import Modal from './Modal';
 import {NoDataPrompt} from './NoDataPrompt';
 import ParcaContext from './ParcaContext';
 import Pill, {PillVariant} from './Pill';
+import RefreshButton from './RefreshButton';
 import ResponsiveSvg from './ResponsiveSvg';
 import Select, {type SelectElement, type SelectItem} from './Select';
 import FlameGraphSkeleton, {FlameActionButtonPlaceholder} from './Skeletons/FlamegraphSkeleton';
@@ -69,6 +70,7 @@ export {
   ParcaContext,
   Pill,
   ResponsiveSvg,
+  RefreshButton,
   Select,
   SourceSkeleton,
   Spinner,
diff --git a/ui/packages/shared/profile/src/MatchersInput/SuggestionsList.tsx b/ui/packages/shared/profile/src/MatchersInput/SuggestionsList.tsx
@@ -14,11 +14,9 @@
 import {Fragment, useCallback, useEffect, useState} from 'react';
 
 import {Transition} from '@headlessui/react';
-import {Icon} from '@iconify/react';
-import cx from 'classnames';
 import {usePopper} from 'react-popper';
 
-import {useParcaContext} from '@parca/components';
+import {RefreshButton, useParcaContext} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import SuggestionItem from './SuggestionItem';
@@ -66,43 +64,6 @@ const LoadingSpinner = (): JSX.Element => {
   return <div className="pt-2 pb-4">{Spinner}</div>;
 };
 
-interface RefreshButtonProps {
-  onClick: () => void;
-  disabled: boolean;
-  title: string;
-  testId: string;
-}
-
-const RefreshButton = ({onClick, disabled, title, testId}: RefreshButtonProps): JSX.Element => {
-  return (
-    <div className="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">
-      <button
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onClick();
-        }}
-        disabled={disabled}
-        className={cx(
-          'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
-          disabled
-            ? 'cursor-wait opacity-50'
-            : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
-        )}
-        title={title}
-        type="button"
-        data-testid={testId}
-      >
-        <Icon
-          icon="system-uicons:reset"
-          className={cx('w-3 h-3 text-gray-500 dark:text-gray-400', disabled && 'animate-spin')}
-        />
-        <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
-      </button>
-    </div>
-  );
-};
-
 const transformLabelsForSuggestions = (labelNames: string, shouldTrimPrefix = false): string => {
   const trimmedLabel = shouldTrimPrefix ? labelNames.split('.').pop() ?? labelNames : labelNames;
   return trimmedLabel;
diff --git a/ui/packages/shared/profile/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx b/ui/packages/shared/profile/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx
@@ -19,15 +19,22 @@ interface GroupByControlsProps {
   groupBy: string[];
   labels: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => void;
 }
 
-const GroupByControls: React.FC<GroupByControlsProps> = ({groupBy, labels, setGroupByLabels}) => {
+const GroupByControls: React.FC<GroupByControlsProps> = ({
+  groupBy,
+  labels,
+  setGroupByLabels,
+  metadataRefetch,
+}) => {
   return (
     <div className="relative flex" id="h-group-by-controls">
       <GroupByLabelsDropdown
         labels={labels}
         groupBy={groupBy}
         setGroupByLabels={setGroupByLabels}
+        metadataRefetch={metadataRefetch}
       />
     </div>
   );
diff --git a/ui/packages/shared/profile/src/ProfileView/components/GroupByLabelsDropdown/index.tsx b/ui/packages/shared/profile/src/ProfileView/components/GroupByLabelsDropdown/index.tsx
@@ -11,8 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {useCallback, useState} from 'react';
+
 import Select from 'react-select';
 
+import {RefreshButton} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
@@ -26,9 +29,28 @@ interface Props {
   labels: string[];
   groupBy: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => void;
 }
 
-const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
+const GroupByLabelsDropdown = ({
+  labels,
+  groupBy,
+  setGroupByLabels,
+  metadataRefetch,
+}: Props): JSX.Element => {
+  const [isRefetching, setIsRefetching] = useState(false);
+
+  const handleRefetch = useCallback(async () => {
+    if (metadataRefetch == null || isRefetching) return;
+
+    setIsRefetching(true);
+    try {
+      await metadataRefetch();
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [metadataRefetch, isRefetching]);
+
   return (
     <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
@@ -48,14 +70,24 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         components={{
           // eslint-disable-next-line react/prop-types
           MenuList: ({children, innerProps}) => (
-            <div
-              className="overflow-y-auto"
-              {...testId(TEST_IDS.GROUP_BY_SELECT_FLYOUT)}
-              {...innerProps}
-              // eslint-disable-next-line react/prop-types
-              style={{...innerProps.style, height: '332px', maxHeight: '332px', fontSize: '14px'}}
-            >
-              {children}
+            <div className="flex flex-col" style={{maxHeight: '332px'}}>
+              <div
+                className="overflow-y-auto flex-1"
+                {...testId(TEST_IDS.GROUP_BY_SELECT_FLYOUT)}
+                {...innerProps}
+                // eslint-disable-next-line react/prop-types
+                style={{...innerProps.style, fontSize: '14px'}}
+              >
+                {children}
+              </div>
+              {metadataRefetch != null && (
+                <RefreshButton
+                  onClick={() => void handleRefetch()}
+                  disabled={isRefetching}
+                  title="Refresh label names"
+                  testId="group-by-refresh-button"
+                />
+              )}
             </div>
           ),
         }}
diff --git a/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx b/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx
@@ -54,6 +54,7 @@ export interface VisualisationToolbarProps {
   setAlignFunctionName: (align: string) => void;
   colorBy: string;
   setColorBy: (colorBy: string) => void;
+  metadataRefetch?: () => void;
 }
 
 export interface TableToolbarProps {
@@ -147,6 +148,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   setAlignFunctionName,
   colorBy,
   setColorBy,
+  metadataRefetch,
 }) => {
   const {dashboardItems} = useDashboard();
 
@@ -172,6 +174,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
                 groupBy={groupBy}
                 labels={groupByLabels}
                 setGroupByLabels={setGroupByLabels}
+                metadataRefetch={metadataRefetch}
               />
 
               <InvertCallStack />
diff --git a/ui/packages/shared/profile/src/ProfileView/index.tsx b/ui/packages/shared/profile/src/ProfileView/index.tsx
@@ -155,6 +155,7 @@ export const ProfileView = ({
             setAlignFunctionName={setAlignFunctionName}
             colorBy={colorBy}
             setColorBy={setColorBy}
+            metadataRefetch={flamegraphData.metadataRefetch}
           />
 
           {isColorStackLegendEnabled && (
diff --git a/ui/packages/shared/profile/src/ProfileView/types/visualization.ts b/ui/packages/shared/profile/src/ProfileView/types/visualization.ts
@@ -24,6 +24,7 @@ export interface FlamegraphData {
   metadataMappingFiles?: string[];
   metadataLoading: boolean;
   metadataLabels?: string[];
+  metadataRefetch?: () => void;
 }
 
 export interface TopTableData {
diff --git a/ui/packages/shared/profile/src/ProfileViewWithData.tsx b/ui/packages/shared/profile/src/ProfileViewWithData.tsx
@@ -115,10 +115,12 @@ export const ProfileViewWithData = ({
     isLoading: profileMetadataLoading,
     response: profileMetadataResponse,
     error: profileMetadataError,
+    refetch: metadataRefetch,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
     nodeTrimThreshold,
     groupBy,
     protoFilters,
+    staleTime: 0,
   });
 
   const {perf} = useParcaContext();
@@ -258,6 +260,7 @@ export const ProfileViewWithData = ({
             ? profileMetadataResponse?.report?.profileMetadata?.labels
             : undefined,
         metadataLoading: profileMetadataLoading,
+        metadataRefetch,
       }}
       flamechartData={{
         loading: flamechartLoading && profileMetadataLoading,
diff --git a/ui/packages/shared/profile/src/SimpleMatchers/Select.tsx b/ui/packages/shared/profile/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 {
@@ -374,34 +374,13 @@ 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}
+              />
             )}
           </div>
         </div>
diff --git a/ui/packages/shared/profile/src/useQuery.tsx b/ui/packages/shared/profile/src/useQuery.tsx
@@ -25,6 +25,7 @@ export interface IQueryResult {
   response: QueryResponse | null;
   error: RpcError | null;
   isLoading: boolean;
+  refetch?: () => 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: () => {
+      void refetch();
+    },
+  };
 };

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ export interface FlamegraphData {`
`24`	`24`	`metadataMappingFiles?: string[];`
`25`	`25`	`metadataLoading: boolean;`
`26`	`26`	`metadataLabels?: string[];`
	`27`	`+ metadataRefetch?: () => void;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`export interface TopTableData {`