Merge branch 'main' into improve_preview_pane

src/plugins/vis_types/vega/public/components/vega_vis_component.tsx

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useCallback, useRef } from 'react';
-import { EuiResizeObserver } from '@elastic/eui';
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { EuiResizeObserver, EuiResizeObserverProps } from '@elastic/eui';
 import { throttle } from 'lodash';
 
 import type { IInterpreterRenderHandlers, RenderMode } from 'src/plugins/expressions';
@@ -27,6 +27,8 @@ interface VegaVisComponentProps {
 
 type VegaVisController = InstanceType<ReturnType<typeof createVegaVisualization>>;
 
+const THROTTLE_INTERVAL = 300;
+
 export const VegaVisComponent = ({
   visData,
   fireEvent,
@@ -35,38 +37,55 @@ export const VegaVisComponent = ({
   renderMode,
 }: VegaVisComponentProps) => {
   const chartDiv = useRef<HTMLDivElement>(null);
+  const renderCompleted = useRef(false);
   const visController = useRef<VegaVisController | null>(null);
 
   useEffect(() => {
     if (chartDiv.current) {
       const VegaVis = createVegaVisualization(deps, renderMode);
       visController.current = new VegaVis(chartDiv.current, fireEvent);
     }
-
     return () => {
       visController.current?.destroy();
       visController.current = null;
     };
   }, [deps, fireEvent, renderMode]);
 
   useEffect(() => {
+    const asyncRender = async (visCtrl: VegaVisController) => {
+      await visCtrl.render(visData);
+      renderCompleted.current = true;
+      renderComplete();
+    };
+
     if (visController.current) {
-      visController.current.render(visData).then(renderComplete);
+      asyncRender(visController.current);
     }
-  }, [visData, renderComplete]);
+  }, [renderComplete, visData]);
+
+  const resizeChart = useMemo(
+    () =>
+      throttle(
+        (dimensions) => {
+          visController.current?.resize(dimensions);
+        },
+        THROTTLE_INTERVAL,
+        { leading: false, trailing: true }
+      ),
+    []
+  );
 
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const updateChartSize = useCallback(
-    throttle(() => {
-      if (visController.current) {
-        visController.current.render(visData).then(renderComplete);
+  const onContainerResize: EuiResizeObserverProps['onResize'] = useCallback(
+    (dimensions) => {
+      if (renderCompleted.current) {
+        resizeChart(dimensions);
       }
-    }, 300),
-    [renderComplete, visData]
+    },
+    [resizeChart]
   );
 
   return (
-    <EuiResizeObserver onResize={updateChartSize}>
+    <EuiResizeObserver onResize={onContainerResize}>
       {(resizeRef) => (
         <div className="vgaVis__wrapper" ref={resizeRef}>
           <div ref={chartDiv} />

src/plugins/vis_types/vega/public/vega_view/vega_base_view.d.ts

@@ -34,6 +34,7 @@ export class VegaBaseView {
   _addDestroyHandler(handler: Function): void;
 
   destroy(): Promise<void>;
+  resize(dimensions?: { height: number; width: number }): Promise<void>;
 
   _$container: any;
   _$controls: any;

src/plugins/vis_types/vega/public/vega_view/vega_base_view.js

@@ -262,16 +262,19 @@ export class VegaBaseView {
     }
   }
 
-  resize() {
+  async resize(dimensions) {
     if (this._parser.useResize && this._view) {
-      this.updateVegaSize(this._view);
-      return this._view.runAsync();
+      this.updateVegaSize(this._view, dimensions);
+      await this._view.runAsync();
+
+      // The derived class should create this method
+      this.onViewContainerResize?.();
     }
   }
 
-  updateVegaSize(view) {
-    const width = Math.floor(Math.max(0, this._$container.width()));
-    const height = Math.floor(Math.max(0, this._$container.height()));
+  updateVegaSize(view, dimensions) {
+    const width = Math.floor(Math.max(0, dimensions?.width ?? this._$container.width()));
+    const height = Math.floor(Math.max(0, dimensions?.height ?? this._$container.height()));
 
     if (view.width() !== width || view.height() !== height) {
       view.width(width).height(height);

src/plugins/vis_types/vega/public/vega_view/vega_map_view/view.ts

@@ -46,6 +46,8 @@ async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
 }
 
 export class VegaMapView extends VegaBaseView {
+  private mapBoxInstance?: Map;
+
   private get shouldShowZoomControl() {
     return Boolean(this._parser.mapConfig.zoomControl);
   }
@@ -139,6 +141,7 @@ export class VegaMapView extends VegaBaseView {
       };
 
       mapBoxInstance.once('load', initMapComponents);
+      this.mapBoxInstance = mapBoxInstance;
     });
   }
 
@@ -193,4 +196,8 @@ export class VegaMapView extends VegaBaseView {
 
     await this.initMapContainer(vegaView);
   }
+
+  protected async onViewContainerResize() {
+    this.mapBoxInstance?.resize();
+  }
 }

src/plugins/vis_types/vega/public/vega_vis_renderer.tsx

@@ -27,7 +27,6 @@ export const getVegaVisRenderer: (
     handlers.onDestroy(() => {
       unmountComponentAtNode(domNode);
     });
-
     render(
       <KibanaThemeProvider theme$={deps.core.theme.theme$}>
         <VisualizationContainer handlers={handlers}>

src/plugins/vis_types/vega/public/vega_visualization.ts

@@ -16,6 +16,7 @@ import { createVegaStateRestorer } from './lib/vega_state_restorer';
 
 type VegaVisType = new (el: HTMLDivElement, fireEvent: IInterpreterRenderHandlers['event']) => {
   render(visData: VegaParser): Promise<void>;
+  resize(dimensions?: { height: number; width: number }): Promise<void>;
   destroy(): void;
 };
 
@@ -97,6 +98,10 @@ export const createVegaVisualization = (
       }
     }
 
+    async resize(dimensions?: { height: number; width: number }) {
+      return this.vegaView?.resize(dimensions);
+    }
+
     destroy() {
       this.vegaStateRestorer.clear();
       this.vegaView?.destroy();

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx

@@ -39,7 +39,7 @@ const StyledEuiAccordion = styled(EuiAccordion)`
 `;
 
 interface Props {
-  updateAgentPolicy: (u: AgentPolicy | null) => void;
+  updateAgentPolicy: (u: AgentPolicy | null, errorMessage?: JSX.Element) => void;
   isFleetServerPolicy?: boolean;
   agentPolicyName: string;
 }
@@ -84,12 +84,24 @@ export const AgentPolicyCreateInlineForm: React.FunctionComponent<Props> = ({
         updateAgentPolicy(resp.data.item);
       }
     } catch (e) {
-      updateAgentPolicy(null);
+      updateAgentPolicy(null, mapError(e));
     } finally {
       setIsLoading(false);
     }
   }, [newAgentPolicy, withSysMonitoring, updateAgentPolicy]);
 
+  function mapError(e: { statusCode: number }): JSX.Element | undefined {
+    switch (e.statusCode) {
+      case 409:
+        return (
+          <FormattedMessage
+            id="xpack.fleet.agentPolicyCreation.errorMessage"
+            defaultMessage="An agent policy already exists with this name."
+          />
+        );
+    }
+  }
+
   return (
     <EuiForm>
       <EuiText>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx

@@ -8,21 +8,27 @@
 import React from 'react';
 import { EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+
 export enum CREATE_STATUS {
   INITIAL = 'initial',
   CREATED = 'created',
   FAILED = 'failed',
 }
 
+export interface AgentPolicyCreateState {
+  status: CREATE_STATUS;
+  errorMessage?: JSX.Element;
+}
+
 interface Props {
-  createStatus: CREATE_STATUS;
+  createState: AgentPolicyCreateState;
 }
 
-export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createStatus }) => {
+export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createState }) => {
   return (
     <>
       <EuiSpacer size="m" />
-      {createStatus === CREATE_STATUS.CREATED ? (
+      {createState.status === CREATE_STATUS.CREATED ? (
         <EuiCallOut
           data-test-subj="agentPolicyCreateStatusCallOut"
           title={
@@ -45,7 +51,9 @@ export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ crea
           }
           color="danger"
           iconType="cross"
-        />
+        >
+          {createState.errorMessage ?? null}
+        </EuiCallOut>
       )}
     </>
   );

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

@@ -7,6 +7,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 
+import type { AgentPolicyCreateState } from '../../applications/fleet/sections/agents/components';
 import {
   AgentPolicyCreatedCallOut,
   CREATE_STATUS,
@@ -40,7 +41,9 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
 }) => {
   const [showCreatePolicy, setShowCreatePolicy] = useState(agentPolicies.length === 0);
 
-  const [createStatus, setCreateStatus] = useState(CREATE_STATUS.INITIAL);
+  const [createState, setCreateState] = useState<AgentPolicyCreateState>({
+    status: CREATE_STATUS.INITIAL,
+  });
 
   const [newName, setNewName] = useState(incrementPolicyName(agentPolicies, isFleetServerPolicy));
 
@@ -52,13 +55,13 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
   }, [agentPolicies, isFleetServerPolicy]);
 
   const onAgentPolicyCreated = useCallback(
-    async (policy: AgentPolicy | null) => {
+    async (policy: AgentPolicy | null, errorMessage?: JSX.Element) => {
       if (!policy) {
-        setCreateStatus(CREATE_STATUS.FAILED);
+        setCreateState({ status: CREATE_STATUS.FAILED, errorMessage });
         return;
       }
       setShowCreatePolicy(false);
-      setCreateStatus(CREATE_STATUS.CREATED);
+      setCreateState({ status: CREATE_STATUS.CREATED });
       if (onAgentPolicyChange) {
         onAgentPolicyChange(policy.id, policy!);
       }
@@ -88,8 +91,8 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
           isFleetServerPolicy={isFleetServerPolicy}
         />
       )}
-      {createStatus !== CREATE_STATUS.INITIAL && (
-        <AgentPolicyCreatedCallOut createStatus={createStatus} />
+      {createState.status !== CREATE_STATUS.INITIAL && (
+        <AgentPolicyCreatedCallOut createState={createState} />
       )}
     </>
   );