github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

lens config builder server side support (#183979)

Browse source
This commit is contained in:
Peter Pisljar 2024-05-28 09:38:11 +02:00 • committed by GitHub
parent 3af774f96d
commit c60c363246
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 16 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

237
packages/kbn-lens-embeddable-utils/README.md
View file

@ -1,241 +1,10 @@
# @kbn/lens-embeddable-utils
## Lens Attributes Builder
## Lens Config Builder
The Lens Attributes Builder is a utility for creating JSON objects used to render charts with Lens. It simplifies the process of configuring and building the necessary attributes for different chart types.
**Notes**:
This utililty is primarily used by Infra Observability UI and not meant to be used as an official solution provided by the Lens team.
- The tool has partial support of Lens charts, currently limited to XY and Metric charts.
- XY Bucket and Breakdown dimensions are limited respectively to Date Histogram and Top values.
The Lens Config Builder is a utility for creating JSON objects used to render charts with Lens. It simplifies the process of configuring and building the necessary attributes for different chart types.
### Usage
#### Creating a Metric Chart
To create a metric chart, use the `MetricChart` class and provide the required configuration. Here's an example:
```ts
const metricChart = new MetricChart({
layers: new MetricLayer({
data: {
label: 'Disk Read Throughput',
value: "counter_rate(max(system.diskio.read.count), kql='system.diskio.read.count: *')",
format: {
id: 'bytes',
params: {
decimals: 1,
},
},
},
}),
dataView,
formulaAPI
});
```
#### Creating an XY Chart
To create an XY chart, use the `XYChart` class and provide the required configuration. Here's an example:
```ts
const xyChart = new XYChart({
layers: [new XYDataLayer({
data: [{
label: 'Normalized Load',
value: "average(system.load.1) / max(system.load.cores)",
format: {
id: 'percent',
params: {
decimals: 1,
},
},
}],
options: {
buckets: {type: 'date_histogram'},
},
})],
dataView,
formulaAPI
});
```
#### Variations of the XY Chart
XYChart has different series type variations. Here is an example of how to build a line (default) and area charts
#### Line chart
```ts
const xyChart = new XYChart({
layers: [new XYDataLayer({
data: [{
label: 'Inbound (RX)',
value: "average(system.load.1) / max(system.load.cores)",
format: {
id: 'percent',
params: {
decimals: 1,
},
},
}],
options: {
buckets: {type: 'date_histogram'},
seriesType: 'line' // default. it doesn't need to be informed.
}
})],
dataView,
formulaAPI
});
```
#### Area chart
```ts
const xyChart = new XYChart({
layers: [new XYDataLayer({
data: [{
label: 'Inbound (RX)',
value: "average(system.load.1) / max(system.load.cores)",
format: {
id: 'percent',
params: {
decimals: 1,
},
},
}],
options: {
buckets: {type: 'date_histogram'},
seriesType: 'area'
}
})],
dataView,
formulaAPI
});
```
#### Adding Multiple Layers to an XY Chart
An XY chart can have multiple layers. Here's an example of containing a Reference Line Layer:
```ts
const xyChart = new XYChart({
layers: [
new XYDataLayer({
data: [{
label: 'Disk Read Throughput',
value: "average(system.load.1) / max(system.load.cores)",
format: {
id: 'percent',
params: {
decimals: 1,
},
},
}],
options: {
buckets: {type: 'date_histogram'},
},
}),
new XYReferenceLineLayer({
data: [{
value: "1",
format: {
id: 'percent',
params: {
decimals: 1,
},
},
}],
}),
],
dataView,
formulaAPI
});
```
#### Adding Multiple Data Sources in the Same Layer
In an XY chart, it's possible to define multiple data sources within the same layer.
To configure multiple data sources in an XY data layer, simply provide an array of data to the same YXDataLayer class:
```ts
const xyChart = new XYChart({
layers: new YXDataLayer({
data: [{
label: 'RX',
value: "average(host.network.ingress.bytes) * 8 / (max(metricset.period, kql='host.network.ingress.bytes: *') / 1000)",
format: {
id: 'bits',
params: {
decimals: 1,
},
},
},{
label: 'TX',
value: "(average(host.network.egresss.bytes) * 8 / (max(metricset.period, kql='host.network.egresss.bytes: *') / 1000)",
format: {
id: 'bits',
params: {
decimals: 1,
},
},
}],
options: {
buckets: {type: 'date_histogram'},
},
}),
dataView,
formulaAPI
});
```
#### Building Lens Chart Attributes
The `LensAttributesBuilder` is responsible for creating the full JSON object that combines the attributes returned by the chart classes. Here's an example:
```ts
const builder = new LensAttributesBuilder({ visualization: xyChart });
const attributes = builder.build();
```
The `attributes` object contains the final JSON representation of the chart configuration and can be used to render the chart with Lens.
### Usage with Lens EmbeddableComponent
To display the charts rendered with the Lens Attributes Builder, it's recommended to use the Lens `EmbeddableComponent`. The `EmbeddableComponent` abstracts some of the chart styling and other details that would be challenging to handle directly with the Lens Attributes Builder.
```tsx
const builder = new LensAttributesBuilder({
visualization: new MetricChart({
layers: new MetricLayer({
data: {
label: 'Disk Read Throughput',
value: "counter_rate(max(system.diskio.read.count), kql='system.diskio.read.count: *')",
format: {
id: 'bytes',
params: {
decimals: 1,
},
},
},
}),
dataView,
formulaAPI
}),
});
const lensAttributes = builder.build();
<EmbeddableComponent
attributes={lensAttributes}
viewMode={ViewMode.VIEW}
...
/>
```
Check kibana developer docs https://docs.elastic.dev/kibana-dev-docs/lens/config-builder

8
packages/kbn-lens-embeddable-utils/config_builder/config_builder.ts
View file

@ -7,8 +7,8 @@
*/
import type { FormulaPublicApi, LensEmbeddableInput } from '@kbn/lens-plugin/public';
import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
import { v4 as uuidv4 } from 'uuid';
import { DataViewsService } from '@kbn/data-views-plugin/common';
import { LensAttributes, LensConfig, LensConfigOptions } from './types';
import {
buildGauge,
@ -21,6 +21,8 @@ import {
buildPartitionChart,
} from './charts';
export type DataViewsCommon = Pick<DataViewsService, 'get' | 'create'>;
export class LensConfigBuilder {
private charts = {
metric: buildMetric,
@ -36,10 +38,10 @@ export class LensConfigBuilder {
table: buildTable,
};
private formulaAPI: FormulaPublicApi | undefined;
private dataViewsAPI: DataViewsPublicPluginStart;
private dataViewsAPI: DataViewsCommon;
// formulaApi is optional, as it is not necessary to use it when creating charts with ES|QL
constructor(dataViewsAPI: DataViewsPublicPluginStart, formulaAPI?: FormulaPublicApi) {
constructor(dataViewsAPI: DataViewsCommon, formulaAPI?: FormulaPublicApi) {
this.formulaAPI = formulaAPI;
this.dataViewsAPI = dataViewsAPI;
}

4
packages/kbn-lens-embeddable-utils/config_builder/types.ts
View file

@ -8,8 +8,8 @@
import type { FormulaPublicApi, TypedLensByValueInput } from '@kbn/lens-plugin/public';
import type { Filter, Query } from '@kbn/es-query';
import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
import type { Datatable } from '@kbn/expressions-plugin/common';
import { DataViewsCommon } from './config_builder';
export type LensAttributes = TypedLensByValueInput['attributes'];
export const DEFAULT_LAYER_ID = 'layer_0';
@ -289,7 +289,7 @@ export interface LensXYConfigBase {
yBounds?: LensYBoundsConfig;
}
export interface BuildDependencies {
dataViewsAPI: DataViewsPublicPluginStart;
dataViewsAPI: DataViewsCommon;
formulaAPI?: FormulaPublicApi;
}

11
packages/kbn-lens-embeddable-utils/config_builder/utils.ts
View file

@ -8,11 +8,7 @@
import { v4 as uuidv4 } from 'uuid';
import type { SavedObjectReference } from '@kbn/core-saved-objects-common/src/server_types';
import type {
DataViewSpec,
DataView,
DataViewsPublicPluginStart,
} from '@kbn/data-views-plugin/public';
import type { DataViewSpec, DataView } from '@kbn/data-views-plugin/public';
import type {
FormBasedPersistedState,
GenericIndexPatternColumn,
@ -24,6 +20,7 @@ import type {
} from '@kbn/lens-plugin/public/datasources/text_based/types';
import type { AggregateQuery } from '@kbn/es-query';
import { getIndexPatternFromESQLQuery } from '@kbn/esql-utils';
import { DataViewsCommon } from './config_builder';
import {
FormulaValueConfig,
LensAnnotationLayer,
@ -126,7 +123,7 @@ export function isFormulaDataset(dataset?: LensDataset) {
*/
export async function getDataView(
index: string,
dataViewsAPI: DataViewsPublicPluginStart,
dataViewsAPI: DataViewsCommon,
timeField?: string
) {
let dataView: DataView;
@ -226,7 +223,7 @@ export const buildDatasourceStates = async (
dataView: DataView
) => PersistedIndexPatternLayer | FormBasedPersistedState['layers'] | undefined,
getValueColumns: (config: any, i: number) => TextBasedLayerColumn[],
dataViewsAPI: DataViewsPublicPluginStart
dataViewsAPI: DataViewsCommon
) => {
let layers: Partial<LensAttributes['state']['datasourceStates']> = {};

3
packages/kbn-lens-embeddable-utils/package.json
View file

@ -2,5 +2,6 @@
"name": "@kbn/lens-embeddable-utils",
"private": true,
"version": "1.0.0",
"license": "SSPL-1.0 OR Elastic License 2.0"
"license": "SSPL-1.0 OR Elastic License 2.0",
"homepage": "https://docs.elastic.dev/kibana-dev-docs/lens/config-builder"
}