[ObsUX] Move formulas and dashboard config to inventory models (#171872)

## Summary This PR moves formulas and charts developed for the Hosts View and Asset Details into the Inventory Models existing structure. ### `metrics_data_access` plugin This is where the inventory models are found. All charts and formulas have been moved from `infra` plugin into this plugin Most of the changes are just about that. I've refactored a few things to help with the reusability of these charts/dashboards ### `infra` plugin Changes made here were a consequence of the refactors in the charts/dashboards config. ### `@kbn/lens-embaddable-utils` package Just added new types --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Nov 30, 2023 · 092330c · 092330c
1 parent df6e8dd
commit 092330c
Show file tree

Hide file tree

Showing 125 changed files with 1,772 additions and 1,583 deletions.
diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/types.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/types.ts
@@ -18,6 +18,7 @@ import type {
   XYLayerConfig,
   FillStyle,
 } from '@kbn/lens-plugin/public';
+
 export type LensAttributes = TypedLensByValueInput['attributes'];
 
 // Attributes
@@ -61,7 +62,6 @@ export interface ChartLayer<TLayerConfig extends LensLayerConfig> {
   getDataView(): DataView | undefined;
 }
 
-// Chart
 export interface Chart<TVisualizationState extends LensVisualizationState> {
   getTitle(): string;
   getVisualizationType(): string;
@@ -70,6 +70,8 @@ export interface Chart<TVisualizationState extends LensVisualizationState> {
   getReferences(): SavedObjectReference[];
   getDataViews(): DataView[];
 }
+
+// Chart
 export interface ChartConfig<
   TLayer extends ChartLayer<LensLayerConfig> | Array<ChartLayer<LensLayerConfig>>
 > {
@@ -91,3 +93,5 @@ export type StaticValueConfig = Omit<LensFormula, 'formula'> & {
   fill?: FillStyle;
   value: string;
 };
+
+export type VisualizationTypes = 'lnsXY' | 'lnsMetric';
diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/constants.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/constants.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const XY_ID = 'lnsXY';
+export const METRIC_ID = 'lnsMetric';
+
+export const METRIC_TREND_LINE_ID = 'metricTrendline';
+export const XY_REFERENCE_LINE_ID = 'referenceLine';
+export const XY_DATA_ID = 'data';
diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/index.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/index.ts
@@ -5,8 +5,37 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import type { DataView } from '@kbn/data-views-plugin/common';
+import {
+  METRIC_ID,
+  XY_ID,
+  METRIC_TREND_LINE_ID,
+  XY_DATA_ID,
+  XY_REFERENCE_LINE_ID,
+} from './constants';
+import type { XYVisualOptions } from './xy_chart';
+import type { MetricLayerConfig, XYDataLayerConfig, XYReferenceLinesLayerConfig } from './layers';
 
 export { XYChart, type XYVisualOptions } from './xy_chart';
 export { MetricChart } from './metric_chart';
-
 export * from './layers';
+export type XYLayerConfig = XYDataLayerConfig | XYReferenceLinesLayerConfig;
+
+interface ChartModelBase {
+  id: string;
+  title?: string;
+  dataView?: DataView;
+}
+export interface XYChartModel extends ChartModelBase {
+  visualOptions?: XYVisualOptions;
+  visualizationType: typeof XY_ID;
+  layers: XYLayerConfig[];
+}
+export interface MetricChartModel extends ChartModelBase {
+  visualizationType: typeof METRIC_ID;
+  layers: MetricLayerConfig;
+}
+
+export type ChartModel = XYChartModel | MetricChartModel;
+export type ChartTypes = typeof XY_ID | typeof METRIC_ID;
+export { METRIC_ID, XY_ID, METRIC_TREND_LINE_ID, XY_DATA_ID, XY_REFERENCE_LINE_ID };
diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/index.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/index.ts
@@ -7,7 +7,7 @@
  */
 
 export { MetricLayer, type MetricLayerOptions, type MetricLayerConfig } from './metric_layer';
-export { XYDataLayer, type XYLayerOptions, type XYLayerConfig } from './xy_data_layer';
+export { XYDataLayer, type XYLayerOptions, type XYDataLayerConfig } from './xy_data_layer';
 export {
   XYReferenceLinesLayer,
   type XYReferenceLinesLayerConfig,

diff --git a/...es/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/metric_layer.ts b/...es/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/metric_layer.ts
@@ -16,6 +16,7 @@ import type {
 } from '@kbn/lens-plugin/public';
 import type { ChartColumn, ChartLayer, FormulaValueConfig } from '../../types';
 import { getDefaultReferences, getHistogramColumn } from '../../utils';
+import { METRIC_TREND_LINE_ID } from '../constants';
 import { FormulaColumn } from './columns/formula';
 
 const HISTOGRAM_COLUMN_NAME = 'x_date_histogram';
@@ -30,6 +31,7 @@ export interface MetricLayerOptions {
 export interface MetricLayerConfig {
   data: FormulaValueConfig;
   options?: MetricLayerOptions;
+  layerType?: typeof METRIC_TREND_LINE_ID;
   /**
    * It is possible to define a specific dataView for the layer. It will override the global chart one
    **/
@@ -38,8 +40,13 @@ export interface MetricLayerConfig {
 
 export class MetricLayer implements ChartLayer<MetricVisualizationState> {
   private column: ChartColumn;
-  constructor(private layerConfig: MetricLayerConfig) {
+  private layerConfig: MetricLayerConfig;
+  constructor(layerConfig: MetricLayerConfig) {
     this.column = new FormulaColumn(layerConfig.data);
+    this.layerConfig = {
+      ...layerConfig,
+      layerType: layerConfig.layerType ?? 'metricTrendline',
+    };
   }
 
   getLayer(

diff --git a/...s/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/xy_data_layer.ts b/...s/kbn-lens-embeddable-utils/attribute_builder/visualization_types/layers/xy_data_layer.ts
@@ -12,7 +12,7 @@ import type {
   FormulaPublicApi,
   FormBasedPersistedState,
   PersistedIndexPatternLayer,
-  XYDataLayerConfig,
+  XYDataLayerConfig as LensXYDataLayerConfig,
   SeriesType,
   TermsIndexPatternColumn,
   DateHistogramIndexPatternColumn,
@@ -26,6 +26,7 @@ import {
   type TopValuesColumnParams,
   type DateHistogramColumnParams,
 } from '../../utils';
+import { XY_DATA_ID } from '../constants';
 import { FormulaColumn } from './columns/formula';
 
 const BREAKDOWN_COLUMN_NAME = 'aggs_breakdown';
@@ -50,22 +51,25 @@ export interface XYLayerOptions {
   seriesType?: SeriesType;
 }
 
-export interface XYLayerConfig {
+export interface XYDataLayerConfig {
   data: FormulaValueConfig[];
   options?: XYLayerOptions;
+  layerType?: typeof XY_DATA_ID;
+
   /**
    * It is possible to define a specific dataView for the layer. It will override the global chart one
    **/
   dataView?: DataView;
 }
 
-export class XYDataLayer implements ChartLayer<XYDataLayerConfig> {
+export class XYDataLayer implements ChartLayer<LensXYDataLayerConfig> {
   private column: ChartColumn[];
-  private layerConfig: XYLayerConfig;
-  constructor(layerConfig: XYLayerConfig) {
+  private layerConfig: XYDataLayerConfig;
+  constructor(layerConfig: XYDataLayerConfig) {
     this.column = layerConfig.data.map((dataItem) => new FormulaColumn(dataItem));
     this.layerConfig = {
       ...layerConfig,
+      layerType: layerConfig.layerType ?? 'data',
       options: {
         ...layerConfig.options,
         buckets: {
@@ -151,7 +155,7 @@ export class XYDataLayer implements ChartLayer<XYDataLayerConfig> {
     return getDefaultReferences(this.layerConfig.dataView ?? chartDataView, layerId);
   }
 
-  getLayerConfig(layerId: string, accessorId: string): XYDataLayerConfig {
+  getLayerConfig(layerId: string, accessorId: string): LensXYDataLayerConfig {
     return {
       layerId,
       seriesType: this.layerConfig.options?.seriesType ?? 'line',

diff --git a/...embeddable-utils/attribute_builder/visualization_types/layers/xy_reference_lines_layer.ts b/...embeddable-utils/attribute_builder/visualization_types/layers/xy_reference_lines_layer.ts
@@ -15,10 +15,12 @@ import type {
 } from '@kbn/lens-plugin/public';
 import type { ChartLayer, StaticValueConfig, StaticChartColumn } from '../../types';
 import { getDefaultReferences } from '../../utils';
+import { XY_REFERENCE_LINE_ID } from '../constants';
 import { StaticColumn } from './columns/static';
 
 export interface XYReferenceLinesLayerConfig {
   data: StaticValueConfig[];
+  layerType?: typeof XY_REFERENCE_LINE_ID;
   /**
    * It is possible to define a specific dataView for the layer. It will override the global chart one
    **/
@@ -27,8 +29,13 @@ export interface XYReferenceLinesLayerConfig {
 
 export class XYReferenceLinesLayer implements ChartLayer<XYReferenceLineLayerConfig> {
   private column: StaticChartColumn[];
-  constructor(private layerConfig: XYReferenceLinesLayerConfig) {
+  private layerConfig: XYReferenceLinesLayerConfig;
+  constructor(layerConfig: XYReferenceLinesLayerConfig) {
     this.column = layerConfig.data.map((p) => new StaticColumn(p));
+    this.layerConfig = {
+      ...layerConfig,
+      layerType: layerConfig.layerType ?? 'referenceLine',
+    };
   }
 
   getName(): string | undefined {

diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/metric_chart.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/metric_chart.ts
@@ -11,14 +11,15 @@ import type { SavedObjectReference } from '@kbn/core/server';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Chart, ChartConfig, ChartLayer } from '../types';
 import { DEFAULT_LAYER_ID } from '../utils';
+import { METRIC_ID } from './constants';
 
 const ACCESSOR = 'metric_formula_accessor';
 
 export class MetricChart implements Chart<MetricVisualizationState> {
   constructor(private chartConfig: ChartConfig<ChartLayer<MetricVisualizationState>>) {}
 
   getVisualizationType(): string {
-    return 'lnsMetric';
+    return METRIC_ID;
   }
 
   getLayers(): FormBasedPersistedState['layers'] {

diff --git a/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/xy_chart.ts b/packages/kbn-lens-embeddable-utils/attribute_builder/visualization_types/xy_chart.ts
@@ -7,7 +7,9 @@
  */
 
 import type {
+  AxisExtentConfig,
   FormBasedPersistedState,
+  LegendConfig,
   XYArgs,
   XYLayerConfig,
   XYState,
@@ -17,6 +19,7 @@ import type { SavedObjectReference } from '@kbn/core/server';
 import { AxesSettingsConfig } from '@kbn/visualizations-plugin/common';
 import type { Chart, ChartConfig, ChartLayer } from '../types';
 import { DEFAULT_LAYER_ID } from '../utils';
+import { XY_ID } from './constants';
 
 const ACCESSOR = 'formula_accessor';
 
@@ -28,6 +31,8 @@ export interface XYVisualOptions {
   showDottedLine?: boolean;
   valueLabels?: XYArgs['valueLabels'];
   axisTitlesVisibilitySettings?: AxesSettingsConfig;
+  legend?: LegendConfig;
+  yLeftExtent?: AxisExtentConfig;
 }
 
 export class XYChart implements Chart<XYState> {
@@ -39,7 +44,7 @@ export class XYChart implements Chart<XYState> {
   ) {}
 
   getVisualizationType(): string {
-    return 'lnsXY';
+    return XY_ID;
   }
 
   private get layers() {
@@ -79,12 +84,23 @@ export class XYChart implements Chart<XYState> {
           }),
         ],
       }),
+      legend: this.chartConfig.visualOptions?.legend ?? {
+        isVisible: false,
+        position: 'right',
+        showSingleSeries: false,
+      },
       fittingFunction: this.chartConfig.visualOptions?.missingValues ?? 'None',
       endValue: this.chartConfig.visualOptions?.endValues,
       curveType: this.chartConfig.visualOptions?.lineInterpolation,
       emphasizeFitting: !this.chartConfig.visualOptions?.showDottedLine,
       valueLabels: this.chartConfig.visualOptions?.valueLabels,
-      axisTitlesVisibilitySettings: this.chartConfig.visualOptions?.axisTitlesVisibilitySettings,
+      axisTitlesVisibilitySettings: this.chartConfig.visualOptions
+        ?.axisTitlesVisibilitySettings ?? {
+        x: false,
+        yLeft: false,
+        yRight: true,
+      },
+      yLeftExtent: this.chartConfig.visualOptions?.yLeftExtent,
     };
   }
 
@@ -117,11 +133,6 @@ export const getXYVisualizationState = (
   },
   valueLabels: 'show',
   yLeftScale: 'linear',
-  axisTitlesVisibilitySettings: {
-    x: false,
-    yLeft: false,
-    yRight: true,
-  },
   tickLabelsVisibilitySettings: {
     x: true,
     yLeft: true,

diff --git a/packages/kbn-lens-embeddable-utils/index.ts b/packages/kbn-lens-embeddable-utils/index.ts
@@ -12,9 +12,14 @@ export type {
   MetricLayerOptions,
   MetricLayerConfig,
   XYLayerOptions,
-  XYLayerConfig,
+  XYDataLayerConfig,
   XYReferenceLinesLayerConfig,
   XYVisualOptions,
+  XYLayerConfig,
+  ChartTypes,
+  ChartModel,
+  XYChartModel,
+  MetricChartModel,
 } from './attribute_builder/visualization_types';
 
 export {
@@ -25,6 +30,11 @@ export {
   XYChart,
   XYDataLayer,
   XYReferenceLinesLayer,
+  METRIC_ID,
+  METRIC_TREND_LINE_ID,
+  XY_ID,
+  XY_DATA_ID,
+  XY_REFERENCE_LINE_ID,
 } from './attribute_builder/visualization_types';
 
 export { LensAttributesBuilder } from './attribute_builder/lens_attributes_builder';
diff --git a/packages/kbn-lens-embeddable-utils/kibana.jsonc b/packages/kbn-lens-embeddable-utils/kibana.jsonc
@@ -1,5 +1,5 @@
 {
-  "type": "shared-browser",
+  "type": "shared-common",
   "id": "@kbn/lens-embeddable-utils",
   "owner": "@elastic/obs-ux-infra_services-team"
 }
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -95,7 +95,7 @@ pageLoadAssetSize:
   management: 46112
   maps: 90000
   mapsEms: 26072
-  metricsDataAccess: 60000
+  metricsDataAccess: 73287
   ml: 82187
   monitoring: 80000
   navigation: 37269

diff --git a/x-pack/plugins/infra/public/common/visualizations/constants.ts b/x-pack/plugins/infra/public/common/visualizations/constants.ts
@@ -7,3 +7,6 @@
 
 export const HOST_METRICS_DOC_HREF = 'https://ela.st/docs-infra-host-metrics';
 export const HOST_METRICS_DOTTED_LINES_DOC_HREF = 'https://ela.st/docs-infra-why-dotted';
+
+export const KPI_CHART_HEIGHT = 150;
+export const METRIC_CHART_HEIGHT = 300;
diff --git a/x-pack/plugins/infra/public/common/visualizations/index.ts b/x-pack/plugins/infra/public/common/visualizations/index.ts
@@ -5,5 +5,9 @@
  * 2.0.
  */
 
-export * from './lens/dashboards';
-export * from './lens/formulas';
+export { METRICS_TOOLTIP } from './translations';
+export {
+  HOST_METRICS_DOC_HREF,
+  HOST_METRICS_DOTTED_LINES_DOC_HREF,
+  KPI_CHART_HEIGHT,
+} from './constants';