ui: Add refresh results to Group by and Sum by dropdowns (#5999)

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

* Add refresh results button to sum by

* Extract common Select components to be in SelectWithRefresh component

* Add loading indicators for refresh results button

Author: yomete

ui/packages/shared/components/src/RefreshButton/index.tsx

@@ -0,0 +1,67 @@
+// 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,
+  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;

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,

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;

ui/packages/shared/profile/src/MatchersInput/index.tsx

@@ -46,7 +46,7 @@ export interface ILabelNamesResult {
 interface UseLabelNames {
   result: ILabelNamesResult;
   loading: boolean;
-  refetch: () => void;
+  refetch: () => Promise<void>;
 }
 
 export const useLabelNames = (
@@ -83,8 +83,8 @@ export const useLabelNames = (
   return {
     result: {response: data, error: error as Error},
     loading: isLoading,
-    refetch: () => {
-      void refetch();
+    refetch: async () => {
+      await refetch();
     },
   };
 };

ui/packages/shared/profile/src/ProfileSelector/QueryControls.tsx

@@ -15,7 +15,7 @@ import {useState} from 'react';
 
 import {Switch} from '@headlessui/react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
-import Select, {type SelectInstance} from 'react-select';
+import {type SelectInstance} from 'react-select';
 
 import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {Button, DateTimeRange, DateTimeRangePicker, useParcaContext} from '@parca/components';
@@ -24,6 +24,7 @@ import {TEST_IDS, testId} from '@parca/test-utils';
 
 import MatchersInput from '../MatchersInput';
 import ProfileTypeSelector from '../ProfileTypeSelector';
+import SelectWithRefresh from '../SelectWithRefresh';
 import SimpleMatchers from '../SimpleMatchers';
 import ViewMatchers from '../ViewMatchers';
 
@@ -65,6 +66,7 @@ interface QueryControlsProps {
   setUserSumBySelection: (sumBy: string[]) => void;
   sumByRef: React.RefObject<SelectInstance>;
   profileType: ProfileType;
+  refreshLabelNames: () => Promise<void>;
 }
 
 export function QueryControls({
@@ -93,6 +95,7 @@ export function QueryControls({
   profileType,
   showSumBySelector,
   profileTypesError,
+  refreshLabelNames,
 }: QueryControlsProps): JSX.Element {
   const {timezone} = useParcaContext();
   const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState<number>(0);
@@ -203,7 +206,7 @@ export function QueryControls({
               Sum by
             </label>
           </div>
-          <Select<SelectOption, true>
+          <SelectWithRefresh<SelectOption, true>
             id="h-sum-by-selector"
             data-testid={testId(TEST_IDS.SUM_BY_SELECT)['data-testid']}
             defaultValue={[]}
@@ -220,7 +223,16 @@ export function QueryControls({
             placeholder="Labels..."
             styles={{
               indicatorSeparator: () => ({display: 'none'}),
-              menu: provided => ({...provided, width: 'max-content', zIndex: 50}), // Setting the same zIndex as drop down menus
+              menu: provided => ({
+                ...provided,
+                marginBottom: 0,
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                marginTop: 10,
+                zIndex: 50,
+                minWidth: '320px',
+                position: 'absolute',
+              }),
+              // menu: provided => ({...provided, width: 'max-content', zIndex: 50}), // Setting the same zIndex as drop down menus
             }}
             isLoading={sumBySelectionLoading}
             isDisabled={!profileType.delta}
@@ -245,6 +257,10 @@ export function QueryControls({
                 currentRef.blur();
               }
             }}
+            onRefresh={refreshLabelNames}
+            refreshTitle="Refresh label names"
+            refreshTestId="sum-by-refresh-button"
+            menuTestId={TEST_IDS.SUM_BY_SELECT_FLYOUT}
           />
         </div>
       )}

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -174,12 +174,11 @@ const ProfileSelector = ({
   const from = timeRangeSelection.getFromMs();
   const to = timeRangeSelection.getToMs();
 
-  const {loading: labelNamesLoading, result} = useLabelNames(
-    queryClient,
-    profileType.toString(),
-    from,
-    to
-  );
+  const {
+    loading: labelNamesLoading,
+    result,
+    refetch,
+  } = useLabelNames(queryClient, profileType.toString(), from, to);
   const {loading: selectedLabelNamesLoading, result: selectedLabelNamesResult} = useLabelNames(
     queryClient,
     selectedProfileType.toString(),
@@ -329,6 +328,7 @@ const ProfileSelector = ({
             profileType={profileType}
             profileTypesError={error}
             viewComponent={viewComponent}
+            refreshLabelNames={refetch}
           />
           {comparing && (
             <div>

ui/packages/shared/profile/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -19,15 +19,25 @@ interface GroupByControlsProps {
   groupBy: string[];
   labels: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => Promise<void>;
+  metadataLoading: boolean;
 }
 
-const GroupByControls: React.FC<GroupByControlsProps> = ({groupBy, labels, setGroupByLabels}) => {
+const GroupByControls: React.FC<GroupByControlsProps> = ({
+  groupBy,
+  labels,
+  setGroupByLabels,
+  metadataRefetch,
+  metadataLoading,
+}) => {
   return (
     <div className="relative flex" id="h-group-by-controls">
       <GroupByLabelsDropdown
         labels={labels}
         groupBy={groupBy}
         setGroupByLabels={setGroupByLabels}
+        metadataRefetch={metadataRefetch}
+        metadataLoading={metadataLoading}
       />
     </div>
   );

ui/packages/shared/profile/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -11,11 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Select from 'react-select';
-
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
+import {SelectWithRefresh} from '../../../SelectWithRefresh';
 
 interface LabelOption {
   label: string;
@@ -26,9 +25,17 @@ interface Props {
   labels: string[];
   groupBy: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => Promise<void>;
+  metadataLoading: boolean;
 }
 
-const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
+const GroupByLabelsDropdown = ({
+  labels,
+  groupBy,
+  setGroupByLabels,
+  metadataRefetch,
+  metadataLoading,
+}: Props): JSX.Element => {
   return (
     <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
@@ -37,35 +44,26 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         </label>
       </div>
 
-      <Select<LabelOption, true>
+      <SelectWithRefresh<LabelOption, true>
         isMulti
         defaultMenuIsOpen={false}
         defaultValue={undefined}
         name="labels"
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
-        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>
-          ),
-        }}
+        onRefresh={metadataRefetch}
+        refreshTitle="Refresh label names"
+        refreshTestId="group-by-refresh-button"
+        menuTestId={TEST_IDS.GROUP_BY_SELECT_FLYOUT}
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}
         onChange={newValue => {
           setGroupByLabels(newValue.map(option => option.value));
         }}
         placeholder="Select labels..."
+        isLoading={metadataLoading}
         styles={{
           menu: provided => ({
             ...provided,