Merge branch 'main' into tooltip.for-the-last

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx

@@ -101,4 +101,5 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   }
 }
 
+/** @deprecated Use `ExitFullScreenButton` from `src/plugins/shared_ux/public`. */
 export const ExitFullScreenButton = ExitFullScreenButtonUi;

src/plugins/shared_ux/public/components/exit_full_screen_button/exit_full_screen_button.tsx

@@ -25,8 +25,10 @@ export interface Props {
 
 /**
  * A service-enabled component that provides Kibana-specific functionality to the `ExitFullScreenButton`
- * component.  Use of this component requires both the `EuiTheme` context as well as the Shared UX
- * `ServicesProvider`.
+ * component.
+ *
+ * Use of this component requires both the `EuiTheme` context as well as either a configured Shared UX
+ * `ServicesProvider` or the `ServicesContext` provided by the Shared UX public plugin contract.
  *
  * See shared-ux/public/services for information.
  */

src/plugins/shared_ux/public/components/exit_full_screen_button/index.ts

@@ -5,13 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-/* eslint-disable import/no-default-export */
 
-import { ExitFullScreenButton } from './exit_full_screen_button';
 export { ExitFullScreenButton } from './exit_full_screen_button';
-
-/**
- * Exporting the ExitFullScreenButton component as a default export so it can be
- * loaded by React.lazy.
- */
-export default ExitFullScreenButton;

src/plugins/shared_ux/public/components/index.ts

@@ -13,7 +13,11 @@ import { withSuspense } from './utility';
  * The Lazily-loaded `ExitFullScreenButton` component.  Consumers should use `React.Suspennse` or the
  * `withSuspense` HOC to load this component.
  */
-export const LazyExitFullScreenButton = React.lazy(() => import('./exit_full_screen_button'));
+export const LazyExitFullScreenButton = React.lazy(() =>
+  import('./exit_full_screen_button').then(({ ExitFullScreenButton }) => ({
+    default: ExitFullScreenButton,
+  }))
+);
 
 /**
  * A `ExitFullScreenButton` component that is wrapped by the `withSuspense` HOC.  This component can

src/plugins/shared_ux/public/services/index.tsx

@@ -27,8 +27,11 @@ const ServicesContext = createContext<SharedUXServices>(servicesFactory());
 
 /**
  * The `React.Context` Provider component for the `SharedUXServices` context.  Any
- * plugin or environemnt that consumes SharedUX components needs to wrap their React
+ * plugin or environment that consumes SharedUX components needs to wrap their React
  * tree with this provider.
+ *
+ * Within a plugin, you can use the `ServicesContext` provided by the SharedUX plugin start
+ * lifeycle method.
  */
 export const ServicesProvider: FC<SharedUXServices> = ({ children, ...services }) => (
   <ServicesContext.Provider value={services}>{children}</ServicesContext.Provider>

x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx

@@ -85,7 +85,7 @@ export function ServiceContents({
 
   const detailsUrl = apmRouter.link('/services/{serviceName}', {
     path: { serviceName },
-    query: { rangeFrom, rangeTo, environment, kuery },
+    query: { rangeFrom, rangeTo, environment, kuery, comparisonEnabled },
   });
 
   const focusUrl = apmRouter.link('/services/{serviceName}/service-map', {

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx

@@ -118,6 +118,25 @@ describe('<AgentEnrollmentFlyout />', () => {
     jest.clearAllMocks();
   });
 
+  it('should show loading when agent policies are loading', async () => {
+    (useAgentEnrollmentFlyoutData as jest.Mock).mockReturnValue?.({
+      agentPolicies: [],
+      refreshAgentPolicies: jest.fn(),
+      isLoadingInitialAgentPolicies: true,
+    });
+
+    await act(async () => {
+      testBed = await setup({
+        onClose: jest.fn(),
+      });
+      testBed.component.update();
+    });
+
+    const { exists } = testBed;
+    expect(exists('agentEnrollmentFlyout')).toBe(true);
+    expect(exists('loadingSpinner')).toBe(true);
+  });
+
   describe('managed instructions', () => {
     it('uses the agent policy selection step', async () => {
       const { exists } = testBed;

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx

@@ -31,6 +31,8 @@ import {
 import { FLEET_SERVER_PACKAGE } from '../../constants';
 import type { PackagePolicy } from '../../types';
 
+import { Loading } from '..';
+
 import { ManagedInstructions } from './managed_instructions';
 import { StandaloneInstructions } from './standalone_instructions';
 import { MissingFleetServerHostCallout } from './missing_fleet_server_host_callout';
@@ -64,7 +66,12 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   const [policyId, setSelectedPolicyId] = useState(agentPolicy?.id);
   const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState<boolean>(false);
 
-  const { agentPolicies, refreshAgentPolicies } = useAgentEnrollmentFlyoutData();
+  const {
+    agentPolicies,
+    isLoadingInitialAgentPolicies,
+    isLoadingAgentPolicies,
+    refreshAgentPolicies,
+  } = useAgentEnrollmentFlyoutData();
 
   useEffect(() => {
     async function checkPolicyIsFleetServer() {
@@ -141,7 +148,9 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
           ) : undefined
         }
       >
-        {mode === 'managed' ? (
+        {isLoadingInitialAgentPolicies ? (
+          <Loading />
+        ) : mode === 'managed' ? (
           <ManagedInstructions
             settings={settings.data?.item}
             setSelectedPolicyId={setSelectedPolicyId}
@@ -150,6 +159,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
             viewDataStep={viewDataStep}
             isFleetServerPolicySelected={isFleetServerPolicySelected}
             refreshAgentPolicies={refreshAgentPolicies}
+            isLoadingAgentPolicies={isLoadingAgentPolicies}
           />
         ) : (
           <StandaloneInstructions

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx

@@ -66,6 +66,7 @@ export const ManagedInstructions = React.memo<InstructionProps>(
     isFleetServerPolicySelected,
     settings,
     refreshAgentPolicies,
+    isLoadingAgentPolicies,
   }) => {
     const fleetStatus = useFleetStatus();
 
@@ -161,7 +162,10 @@ export const ManagedInstructions = React.memo<InstructionProps>(
       return null;
     }
 
-    if (fleetStatus.isReady && (isLoadingAgents || fleetServers.length > 0)) {
+    if (
+      fleetStatus.isReady &&
+      (isLoadingAgents || isLoadingAgentPolicies || fleetServers.length > 0)
+    ) {
       return (
         <>
           <EuiText>

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts

@@ -31,4 +31,5 @@ export interface BaseProps {
 export interface InstructionProps extends BaseProps {
   agentPolicies: AgentPolicy[];
   refreshAgentPolicies: () => void;
+  isLoadingAgentPolicies?: boolean;
 }

x-pack/plugins/fleet/public/components/loading.tsx

@@ -12,7 +12,7 @@ import type { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/
 export const Loading: React.FunctionComponent<{ size?: EuiLoadingSpinnerSize }> = ({ size }) => (
   <EuiFlexGroup justifyContent="spaceAround">
     <EuiFlexItem grow={false}>
-      <EuiLoadingSpinner size={size || 'xl'} />
+      <EuiLoadingSpinner size={size || 'xl'} data-test-subj="loadingSpinner" />
     </EuiFlexItem>
   </EuiFlexGroup>
 );

x-pack/plugins/fleet/public/hooks/use_agent_enrollment_flyout.data.test.ts

@@ -23,6 +23,7 @@ describe('useAgentEnrollmentFlyoutData', () => {
     (useGetAgentPolicies as jest.Mock).mockReturnValue({ data: undefined, isLoading: true });
     const { result } = testRenderer.renderHook(() => useAgentEnrollmentFlyoutData());
     expect(result.current.agentPolicies).toEqual([]);
+    expect(result.current.isLoadingAgentPolicies).toBe(true);
   });
 
   it('should return empty agentPolicies when http not loading and no data', () => {

x-pack/plugins/fleet/public/hooks/use_agent_enrollment_flyout_data.ts

@@ -14,11 +14,14 @@ import { useGetAgentPolicies } from './use_request';
 interface AgentEnrollmentFlyoutData {
   agentPolicies: AgentPolicy[];
   refreshAgentPolicies: () => void;
+  isLoadingInitialAgentPolicies: boolean;
+  isLoadingAgentPolicies: boolean;
 }
 
 export function useAgentEnrollmentFlyoutData(): AgentEnrollmentFlyoutData {
   const {
     data: agentPoliciesData,
+    isInitialRequest,
     isLoading: isLoadingAgentPolicies,
     resendRequest: refreshAgentPolicies,
   } = useGetAgentPolicies({
@@ -34,5 +37,10 @@ export function useAgentEnrollmentFlyoutData(): AgentEnrollmentFlyoutData {
     return [];
   }, [isLoadingAgentPolicies, agentPoliciesData?.items]);
 
-  return { agentPolicies, refreshAgentPolicies };
+  return {
+    agentPolicies,
+    refreshAgentPolicies,
+    isLoadingInitialAgentPolicies: isInitialRequest && isLoadingAgentPolicies,
+    isLoadingAgentPolicies,
+  };
 }

x-pack/plugins/lens/common/expressions/datatable/utils.ts

@@ -13,9 +13,11 @@ function isValidNumber(value: unknown): boolean {
 }
 
 export function isNumericFieldForDatatable(currentData: Datatable | undefined, accessor: string) {
-  const isNumeric =
-    currentData?.columns.find((col) => col.id === accessor || getOriginalId(col.id) === accessor)
-      ?.meta.type === 'number';
+  const column = currentData?.columns.find(
+    (col) => col.id === accessor || getOriginalId(col.id) === accessor
+  );
+  // min and max aggs are reporting as number but are actually dates - work around this by checking for the date formatter until this is fixed at the source
+  const isNumeric = column?.meta.type === 'number' && column?.meta.params?.id !== 'date';
 
   return (
     isNumeric &&

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -367,6 +367,9 @@ export const getDatatableVisualization = ({
 
               const hasNoSummaryRow = column.summaryRow == null || column.summaryRow === 'none';
 
+              const canColor =
+                datasource!.getOperationForColumnId(column.columnId)?.dataType === 'number';
+
               return {
                 type: 'expression',
                 chain: [
@@ -383,7 +386,7 @@ export const getDatatableVisualization = ({
                         !datasource!.getOperationForColumnId(column.columnId)?.isBucketed,
                       ],
                       alignment: typeof column.alignment === 'undefined' ? [] : [column.alignment],
-                      colorMode: [column.colorMode ?? 'none'],
+                      colorMode: [canColor && column.colorMode ? column.colorMode : 'none'],
                       palette: [paletteService.get(CUSTOM_PALETTE).toExpression(paletteParams)],
                       summaryRow: hasNoSummaryRow ? [] : [column.summaryRow!],
                       summaryLabel: hasNoSummaryRow

x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts

@@ -186,7 +186,35 @@ describe('heatmap suggestions', () => {
           table: {
             layerId: 'first',
             isMultiRow: true,
-            columns: [],
+            columns: [
+              {
+                columnId: 'date-column-01',
+                operation: {
+                  isBucketed: true,
+                  dataType: 'date',
+                  scale: 'interval',
+                  label: 'Date',
+                },
+              },
+              {
+                columnId: 'another-bucket-column',
+                operation: {
+                  isBucketed: true,
+                  dataType: 'string',
+                  scale: 'ratio',
+                  label: 'Bucket',
+                },
+              },
+              {
+                columnId: 'metric-column',
+                operation: {
+                  isBucketed: false,
+                  dataType: 'number',
+                  scale: 'ratio',
+                  label: 'Metric',
+                },
+              },
+            ],
             changeType: 'initial',
           },
           state: {
@@ -208,7 +236,35 @@ describe('heatmap suggestions', () => {
           table: {
             layerId: 'first',
             isMultiRow: true,
-            columns: [],
+            columns: [
+              {
+                columnId: 'date-column-01',
+                operation: {
+                  isBucketed: true,
+                  dataType: 'date',
+                  scale: 'interval',
+                  label: 'Date',
+                },
+              },
+              {
+                columnId: 'another-bucket-column',
+                operation: {
+                  isBucketed: true,
+                  dataType: 'string',
+                  scale: 'ratio',
+                  label: 'Bucket',
+                },
+              },
+              {
+                columnId: 'metric-column',
+                operation: {
+                  isBucketed: false,
+                  dataType: 'number',
+                  scale: 'ratio',
+                  label: 'Metric',
+                },
+              },
+            ],
             changeType: 'reduced',
           },
           state: {
@@ -223,6 +279,9 @@ describe('heatmap suggestions', () => {
             layerId: 'first',
             layerType: layerTypes.DATA,
             shape: 'heatmap',
+            valueAccessor: 'metric-column',
+            xAccessor: 'date-column-01',
+            yAccessor: 'another-bucket-column',
             gridConfig: {
               type: HEATMAP_GRID_FUNCTION,
               isCellLabelVisible: false,
@@ -240,7 +299,7 @@ describe('heatmap suggestions', () => {
           title: 'Heat map',
           hide: true,
           previewIcon: 'empty',
-          score: 0,
+          score: 0.3,
         },
       ]);
     });

x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts

@@ -22,7 +22,9 @@ export const getSuggestions: Visualization<HeatmapVisualizationState>['getSugges
     (state?.shape === CHART_SHAPES.HEATMAP &&
       (state.xAccessor || state.yAccessor || state.valueAccessor) &&
       table.changeType !== 'extended') ||
-    table.columns.some((col) => col.operation.isStaticValue)
+    table.columns.some((col) => col.operation.isStaticValue) ||
+    // do not use suggestions with non-numeric metrics
+    table.columns.some((col) => !col.operation.isBucketed && col.operation.dataType !== 'number')
   ) {
     return [];
   }
@@ -44,6 +46,10 @@ export const getSuggestions: Visualization<HeatmapVisualizationState>['getSugges
 
   const [groups, metrics] = partition(table.columns, (col) => col.operation.isBucketed);
 
+  if (groups.length === 0 && metrics.length === 0) {
+    return [];
+  }
+
   if (groups.length >= 3) {
     return [];
   }

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx

@@ -113,12 +113,12 @@ const expectedIndexPatterns = {
 };
 
 const bytesColumn: GenericIndexPatternColumn = {
-  label: 'Max of bytes',
+  label: 'Sum of bytes',
   dataType: 'number',
   isBucketed: false,
 
   // Private
-  operationType: 'max',
+  operationType: 'sum',
   sourceField: 'bytes',
   params: { format: { id: 'bytes' } },
 };
@@ -529,7 +529,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
           columns: {
             ...state.layers.first.columns,
             col1: expect.objectContaining({
-              operationType: 'max',
+              operationType: 'sum',
               sourceField: 'memory',
               params: { format: { id: 'bytes' } },
               // Other parts of this don't matter for this test
@@ -728,7 +728,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
     act(() => {
       wrapper
         .find('input[data-test-subj="indexPattern-label-edit"]')
-        .simulate('change', { target: { value: 'Maximum of bytes' } });
+        .simulate('change', { target: { value: 'Sum of bytes' } });
     });
 
     expect(setState.mock.calls[0]).toEqual([expect.any(Function)]);
@@ -740,7 +740,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
           columns: {
             ...state.layers.first.columns,
             col1: expect.objectContaining({
-              label: 'Maximum of bytes',
+              label: 'Sum of bytes',
               customLabel: false,
               // Other parts of this don't matter for this test
             }),