diff --git a/.betterer.results b/.betterer.results index 10cd3e30550..8b6c42a82a4 100644 --- a/.betterer.results +++ b/.betterer.results @@ -6153,9 +6153,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "10"], [0, 0, 0, "Unexpected any. Specify a different type.", "11"] ], - "public/app/features/trails/ActionTabs/MetricOverviewScene.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "public/app/features/trails/Breakdown/AddToFiltersGraphAction.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], diff --git a/public/app/features/trails/ActionTabs/MetricOverviewScene.tsx b/public/app/features/trails/ActionTabs/MetricOverviewScene.tsx deleted file mode 100644 index 021a6cbe26e..00000000000 --- a/public/app/features/trails/ActionTabs/MetricOverviewScene.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import { useEffect } from 'react'; - -import { isValidLegacyName, PromMetricsMetadataItem } from '@grafana/prometheus'; -import { - QueryVariable, - SceneComponentProps, - sceneGraph, - SceneObjectBase, - SceneObjectState, - VariableDependencyConfig, - VariableValueOption, -} from '@grafana/scenes'; -import { Stack, Text, TextLink } from '@grafana/ui'; -import { Trans } from 'app/core/internationalization'; - -import { MetricScene } from '../MetricScene'; -import { StatusWrapper } from '../StatusWrapper'; -import { getUnitFromMetric } from '../autoQuery/units'; -import { reportExploreMetrics } from '../interactions'; -import { updateOtelJoinWithGroupLeft } from '../otel/util'; -import { VAR_DATASOURCE_EXPR, VAR_GROUP_BY, VAR_OTEL_GROUP_LEFT } from '../shared'; -import { getMetricSceneFor, getTrailFor } from '../utils'; - -export interface MetricOverviewSceneState extends SceneObjectState { - metadata?: PromMetricsMetadataItem; - metadataLoading?: boolean; -} - -export class MetricOverviewScene extends SceneObjectBase { - protected _variableDependency = new VariableDependencyConfig(this, { - variableNames: [VAR_DATASOURCE_EXPR], - onReferencedVariableValueChanged: this.onReferencedVariableValueChanged.bind(this), - }); - - constructor(state: Partial) { - super({ - ...state, - }); - - this.addActivationHandler(this._onActivate.bind(this)); - } - - 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 _onActivate() { - this.updateMetadata(); - } - - private onReferencedVariableValueChanged() { - this.updateMetadata(); - this.updateOtelGroupLeft(); - } - - private async updateMetadata() { - this.setState({ metadataLoading: true, metadata: undefined }); - const metricScene = getMetricSceneFor(this); - const metric = metricScene.state.metric; - - const trail = getTrailFor(this); - const metadata = await trail.getMetricMetadata(metric); - this.setState({ metadata, metadataLoading: false }); - } - - private async updateOtelGroupLeft() { - const trail = getTrailFor(this); - - if (trail.state.useOtelExperience) { - await updateOtelJoinWithGroupLeft(trail, trail.state.metric ?? ''); - } - } - - public static Component = ({ model }: SceneComponentProps) => { - const { metadata, metadataLoading } = model.useState(); - const variable = model.getVariable(); - const { loading: labelsLoading, options: labelOptions } = variable.useState(); - - let allLabelOptions = labelOptions; - - const trail = getTrailFor(model); - const { useOtelExperience } = trail.useState(); - - if (useOtelExperience) { - // when the group left variable is changed we should get all the resource attributes + labels - const resourceAttributes = sceneGraph.lookupVariable(VAR_OTEL_GROUP_LEFT, trail)?.getValue(); - if (typeof resourceAttributes === 'string') { - const attributeArray: VariableValueOption[] = resourceAttributes.split(',').map((el) => { - let label = el; - if (!isValidLegacyName(el)) { - // remove '' from label - label = el.slice(1, -1); - } - return { label, value: el }; - }); - allLabelOptions = attributeArray.concat(allLabelOptions); - } - } - - useEffect(() => { - if (useOtelExperience) { - // this will update the group left variable - model.updateOtelGroupLeft(); - } - }, [model, useOtelExperience]); - - // Get unit name from the metric name - const metricScene = getMetricSceneFor(model); - const metric = metricScene.state.metric; - let unit = getUnitFromMetric(metric) ?? 'Unknown'; - return ( - - - <> - - - Description - -
- {metadata?.help ? ( -
{metadata?.help}
- ) : ( - - No description available - - )} -
- - - - Type - - {metadata?.type ? ( -
{metadata?.type}
- ) : ( - - Unknown - - )} - - - - Unit - - {metadata?.unit ?
{metadata?.unit}
: {unit}} - - - - {useOtelExperience ? ( - Attributes - ) : ( - Labels - )} - - {allLabelOptions.length === 0 && 'Unable to fetch labels.'} - {allLabelOptions.map((l) => ( - { - event.preventDefault(); - event.stopPropagation(); - sceneGraph.getAncestor(model, MetricScene).setActionView('breakdown'); - const groupByVar = sceneGraph.lookupVariable(VAR_GROUP_BY, model); - if (groupByVar instanceof QueryVariable && l.label != null) { - reportExploreMetrics('label_selected', { label: l.label, cause: 'overview_link' }); - groupByVar.setState({ value: l.value }); - } - return false; - }} - > - {l.label!} - - ))} - - - - - ); - }; -} - -export function buildMetricOverviewScene() { - return new MetricOverviewScene({}); -} diff --git a/public/app/features/trails/MetricScene.tsx b/public/app/features/trails/MetricScene.tsx index e2920e510d9..8014f3c2bc5 100644 --- a/public/app/features/trails/MetricScene.tsx +++ b/public/app/features/trails/MetricScene.tsx @@ -16,7 +16,6 @@ import { Box, Icon, LinkButton, Stack, Tab, TabsBar, ToolbarButton, Tooltip, use import { getExploreUrl } from '../../core/utils/explore'; -import { buildMetricOverviewScene } from './ActionTabs/MetricOverviewScene'; import { buildRelatedMetricsScene } from './ActionTabs/RelatedMetricsScene'; import { buildLabelBreakdownActionScene } from './Breakdown/LabelBreakdownScene'; import { MAIN_PANEL_MAX_HEIGHT, MAIN_PANEL_MIN_HEIGHT, MetricGraphScene } from './MetricGraphScene'; @@ -39,7 +38,7 @@ import { } from './shared'; import { getDataSource, getTrailFor, getUrlForTrail } from './utils'; -const relatedLogsFeatureEnabled = config.featureToggles.exploreMetricsRelatedLogs; +const { exploreMetricsRelatedLogs } = config.featureToggles; export interface MetricSceneState extends SceneObjectState { body: MetricGraphScene; @@ -69,7 +68,7 @@ export class MetricScene extends SceneObjectBase { private _onActivate() { if (this.state.actionView === undefined) { - this.setActionView('overview'); + this.setActionView('breakdown'); } if (config.featureToggles.enableScopesInMetricsExplore) { @@ -124,7 +123,6 @@ export class MetricScene extends SceneObjectBase { } const actionViewsDefinitions: ActionViewDefinition[] = [ - { displayName: 'Overview', value: 'overview', getScene: buildMetricOverviewScene }, { displayName: 'Breakdown', value: 'breakdown', getScene: buildLabelBreakdownActionScene }, { displayName: 'Related metrics', @@ -134,7 +132,7 @@ const actionViewsDefinitions: ActionViewDefinition[] = [ }, ]; -if (relatedLogsFeatureEnabled) { +if (exploreMetricsRelatedLogs) { actionViewsDefinitions.push({ displayName: 'Related logs', value: 'related_logs', @@ -197,7 +195,7 @@ export class MetricActionBar extends SceneObjectBase { icon="compass" tooltip="Open in explore" onClick={model.openExploreLink} - > + /> { if (!this.state.panel) { const { autoQuery, metric } = getMetricSceneFor(this).state; - this.setState({ panel: this.getVizPanelFor(autoQuery.main, metric), metric }); + this.getVizPanelFor(autoQuery.main, metric).then((panel) => + this.setState({ + panel, + metric, + }) + ); } } @@ -32,11 +38,15 @@ export class AutoVizPanel extends SceneObjectBase { const def = metricScene.state.autoQuery.variants.find((q) => q.variant === variant)!; - this.setState({ panel: this.getVizPanelFor(def) }); + this.getVizPanelFor(def).then((panel) => this.setState({ panel })); metricScene.setState({ queryDef: def }); }; - private getVizPanelFor(def: AutoQueryDef, metric?: string) { + private async getVizPanelFor(def: AutoQueryDef, metric?: string) { + const trail = getTrailFor(this); + const metadata = await trail.getMetricMetadata(metric); + const description = getMetricDescription(metadata); + return def .vizBuilder() .setData( @@ -46,6 +56,7 @@ export class AutoVizPanel extends SceneObjectBase { queries: def.queries, }) ) + .setDescription(description) .setHeaderActions([ new AutoVizPanelQuerySelector({ queryDef: def, onChangeQuery: this.onChangeQuery }), new AddToExplorationButton({ labelName: metric ?? this.state.metric }), diff --git a/public/app/features/trails/interactions.ts b/public/app/features/trails/interactions.ts index c0306b01410..1488f6fe597 100644 --- a/public/app/features/trails/interactions.ts +++ b/public/app/features/trails/interactions.ts @@ -13,8 +13,6 @@ type Interactions = { cause: ( // By clicking the "select" button on that label's breakdown panel | 'breakdown_panel' - // By clicking the label link on the overview - | 'overview_link' // By clicking on the label selector at the top of the breakdown | 'selector' ); diff --git a/public/app/features/trails/otel/util.ts b/public/app/features/trails/otel/util.ts index 7f0e1ad4f61..cd96351c28b 100644 --- a/public/app/features/trails/otel/util.ts +++ b/public/app/features/trails/otel/util.ts @@ -218,7 +218,7 @@ export function limitOtelMatchTerms( /** * This updates the OTel join query variable that is interpolated into all queries. - * When a user is in the breakdown or overview tab, they may want to breakdown a metric by a resource attribute. + * When a user is in the breakdown tab, they may want to breakdown a metric by a resource attribute. * The only way to do this is by enriching the metric with the target_info resource. * This is done by joining on a unique identifier for the resource, job and instance. * The we can get the resource attributes for the metric, enrich the metric with the join query and diff --git a/public/app/features/trails/shared.ts b/public/app/features/trails/shared.ts index 41820ce0239..aee76d46be8 100644 --- a/public/app/features/trails/shared.ts +++ b/public/app/features/trails/shared.ts @@ -2,7 +2,7 @@ import { BusEventBase, BusEventWithPayload } from '@grafana/data'; import { ConstantVariable, SceneObject } from '@grafana/scenes'; import { VariableHide } from '@grafana/schema'; -export type ActionViewType = 'overview' | 'breakdown' | 'related_logs' | 'related'; +export type ActionViewType = 'breakdown' | 'related_logs' | 'related'; export interface ActionViewDefinition { displayName: string; diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 536293a7b70..b372b474e2d 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -3344,15 +3344,6 @@ "start-your-metrics-exploration": "Start your metrics exploration!", "subtitle": "Explore your Prometheus-compatible metrics without writing a query." }, - "metric-overview": { - "description-label": "Description", - "labels": "Labels", - "metric-attributes": "Attributes", - "no-description": "No description available", - "type-label": "Type", - "unit-label": "Unit", - "unknown-type": "Unknown" - }, "metric-select": { "filter-by": "Filter by", "native-histogram": "Native Histogram", diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index e016299a6c3..0766bbfa14c 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -3344,15 +3344,6 @@ "start-your-metrics-exploration": "Ŝŧäřŧ yőūř męŧřįčş ęχpľőřäŧįőʼn!", "subtitle": "Ēχpľőřę yőūř Přőmęŧĥęūş-čőmpäŧįþľę męŧřįčş ŵįŧĥőūŧ ŵřįŧįʼnģ ä qūęřy." }, - "metric-overview": { - "description-label": "Đęşčřįpŧįőʼn", - "labels": "Ŀäþęľş", - "metric-attributes": "Åŧŧřįþūŧęş", - "no-description": "Ńő đęşčřįpŧįőʼn äväįľäþľę", - "type-label": "Ŧypę", - "unit-label": "Ůʼnįŧ", - "unknown-type": "Ůʼnĸʼnőŵʼn" - }, "metric-select": { "filter-by": "Fįľŧęř þy", "native-histogram": "Ńäŧįvę Ħįşŧőģřäm",