[Infra UI] Refactor host view and asset details dashboards configurat…

…on (#163918) closes [#163797](#163797) ## Summary This PR extracts the dashboard configuration from the components that renders them to common. This aims to make discoverability and maintainability easier. It doesn't change any functional behaviour ### How to test - Start a local kibana instance - Navigate to `Infrastructure` > `hosts` - Verify if the charts still work as expected
elastic · Aug 16, 2023 · ad5c9d8 · ad5c9d8
1 parent a41efea
commit ad5c9d8
Show file tree

Hide file tree

Showing 27 changed files with 622 additions and 654 deletions.
diff --git a/...on_types/layers/columns/reference_line.ts → ...ualization_types/layers/columns/static.ts b/...on_types/layers/columns/reference_line.ts → ...ualization_types/layers/columns/static.ts
@@ -10,7 +10,7 @@ import type { PersistedIndexPatternLayer } from '@kbn/lens-plugin/public';
 import type { ReferenceBasedIndexPatternColumn } from '@kbn/lens-plugin/public/datasources/form_based/operations/definitions/column_types';
 import type { StaticChartColumn, StaticValueConfig } from '../../../types';
 
-export class ReferenceLineColumn implements StaticChartColumn {
+export class StaticColumn implements StaticChartColumn {
   constructor(private valueConfig: StaticValueConfig) {}
 
   getValueConfig(): StaticValueConfig {

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
@@ -6,9 +6,12 @@
  * Side Public License, v 1.
  */
 
-export { MetricLayer, type MetricLayerOptions } from './metric_layer';
-export { XYDataLayer, type XYLayerOptions } from './xy_data_layer';
-export { XYReferenceLinesLayer } from './xy_reference_lines_layer';
+export { MetricLayer, type MetricLayerOptions, type MetricLayerConfig } from './metric_layer';
+export { XYDataLayer, type XYLayerOptions, type XYLayerConfig } from './xy_data_layer';
+export {
+  XYReferenceLinesLayer,
+  type XYReferenceLinesLayerConfig,
+} from './xy_reference_lines_layer';
 
-export { FormulaColumn as FormulaDataColumn } from './columns/formula';
-export { ReferenceLineColumn } from './columns/reference_line';
+export { FormulaColumn } from './columns/formula';
+export { StaticColumn } from './columns/static';
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
@@ -27,7 +27,7 @@ export interface MetricLayerOptions {
   subtitle?: string;
 }
 
-interface MetricLayerConfig {
+export interface MetricLayerConfig {
   data: FormulaValueConfig;
   options?: MetricLayerOptions;
   /**

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
@@ -50,7 +50,7 @@ export interface XYLayerOptions {
   seriesType?: SeriesType;
 }
 
-interface XYLayerConfig {
+export interface XYLayerConfig {
   data: FormulaValueConfig[];
   options?: XYLayerOptions;
   /**

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,9 +15,9 @@ import type {
 } from '@kbn/lens-plugin/public';
 import type { ChartLayer, StaticValueConfig, StaticChartColumn } from '../../types';
 import { getDefaultReferences } from '../../utils';
-import { ReferenceLineColumn } from './columns/reference_line';
+import { StaticColumn } from './columns/static';
 
-interface XYReferenceLinesLayerConfig {
+export interface XYReferenceLinesLayerConfig {
   data: StaticValueConfig[];
   /**
    * It is possible to define a specific dataView for the layer. It will override the global chart one
@@ -28,7 +28,7 @@ interface XYReferenceLinesLayerConfig {
 export class XYReferenceLinesLayer implements ChartLayer<XYReferenceLineLayerConfig> {
   private column: StaticChartColumn[];
   constructor(private layerConfig: XYReferenceLinesLayerConfig) {
-    this.column = layerConfig.data.map((p) => new ReferenceLineColumn(p));
+    this.column = layerConfig.data.map((p) => new StaticColumn(p));
   }
 
   getName(): string | undefined {

diff --git a/packages/kbn-lens-embeddable-utils/index.ts b/packages/kbn-lens-embeddable-utils/index.ts
@@ -10,15 +10,18 @@ export * from './attribute_builder/types';
 
 export type {
   MetricLayerOptions,
+  MetricLayerConfig,
   XYLayerOptions,
+  XYLayerConfig,
+  XYReferenceLinesLayerConfig,
   XYVisualOptions,
 } from './attribute_builder/visualization_types';
 
 export {
-  FormulaDataColumn,
+  FormulaColumn,
   MetricChart,
   MetricLayer,
-  ReferenceLineColumn,
+  StaticColumn,
   XYChart,
   XYDataLayer,
   XYReferenceLinesLayer,

diff --git a/x-pack/plugins/infra/public/common/visualizations/index.ts b/x-pack/plugins/infra/public/common/visualizations/index.ts
@@ -11,4 +11,5 @@ export type {
   HostsLensLineChartFormulas,
 } from './types';
 
+export * from './lens/dashboards';
 export { hostLensFormulas } from './constants';
diff --git a/...s/lens/dashboards/host/kpi_grid_config.ts → ...rds/asset_details/host/host_kpi_charts.ts b/...s/lens/dashboards/host/kpi_grid_config.ts → ...rds/asset_details/host/host_kpi_charts.ts
@@ -7,24 +7,16 @@
 
 import { i18n } from '@kbn/i18n';
 import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
-import { UseLensAttributesMetricLayerConfig } from '../../../../../hooks/use_lens_attributes';
-import { hostLensFormulas } from '../../../constants';
-import { TOOLTIP } from './translations';
-
-export const KPI_CHART_HEIGHT = 150;
-export const AVERAGE_SUBTITLE = i18n.translate(
-  'xpack.infra.assetDetailsEmbeddable.overview.kpi.subtitle.average',
-  {
-    defaultMessage: 'Average',
-  }
-);
+import { hostLensFormulas } from '../../../../constants';
+import type { MetricChartLayerParams } from '../../../../types';
+import { METRICS_TOOLTIP } from '../../translations';
 
 export interface KPIChartProps extends Pick<TypedLensByValueInput, 'id' | 'title' | 'overrides'> {
-  layers: UseLensAttributesMetricLayerConfig;
+  layers: MetricChartLayerParams;
   toolTip: string;
 }
 
-export const KPI_CHARTS: KPIChartProps[] = [
+export const hostKPICharts: KPIChartProps[] = [
   {
     id: 'cpuUsage',
     title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.cpuUsage.title', {
@@ -42,20 +34,20 @@ export const KPI_CHARTS: KPIChartProps[] = [
             }
           : undefined,
       },
-      layerType: 'data',
       options: {
         backgroundColor: '#F1D86F',
         showTrendLine: true,
       },
+      type: 'visualization',
     },
-    toolTip: TOOLTIP.cpuUsage,
+    toolTip: METRICS_TOOLTIP.cpuUsage,
   },
   {
     id: 'normalizedLoad1m',
     title: i18n.translate(
       'xpack.infra.assetDetailsEmbeddable.overview.kpi.normalizedLoad1m.title',
       {
-        defaultMessage: 'CPU Usage',
+        defaultMessage: 'Normalized Load',
       }
     ),
     layers: {
@@ -70,18 +62,18 @@ export const KPI_CHARTS: KPIChartProps[] = [
             }
           : undefined,
       },
-      layerType: 'data',
       options: {
         backgroundColor: '#79AAD9',
         showTrendLine: true,
       },
+      type: 'visualization',
     },
-    toolTip: TOOLTIP.normalizedLoad1m,
+    toolTip: METRICS_TOOLTIP.normalizedLoad1m,
   },
   {
     id: 'memoryUsage',
     title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.memoryUsage.title', {
-      defaultMessage: 'CPU Usage',
+      defaultMessage: 'Memory Usage',
     }),
     layers: {
       data: {
@@ -95,18 +87,18 @@ export const KPI_CHARTS: KPIChartProps[] = [
             }
           : undefined,
       },
-      layerType: 'data',
       options: {
         backgroundColor: '#A987D1',
         showTrendLine: true,
       },
+      type: 'visualization',
     },
-    toolTip: TOOLTIP.memoryUsage,
+    toolTip: METRICS_TOOLTIP.memoryUsage,
   },
   {
     id: 'diskSpaceUsage',
     title: i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.kpi.diskSpaceUsage.title', {
-      defaultMessage: 'CPU Usage',
+      defaultMessage: 'Disk Space Usage',
     }),
     layers: {
       data: {
@@ -120,12 +112,12 @@ export const KPI_CHARTS: KPIChartProps[] = [
             }
           : undefined,
       },
-      layerType: 'data',
       options: {
         backgroundColor: '#F5A35C',
         showTrendLine: true,
       },
+      type: 'visualization',
     },
-    toolTip: TOOLTIP.diskSpaceUsage,
+    toolTip: METRICS_TOOLTIP.diskSpaceUsage,
   },
 ];