[Security Solution] Add custom features to lens (#138995)

* allows not to show inspector * pass adapters to onLoad * update unit tests * metric alignment * clean up * update style * fix type error * fix types * clean up types * fix unit tests * fix unit tests * reuse textAlignment * update configs * remove unused args * rm unused props * fix types * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * fix unit tests * update FTR configs * update snapshot * rename arg * update lens attributes * revert picture * add comment Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2022-11-02 11:39:48 +00:00 · 2022-11-02 11:39:48 +00:00 · e6ae2f2cee
commit e6ae2f2cee
parent 10dc2c6f78
17 changed files with 50 additions and 3 deletions
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts
@ -45,6 +45,13 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
    defaultMessage: 'Metric visualization',
  }),
  args: {
+    autoScaleMetricAlignment: {
+      types: ['string'],
+      help: i18n.translate('expressionLegacyMetricVis.function.autoScaleMetricAlignment.help', {
+        defaultMessage: 'Metric alignment after scaled',
+      }),
+      required: false,
+    },
    percentageMode: {
      types: ['boolean'],
      default: false,
@ -177,6 +184,9 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
        visType,
        visConfig: {
          metric: {
+            ...(args.autoScaleMetricAlignment
+              ? { autoScaleMetricAlignment: args.autoScaleMetricAlignment }
+              : {}),
            palette: args.palette?.params,
            percentageMode: args.percentageMode,
            metricColorMode: args.colorMode,
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts
@ -15,10 +15,11 @@ import {
 } from '@kbn/expressions-plugin/common';
 import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
 import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
-import { VisParams, visType, LabelPositionType } from './expression_renderers';
+import { VisParams, visType, LabelPositionType, MetricAlignment } from './expression_renderers';
 import { EXPRESSION_METRIC_NAME } from '../constants';

 export interface MetricArguments {
+  autoScaleMetricAlignment?: MetricAlignment;
  percentageMode: boolean;
  colorMode: ColorMode;
  showLabels: boolean;
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts
@ -29,7 +29,10 @@ export type LabelPositionType = $Values<typeof LabelPosition>;
 export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;

 export type LabelsConfig = Labels & { style: Style; position: LabelPositionType };
+
+export type MetricAlignment = 'left' | 'center' | 'right';
 export interface MetricVisParam {
+  autoScaleMetricAlignment?: MetricAlignment;
  percentageMode: boolean;
  percentageFormatPattern?: string;
  metricColorMode: ColorMode;
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/with_auto_scale.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/with_auto_scale.test.tsx.snap
@ -29,3 +29,4 @@ exports[`AutoScale withAutoScale renders 1`] = `
  </div>
 </Component>
 `;
+
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
@ -143,6 +143,12 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
                  minHeight: '100%',
                  minWidth: '100%',
                },
+                ...(this.props.visParams.metric?.autoScaleMetricAlignment
+                  ? {
+                      autoScaleMetricAlignment:
+                        this.props.visParams.metric?.autoScaleMetricAlignment,
+                    }
+                  : {}),
              }
            : undefined
        }
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx
@ -20,6 +20,7 @@ import { useResizeObserver } from '@elastic/eui';
 import { autoScaleWrapperStyle } from './with_auto_scale.styles';

 interface AutoScaleParams {
+  autoScaleMetricAlignment?: 'left' | 'center' | 'right';
  minScale?: number;
  containerStyles: CSSProperties;
 }
@ -83,7 +84,6 @@ export function withAutoScale<T>(WrappedComponent: ComponentType<T>) {
    const parentRef = useRef<HTMLDivElement>(null);
    const childrenRef = useRef<HTMLDivElement>(null);
    const parentDimensions = useResizeObserver(parentRef.current);
-
    const scaleFn = useMemo(
      () =>
        throttle(() => {
@ -120,6 +120,16 @@ export function withAutoScale<T>(WrappedComponent: ComponentType<T>) {
          ref={childrenRef}
          style={{
            transform: `scale(${scale || 0})`,
+            ...(parentDimensions.width &&
+            scale &&
+            autoScaleParams?.autoScaleMetricAlignment &&
+            autoScaleParams?.autoScaleMetricAlignment !== 'center'
+              ? {
+                  position: 'relative',
+                  [autoScaleParams.autoScaleMetricAlignment]:
+                    (1 - scale) * parentDimensions.width * scale * -1, // The difference of width after scaled
+                }
+              : {}),
          }}
        >
          <WrappedComponent {...(restProps as T)} />
--- a/x-pack/plugins/lens/common/types.ts
+++ b/x-pack/plugins/lens/common/types.ts
@ -85,6 +85,7 @@ export interface PieVisualizationState {
  palette?: PaletteOutput;
 }
 export interface LegacyMetricState {
+  autoScaleMetricAlignment?: 'left' | 'right' | 'center';
  layerId: string;
  accessor?: string;
  layerType: LayerType;
--- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx
+++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx
@ -62,6 +62,7 @@ export type TypedLensByValueInput = Omit<LensByValueInput, 'attributes'> & {
 export type EmbeddableComponentProps = (TypedLensByValueInput | LensByReferenceInput) & {
  withDefaultActions?: boolean;
  extraActions?: Action[];
+  showInspector?: boolean;
 };

 interface PluginsStartDependencies {
@ -89,6 +90,7 @@ export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDep
          input={input}
          theme={theme}
          extraActions={input.extraActions}
+          showInspector={input.showInspector}
          withDefaultActions={input.withDefaultActions}
        />
      );
@ -119,6 +121,7 @@ interface EmbeddablePanelWrapperProps {
  input: EmbeddableComponentProps;
  theme: ThemeServiceStart;
  extraActions?: Action[];
+  showInspector?: boolean;
  withDefaultActions?: boolean;
 }

@ -130,6 +133,7 @@ const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({
  input,
  theme,
  extraActions,
+  showInspector = true,
  withDefaultActions,
 }) => {
  const [embeddable, loading] = useEmbeddableFactory({ factory, input });
@ -154,7 +158,7 @@ const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({

        return [...(extraActions ?? []), ...actions];
      }}
-      inspector={inspector}
+      inspector={showInspector ? inspector : undefined}
      actionPredicate={actionPredicate}
      showShadow={false}
      showBadges={false}
--- a/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
@ -105,6 +105,9 @@ const toExpression = (
        type: 'function',
        function: 'legacyMetricVis',
        arguments: {
+          ...(state?.autoScaleMetricAlignment
+            ? { autoScaleMetricAlignment: [state?.autoScaleMetricAlignment] }
+            : {}),
          labelPosition: [state?.titlePosition || DEFAULT_TITLE_POSITION],
          font: [
            {
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_dns_queries.test.ts.snap
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_dns_queries.test.ts.snap
@ -158,6 +158,7 @@ Object {
    },
    "visualization": Object {
      "accessor": "0374e520-eae0-4ac1-bcfe-37565e7fc9e3",
+      "autoScaleMetricAlignment": "left",
      "colorMode": "None",
      "layerId": "cea37c70-8f91-43bf-b9fe-72d8c049f6a3",
      "layerType": "data",
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_network_events.test.ts.snap
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_network_events.test.ts.snap
@ -163,6 +163,7 @@ Object {
    },
    "visualization": Object {
      "accessor": "370ebd07-5ce0-4f46-a847-0e363c50d037",
+      "autoScaleMetricAlignment": "left",
      "layerId": "eaadfec7-deaa-4aeb-a403-3b4e516416d2",
      "layerType": "data",
    },
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_tls_handshakes.test.ts.snap
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_tls_handshakes.test.ts.snap
@ -182,6 +182,7 @@ Object {
    },
    "visualization": Object {
      "accessor": "21052b6b-5504-4084-a2e2-c17f772345cf",
+      "autoScaleMetricAlignment": "left",
      "layerId": "1f48a633-8eee-45ae-9471-861227e9ca03",
      "layerType": "data",
    },
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_unique_flow_ids.test.ts.snap
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/snapshots/kpi_unique_flow_ids.test.ts.snap
@ -146,6 +146,7 @@ Object {
    },
    "visualization": Object {
      "accessor": "a27f3503-9c73-4fc1-86bb-12461dae4b70",
+      "autoScaleMetricAlignment": "left",
      "layerId": "5d46d48f-6ce8-46be-a797-17ad50642564",
      "layerType": "data",
    },
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_dns_queries.ts
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_dns_queries.ts
@ -17,6 +17,7 @@ export const kpiDnsQueriesLensAttributes: LensAttributes = {
      accessor: '0374e520-eae0-4ac1-bcfe-37565e7fc9e3',
      layerType: 'data',
      colorMode: 'None',
+      autoScaleMetricAlignment: 'left',
    },
    query: {
      query: '',
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_network_events.ts
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_network_events.ts
@ -16,6 +16,7 @@ export const kpiNetworkEventsLensAttributes: LensAttributes = {
      layerId: 'eaadfec7-deaa-4aeb-a403-3b4e516416d2',
      accessor: '370ebd07-5ce0-4f46-a847-0e363c50d037',
      layerType: 'data',
+      autoScaleMetricAlignment: 'left',
    },
    query: {
      query: '',
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_tls_handshakes.ts
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_tls_handshakes.ts
@ -15,6 +15,7 @@ export const kpiTlsHandshakesLensAttributes: LensAttributes = {
      layerId: '1f48a633-8eee-45ae-9471-861227e9ca03',
      accessor: '21052b6b-5504-4084-a2e2-c17f772345cf',
      layerType: 'data',
+      autoScaleMetricAlignment: 'left',
    },
    query: {
      query:
--- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_flow_ids.ts
+++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_flow_ids.ts
@ -16,6 +16,7 @@ export const kpiUniqueFlowIdsLensAttributes: LensAttributes = {
      layerId: '5d46d48f-6ce8-46be-a797-17ad50642564',
      accessor: 'a27f3503-9c73-4fc1-86bb-12461dae4b70',
      layerType: 'data',
+      autoScaleMetricAlignment: 'left',
    },
    query: {
      query: 'source.ip: * or destination.ip: * ',