mirror of https://github.com/grafana/grafana
DataTrails: Auto query, explore and breakdown/drilldown prototype (#77019)
* First try * Update * app with drilldowns * Progres * Progress * update * Update * update * Update * Update * Progress * Update * Progress * Update * Progress * logs url sync * related metrics * Progress * progress * Progress * Update * Update * Update * Update * Update * fix * Update * update * Update * update * Update * Update * Update * Update * Update * Update * Update * Update * Update * Update * update * Update * Update * Settings * Update * Tweaks * update * Improve auto queries * Update * Update * Fixes * Update * Update * Update * fix * Update * Removing logs view, cleanup * Update * Update * disabled not implemented buttons * Update * Feature toggle on dashboard menu * remove unused prometheus change * removed bit * Fix failing test * chore: added `/public/app/features/trails/` to CODEOWNERS * go mod tidy * go mod tidy * fix: added missing arg * Moved panel action * Moved panel action --------- Co-authored-by: André Pereira <adrapereira@gmail.com> Co-authored-by: Darren Janeczek <darren.janeczek@grafana.com>pull/78202/head
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
c06debe200
commit
1f1d348e17
|
@ -0,0 +1,56 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { DataFrame } from '@grafana/data'; |
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectBase, |
||||||
|
SceneComponentProps, |
||||||
|
sceneGraph, |
||||||
|
AdHocFiltersVariable, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { Button } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getMetricSceneFor } from './utils'; |
||||||
|
|
||||||
|
export interface AddToFiltersGraphActionState extends SceneObjectState { |
||||||
|
frame: DataFrame; |
||||||
|
} |
||||||
|
|
||||||
|
export class AddToFiltersGraphAction extends SceneObjectBase<AddToFiltersGraphActionState> { |
||||||
|
public onClick = () => { |
||||||
|
const variable = sceneGraph.lookupVariable('filters', this); |
||||||
|
if (!(variable instanceof AdHocFiltersVariable)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const labels = this.state.frame.fields[1]?.labels ?? {}; |
||||||
|
if (Object.keys(labels).length !== 1) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// close action view
|
||||||
|
const metricScene = getMetricSceneFor(this); |
||||||
|
metricScene.setActionView(undefined); |
||||||
|
|
||||||
|
const labelName = Object.keys(labels)[0]; |
||||||
|
|
||||||
|
variable.state.set.setState({ |
||||||
|
filters: [ |
||||||
|
...variable.state.set.state.filters, |
||||||
|
{ |
||||||
|
key: labelName, |
||||||
|
operator: '=', |
||||||
|
value: labels[labelName], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<AddToFiltersGraphAction>) => { |
||||||
|
return ( |
||||||
|
<Button variant="primary" size="sm" fill="text" onClick={model.onClick}> |
||||||
|
Add to filters |
||||||
|
</Button> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,202 @@ |
|||||||
|
import { PanelBuilders, SceneQueryRunner, VizPanelBuilder } from '@grafana/scenes'; |
||||||
|
import { PromQuery } from 'app/plugins/datasource/prometheus/types'; |
||||||
|
import { HeatmapColorMode } from 'app/plugins/panel/heatmap/types'; |
||||||
|
|
||||||
|
import { KEY_SQR_METRIC_VIZ_QUERY, trailDS, VAR_FILTERS_EXPR, VAR_GROUP_BY_EXP, VAR_METRIC_EXPR } from '../shared'; |
||||||
|
|
||||||
|
export interface AutoQueryDef { |
||||||
|
variant: string; |
||||||
|
title: string; |
||||||
|
unit: string; |
||||||
|
queries: PromQuery[]; |
||||||
|
vizBuilder: (def: AutoQueryDef) => VizPanelBuilder<{}, {}>; |
||||||
|
} |
||||||
|
|
||||||
|
export interface AutoQueryInfo { |
||||||
|
preview: AutoQueryDef; |
||||||
|
main: AutoQueryDef; |
||||||
|
variants: AutoQueryDef[]; |
||||||
|
breakdown: AutoQueryDef; |
||||||
|
} |
||||||
|
|
||||||
|
export function getAutoQueriesForMetric(metric: string): AutoQueryInfo { |
||||||
|
let unit = 'short'; |
||||||
|
let agg = 'avg'; |
||||||
|
let rate = false; |
||||||
|
let title = metric; |
||||||
|
|
||||||
|
if (metric.endsWith('seconds_sum')) { |
||||||
|
unit = 's'; |
||||||
|
agg = 'avg'; |
||||||
|
rate = true; |
||||||
|
} else if (metric.endsWith('seconds')) { |
||||||
|
unit = 's'; |
||||||
|
agg = 'avg'; |
||||||
|
rate = false; |
||||||
|
} else if (metric.endsWith('bytes')) { |
||||||
|
unit = 'bytes'; |
||||||
|
agg = 'avg'; |
||||||
|
rate = false; |
||||||
|
} else if (metric.endsWith('seconds_count') || metric.endsWith('seconds_total')) { |
||||||
|
agg = 'sum'; |
||||||
|
rate = true; |
||||||
|
} else if (metric.endsWith('bucket')) { |
||||||
|
return getQueriesForBucketMetric(metric); |
||||||
|
} else if (metric.endsWith('count') || metric.endsWith('total')) { |
||||||
|
agg = 'sum'; |
||||||
|
rate = true; |
||||||
|
} |
||||||
|
|
||||||
|
let query = `${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}`; |
||||||
|
if (rate) { |
||||||
|
query = `rate(${query}[$__rate_interval])`; |
||||||
|
} |
||||||
|
|
||||||
|
const main: AutoQueryDef = { |
||||||
|
title: `${title}`, |
||||||
|
variant: 'graph', |
||||||
|
unit, |
||||||
|
queries: [{ refId: 'A', expr: `${agg}(${query})` }], |
||||||
|
vizBuilder: simpleGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
const breakdown: AutoQueryDef = { |
||||||
|
title: `${title}`, |
||||||
|
variant: 'graph', |
||||||
|
unit, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: `${agg}(${query}) by(${VAR_GROUP_BY_EXP})`, |
||||||
|
legendFormat: `{{${VAR_GROUP_BY_EXP}}}`, |
||||||
|
}, |
||||||
|
], |
||||||
|
vizBuilder: simpleGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
return { preview: main, main: main, breakdown: breakdown, variants: [] }; |
||||||
|
} |
||||||
|
|
||||||
|
function getQueriesForBucketMetric(metric: string): AutoQueryInfo { |
||||||
|
let unit = 'short'; |
||||||
|
|
||||||
|
if (metric.endsWith('seconds_bucket')) { |
||||||
|
unit = 's'; |
||||||
|
} |
||||||
|
|
||||||
|
const p50: AutoQueryDef = { |
||||||
|
title: metric, |
||||||
|
variant: 'p50', |
||||||
|
unit, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: `histogram_quantile(0.50, sum by(le) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval])))`, |
||||||
|
}, |
||||||
|
], |
||||||
|
vizBuilder: simpleGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
const breakdown: AutoQueryDef = { |
||||||
|
title: metric, |
||||||
|
variant: 'p50', |
||||||
|
unit, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: `histogram_quantile(0.50, sum by(le, ${VAR_GROUP_BY_EXP}) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval])))`, |
||||||
|
}, |
||||||
|
], |
||||||
|
vizBuilder: simpleGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
const percentiles: AutoQueryDef = { |
||||||
|
title: metric, |
||||||
|
variant: 'percentiles', |
||||||
|
unit, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: `histogram_quantile(0.99, sum by(le) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval])))`, |
||||||
|
legendFormat: '99th Percentile', |
||||||
|
}, |
||||||
|
{ |
||||||
|
refId: 'B', |
||||||
|
expr: `histogram_quantile(0.90, sum by(le) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval])))`, |
||||||
|
legendFormat: '90th Percentile', |
||||||
|
}, |
||||||
|
{ |
||||||
|
refId: 'C', |
||||||
|
expr: `histogram_quantile(0.50, sum by(le) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval])))`, |
||||||
|
legendFormat: '50th Percentile', |
||||||
|
}, |
||||||
|
], |
||||||
|
vizBuilder: percentilesGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
const heatmap: AutoQueryDef = { |
||||||
|
title: metric, |
||||||
|
variant: 'heatmap', |
||||||
|
unit, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: `sum by(le) (rate(${VAR_METRIC_EXPR}${VAR_FILTERS_EXPR}[$__rate_interval]))`, |
||||||
|
format: 'heatmap', |
||||||
|
}, |
||||||
|
], |
||||||
|
vizBuilder: heatmapGraphBuilder, |
||||||
|
}; |
||||||
|
|
||||||
|
return { preview: p50, main: percentiles, variants: [percentiles, heatmap], breakdown: breakdown }; |
||||||
|
} |
||||||
|
|
||||||
|
function simpleGraphBuilder(def: AutoQueryDef) { |
||||||
|
return PanelBuilders.timeseries() |
||||||
|
.setTitle(def.title) |
||||||
|
.setData( |
||||||
|
new SceneQueryRunner({ |
||||||
|
datasource: trailDS, |
||||||
|
maxDataPoints: 200, |
||||||
|
queries: def.queries, |
||||||
|
}) |
||||||
|
) |
||||||
|
.setUnit(def.unit) |
||||||
|
.setOption('legend', { showLegend: false }) |
||||||
|
.setCustomFieldConfig('fillOpacity', 9); |
||||||
|
} |
||||||
|
|
||||||
|
function percentilesGraphBuilder(def: AutoQueryDef) { |
||||||
|
return PanelBuilders.timeseries() |
||||||
|
.setTitle(def.title) |
||||||
|
.setData( |
||||||
|
new SceneQueryRunner({ |
||||||
|
datasource: trailDS, |
||||||
|
maxDataPoints: 200, |
||||||
|
queries: def.queries, |
||||||
|
}) |
||||||
|
) |
||||||
|
.setUnit(def.unit) |
||||||
|
.setCustomFieldConfig('fillOpacity', 9); |
||||||
|
} |
||||||
|
|
||||||
|
function heatmapGraphBuilder(def: AutoQueryDef) { |
||||||
|
return PanelBuilders.heatmap() |
||||||
|
.setTitle(def.title) |
||||||
|
.setUnit(def.unit) |
||||||
|
.setOption('calculate', false) |
||||||
|
.setOption('color', { |
||||||
|
mode: HeatmapColorMode.Scheme, |
||||||
|
exponent: 0.5, |
||||||
|
scheme: 'Spectral', |
||||||
|
steps: 32, |
||||||
|
reverse: false, |
||||||
|
}) |
||||||
|
.setData( |
||||||
|
new SceneQueryRunner({ |
||||||
|
key: KEY_SQR_METRIC_VIZ_QUERY, |
||||||
|
datasource: trailDS, |
||||||
|
queries: def.queries, |
||||||
|
}) |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { SceneObjectState, SceneObjectBase, SceneComponentProps, VizPanel } from '@grafana/scenes'; |
||||||
|
import { Field, RadioButtonGroup, useStyles2, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getTrailSettings } from '../utils'; |
||||||
|
|
||||||
|
import { AutoQueryDef, AutoQueryInfo } from './AutoQueryEngine'; |
||||||
|
|
||||||
|
export interface AutoVizPanelState extends SceneObjectState { |
||||||
|
panel?: VizPanel; |
||||||
|
autoQuery: AutoQueryInfo; |
||||||
|
queryDef?: AutoQueryDef; |
||||||
|
} |
||||||
|
|
||||||
|
export class AutoVizPanel extends SceneObjectBase<AutoVizPanelState> { |
||||||
|
constructor(state: AutoVizPanelState) { |
||||||
|
super(state); |
||||||
|
|
||||||
|
if (!state.panel) { |
||||||
|
this.setState({ |
||||||
|
panel: this.getVizPanelFor(state.autoQuery.main), |
||||||
|
queryDef: state.autoQuery.main, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private getQuerySelector(def: AutoQueryDef) { |
||||||
|
const variants = this.state.autoQuery.variants; |
||||||
|
|
||||||
|
if (variants.length === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const options = variants.map((q) => ({ label: q.variant, value: q.variant })); |
||||||
|
|
||||||
|
return <RadioButtonGroup size="sm" options={options} value={def.variant} onChange={this.onChangeQuery} />; |
||||||
|
} |
||||||
|
|
||||||
|
public onChangeQuery = (variant: string) => { |
||||||
|
const def = this.state.autoQuery.variants.find((q) => q.variant === variant)!; |
||||||
|
|
||||||
|
this.setState({ |
||||||
|
panel: this.getVizPanelFor(def), |
||||||
|
queryDef: def, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
private getVizPanelFor(def: AutoQueryDef) { |
||||||
|
return def.vizBuilder(def).setHeaderActions(this.getQuerySelector(def)).build(); |
||||||
|
} |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<AutoVizPanel>) => { |
||||||
|
const { panel, queryDef } = model.useState(); |
||||||
|
const { showQuery } = getTrailSettings(model).useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
if (!panel) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!showQuery) { |
||||||
|
return <panel.Component model={panel} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.wrapper}> |
||||||
|
<Stack gap={2}> |
||||||
|
<Field label="Query"> |
||||||
|
<div>{queryDef && queryDef.queries.map((query, index) => <div key={index}>{query.expr}</div>)}</div> |
||||||
|
</Field> |
||||||
|
</Stack> |
||||||
|
<div className={styles.panel}> |
||||||
|
<panel.Component model={panel} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
wrapper: css({ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
flexGrow: 1, |
||||||
|
}), |
||||||
|
panel: css({ |
||||||
|
position: 'relative', |
||||||
|
flexGrow: 1, |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,374 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { DataFrame, GrafanaTheme2, SelectableValue } from '@grafana/data'; |
||||||
|
import { |
||||||
|
AdHocFiltersVariable, |
||||||
|
PanelBuilders, |
||||||
|
QueryVariable, |
||||||
|
SceneComponentProps, |
||||||
|
SceneCSSGridItem, |
||||||
|
SceneCSSGridLayout, |
||||||
|
SceneDataNode, |
||||||
|
SceneFlexItem, |
||||||
|
SceneFlexItemLike, |
||||||
|
SceneFlexLayout, |
||||||
|
sceneGraph, |
||||||
|
SceneObject, |
||||||
|
SceneObjectBase, |
||||||
|
SceneObjectState, |
||||||
|
SceneQueryRunner, |
||||||
|
SceneVariableSet, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { Button, Field, RadioButtonGroup, useStyles2 } from '@grafana/ui'; |
||||||
|
import { ALL_VARIABLE_VALUE } from 'app/features/variables/constants'; |
||||||
|
|
||||||
|
import { AddToFiltersGraphAction } from './AddToFiltersGraphAction'; |
||||||
|
import { AutoQueryDef, getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine'; |
||||||
|
import { ByFrameRepeater } from './ByFrameRepeater'; |
||||||
|
import { LayoutSwitcher } from './LayoutSwitcher'; |
||||||
|
import { MetricScene } from './MetricScene'; |
||||||
|
import { trailDS, VAR_FILTERS, VAR_GROUP_BY, VAR_GROUP_BY_EXP, VAR_METRIC_EXPR } from './shared'; |
||||||
|
import { getColorByIndex } from './utils'; |
||||||
|
|
||||||
|
export interface BreakdownSceneState extends SceneObjectState { |
||||||
|
body?: SceneObject; |
||||||
|
labels: Array<SelectableValue<string>>; |
||||||
|
value?: string; |
||||||
|
loading?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Just a proof of concept example of a behavior |
||||||
|
*/ |
||||||
|
export class BreakdownScene extends SceneObjectBase<BreakdownSceneState> { |
||||||
|
constructor(state: Partial<BreakdownSceneState>) { |
||||||
|
super({ |
||||||
|
$variables: state.$variables ?? getVariableSet(), |
||||||
|
labels: state.labels ?? [], |
||||||
|
...state, |
||||||
|
}); |
||||||
|
|
||||||
|
this.addActivationHandler(this._onActivate.bind(this)); |
||||||
|
} |
||||||
|
|
||||||
|
private _query?: AutoQueryDef; |
||||||
|
|
||||||
|
private _onActivate() { |
||||||
|
const variable = this.getVariable(); |
||||||
|
|
||||||
|
variable.subscribeToState((newState, oldState) => { |
||||||
|
if ( |
||||||
|
newState.options !== oldState.options || |
||||||
|
newState.value !== oldState.value || |
||||||
|
newState.loading !== oldState.loading |
||||||
|
) { |
||||||
|
this.updateBody(variable); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const metric = sceneGraph.getAncestor(this, MetricScene).state.metric; |
||||||
|
this._query = getAutoQueriesForMetric(metric).breakdown; |
||||||
|
|
||||||
|
this.updateBody(variable); |
||||||
|
} |
||||||
|
|
||||||
|
private getVariable(): QueryVariable { |
||||||
|
const variable = sceneGraph.lookupVariable(VAR_GROUP_BY, this)!; |
||||||
|
if (!(variable instanceof QueryVariable)) { |
||||||
|
throw new Error('Group by variable not found'); |
||||||
|
} |
||||||
|
|
||||||
|
return variable; |
||||||
|
} |
||||||
|
|
||||||
|
private updateBody(variable: QueryVariable) { |
||||||
|
const options = this.getLabelOptions(variable); |
||||||
|
|
||||||
|
const stateUpdate: Partial<BreakdownSceneState> = { |
||||||
|
loading: variable.state.loading, |
||||||
|
value: String(variable.state.value), |
||||||
|
labels: options, |
||||||
|
}; |
||||||
|
|
||||||
|
if (!this.state.body && !variable.state.loading) { |
||||||
|
stateUpdate.body = variable.hasAllValue() |
||||||
|
? buildAllLayout(options, this._query!) |
||||||
|
: buildNormalLayout(this._query!); |
||||||
|
} |
||||||
|
|
||||||
|
this.setState(stateUpdate); |
||||||
|
} |
||||||
|
|
||||||
|
private getLabelOptions(variable: QueryVariable) { |
||||||
|
const labelFilters = sceneGraph.lookupVariable(VAR_FILTERS, this); |
||||||
|
const labelOptions: Array<SelectableValue<string>> = []; |
||||||
|
|
||||||
|
if (!(labelFilters instanceof AdHocFiltersVariable)) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
const filters = labelFilters.state.set.state.filters; |
||||||
|
|
||||||
|
for (const option of variable.getOptionsForSelect()) { |
||||||
|
const filterExists = filters.find((f) => f.key === option.value); |
||||||
|
if (!filterExists) { |
||||||
|
labelOptions.push({ label: option.label, value: String(option.value) }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return labelOptions; |
||||||
|
} |
||||||
|
|
||||||
|
public onChange = (value: string) => { |
||||||
|
const variable = this.getVariable(); |
||||||
|
|
||||||
|
if (value === ALL_VARIABLE_VALUE) { |
||||||
|
this.setState({ body: buildAllLayout(this.getLabelOptions(variable), this._query!) }); |
||||||
|
} else if (variable.hasAllValue()) { |
||||||
|
this.setState({ body: buildNormalLayout(this._query!) }); |
||||||
|
} |
||||||
|
|
||||||
|
variable.changeValueTo(value); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<BreakdownScene>) => { |
||||||
|
const { labels, body, loading, value } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.container}> |
||||||
|
{loading && <div>Loading...</div>} |
||||||
|
<div className={styles.controls}> |
||||||
|
<Field label="By label"> |
||||||
|
<RadioButtonGroup options={labels} value={value} onChange={model.onChange} /> |
||||||
|
</Field> |
||||||
|
{body instanceof LayoutSwitcher && ( |
||||||
|
<div className={styles.controlsRight}> |
||||||
|
<body.Selector model={body} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className={styles.content}>{body && <body.Component model={body} />}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
minHeight: '100%', |
||||||
|
flexDirection: 'column', |
||||||
|
}), |
||||||
|
content: css({ |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
paddingTop: theme.spacing(0), |
||||||
|
}), |
||||||
|
tabHeading: css({ |
||||||
|
paddingRight: theme.spacing(2), |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
}), |
||||||
|
controls: css({ |
||||||
|
flexGrow: 0, |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'top', |
||||||
|
gap: theme.spacing(2), |
||||||
|
}), |
||||||
|
controlsRight: css({ |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-end', |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export function buildAllLayout(options: Array<SelectableValue<string>>, queryDef: AutoQueryDef) { |
||||||
|
const children: SceneFlexItemLike[] = []; |
||||||
|
|
||||||
|
for (const option of options) { |
||||||
|
if (option.value === ALL_VARIABLE_VALUE) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
const expr = queryDef.queries[0].expr.replace(VAR_GROUP_BY_EXP, String(option.value)); |
||||||
|
|
||||||
|
children.push( |
||||||
|
new SceneCSSGridItem({ |
||||||
|
body: PanelBuilders.timeseries() |
||||||
|
.setTitle(option.label!) |
||||||
|
.setUnit(queryDef.unit) |
||||||
|
.setData( |
||||||
|
new SceneQueryRunner({ |
||||||
|
maxDataPoints: 300, |
||||||
|
datasource: trailDS, |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
expr: expr, |
||||||
|
legendFormat: `{{${option.label}}}`, |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
) |
||||||
|
.setHeaderActions(new SelectLabelAction({ labelName: String(option.value) })) |
||||||
|
.build(), |
||||||
|
}) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return new LayoutSwitcher({ |
||||||
|
options: [ |
||||||
|
{ value: 'grid', label: 'Grid' }, |
||||||
|
{ value: 'rows', label: 'Rows' }, |
||||||
|
], |
||||||
|
active: 'grid', |
||||||
|
layouts: [ |
||||||
|
new SceneCSSGridLayout({ |
||||||
|
templateColumns: GRID_TEMPLATE_COLUMNS, |
||||||
|
autoRows: '200px', |
||||||
|
children: children, |
||||||
|
}), |
||||||
|
new SceneCSSGridLayout({ |
||||||
|
templateColumns: '1fr', |
||||||
|
autoRows: '200px', |
||||||
|
children: children, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const GRID_TEMPLATE_COLUMNS = 'repeat(auto-fit, minmax(400px, 1fr))'; |
||||||
|
|
||||||
|
function getVariableSet() { |
||||||
|
return new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new QueryVariable({ |
||||||
|
name: VAR_GROUP_BY, |
||||||
|
label: 'Group by', |
||||||
|
datasource: trailDS, |
||||||
|
includeAll: true, |
||||||
|
defaultToAll: true, |
||||||
|
query: { query: `label_names(${VAR_METRIC_EXPR})`, refId: 'A' }, |
||||||
|
value: '', |
||||||
|
text: '', |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function buildNormalLayout(queryDef: AutoQueryDef) { |
||||||
|
return new LayoutSwitcher({ |
||||||
|
$data: new SceneQueryRunner({ |
||||||
|
datasource: trailDS, |
||||||
|
maxDataPoints: 300, |
||||||
|
queries: queryDef.queries, |
||||||
|
}), |
||||||
|
options: [ |
||||||
|
{ value: 'single', label: 'Single' }, |
||||||
|
{ value: 'grid', label: 'Grid' }, |
||||||
|
{ value: 'rows', label: 'Rows' }, |
||||||
|
], |
||||||
|
active: 'grid', |
||||||
|
layouts: [ |
||||||
|
new SceneFlexLayout({ |
||||||
|
direction: 'column', |
||||||
|
children: [ |
||||||
|
new SceneFlexItem({ |
||||||
|
minHeight: 300, |
||||||
|
body: PanelBuilders.timeseries().setTitle('$metric').build(), |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
new ByFrameRepeater({ |
||||||
|
body: new SceneCSSGridLayout({ |
||||||
|
templateColumns: GRID_TEMPLATE_COLUMNS, |
||||||
|
autoRows: '200px', |
||||||
|
children: [], |
||||||
|
}), |
||||||
|
getLayoutChild: (data, frame, frameIndex) => { |
||||||
|
return new SceneCSSGridItem({ |
||||||
|
body: queryDef |
||||||
|
.vizBuilder(queryDef) |
||||||
|
.setTitle(getLabelValue(frame)) |
||||||
|
.setData(new SceneDataNode({ data: { ...data, series: [frame] } })) |
||||||
|
.setColor({ mode: 'fixed', fixedColor: getColorByIndex(frameIndex) }) |
||||||
|
.setHeaderActions(new AddToFiltersGraphAction({ frame })) |
||||||
|
.build(), |
||||||
|
}); |
||||||
|
}, |
||||||
|
}), |
||||||
|
new ByFrameRepeater({ |
||||||
|
body: new SceneCSSGridLayout({ |
||||||
|
templateColumns: '1fr', |
||||||
|
autoRows: '200px', |
||||||
|
children: [], |
||||||
|
}), |
||||||
|
getLayoutChild: (data, frame, frameIndex) => { |
||||||
|
return new SceneCSSGridItem({ |
||||||
|
body: queryDef |
||||||
|
.vizBuilder(queryDef) |
||||||
|
.setTitle(getLabelValue(frame)) |
||||||
|
.setData(new SceneDataNode({ data: { ...data, series: [frame] } })) |
||||||
|
.setColor({ mode: 'fixed', fixedColor: getColorByIndex(frameIndex) }) |
||||||
|
.setHeaderActions(new AddToFiltersGraphAction({ frame })) |
||||||
|
.build(), |
||||||
|
}); |
||||||
|
}, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function getLabelValue(frame: DataFrame) { |
||||||
|
const labels = frame.fields[1]?.labels; |
||||||
|
|
||||||
|
if (!labels) { |
||||||
|
return 'No labels'; |
||||||
|
} |
||||||
|
|
||||||
|
const keys = Object.keys(labels); |
||||||
|
if (keys.length === 0) { |
||||||
|
return 'No labels'; |
||||||
|
} |
||||||
|
|
||||||
|
return labels[keys[0]]; |
||||||
|
} |
||||||
|
|
||||||
|
export function buildBreakdownActionScene() { |
||||||
|
return new SceneFlexItem({ |
||||||
|
body: new BreakdownScene({}), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
interface SelectLabelActionState extends SceneObjectState { |
||||||
|
labelName: string; |
||||||
|
} |
||||||
|
export class SelectLabelAction extends SceneObjectBase<SelectLabelActionState> { |
||||||
|
public onClick = () => { |
||||||
|
getBreakdownSceneFor(this).onChange(this.state.labelName); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<AddToFiltersGraphAction>) => { |
||||||
|
return ( |
||||||
|
<Button variant="primary" size="sm" fill="text" onClick={model.onClick}> |
||||||
|
Select |
||||||
|
</Button> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getBreakdownSceneFor(model: SceneObject): BreakdownScene { |
||||||
|
if (model instanceof BreakdownScene) { |
||||||
|
return model; |
||||||
|
} |
||||||
|
|
||||||
|
if (model.parent) { |
||||||
|
return getBreakdownSceneFor(model.parent); |
||||||
|
} |
||||||
|
|
||||||
|
throw new Error('Unable to find breakdown scene'); |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { LoadingState, PanelData, DataFrame } from '@grafana/data'; |
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneFlexItem, |
||||||
|
SceneObjectBase, |
||||||
|
sceneGraph, |
||||||
|
SceneComponentProps, |
||||||
|
SceneByFrameRepeater, |
||||||
|
SceneLayout, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
|
||||||
|
interface ByFrameRepeaterState extends SceneObjectState { |
||||||
|
body: SceneLayout; |
||||||
|
getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneFlexItem; |
||||||
|
} |
||||||
|
|
||||||
|
export class ByFrameRepeater extends SceneObjectBase<ByFrameRepeaterState> { |
||||||
|
public constructor(state: ByFrameRepeaterState) { |
||||||
|
super(state); |
||||||
|
|
||||||
|
this.addActivationHandler(() => { |
||||||
|
const data = sceneGraph.getData(this); |
||||||
|
|
||||||
|
this._subs.add( |
||||||
|
data.subscribeToState((data) => { |
||||||
|
if (data.data?.state === LoadingState.Done) { |
||||||
|
this.performRepeat(data.data); |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
if (data.state.data) { |
||||||
|
this.performRepeat(data.state.data); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
private performRepeat(data: PanelData) { |
||||||
|
const newChildren: SceneFlexItem[] = []; |
||||||
|
|
||||||
|
for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) { |
||||||
|
const layoutChild = this.state.getLayoutChild(data, data.series[seriesIndex], seriesIndex); |
||||||
|
newChildren.push(layoutChild); |
||||||
|
} |
||||||
|
|
||||||
|
this.state.body.setState({ children: newChildren }); |
||||||
|
} |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<SceneByFrameRepeater>) => { |
||||||
|
const { body } = model.useState(); |
||||||
|
return <body.Component model={body} />; |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { AdHocVariableFilter, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { locationService } from '@grafana/runtime'; |
||||||
|
import { |
||||||
|
AdHocFiltersVariable, |
||||||
|
DataSourceVariable, |
||||||
|
getUrlSyncManager, |
||||||
|
SceneComponentProps, |
||||||
|
SceneControlsSpacer, |
||||||
|
SceneObject, |
||||||
|
SceneObjectBase, |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectUrlSyncConfig, |
||||||
|
SceneObjectUrlValues, |
||||||
|
SceneRefreshPicker, |
||||||
|
SceneTimePicker, |
||||||
|
SceneTimeRange, |
||||||
|
SceneVariableSet, |
||||||
|
VariableValueSelectors, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { DataTrailSettings } from './DataTrailSettings'; |
||||||
|
import { DataTrailHistory, DataTrailHistoryStep } from './DataTrailsHistory'; |
||||||
|
import { MetricScene } from './MetricScene'; |
||||||
|
import { MetricSelectScene } from './MetricSelectScene'; |
||||||
|
import { MetricSelectedEvent, trailDS, LOGS_METRIC, VAR_DATASOURCE } from './shared'; |
||||||
|
import { getUrlForTrail } from './utils'; |
||||||
|
|
||||||
|
export interface DataTrailState extends SceneObjectState { |
||||||
|
topScene?: SceneObject; |
||||||
|
embedded?: boolean; |
||||||
|
controls: SceneObject[]; |
||||||
|
history: DataTrailHistory; |
||||||
|
settings: DataTrailSettings; |
||||||
|
|
||||||
|
// just for for the starting data source
|
||||||
|
initialDS?: string; |
||||||
|
initialFilters?: AdHocVariableFilter[]; |
||||||
|
|
||||||
|
// Synced with url
|
||||||
|
metric?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export class DataTrail extends SceneObjectBase<DataTrailState> { |
||||||
|
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['metric'] }); |
||||||
|
|
||||||
|
public constructor(state: Partial<DataTrailState>) { |
||||||
|
super({ |
||||||
|
$timeRange: state.$timeRange ?? new SceneTimeRange({}), |
||||||
|
$variables: state.$variables ?? getVariableSet(state.initialDS, state.metric, state.initialFilters), |
||||||
|
controls: state.controls ?? [ |
||||||
|
new VariableValueSelectors({ layout: 'vertical' }), |
||||||
|
new SceneControlsSpacer(), |
||||||
|
new SceneTimePicker({}), |
||||||
|
new SceneRefreshPicker({}), |
||||||
|
], |
||||||
|
history: state.history ?? new DataTrailHistory({}), |
||||||
|
settings: state.settings ?? new DataTrailSettings({}), |
||||||
|
...state, |
||||||
|
}); |
||||||
|
|
||||||
|
this.addActivationHandler(this._onActivate.bind(this)); |
||||||
|
} |
||||||
|
|
||||||
|
public _onActivate() { |
||||||
|
if (!this.state.topScene) { |
||||||
|
this.setState({ topScene: getTopSceneFor(this.state.metric) }); |
||||||
|
} |
||||||
|
|
||||||
|
// Some scene elements publish this
|
||||||
|
this.subscribeToEvent(MetricSelectedEvent, this._handleMetricSelectedEvent.bind(this)); |
||||||
|
|
||||||
|
return () => { |
||||||
|
if (!this.state.embedded) { |
||||||
|
getUrlSyncManager().cleanUp(this); |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
public goBackToStep(step: DataTrailHistoryStep) { |
||||||
|
if (!this.state.embedded) { |
||||||
|
getUrlSyncManager().cleanUp(this); |
||||||
|
} |
||||||
|
|
||||||
|
if (!step.trailState.metric) { |
||||||
|
step.trailState.metric = undefined; |
||||||
|
} |
||||||
|
|
||||||
|
this.setState(step.trailState); |
||||||
|
|
||||||
|
if (!this.state.embedded) { |
||||||
|
locationService.replace(getUrlForTrail(this)); |
||||||
|
|
||||||
|
getUrlSyncManager().initSync(this); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _handleMetricSelectedEvent(evt: MetricSelectedEvent) { |
||||||
|
if (this.state.embedded) { |
||||||
|
this.setState(this.getSceneUpdatesForNewMetricValue(evt.payload)); |
||||||
|
} else { |
||||||
|
locationService.partial({ metric: evt.payload, actionView: null }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private getSceneUpdatesForNewMetricValue(metric: string | undefined) { |
||||||
|
const stateUpdate: Partial<DataTrailState> = {}; |
||||||
|
stateUpdate.metric = metric; |
||||||
|
stateUpdate.topScene = getTopSceneFor(metric); |
||||||
|
return stateUpdate; |
||||||
|
} |
||||||
|
|
||||||
|
getUrlState() { |
||||||
|
return { metric: this.state.metric }; |
||||||
|
} |
||||||
|
|
||||||
|
updateFromUrl(values: SceneObjectUrlValues) { |
||||||
|
const stateUpdate: Partial<DataTrailState> = {}; |
||||||
|
|
||||||
|
if (typeof values.metric === 'string') { |
||||||
|
if (this.state.metric !== values.metric) { |
||||||
|
Object.assign(stateUpdate, this.getSceneUpdatesForNewMetricValue(values.metric)); |
||||||
|
} |
||||||
|
} else if (values.metric === null) { |
||||||
|
stateUpdate.metric = undefined; |
||||||
|
stateUpdate.topScene = new MetricSelectScene({ showHeading: true }); |
||||||
|
} |
||||||
|
|
||||||
|
this.setState(stateUpdate); |
||||||
|
} |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<DataTrail>) => { |
||||||
|
const { controls, topScene, history, settings } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.container}> |
||||||
|
<history.Component model={history} /> |
||||||
|
{controls && ( |
||||||
|
<div className={styles.controls}> |
||||||
|
{controls.map((control) => ( |
||||||
|
<control.Component key={control.state.key} model={control} /> |
||||||
|
))} |
||||||
|
<settings.Component model={settings} /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className={styles.body}>{topScene && <topScene.Component model={topScene} />}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getTopSceneFor(metric?: string) { |
||||||
|
if (metric) { |
||||||
|
return new MetricScene({ metric: metric }); |
||||||
|
} else { |
||||||
|
return new MetricSelectScene({ showHeading: true }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getVariableSet(initialDS?: string, metric?: string, initialFilters?: AdHocVariableFilter[]) { |
||||||
|
return new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new DataSourceVariable({ |
||||||
|
name: VAR_DATASOURCE, |
||||||
|
label: 'Data source', |
||||||
|
value: initialDS, |
||||||
|
pluginId: metric === LOGS_METRIC ? 'loki' : 'prometheus', |
||||||
|
}), |
||||||
|
AdHocFiltersVariable.create({ |
||||||
|
name: 'filters', |
||||||
|
datasource: trailDS, |
||||||
|
layout: 'vertical', |
||||||
|
filters: initialFilters ?? [], |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
gap: theme.spacing(2), |
||||||
|
minHeight: '100%', |
||||||
|
flexDirection: 'column', |
||||||
|
}), |
||||||
|
body: css({ |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(1), |
||||||
|
}), |
||||||
|
controls: css({ |
||||||
|
display: 'flex', |
||||||
|
gap: theme.spacing(2), |
||||||
|
alignItems: 'flex-end', |
||||||
|
flexWrap: 'wrap', |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { AdHocFiltersVariable, sceneGraph } from '@grafana/scenes'; |
||||||
|
import { useStyles2, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { DataTrail } from './DataTrail'; |
||||||
|
import { LOGS_METRIC, VAR_DATASOURCE_EXPR, VAR_FILTERS } from './shared'; |
||||||
|
|
||||||
|
export interface Props { |
||||||
|
trail: DataTrail; |
||||||
|
onSelect: (trail: DataTrail) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function DataTrailCard({ trail, onSelect }: Props) { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const filtersVariable = sceneGraph.lookupVariable(VAR_FILTERS, trail)!; |
||||||
|
if (!(filtersVariable instanceof AdHocFiltersVariable)) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const filters = filtersVariable.state.set.state.filters; |
||||||
|
const dsValue = getDataSource(trail); |
||||||
|
|
||||||
|
return ( |
||||||
|
<button className={styles.container} onClick={() => onSelect(trail)}> |
||||||
|
<div className={styles.heading}>{getMetricName(trail.state.metric)}</div> |
||||||
|
<Stack gap={1.5}> |
||||||
|
{dsValue && ( |
||||||
|
<Stack direction="column" gap={0.5}> |
||||||
|
<div className={styles.label}>Datasource</div> |
||||||
|
<div className={styles.value}>{getDataSource(trail)}</div> |
||||||
|
</Stack> |
||||||
|
)} |
||||||
|
{filters.map((filter, index) => ( |
||||||
|
<Stack key={index} direction="column" gap={0.5}> |
||||||
|
<div className={styles.label}>{filter.key}</div> |
||||||
|
<div className={styles.value}>{filter.value}</div> |
||||||
|
</Stack> |
||||||
|
))} |
||||||
|
</Stack> |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function getMetricName(metric?: string) { |
||||||
|
if (!metric) { |
||||||
|
return 'Select metric'; |
||||||
|
} |
||||||
|
|
||||||
|
if (metric === LOGS_METRIC) { |
||||||
|
return 'Logs'; |
||||||
|
} |
||||||
|
|
||||||
|
return metric; |
||||||
|
} |
||||||
|
|
||||||
|
function getDataSource(trail: DataTrail) { |
||||||
|
return sceneGraph.interpolate(trail, VAR_DATASOURCE_EXPR); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
padding: theme.spacing(1), |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(2), |
||||||
|
border: `1px solid ${theme.colors.border.weak}`, |
||||||
|
borderRadius: theme.shape.radius.default, |
||||||
|
cursor: 'pointer', |
||||||
|
boxShadow: 'none', |
||||||
|
background: 'transparent', |
||||||
|
textAlign: 'left', |
||||||
|
'&:hover': { |
||||||
|
background: theme.colors.emphasize(theme.colors.background.primary, 0.03), |
||||||
|
}, |
||||||
|
}), |
||||||
|
label: css({ |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
fontSize: theme.typography.bodySmall.fontSize, |
||||||
|
}), |
||||||
|
value: css({ |
||||||
|
fontSize: theme.typography.bodySmall.fontSize, |
||||||
|
}), |
||||||
|
heading: css({ |
||||||
|
padding: theme.spacing(0), |
||||||
|
display: 'flex', |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
}), |
||||||
|
body: css({ |
||||||
|
padding: theme.spacing(0), |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { getDataSourceSrv } from '@grafana/runtime'; |
||||||
|
import { SceneComponentProps, SceneObjectBase, SceneObjectState, SceneTimeRangeLike } from '@grafana/scenes'; |
||||||
|
import { DataSourceRef } from '@grafana/schema'; |
||||||
|
import { Drawer } from '@grafana/ui'; |
||||||
|
import { PromVisualQuery } from 'app/plugins/datasource/prometheus/querybuilder/types'; |
||||||
|
|
||||||
|
import { getDashboardSceneFor } from '../dashboard-scene/utils/utils'; |
||||||
|
|
||||||
|
import { DataTrail } from './DataTrail'; |
||||||
|
import { getDataTrailsApp } from './DataTrailsApp'; |
||||||
|
import { OpenEmbeddedTrailEvent } from './shared'; |
||||||
|
|
||||||
|
interface DataTrailDrawerState extends SceneObjectState { |
||||||
|
timeRange: SceneTimeRangeLike; |
||||||
|
query: PromVisualQuery; |
||||||
|
dsRef: DataSourceRef; |
||||||
|
} |
||||||
|
|
||||||
|
export class DataTrailDrawer extends SceneObjectBase<DataTrailDrawerState> { |
||||||
|
static Component = DataTrailDrawerRenderer; |
||||||
|
|
||||||
|
public trail: DataTrail; |
||||||
|
|
||||||
|
constructor(state: DataTrailDrawerState) { |
||||||
|
super(state); |
||||||
|
|
||||||
|
this.trail = buildDataTrailFromQuery(state); |
||||||
|
this.trail.addActivationHandler(() => { |
||||||
|
this.trail.subscribeToEvent(OpenEmbeddedTrailEvent, this.onOpenTrail); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
onOpenTrail = () => { |
||||||
|
getDataTrailsApp().goToUrlForTrail(this.trail.clone({ embedded: false })); |
||||||
|
}; |
||||||
|
|
||||||
|
onClose = () => { |
||||||
|
const dashboard = getDashboardSceneFor(this); |
||||||
|
dashboard.closeModal(); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function DataTrailDrawerRenderer({ model }: SceneComponentProps<DataTrailDrawer>) { |
||||||
|
return ( |
||||||
|
<Drawer title={'Data trail'} onClose={model.onClose} size="lg"> |
||||||
|
<div style={{ display: 'flex', height: '100%' }}> |
||||||
|
<model.trail.Component model={model.trail} /> |
||||||
|
</div> |
||||||
|
</Drawer> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function buildDataTrailFromQuery({ query, dsRef, timeRange }: DataTrailDrawerState) { |
||||||
|
const filters = query.labels.map((label) => ({ key: label.label, value: label.value, operator: label.op })); |
||||||
|
|
||||||
|
const ds = getDataSourceSrv().getInstanceSettings(dsRef); |
||||||
|
|
||||||
|
return new DataTrail({ |
||||||
|
$timeRange: timeRange, |
||||||
|
metric: query.metric, |
||||||
|
initialDS: ds?.name, |
||||||
|
initialFilters: filters, |
||||||
|
embedded: true, |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
||||||
|
import { Dropdown, Switch, ToolbarButton, useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
export interface DataTrailSettingsState extends SceneObjectState { |
||||||
|
showQuery?: boolean; |
||||||
|
showAdvanced?: boolean; |
||||||
|
multiValueVars?: boolean; |
||||||
|
isOpen?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export class DataTrailSettings extends SceneObjectBase<DataTrailSettingsState> { |
||||||
|
constructor(state: Partial<DataTrailSettingsState>) { |
||||||
|
super({ |
||||||
|
showQuery: state.showQuery ?? false, |
||||||
|
showAdvanced: state.showAdvanced ?? false, |
||||||
|
isOpen: state.isOpen ?? false, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
public onToggleShowQuery = () => { |
||||||
|
this.setState({ showQuery: !this.state.showQuery }); |
||||||
|
}; |
||||||
|
|
||||||
|
public onToggleAdvanced = () => { |
||||||
|
this.setState({ showAdvanced: !this.state.showAdvanced }); |
||||||
|
}; |
||||||
|
|
||||||
|
public onToggleMultiValue = () => { |
||||||
|
this.setState({ multiValueVars: !this.state.multiValueVars }); |
||||||
|
}; |
||||||
|
|
||||||
|
public onToggleOpen = (isOpen: boolean) => { |
||||||
|
this.setState({ isOpen }); |
||||||
|
}; |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<DataTrailSettings>) => { |
||||||
|
const { showQuery, showAdvanced, multiValueVars, isOpen } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const renderPopover = () => { |
||||||
|
return ( |
||||||
|
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ |
||||||
|
<div className={styles.popover} onClick={(evt) => evt.stopPropagation()}> |
||||||
|
<div className={styles.heading}>Settings</div> |
||||||
|
<div className={styles.options}> |
||||||
|
<div>Multi value variables</div> |
||||||
|
<Switch value={multiValueVars} onChange={model.onToggleMultiValue} /> |
||||||
|
<div>Advanced options</div> |
||||||
|
<Switch value={showAdvanced} onChange={model.onToggleAdvanced} /> |
||||||
|
<div>Show query</div> |
||||||
|
<Switch value={showQuery} onChange={model.onToggleShowQuery} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Dropdown overlay={renderPopover} placement="bottom" onVisibleChange={model.onToggleOpen}> |
||||||
|
<ToolbarButton icon="cog" variant="canvas" isOpen={isOpen} /> |
||||||
|
</Dropdown> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
popover: css({ |
||||||
|
display: 'flex', |
||||||
|
padding: theme.spacing(2), |
||||||
|
flexDirection: 'column', |
||||||
|
background: theme.colors.background.primary, |
||||||
|
boxShadow: theme.shadows.z3, |
||||||
|
borderRadius: theme.shape.borderRadius(), |
||||||
|
border: `1px solid ${theme.colors.border.weak}`, |
||||||
|
zIndex: 1, |
||||||
|
marginRight: theme.spacing(2), |
||||||
|
}), |
||||||
|
heading: css({ |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
paddingBottom: theme.spacing(2), |
||||||
|
}), |
||||||
|
options: css({ |
||||||
|
display: 'grid', |
||||||
|
gridTemplateColumns: '1fr 50px', |
||||||
|
rowGap: theme.spacing(1), |
||||||
|
columnGap: theme.spacing(2), |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useEffect } from 'react'; |
||||||
|
import { Route, Switch } from 'react-router-dom'; |
||||||
|
|
||||||
|
import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; |
||||||
|
import { locationService } from '@grafana/runtime'; |
||||||
|
import { getUrlSyncManager, SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
||||||
|
import { useStyles2 } from '@grafana/ui'; |
||||||
|
import { Page } from 'app/core/components/Page/Page'; |
||||||
|
|
||||||
|
import { DataTrail } from './DataTrail'; |
||||||
|
import { DataTrailsHome } from './DataTrailsHome'; |
||||||
|
import { getUrlForTrail, newMetricsTrail } from './utils'; |
||||||
|
|
||||||
|
export interface DataTrailsAppState extends SceneObjectState { |
||||||
|
trail: DataTrail; |
||||||
|
home: DataTrailsHome; |
||||||
|
} |
||||||
|
|
||||||
|
export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> { |
||||||
|
public constructor(state: DataTrailsAppState) { |
||||||
|
super(state); |
||||||
|
} |
||||||
|
|
||||||
|
goToUrlForTrail(trail: DataTrail) { |
||||||
|
this.setState({ trail }); |
||||||
|
locationService.push(getUrlForTrail(trail)); |
||||||
|
} |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<DataTrailsApp>) => { |
||||||
|
const { trail, home } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Switch> |
||||||
|
<Route |
||||||
|
exact={true} |
||||||
|
path="/data-trails" |
||||||
|
render={() => ( |
||||||
|
<Page navId="data-trails" layout={PageLayoutType.Custom}> |
||||||
|
<div className={styles.customPage}> |
||||||
|
<home.Component model={home} /> |
||||||
|
</div> |
||||||
|
</Page> |
||||||
|
)} |
||||||
|
/> |
||||||
|
<Route |
||||||
|
exact={true} |
||||||
|
path="/data-trails/trail" |
||||||
|
render={() => ( |
||||||
|
<Page navId="data-trails" pageNav={{ text: 'Trail' }} layout={PageLayoutType.Custom}> |
||||||
|
<div className={styles.customPage}> |
||||||
|
<DataTrailView trail={trail} /> |
||||||
|
</div> |
||||||
|
</Page> |
||||||
|
)} |
||||||
|
/> |
||||||
|
</Switch> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function DataTrailView({ trail }: { trail: DataTrail }) { |
||||||
|
const [isInitialized, setIsInitialized] = React.useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!isInitialized) { |
||||||
|
getUrlSyncManager().initSync(trail); |
||||||
|
setIsInitialized(true); |
||||||
|
} |
||||||
|
}, [trail, isInitialized]); |
||||||
|
|
||||||
|
if (!isInitialized) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return <trail.Component model={trail} />; |
||||||
|
} |
||||||
|
|
||||||
|
let dataTrailsApp: DataTrailsApp; |
||||||
|
|
||||||
|
export function getDataTrailsApp() { |
||||||
|
if (!dataTrailsApp) { |
||||||
|
dataTrailsApp = new DataTrailsApp({ |
||||||
|
trail: newMetricsTrail(), |
||||||
|
home: new DataTrailsHome({ |
||||||
|
recent: [], |
||||||
|
bookmarks: [], |
||||||
|
}), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return dataTrailsApp; |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
customPage: css({ |
||||||
|
padding: theme.spacing(2, 3, 2, 3), |
||||||
|
background: theme.isLight ? theme.colors.background.primary : theme.colors.background.canvas, |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,183 @@ |
|||||||
|
import { css, cx } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectBase, |
||||||
|
SceneComponentProps, |
||||||
|
sceneUtils, |
||||||
|
SceneVariableValueChangedEvent, |
||||||
|
SceneObjectStateChangedEvent, |
||||||
|
SceneTimeRange, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { useStyles2, Tooltip, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { DataTrail, DataTrailState } from './DataTrail'; |
||||||
|
import { VAR_FILTERS } from './shared'; |
||||||
|
import { getTrailFor } from './utils'; |
||||||
|
|
||||||
|
export interface DataTrailsHistoryState extends SceneObjectState { |
||||||
|
steps: DataTrailHistoryStep[]; |
||||||
|
} |
||||||
|
|
||||||
|
export interface DataTrailHistoryStep { |
||||||
|
description: string; |
||||||
|
type: TrailStepType; |
||||||
|
trailState: DataTrailState; |
||||||
|
} |
||||||
|
|
||||||
|
export type TrailStepType = 'filters' | 'time' | 'metric' | 'start'; |
||||||
|
|
||||||
|
export class DataTrailHistory extends SceneObjectBase<DataTrailsHistoryState> { |
||||||
|
public constructor(state: Partial<DataTrailsHistoryState>) { |
||||||
|
super({ steps: state.steps ?? [] }); |
||||||
|
|
||||||
|
this.addActivationHandler(this._onActivate.bind(this)); |
||||||
|
} |
||||||
|
|
||||||
|
public _onActivate() { |
||||||
|
const trail = getTrailFor(this); |
||||||
|
|
||||||
|
if (this.state.steps.length === 0) { |
||||||
|
this.addTrailStep(trail, 'start'); |
||||||
|
} |
||||||
|
|
||||||
|
trail.subscribeToState((newState, oldState) => { |
||||||
|
if (newState.metric !== oldState.metric) { |
||||||
|
if (this.state.steps.length === 1) { |
||||||
|
// For the first step we want to update the starting state so that it contains data
|
||||||
|
this.state.steps[0].trailState = sceneUtils.cloneSceneObjectState(oldState, { history: this }); |
||||||
|
} |
||||||
|
|
||||||
|
if (newState.metric) { |
||||||
|
this.addTrailStep(trail, 'metric'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
trail.subscribeToEvent(SceneVariableValueChangedEvent, (evt) => { |
||||||
|
if (evt.payload.state.name === VAR_FILTERS) { |
||||||
|
this.addTrailStep(trail, 'filters'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
trail.subscribeToEvent(SceneObjectStateChangedEvent, (evt) => { |
||||||
|
if (evt.payload.changedObject instanceof SceneTimeRange) { |
||||||
|
this.addTrailStep(trail, 'time'); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
public addTrailStep(trail: DataTrail, type: TrailStepType) { |
||||||
|
this.setState({ |
||||||
|
steps: [ |
||||||
|
...this.state.steps, |
||||||
|
{ |
||||||
|
description: 'Test', |
||||||
|
type, |
||||||
|
trailState: sceneUtils.cloneSceneObjectState(trail.state, { history: this }), |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
renderStepTooltip(step: DataTrailHistoryStep) { |
||||||
|
return ( |
||||||
|
<Stack direction="column"> |
||||||
|
<div>{step.type}</div> |
||||||
|
{step.type === 'metric' && <div>{step.trailState.metric}</div>} |
||||||
|
</Stack> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<DataTrailHistory>) => { |
||||||
|
const { steps } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const trail = getTrailFor(model); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.container}> |
||||||
|
<div className={styles.heading}>Trail</div> |
||||||
|
{steps.map((step, index) => ( |
||||||
|
<Tooltip content={() => model.renderStepTooltip(step)} key={index}> |
||||||
|
<button |
||||||
|
className={cx(styles.step, styles.stepTypes[step.type])} |
||||||
|
onClick={() => trail.goBackToStep(step)} |
||||||
|
></button> |
||||||
|
</Tooltip> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
const visTheme = theme.visualization; |
||||||
|
|
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
display: 'flex', |
||||||
|
gap: 10, |
||||||
|
alignItems: 'center', |
||||||
|
}), |
||||||
|
heading: css({}), |
||||||
|
step: css({ |
||||||
|
flexGrow: 0, |
||||||
|
cursor: 'pointer', |
||||||
|
border: 'none', |
||||||
|
boxShadow: 'none', |
||||||
|
padding: 0, |
||||||
|
margin: 0, |
||||||
|
width: 8, |
||||||
|
height: 8, |
||||||
|
opacity: 0.7, |
||||||
|
borderRadius: theme.shape.radius.circle, |
||||||
|
background: theme.colors.primary.main, |
||||||
|
position: 'relative', |
||||||
|
'&:hover': { |
||||||
|
transform: 'scale(1.1)', |
||||||
|
}, |
||||||
|
'&:after': { |
||||||
|
content: '""', |
||||||
|
position: 'absolute', |
||||||
|
width: 10, |
||||||
|
height: 2, |
||||||
|
left: 8, |
||||||
|
top: 3, |
||||||
|
background: theme.colors.primary.border, |
||||||
|
}, |
||||||
|
'&:last-child': { |
||||||
|
'&:after': { |
||||||
|
display: 'none', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}), |
||||||
|
stepTypes: { |
||||||
|
start: css({ |
||||||
|
background: visTheme.getColorByName('green'), |
||||||
|
'&:after': { |
||||||
|
background: visTheme.getColorByName('green'), |
||||||
|
}, |
||||||
|
}), |
||||||
|
filters: css({ |
||||||
|
background: visTheme.getColorByName('purple'), |
||||||
|
'&:after': { |
||||||
|
background: visTheme.getColorByName('purple'), |
||||||
|
}, |
||||||
|
}), |
||||||
|
metric: css({ |
||||||
|
background: visTheme.getColorByName('orange'), |
||||||
|
'&:after': { |
||||||
|
background: visTheme.getColorByName('orange'), |
||||||
|
}, |
||||||
|
}), |
||||||
|
time: css({ |
||||||
|
background: theme.colors.primary.main, |
||||||
|
'&:after': { |
||||||
|
background: theme.colors.primary.main, |
||||||
|
}, |
||||||
|
}), |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { |
||||||
|
SceneComponentProps, |
||||||
|
sceneGraph, |
||||||
|
SceneObject, |
||||||
|
SceneObjectBase, |
||||||
|
SceneObjectRef, |
||||||
|
SceneObjectState, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { Button, useStyles2, Stack } from '@grafana/ui'; |
||||||
|
import { Text } from '@grafana/ui/src/components/Text/Text'; |
||||||
|
|
||||||
|
import { DataTrail } from './DataTrail'; |
||||||
|
import { DataTrailCard } from './DataTrailCard'; |
||||||
|
import { DataTrailsApp } from './DataTrailsApp'; |
||||||
|
import { newMetricsTrail } from './utils'; |
||||||
|
|
||||||
|
export interface DataTrailsHomeState extends SceneObjectState { |
||||||
|
recent: Array<SceneObjectRef<DataTrail>>; |
||||||
|
bookmarks: Array<SceneObjectRef<DataTrail>>; |
||||||
|
} |
||||||
|
|
||||||
|
export class DataTrailsHome extends SceneObjectBase<DataTrailsHomeState> { |
||||||
|
public constructor(state: DataTrailsHomeState) { |
||||||
|
super(state); |
||||||
|
} |
||||||
|
|
||||||
|
public onNewMetricsTrail = () => { |
||||||
|
const app = getAppFor(this); |
||||||
|
const trail = newMetricsTrail(); |
||||||
|
|
||||||
|
this.setState({ recent: [app.state.trail.getRef(), ...this.state.recent] }); |
||||||
|
app.goToUrlForTrail(trail); |
||||||
|
}; |
||||||
|
|
||||||
|
public onSelectTrail = (trail: DataTrail) => { |
||||||
|
const app = getAppFor(this); |
||||||
|
|
||||||
|
const currentTrail = app.state.trail; |
||||||
|
const existsInRecent = this.state.recent.find((t) => t.resolve() === currentTrail); |
||||||
|
|
||||||
|
if (!existsInRecent) { |
||||||
|
this.setState({ recent: [currentTrail.getRef(), ...this.state.recent] }); |
||||||
|
} |
||||||
|
|
||||||
|
app.goToUrlForTrail(trail); |
||||||
|
}; |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<DataTrailsHome>) => { |
||||||
|
const { recent, bookmarks } = model.useState(); |
||||||
|
const app = getAppFor(model); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.container}> |
||||||
|
<Stack direction="column" gap={1}> |
||||||
|
<Text variant="h2">Data trails</Text> |
||||||
|
<Text color="secondary">Automatically query, explore and navigate your observability data</Text> |
||||||
|
</Stack> |
||||||
|
<Stack gap={2}> |
||||||
|
<Button icon="plus" size="lg" variant="secondary" onClick={model.onNewMetricsTrail}> |
||||||
|
New metric trail |
||||||
|
</Button> |
||||||
|
</Stack> |
||||||
|
<Stack gap={4}> |
||||||
|
<div className={styles.column}> |
||||||
|
<Text variant="h4">Recent trails</Text> |
||||||
|
<div className={styles.trailList}> |
||||||
|
{app.state.trail.state.metric && <DataTrailCard trail={app.state.trail} onSelect={model.onSelectTrail} />} |
||||||
|
{recent.map((trail, index) => ( |
||||||
|
<DataTrailCard key={index} trail={trail.resolve()} onSelect={model.onSelectTrail} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.column}> |
||||||
|
<Text variant="h4">Bookmarks</Text> |
||||||
|
<div className={styles.trailList}> |
||||||
|
{bookmarks.map((trail, index) => ( |
||||||
|
<DataTrailCard key={index} trail={trail.resolve()} onSelect={model.onSelectTrail} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Stack> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getAppFor(model: SceneObject) { |
||||||
|
return sceneGraph.getAncestor(model, DataTrailsApp); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
padding: theme.spacing(2), |
||||||
|
flexGrow: 1, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(3), |
||||||
|
}), |
||||||
|
column: css({ |
||||||
|
width: 500, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(2), |
||||||
|
}), |
||||||
|
newTrail: css({ |
||||||
|
height: 'auto', |
||||||
|
justifyContent: 'center', |
||||||
|
fontSize: theme.typography.h5.fontSize, |
||||||
|
}), |
||||||
|
trailCard: css({}), |
||||||
|
trailList: css({ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
gap: theme.spacing(2), |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
// Libraries
|
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { getDataTrailsApp } from './DataTrailsApp'; |
||||||
|
|
||||||
|
export function DataTrailsPage() { |
||||||
|
const app = getDataTrailsApp(); |
||||||
|
return <app.Component model={app} />; |
||||||
|
} |
||||||
|
|
||||||
|
export default DataTrailsPage; |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { SelectableValue } from '@grafana/data'; |
||||||
|
import { SceneComponentProps, SceneObject, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
||||||
|
import { Field, RadioButtonGroup } from '@grafana/ui'; |
||||||
|
|
||||||
|
export interface LayoutSwitcherState extends SceneObjectState { |
||||||
|
active: LayoutType; |
||||||
|
layouts: SceneObject[]; |
||||||
|
options: Array<SelectableValue<LayoutType>>; |
||||||
|
} |
||||||
|
|
||||||
|
export type LayoutType = 'single' | 'grid' | 'rows'; |
||||||
|
|
||||||
|
export class LayoutSwitcher extends SceneObjectBase<LayoutSwitcherState> { |
||||||
|
public Selector({ model }: { model: LayoutSwitcher }) { |
||||||
|
const { active, options } = model.useState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Field label="View"> |
||||||
|
<RadioButtonGroup options={options} value={active} onChange={model.onLayoutChange} /> |
||||||
|
</Field> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public onLayoutChange = (active: LayoutType) => { |
||||||
|
this.setState({ active }); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<LayoutSwitcher>) => { |
||||||
|
const { layouts, options, active } = model.useState(); |
||||||
|
|
||||||
|
const index = options.findIndex((o) => o.value === active); |
||||||
|
if (index === -1) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const layout = layouts[index]; |
||||||
|
|
||||||
|
return <layout.Component model={layout} />; |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectBase, |
||||||
|
SceneComponentProps, |
||||||
|
SceneFlexLayout, |
||||||
|
SceneFlexItem, |
||||||
|
SceneQueryRunner, |
||||||
|
SceneObjectUrlSyncConfig, |
||||||
|
SceneObjectUrlValues, |
||||||
|
PanelBuilders, |
||||||
|
sceneGraph, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { ToolbarButton, Box, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine'; |
||||||
|
import { AutoVizPanel } from './AutomaticMetricQueries/AutoVizPanel'; |
||||||
|
import { buildBreakdownActionScene } from './BreakdownScene'; |
||||||
|
import { MetricSelectScene } from './MetricSelectScene'; |
||||||
|
import { SelectMetricAction } from './SelectMetricAction'; |
||||||
|
import { |
||||||
|
ActionViewDefinition, |
||||||
|
getVariablesWithMetricConstant, |
||||||
|
LOGS_METRIC, |
||||||
|
MakeOptional, |
||||||
|
OpenEmbeddedTrailEvent, |
||||||
|
} from './shared'; |
||||||
|
import { getTrailFor } from './utils'; |
||||||
|
|
||||||
|
export interface MetricSceneState extends SceneObjectState { |
||||||
|
body: SceneFlexLayout; |
||||||
|
metric: string; |
||||||
|
actionView?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export class MetricScene extends SceneObjectBase<MetricSceneState> { |
||||||
|
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['actionView'] }); |
||||||
|
|
||||||
|
public constructor(state: MakeOptional<MetricSceneState, 'body'>) { |
||||||
|
super({ |
||||||
|
$variables: state.$variables ?? getVariablesWithMetricConstant(state.metric), |
||||||
|
body: state.body ?? buildGraphScene(state.metric), |
||||||
|
...state, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
getUrlState() { |
||||||
|
return { actionView: this.state.actionView }; |
||||||
|
} |
||||||
|
|
||||||
|
updateFromUrl(values: SceneObjectUrlValues) { |
||||||
|
if (typeof values.actionView === 'string') { |
||||||
|
if (this.state.actionView !== values.actionView) { |
||||||
|
const actionViewDef = actionViewsDefinitions.find((v) => v.value === values.actionView); |
||||||
|
if (actionViewDef) { |
||||||
|
this.setActionView(actionViewDef); |
||||||
|
} |
||||||
|
} |
||||||
|
} else if (values.actionView === null) { |
||||||
|
this.setActionView(undefined); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public setActionView(actionViewDef?: ActionViewDefinition) { |
||||||
|
const { body } = this.state; |
||||||
|
|
||||||
|
if (actionViewDef && actionViewDef.value !== this.state.actionView) { |
||||||
|
// reduce max height for main panel to reduce height flicker
|
||||||
|
body.state.children[0].setState({ maxHeight: MAIN_PANEL_MIN_HEIGHT }); |
||||||
|
body.setState({ children: [...body.state.children.slice(0, 2), actionViewDef.getScene()] }); |
||||||
|
this.setState({ actionView: actionViewDef.value }); |
||||||
|
} else { |
||||||
|
// restore max height
|
||||||
|
body.state.children[0].setState({ maxHeight: MAIN_PANEL_MAX_HEIGHT }); |
||||||
|
body.setState({ children: body.state.children.slice(0, 2) }); |
||||||
|
this.setState({ actionView: undefined }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<MetricScene>) => { |
||||||
|
const { body } = model.useState(); |
||||||
|
return <body.Component model={body} />; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
const actionViewsDefinitions: ActionViewDefinition[] = [ |
||||||
|
{ displayName: 'Breakdown', value: 'breakdown', getScene: buildBreakdownActionScene }, |
||||||
|
{ displayName: 'Logs', value: 'logs', getScene: buildLogsScene }, |
||||||
|
{ displayName: 'Related metrics', value: 'related', getScene: buildRelatedMetricsScene }, |
||||||
|
]; |
||||||
|
|
||||||
|
export interface MetricActionBarState extends SceneObjectState {} |
||||||
|
|
||||||
|
export class MetricActionBar extends SceneObjectBase<MetricActionBarState> { |
||||||
|
public getButtonVariant(actionViewName: string, currentView: string | undefined) { |
||||||
|
return currentView === actionViewName ? 'active' : 'canvas'; |
||||||
|
} |
||||||
|
|
||||||
|
public onOpenTrail = () => { |
||||||
|
this.publishEvent(new OpenEmbeddedTrailEvent(), true); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<MetricActionBar>) => { |
||||||
|
const metricScene = sceneGraph.getAncestor(model, MetricScene); |
||||||
|
const trail = getTrailFor(model); |
||||||
|
const { actionView } = metricScene.useState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box paddingY={1}> |
||||||
|
<Stack gap={2}> |
||||||
|
{actionViewsDefinitions.map((viewDef) => ( |
||||||
|
<ToolbarButton |
||||||
|
key={viewDef.value} |
||||||
|
variant={viewDef.value === actionView ? 'active' : 'canvas'} |
||||||
|
onClick={() => metricScene.setActionView(viewDef)} |
||||||
|
> |
||||||
|
{viewDef.displayName} |
||||||
|
</ToolbarButton> |
||||||
|
))} |
||||||
|
<ToolbarButton variant={'canvas'}>Add to dashboard</ToolbarButton> |
||||||
|
<ToolbarButton variant={'canvas'} icon="compass" tooltip="Open in explore (todo)" disabled /> |
||||||
|
<ToolbarButton variant={'canvas'} icon="star" tooltip="Bookmark (todo)" disabled /> |
||||||
|
<ToolbarButton variant={'canvas'} icon="share-alt" tooltip="Copy url (todo)" disabled /> |
||||||
|
{trail.state.embedded && ( |
||||||
|
<ToolbarButton variant={'canvas'} onClick={model.onOpenTrail}> |
||||||
|
Open |
||||||
|
</ToolbarButton> |
||||||
|
)} |
||||||
|
</Stack> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
const MAIN_PANEL_MIN_HEIGHT = 280; |
||||||
|
const MAIN_PANEL_MAX_HEIGHT = '40%'; |
||||||
|
|
||||||
|
function buildGraphScene(metric: string) { |
||||||
|
const autoQuery = getAutoQueriesForMetric(metric); |
||||||
|
|
||||||
|
return new SceneFlexLayout({ |
||||||
|
direction: 'column', |
||||||
|
children: [ |
||||||
|
new SceneFlexItem({ |
||||||
|
minHeight: MAIN_PANEL_MIN_HEIGHT, |
||||||
|
maxHeight: MAIN_PANEL_MAX_HEIGHT, |
||||||
|
body: new AutoVizPanel({ autoQuery }), |
||||||
|
}), |
||||||
|
new SceneFlexItem({ |
||||||
|
ySizing: 'content', |
||||||
|
body: new MetricActionBar({}), |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function buildLogsScene() { |
||||||
|
return new SceneFlexItem({ |
||||||
|
$data: new SceneQueryRunner({ |
||||||
|
queries: [ |
||||||
|
{ |
||||||
|
refId: 'A', |
||||||
|
datasource: { uid: 'gdev-loki' }, |
||||||
|
expr: '{${filters}} | logfmt', |
||||||
|
}, |
||||||
|
], |
||||||
|
}), |
||||||
|
body: PanelBuilders.logs() |
||||||
|
.setTitle('Logs') |
||||||
|
.setHeaderActions(new SelectMetricAction({ metric: LOGS_METRIC, title: 'Open' })) |
||||||
|
.build(), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function buildRelatedMetricsScene() { |
||||||
|
return new SceneFlexItem({ |
||||||
|
body: new MetricSelectScene({}), |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,216 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectBase, |
||||||
|
SceneComponentProps, |
||||||
|
PanelBuilders, |
||||||
|
SceneFlexItem, |
||||||
|
SceneVariableSet, |
||||||
|
QueryVariable, |
||||||
|
sceneGraph, |
||||||
|
VariableDependencyConfig, |
||||||
|
SceneVariable, |
||||||
|
SceneCSSGridLayout, |
||||||
|
SceneCSSGridItem, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { VariableHide } from '@grafana/schema'; |
||||||
|
import { Input, Text, useStyles2, InlineSwitch } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine'; |
||||||
|
import { SelectMetricAction } from './SelectMetricAction'; |
||||||
|
import { getVariablesWithMetricConstant, trailDS, VAR_FILTERS_EXPR, VAR_METRIC_NAMES } from './shared'; |
||||||
|
import { getColorByIndex } from './utils'; |
||||||
|
|
||||||
|
export interface MetricSelectSceneState extends SceneObjectState { |
||||||
|
body: SceneCSSGridLayout; |
||||||
|
showHeading?: boolean; |
||||||
|
searchQuery?: string; |
||||||
|
showPreviews?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
const ROW_PREVIEW_HEIGHT = '175px'; |
||||||
|
const ROW_CARD_HEIGHT = '64px'; |
||||||
|
|
||||||
|
export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> { |
||||||
|
constructor(state: Partial<MetricSelectSceneState>) { |
||||||
|
super({ |
||||||
|
$variables: state.$variables ?? getMetricNamesVariableSet(), |
||||||
|
body: |
||||||
|
state.body ?? |
||||||
|
new SceneCSSGridLayout({ |
||||||
|
children: [], |
||||||
|
templateColumns: 'repeat(auto-fill, minmax(450px, 1fr))', |
||||||
|
autoRows: ROW_PREVIEW_HEIGHT, |
||||||
|
}), |
||||||
|
showPreviews: true, |
||||||
|
...state, |
||||||
|
}); |
||||||
|
|
||||||
|
this.addActivationHandler(this._onActivate.bind(this)); |
||||||
|
} |
||||||
|
|
||||||
|
protected _variableDependency = new VariableDependencyConfig(this, { |
||||||
|
variableNames: [VAR_METRIC_NAMES], |
||||||
|
onVariableUpdatesCompleted: this._onVariableChanged.bind(this), |
||||||
|
}); |
||||||
|
|
||||||
|
private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void { |
||||||
|
if (dependencyChanged) { |
||||||
|
this.buildLayout(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private ignoreNextUpdate = false; |
||||||
|
private _onActivate() { |
||||||
|
if (this.state.body.state.children.length === 0) { |
||||||
|
this.buildLayout(); |
||||||
|
} else { |
||||||
|
// Temp hack when going back to select metric scene and variable updates
|
||||||
|
this.ignoreNextUpdate = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private buildLayout() { |
||||||
|
// Temp hack when going back to select metric scene and variable updates
|
||||||
|
if (this.ignoreNextUpdate) { |
||||||
|
this.ignoreNextUpdate = false; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const variable = sceneGraph.lookupVariable(VAR_METRIC_NAMES, this); |
||||||
|
|
||||||
|
if (!(variable instanceof QueryVariable)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (variable.state.loading) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const searchRegex = new RegExp(this.state.searchQuery ?? '.*'); |
||||||
|
const metricNames = variable.state.options; |
||||||
|
const children: SceneFlexItem[] = []; |
||||||
|
const showPreviews = this.state.showPreviews; |
||||||
|
const previewLimit = 20; |
||||||
|
const cardLimit = 50; |
||||||
|
|
||||||
|
for (let index = 0; index < metricNames.length; index++) { |
||||||
|
const metric = metricNames[index]; |
||||||
|
|
||||||
|
const metricName = String(metric.value); |
||||||
|
if (!metricName.match(searchRegex)) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if (children.length > cardLimit) { |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
if (showPreviews && children.length < previewLimit) { |
||||||
|
children.push( |
||||||
|
new SceneCSSGridItem({ |
||||||
|
$variables: getVariablesWithMetricConstant(metricName), |
||||||
|
body: getPreviewPanelFor(metricName, index), |
||||||
|
}) |
||||||
|
); |
||||||
|
} else { |
||||||
|
children.push( |
||||||
|
new SceneCSSGridItem({ |
||||||
|
$variables: getVariablesWithMetricConstant(metricName), |
||||||
|
body: getCardPanelFor(metricName), |
||||||
|
}) |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const rowTemplate = this.state.showPreviews ? ROW_PREVIEW_HEIGHT : ROW_CARD_HEIGHT; |
||||||
|
|
||||||
|
this.state.body.setState({ children, autoRows: rowTemplate }); |
||||||
|
} |
||||||
|
|
||||||
|
public onSearchChange = (evt: React.SyntheticEvent<HTMLInputElement>) => { |
||||||
|
this.setState({ searchQuery: evt.currentTarget.value }); |
||||||
|
this.buildLayout(); |
||||||
|
}; |
||||||
|
|
||||||
|
public onTogglePreviews = () => { |
||||||
|
this.setState({ showPreviews: !this.state.showPreviews }); |
||||||
|
this.buildLayout(); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<MetricSelectScene>) => { |
||||||
|
const { showHeading, searchQuery, showPreviews } = model.useState(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.container}> |
||||||
|
{showHeading && ( |
||||||
|
<div className={styles.headingWrapper}> |
||||||
|
<Text variant="h4">Select a metric</Text> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className={styles.header}> |
||||||
|
<Input placeholder="Search metrics" value={searchQuery} onChange={model.onSearchChange} /> |
||||||
|
<InlineSwitch showLabel={true} label="Show previews" value={showPreviews} onChange={model.onTogglePreviews} /> |
||||||
|
</div> |
||||||
|
<model.state.body.Component model={model.state.body} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getMetricNamesVariableSet() { |
||||||
|
return new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new QueryVariable({ |
||||||
|
name: VAR_METRIC_NAMES, |
||||||
|
datasource: trailDS, |
||||||
|
hide: VariableHide.hideVariable, |
||||||
|
includeAll: true, |
||||||
|
defaultToAll: true, |
||||||
|
skipUrlSync: true, |
||||||
|
query: { query: `label_values(${VAR_FILTERS_EXPR},__name__)`, refId: 'A' }, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function getPreviewPanelFor(metric: string, index: number) { |
||||||
|
const autoQuery = getAutoQueriesForMetric(metric); |
||||||
|
|
||||||
|
return autoQuery.preview |
||||||
|
.vizBuilder(autoQuery.preview) |
||||||
|
.setColor({ mode: 'fixed', fixedColor: getColorByIndex(index) }) |
||||||
|
.setHeaderActions(new SelectMetricAction({ metric, title: 'Select' })) |
||||||
|
.build(); |
||||||
|
} |
||||||
|
|
||||||
|
function getCardPanelFor(metric: string) { |
||||||
|
return PanelBuilders.text() |
||||||
|
.setTitle(metric) |
||||||
|
.setHeaderActions(new SelectMetricAction({ metric, title: 'Select' })) |
||||||
|
.setOption('content', '') |
||||||
|
.build(); |
||||||
|
} |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
container: css({ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
flexGrow: 1, |
||||||
|
}), |
||||||
|
headingWrapper: css({ |
||||||
|
marginTop: theme.spacing(1), |
||||||
|
}), |
||||||
|
header: css({ |
||||||
|
flexGrow: 0, |
||||||
|
display: 'flex', |
||||||
|
gap: theme.spacing(2), |
||||||
|
marginBottom: theme.spacing(1), |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { SceneObjectState, SceneObjectBase, SceneComponentProps } from '@grafana/scenes'; |
||||||
|
import { Button } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { MetricSelectedEvent } from './shared'; |
||||||
|
|
||||||
|
export interface SelectMetricActionState extends SceneObjectState { |
||||||
|
title: string; |
||||||
|
metric: string; |
||||||
|
} |
||||||
|
|
||||||
|
export class SelectMetricAction extends SceneObjectBase<SelectMetricActionState> { |
||||||
|
public onClick = () => { |
||||||
|
this.publishEvent(new MetricSelectedEvent(this.state.metric), true); |
||||||
|
}; |
||||||
|
|
||||||
|
public static Component = ({ model }: SceneComponentProps<SelectMetricAction>) => { |
||||||
|
return ( |
||||||
|
<Button variant="primary" size="sm" fill="text" onClick={model.onClick}> |
||||||
|
{model.state.title} |
||||||
|
</Button> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { |
||||||
|
SceneObjectState, |
||||||
|
SceneObjectBase, |
||||||
|
VariableDependencyConfig, |
||||||
|
sceneGraph, |
||||||
|
SceneComponentProps, |
||||||
|
SceneVariableSet, |
||||||
|
SceneVariable, |
||||||
|
QueryVariable, |
||||||
|
VariableValueOption, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { VariableHide } from '@grafana/schema'; |
||||||
|
import { Input, Card, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { trailDS } from './shared'; |
||||||
|
|
||||||
|
export interface SelectMetricTrailViewState extends SceneObjectState { |
||||||
|
metricNames: VariableValueOption[]; |
||||||
|
} |
||||||
|
|
||||||
|
export class SelectMetricTrailView extends SceneObjectBase<SelectMetricTrailViewState> { |
||||||
|
public constructor(state: Partial<SelectMetricTrailViewState>) { |
||||||
|
super({ |
||||||
|
$variables: new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new QueryVariable({ |
||||||
|
name: 'metricNames', |
||||||
|
datasource: trailDS, |
||||||
|
hide: VariableHide.hideVariable, |
||||||
|
includeAll: true, |
||||||
|
defaultToAll: true, |
||||||
|
skipUrlSync: true, |
||||||
|
query: { query: 'label_values({$filters},__name__)', refId: 'A' }, |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
metricNames: [], |
||||||
|
...state, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
protected _variableDependency = new VariableDependencyConfig(this, { |
||||||
|
variableNames: ['filters', 'metricNames'], |
||||||
|
onVariableUpdatesCompleted: this._onVariableChanged.bind(this), |
||||||
|
}); |
||||||
|
|
||||||
|
private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void { |
||||||
|
for (const variable of changedVariables) { |
||||||
|
if (variable.state.name === 'filters') { |
||||||
|
const variable = sceneGraph.lookupVariable('filters', this)!; |
||||||
|
// Temp hack
|
||||||
|
(this.state.$variables as any)._handleVariableValueChanged(variable); |
||||||
|
} |
||||||
|
|
||||||
|
if (variable.state.name === 'metricNames' && variable instanceof QueryVariable) { |
||||||
|
this.setState({ metricNames: variable.state.options }); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
static Component = ({ model }: SceneComponentProps<SelectMetricTrailView>) => { |
||||||
|
const { metricNames } = model.useState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Stack direction="column" gap={0}> |
||||||
|
<Stack direction="column" gap={2}> |
||||||
|
<Input placeholder="Search metrics" /> |
||||||
|
<div></div> |
||||||
|
</Stack> |
||||||
|
{metricNames.map((option, index) => ( |
||||||
|
<Card |
||||||
|
key={index} |
||||||
|
href={sceneGraph.interpolate(model, `\${__url.path}\${__url.params}&metric=${option.value}`)} |
||||||
|
> |
||||||
|
<Card.Heading>{String(option.value)}</Card.Heading> |
||||||
|
</Card> |
||||||
|
))} |
||||||
|
</Stack> |
||||||
|
); |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { PanelMenuItem } from '@grafana/data'; |
||||||
|
import { getDataSourceSrv } from '@grafana/runtime'; |
||||||
|
import { VizPanel } from '@grafana/scenes'; |
||||||
|
import { buildVisualQueryFromString } from 'app/plugins/datasource/prometheus/querybuilder/parsing'; |
||||||
|
|
||||||
|
import { DashboardScene } from '../dashboard-scene/scene/DashboardScene'; |
||||||
|
import { getQueryRunnerFor } from '../dashboard-scene/utils/utils'; |
||||||
|
|
||||||
|
import { DataTrailDrawer } from './DataTrailDrawer'; |
||||||
|
|
||||||
|
export function addDataTrailPanelAction(dashboard: DashboardScene, vizPanel: VizPanel, items: PanelMenuItem[]) { |
||||||
|
const queryRunner = getQueryRunnerFor(vizPanel); |
||||||
|
if (!queryRunner) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const ds = getDataSourceSrv().getInstanceSettings(queryRunner.state.datasource); |
||||||
|
if (!ds || ds.meta.id !== 'prometheus' || queryRunner.state.queries.length > 1) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const query = queryRunner.state.queries[0]; |
||||||
|
const parsedResult = buildVisualQueryFromString(query.expr); |
||||||
|
if (parsedResult.errors.length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
items.push({ |
||||||
|
text: 'Data trail', |
||||||
|
iconClassName: 'code-branch', |
||||||
|
onClick: () => { |
||||||
|
dashboard.showModal( |
||||||
|
new DataTrailDrawer({ query: parsedResult.query, dsRef: ds, timeRange: dashboard.state.$timeRange!.clone() }) |
||||||
|
); |
||||||
|
}, |
||||||
|
shortcut: 'p s', |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import { BusEventBase, BusEventWithPayload } from '@grafana/data'; |
||||||
|
import { ConstantVariable, SceneObject, SceneVariableSet } from '@grafana/scenes'; |
||||||
|
import { VariableHide } from '@grafana/schema'; |
||||||
|
|
||||||
|
export interface ActionViewDefinition { |
||||||
|
displayName: string; |
||||||
|
value: string; |
||||||
|
getScene: () => SceneObject; |
||||||
|
} |
||||||
|
|
||||||
|
export const VAR_METRIC_NAMES = 'metricNames'; |
||||||
|
export const VAR_FILTERS = 'filters'; |
||||||
|
export const VAR_FILTERS_EXPR = '{${filters}}'; |
||||||
|
export const VAR_METRIC = 'metric'; |
||||||
|
export const VAR_METRIC_EXPR = '${metric}'; |
||||||
|
export const VAR_GROUP_BY = 'groupby'; |
||||||
|
export const VAR_GROUP_BY_EXP = '${groupby}'; |
||||||
|
export const VAR_DATASOURCE = 'ds'; |
||||||
|
export const VAR_DATASOURCE_EXPR = '${ds}'; |
||||||
|
|
||||||
|
export const LOGS_METRIC = '$__logs__'; |
||||||
|
export const KEY_SQR_METRIC_VIZ_QUERY = 'sqr-metric-viz-query'; |
||||||
|
|
||||||
|
export const trailDS = { uid: VAR_DATASOURCE_EXPR }; |
||||||
|
|
||||||
|
export type MakeOptional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>; |
||||||
|
|
||||||
|
export function getVariablesWithMetricConstant(metric: string) { |
||||||
|
return new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new ConstantVariable({ |
||||||
|
name: VAR_METRIC, |
||||||
|
value: metric, |
||||||
|
hide: VariableHide.hideVariable, |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export class MetricSelectedEvent extends BusEventWithPayload<string> { |
||||||
|
public static type = 'metric-selected-event'; |
||||||
|
} |
||||||
|
|
||||||
|
export class OpenEmbeddedTrailEvent extends BusEventBase { |
||||||
|
public static type = 'open-embedded-trail-event'; |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import { urlUtil } from '@grafana/data'; |
||||||
|
import { config } from '@grafana/runtime'; |
||||||
|
import { getUrlSyncManager, sceneGraph, SceneObject, SceneTimeRange } from '@grafana/scenes'; |
||||||
|
|
||||||
|
import { DataTrail } from './DataTrail'; |
||||||
|
import { DataTrailSettings } from './DataTrailSettings'; |
||||||
|
import { MetricScene } from './MetricScene'; |
||||||
|
|
||||||
|
export function getTrailFor(model: SceneObject): DataTrail { |
||||||
|
return sceneGraph.getAncestor(model, DataTrail); |
||||||
|
} |
||||||
|
|
||||||
|
export function getTrailSettings(model: SceneObject): DataTrailSettings { |
||||||
|
return sceneGraph.getAncestor(model, DataTrail).state.settings; |
||||||
|
} |
||||||
|
|
||||||
|
export function newMetricsTrail(): DataTrail { |
||||||
|
return new DataTrail({ |
||||||
|
//initialDS: 'gdev-prometheus',
|
||||||
|
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
||||||
|
//initialFilters: [{ key: 'job', operator: '=', value: 'grafana' }],
|
||||||
|
embedded: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getUrlForTrail(trail: DataTrail) { |
||||||
|
const params = getUrlSyncManager().getUrlState(trail); |
||||||
|
return urlUtil.renderUrl('/data-trails/trail', params); |
||||||
|
} |
||||||
|
|
||||||
|
export function getMetricSceneFor(model: SceneObject): MetricScene { |
||||||
|
if (model instanceof MetricScene) { |
||||||
|
return model; |
||||||
|
} |
||||||
|
|
||||||
|
if (model.parent) { |
||||||
|
return getMetricSceneFor(model.parent); |
||||||
|
} |
||||||
|
|
||||||
|
console.error('Unable to find graph view for', model); |
||||||
|
|
||||||
|
throw new Error('Unable to find trail'); |
||||||
|
} |
||||||
|
|
||||||
|
export function getColorByIndex(index: number) { |
||||||
|
const visTheme = config.theme2.visualization; |
||||||
|
return visTheme.getColorByName(visTheme.palette[index % 8]); |
||||||
|
} |
||||||
Loading…
Reference in new issue