[Infra] Disable Top 10 functions full screen table in a flyout (elast…

…ic#188743)

## Summary

This PR disables functions full-screen option in the asset details
flyout. It adds control of the `showFullScreenSelector` to the
`EmbeddableFunctionsGrid` so we can set it based on the render mode in
the asset details - in apm it will be set to true as before.

## Testing

- Go to the asset details page
- Check the Universal Profiling tab > Top 10 Functions tab
   - The full-screen option should be visible: 

![image](https://github.com/user-attachments/assets/aace7ca0-ed4f-404d-8cbf-91c29088c133)

   - Same in the tab inside APM service view:

![image](https://github.com/user-attachments/assets/f885630a-4f43-4c23-9ff4-05c03f7ede72)

- Go to Hosts view and open the flyout for a host 
   - The full-screen option should not be visible: 

![image](https://github.com/user-attachments/assets/e724c569-df7a-4e4a-b6c3-9dcfa7b60ad6)

---------

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/profiling/functions.tsx

@@ -31,11 +31,13 @@ export function Functions({ kuery }: Props) {
   const { dateRange, getDateRangeInTimestamp } = useDatePickerContext();
   const { from, to } = getDateRangeInTimestamp();
   const { request$ } = useRequestObservable<TopNFunctions>();
+  const { renderMode } = useAssetDetailsRenderPropsContext();
 
   const profilingLinkLocator = services.observabilityShared.locators.profiling.topNFunctionsLocator;
   const profilingLinkLabel = i18n.translate('xpack.infra.flamegraph.profilingAppTopFunctionsLink', {
     defaultMessage: 'Go to Universal Profiling Functions',
   });
+  const showFullScreenSelector = renderMode.mode === 'page';
 
   const params = useMemo(
     () => ({
@@ -86,6 +88,7 @@ export function Functions({ kuery }: Props) {
         rangeFrom={from}
         rangeTo={to}
         height="60vh"
+        showFullScreenSelector={showFullScreenSelector}
       />
     </>
   );

x-pack/plugins/observability_solution/observability_shared/public/components/profiling/embeddables/embeddable_functions.tsx

@@ -17,6 +17,7 @@ interface Props {
   rangeFrom: number;
   rangeTo: number;
   height?: string;
+  showFullScreenSelector?: boolean;
 }
 
 export function EmbeddableFunctions(props: Props) {

x-pack/plugins/observability_solution/profiling/public/components/topn_functions/index.tsx

@@ -32,6 +32,7 @@ interface Props {
   comparisonTopNFunctions?: TopNFunctions;
   totalSeconds: number;
   isDifferentialView: boolean;
+  showFullScreenSelector?: boolean;
   baselineScaleFactor?: number;
   comparisonScaleFactor?: number;
   onFrameClick?: (functionName: string) => void;
@@ -50,6 +51,7 @@ export const TopNFunctionsGrid = ({
   topNFunctions,
   comparisonTopNFunctions,
   totalSeconds,
+  showFullScreenSelector = true,
   isDifferentialView,
   baselineScaleFactor,
   comparisonScaleFactor,
@@ -316,7 +318,7 @@ export const TopNFunctionsGrid = ({
           showColumnSelector: false,
           showKeyboardShortcuts: !isDifferentialView,
           showDisplaySelector: !isDifferentialView,
-          showFullScreenSelector: !isDifferentialView,
+          showFullScreenSelector: showFullScreenSelector && !isDifferentialView,
           showSortSelector: false,
         }}
         virtualizationOptions={{

x-pack/plugins/observability_solution/profiling/public/embeddables/functions/embeddable_functions.tsx

@@ -23,21 +23,27 @@ export interface FunctionsProps {
   isLoading: boolean;
   rangeFrom: number;
   rangeTo: number;
+  showFullScreenSelector?: boolean;
 }
 
 export function EmbeddableFunctions({
   data,
   isLoading,
   rangeFrom,
   rangeTo,
+  showFullScreenSelector,
   ...deps
 }: EmbeddableFunctionsProps) {
   const totalSeconds = useMemo(() => (rangeTo - rangeFrom) / 1000, [rangeFrom, rangeTo]);
   return (
     <ProfilingEmbeddableProvider deps={deps}>
       <AsyncEmbeddableComponent isLoading={isLoading}>
         <div style={{ width: '100%' }}>
-          <EmbeddableFunctionsGrid data={data} totalSeconds={totalSeconds} />
+          <EmbeddableFunctionsGrid
+            data={data}
+            totalSeconds={totalSeconds}
+            showFullScreenSelector={showFullScreenSelector}
+          />
         </div>
       </AsyncEmbeddableComponent>
     </ProfilingEmbeddableProvider>

x-pack/plugins/observability_solution/profiling/public/embeddables/functions/embeddable_functions_grid.tsx

@@ -13,9 +13,10 @@ import { TopNFunctionsGrid } from '../../components/topn_functions';
 interface Props {
   data?: TopNFunctions;
   totalSeconds: number;
+  showFullScreenSelector?: boolean;
 }
 
-export function EmbeddableFunctionsGrid({ data, totalSeconds }: Props) {
+export function EmbeddableFunctionsGrid({ data, totalSeconds, showFullScreenSelector }: Props) {
   const [sortField, setSortField] = useState(TopNFunctionSortField.Rank);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
   const [pageIndex, setPageIndex] = useState(0);
@@ -34,6 +35,7 @@ export function EmbeddableFunctionsGrid({ data, totalSeconds }: Props) {
         setSortDirection(sorting.direction);
       }}
       isEmbedded
+      showFullScreenSelector={showFullScreenSelector}
     />
   );
 }