From 59d4b91e4c84b1d60ef9a790a95497576aaebbeb Mon Sep 17 00:00:00 2001 From: Pepe Cano <825430+ppcano@users.noreply.github.com> Date: Thu, 28 Nov 2024 12:18:45 +0100 Subject: [PATCH] Alerting: Explore button in Insights view (#96496) * Alerting: Explore button in Insights view * Fix wrong insights queries * replace `$rule_group` in the query expression with the actual rule group value * Add info tooltip in `Insights` title * Remove unused `RatingModal` component * fix betterer results * remove unnecessary `React.Fragment` * Remove unnecessary text space --- .betterer.results | 11 +-- .../alerting/unified/home/Insights.tsx | 24 ++++++- ...RatingModal.tsx => InsightsMenuButton.tsx} | 68 ++++++++++++++++++- .../unified/insights/grafana/Active.tsx | 4 +- .../insights/grafana/AlertsByStateScene.tsx | 4 +- .../grafana/EvalSuccessVsFailuresScene.tsx | 8 +-- .../insights/grafana/InstanceStatusScene.tsx | 4 +- .../grafana/MissedIterationsScene.tsx | 4 +- .../grafana/MostFiredInstancesTable.tsx | 4 +- .../unified/insights/grafana/Paused.tsx | 4 +- .../insights/grafana/RulesByEvaluation.tsx | 4 +- .../grafana/RulesByEvaluationPercentage.tsx | 4 +- .../grafana/alertmanager/AlertsByState.tsx | 4 +- .../alertmanager/NotificationsScene.tsx | 4 +- .../alertmanager/SilencesByStateScene.tsx | 4 +- .../unified/insights/mimir/AlertsByState.tsx | 4 +- .../unified/insights/mimir/InvalidConfig.tsx | 4 +- .../unified/insights/mimir/Notifications.tsx | 8 +-- .../unified/insights/mimir/Silences.tsx | 4 +- ...upEvaluationDurationIntervalRatioScene.tsx | 4 +- .../RuleGroupEvaluationDurationScene.tsx | 4 +- .../perGroup/RuleGroupEvaluationsScene.tsx | 8 +-- .../mimir/perGroup/RuleGroupIntervalScene.tsx | 4 +- .../mimir/perGroup/RulesPerGroupScene.tsx | 4 +- .../rules/EvalSuccessVsFailuresScene.tsx | 8 +-- .../unified/insights/mimir/rules/Firing.tsx | 4 +- .../insights/mimir/rules/InstancesByState.tsx | 4 +- .../rules/InstancesPercentageByState.tsx | 4 +- .../mimir/rules/MissedIterationsScene.tsx | 4 +- .../insights/mimir/rules/MostFiredRules.tsx | 4 +- .../unified/insights/mimir/rules/Pending.tsx | 4 +- 31 files changed, 160 insertions(+), 71 deletions(-) rename public/app/features/alerting/unified/insights/{RatingModal.tsx => InsightsMenuButton.tsx} (53%) diff --git a/.betterer.results b/.betterer.results index 2f3246ea376..7d4f307f249 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1731,7 +1731,9 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "13"] ], "public/app/features/alerting/unified/home/Insights.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/alerting/unified/home/PluginIntegrations.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] @@ -1742,9 +1744,10 @@ exports[`better eslint`] = { "public/app/features/alerting/unified/hooks/useControlledFieldArray.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/features/alerting/unified/insights/RatingModal.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] + "public/app/features/alerting/unified/insights/InsightsMenuButton.tsx:5381": [ + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/alerting/unified/mocks.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], diff --git a/public/app/features/alerting/unified/home/Insights.tsx b/public/app/features/alerting/unified/home/Insights.tsx index 43765a28c02..2bf21799cc2 100644 --- a/public/app/features/alerting/unified/home/Insights.tsx +++ b/public/app/features/alerting/unified/home/Insights.tsx @@ -14,6 +14,7 @@ import { SceneVariableSet, VariableValueSelectors, } from '@grafana/scenes'; +import { Icon, Text, Tooltip } from '@grafana/ui'; import { config } from '../../../../core/config'; import { SectionFooter } from '../insights/SectionFooter'; @@ -173,7 +174,28 @@ export function getInsightsScenes() { controls: [ new SceneReactObject({ component: SectionSubheader, - props: { children:
Monitor the status of your system.
}, + props: { + children: ( + <> + + Monitor the status of your system{' '} + + Alerting insights provides pre-built dashboards to monitor your alerting data. +
+
+ You can identify patterns in why things go wrong and discover trends in alerting performance + within your organization. + + } + > + + + + + ), + }, }), new SceneControlsSpacer(), new SceneTimePicker({}), diff --git a/public/app/features/alerting/unified/insights/RatingModal.tsx b/public/app/features/alerting/unified/insights/InsightsMenuButton.tsx similarity index 53% rename from public/app/features/alerting/unified/insights/RatingModal.tsx rename to public/app/features/alerting/unified/insights/InsightsMenuButton.tsx index 8611d4602e5..57883227bee 100644 --- a/public/app/features/alerting/unified/insights/RatingModal.tsx +++ b/public/app/features/alerting/unified/insights/InsightsMenuButton.tsx @@ -1,12 +1,67 @@ import { css } from '@emotion/css'; import { useState } from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; +import { ExploreUrlState, serializeStateToUrlParam, toURLRange, GrafanaTheme2 } from '@grafana/data'; +import { + SceneComponentProps, + sceneGraph, + SceneObjectBase, + SceneObjectState, + SceneTimeRangeState, + SceneVariableSetState, +} from '@grafana/scenes'; +import { DataQuery } from '@grafana/schema'; import { Button, Dropdown, Icon, IconButton, Menu, Modal, useStyles2 } from '@grafana/ui'; import { trackInsightsFeedback } from '../Analytics'; -export function InsightsRatingModal({ panel }: { panel: string }) { +type DataQueryWithExpr = DataQuery & { expr: string }; + +const getPrometheusExploreUrl = ({ + queries, + range, + variables, +}: { + queries?: DataQueryWithExpr[]; + range: SceneTimeRangeState; + variables: SceneVariableSetState; +}): string => { + // In Mimir-per-group panels, replace `$rule_group` in the query expression with the actual rule group value + const ruleGroup = variables?.variables.find((v) => v.state.name === 'rule_group')?.getValue() || null; + if (ruleGroup !== null) { + queries = queries?.map((query) => { + return { + ...query, + expr: query.expr.replace('$rule_group', String(ruleGroup)), + }; + }); + } + const urlState: ExploreUrlState = { + datasource: (queries?.length && queries[0].datasource?.uid) || null, + queries: + queries?.map(({ expr, refId }, i) => { + return { expr, refId }; + }) || [], + range: toURLRange(range ? { from: range.from, to: range.to } : { from: 'now-1h', to: 'now' }), + }; + + const param = encodeURIComponent(serializeStateToUrlParam(urlState)); + + return `/explore?left=${param}`; +}; + +const InsightsMenuButtonRenderer = ({ model }: SceneComponentProps) => { + const data = sceneGraph.getData(model).useState(); + const timeRange = sceneGraph.getTimeRange(model).useState(); + const variables = sceneGraph.getVariables(model).useState(); + const panel = model.state.panel; + + const url = getPrometheusExploreUrl({ + queries: data.data?.request?.targets as DataQueryWithExpr[], + range: timeRange, + variables: variables, + }); + const styles = useStyles2(getStyles); const [showModal, setShowModal] = useState(false); @@ -50,6 +105,7 @@ export function InsightsRatingModal({ panel }: { panel: string }) { const menu = ( + setShowModal(true)} /> ); @@ -62,6 +118,14 @@ export function InsightsRatingModal({ panel }: { panel: string }) { {modal} ); +}; + +interface InsightsMenuButtonState extends SceneObjectState { + panel: string; +} + +export class InsightsMenuButton extends SceneObjectBase { + static Component = InsightsMenuButtonRenderer; } const getStyles = (theme: GrafanaTheme2) => ({ diff --git a/public/app/features/alerting/unified/insights/grafana/Active.tsx b/public/app/features/alerting/unified/insights/grafana/Active.tsx index 46528c23d69..dfea1cc8328 100644 --- a/public/app/features/alerting/unified/insights/grafana/Active.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Active.tsx @@ -3,7 +3,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getActiveGrafanaAlertsScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -41,7 +41,7 @@ export function getActiveGrafanaAlertsScene(datasource: DataSourceRef, panelTitl ], }) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx index 55ec514c57c..f9307c94442 100644 --- a/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner } import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getGrafanaInstancesByStateScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -56,7 +56,7 @@ export function getGrafanaInstancesByStateScene(datasource: DataSourceRef, panel .matchFieldsWithName('nodata') .overrideColor(overrideToFixedColor('nodata')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx index b3d9921660f..6ce91ac7570 100644 --- a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getGrafanaEvalSuccessVsFailuresScene(datasource: DataSourceRef, panelTitle: string) { const exprA = INSTANCE_ID @@ -18,13 +18,13 @@ export function getGrafanaEvalSuccessVsFailuresScene(datasource: DataSourceRef, queries: [ { refId: 'A', - exprA, + expr: exprA, range: true, legendFormat: 'success', }, { refId: 'B', - exprB, + expr: exprB, range: true, legendFormat: 'failed', }, @@ -46,7 +46,7 @@ export function getGrafanaEvalSuccessVsFailuresScene(datasource: DataSourceRef, .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx index 647c27c00ff..990d3d621e5 100644 --- a/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getInstanceStatByStatusScene( datasource: DataSourceRef, panelTitle: string, @@ -33,7 +33,7 @@ export function getInstanceStatByStatusScene( .setData(query) .setOverrides((b) => b.matchFieldsWithName(status).overrideColor(overrideToFixedColor(status))) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx index 7c1976df590..2bc5e3d426b 100644 --- a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx @@ -11,7 +11,7 @@ import { import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getGrafanaMissedIterationsScene(datasource: DataSourceRef, panelTitle: string) { const expr = `sum by(rule_group) (grafanacloud_instance_rule_group_iterations_missed_total:rate5m{id="${INSTANCE_ID}"})`; @@ -62,7 +62,7 @@ export function getGrafanaMissedIterationsScene(datasource: DataSourceRef, panel .setData(transformation) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx index 0c5a0e44950..e14ba7d0d6e 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx @@ -14,7 +14,7 @@ import { Link, useStyles2 } from '@grafana/ui'; import { PANEL_STYLES } from '../../home/Insights'; import { createRelativeUrl } from '../../utils/url'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getMostFiredInstancesScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -101,7 +101,7 @@ export function getMostFiredInstancesScene(datasource: DataSourceRef, panelTitle .setDescription('The alert rule instances that have fired the most') .setData(transformation) .setNoValue('No new alerts fired last week') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Paused.tsx b/public/app/features/alerting/unified/insights/grafana/Paused.tsx index eb7b1abb851..1607bab80f4 100644 --- a/public/app/features/alerting/unified/insights/grafana/Paused.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Paused.tsx @@ -3,7 +3,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getPausedGrafanaAlertsScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -41,7 +41,7 @@ export function getPausedGrafanaAlertsScene(datasource: DataSourceRef, panelTitl ], }) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx index 57d9bb90cc8..fb700d701e5 100644 --- a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getGrafanaRulesByEvaluationScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -32,7 +32,7 @@ export function getGrafanaRulesByEvaluationScene(datasource: DataSourceRef, pane .setOverrides((b) => b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx index a6728f14953..bbb2d854702 100644 --- a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getGrafanaRulesByEvaluationPercentageScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -35,7 +35,7 @@ export function getGrafanaRulesByEvaluationPercentageScene(datasource: DataSourc .setOverrides((b) => b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByState.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByState.tsx index 0796b90a644..60e843a80b6 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByState.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/AlertsByState.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getAlertsByStateScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -30,7 +30,7 @@ export function getAlertsByStateScene(datasource: DataSourceRef, panelTitle: str .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('active').overrideColor(overrideToFixedColor('active'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx index 27f542f91b5..36f83ec7359 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getGrafanaAlertmanagerNotificationsScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -38,7 +38,7 @@ export function getGrafanaAlertmanagerNotificationsScene(datasource: DataSourceR .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx index a1b68a0e0ed..a5664d87fa8 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getGrafanaAlertmanagerSilencesScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -29,7 +29,7 @@ export function getGrafanaAlertmanagerSilencesScene(datasource: DataSourceRef, p .setData(query) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx index 415423fb212..ae12e43dc23 100644 --- a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getAlertsByStateScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -30,7 +30,7 @@ export function getAlertsByStateScene(datasource: DataSourceRef, panelTitle: str .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('active').overrideColor(overrideToFixedColor('active'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx index dba5a5b7ae3..8c9a43227cf 100644 --- a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx +++ b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getInvalidConfigScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -29,7 +29,7 @@ export function getInvalidConfigScene(datasource: DataSourceRef, panelTitle: str .setData(query) .setUnit('bool_yes_no') .setOption('graphMode', BigValueGraphMode.None) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx index ca7576f8e22..f21497c946e 100644 --- a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getNotificationsScene(datasource: DataSourceRef, panelTitle: string) { const exprA = INSTANCE_ID @@ -18,13 +18,13 @@ export function getNotificationsScene(datasource: DataSourceRef, panelTitle: str queries: [ { refId: 'A', - exprA, + expr: exprA, range: true, legendFormat: 'success', }, { refId: 'B', - exprB, + expr: exprB, range: true, legendFormat: 'failed', }, @@ -46,7 +46,7 @@ export function getNotificationsScene(datasource: DataSourceRef, panelTitle: str .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Silences.tsx b/public/app/features/alerting/unified/insights/mimir/Silences.tsx index 01646a5cefe..8cbddfd0205 100644 --- a/public/app/features/alerting/unified/insights/mimir/Silences.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Silences.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../home/Insights'; -import { InsightsRatingModal } from '../RatingModal'; +import { InsightsMenuButton } from '../InsightsMenuButton'; export function getSilencesScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -29,7 +29,7 @@ export function getSilencesScene(datasource: DataSourceRef, panelTitle: string) .setData(query) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx index bfca1bbaada..50f4084ac7c 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, ThresholdsMode, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getRuleGroupEvaluationDurationIntervalRatioScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -48,7 +48,7 @@ export function getRuleGroupEvaluationDurationIntervalRatioScene(datasource: Dat }, ], }) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx index db28b864fba..12ff616336a 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getRuleGroupEvaluationDurationScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -37,7 +37,7 @@ export function getRuleGroupEvaluationDurationScene(datasource: DataSourceRef, p fixedColor: 'blue', }) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx index 5c872356be6..169731864bb 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getRuleGroupEvaluationsScene(datasource: DataSourceRef, panelTitle: string) { const exprA = INSTANCE_ID @@ -18,13 +18,13 @@ export function getRuleGroupEvaluationsScene(datasource: DataSourceRef, panelTit queries: [ { refId: 'A', - exprA, + expr: exprA, range: true, legendFormat: 'success', }, { refId: 'B', - exprB, + expr: exprB, range: true, legendFormat: 'failed', }, @@ -46,7 +46,7 @@ export function getRuleGroupEvaluationsScene(datasource: DataSourceRef, panelTit .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx index ced1d761532..f54fc582bc4 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getRuleGroupIntervalScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -29,7 +29,7 @@ export function getRuleGroupIntervalScene(datasource: DataSourceRef, panelTitle: .setData(query) .setUnit('s') .setOption('graphMode', BigValueGraphMode.Area) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx index 33c77d319db..c2c9ac1b44d 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { INSTANCE_ID, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getRulesPerGroupScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -36,7 +36,7 @@ export function getRulesPerGroupScene(datasource: DataSourceRef, panelTitle: str }) ) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx index 28722367a73..2cda38b4acf 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getEvalSuccessVsFailuresScene(datasource: DataSourceRef, panelTitle: string) { const exprA = INSTANCE_ID @@ -18,13 +18,13 @@ export function getEvalSuccessVsFailuresScene(datasource: DataSourceRef, panelTi queries: [ { refId: 'A', - exprA, + expr: exprA, range: true, legendFormat: 'success', }, { refId: 'B', - exprB, + expr: exprB, range: true, legendFormat: 'failed', }, @@ -40,7 +40,7 @@ export function getEvalSuccessVsFailuresScene(datasource: DataSourceRef, panelTi .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('failed').overrideColor(overrideToFixedColor('failed'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx index 0d35c6d4ec3..2b3532924a0 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx @@ -3,7 +3,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getFiringCloudAlertsScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,7 +37,7 @@ export function getFiringCloudAlertsScene(datasource: DataSourceRef, panelTitle: ], }) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx b/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx index b054a358c98..962cbf80cb7 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getInstancesByStateScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -26,7 +26,7 @@ export function getInstancesByStateScene(datasource: DataSourceRef, panelTitle: .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx index 91cfb75801a..05a709085c8 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getInstancesPercentageByStateScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -29,7 +29,7 @@ export function getInstancesPercentageByStateScene(datasource: DataSourceRef, pa .setMax(1) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx index 59721817c19..2b5495a3e22 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { INSTANCE_ID, overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getMissedIterationsScene(datasource: DataSourceRef, panelTitle: string) { const expr = INSTANCE_ID @@ -31,7 +31,7 @@ export function getMissedIterationsScene(datasource: DataSourceRef, panelTitle: .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOption('legend', { showLegend: false }) .setOverrides((b) => b.matchFieldsWithName('missed').overrideColor(overrideToFixedColor('missed'))) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx index 339c7b03651..2af5919329d 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx @@ -2,7 +2,7 @@ import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner } import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getMostFiredRulesScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -43,7 +43,7 @@ export function getMostFiredRulesScene(datasource: DataSourceRef, panelTitle: st .setTitle(panelTitle) .setDescription('The alert rules that have fired the most') .setData(transformation) - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx index 7667300015a..69501ca4bbf 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx @@ -3,7 +3,7 @@ import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes' import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; -import { InsightsRatingModal } from '../../RatingModal'; +import { InsightsMenuButton } from '../../InsightsMenuButton'; export function getPendingCloudAlertsScene(datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,7 +37,7 @@ export function getPendingCloudAlertsScene(datasource: DataSourceRef, panelTitle ], }) .setNoValue('0') - .setHeaderActions() + .setHeaderActions([new InsightsMenuButton({ panel: panelTitle })]) .build(), }); }