diff --git a/public/app/features/alerting/unified/Analytics.ts b/public/app/features/alerting/unified/Analytics.ts index b7f57cfa723..d405c7b4f46 100644 --- a/public/app/features/alerting/unified/Analytics.ts +++ b/public/app/features/alerting/unified/Analytics.ts @@ -104,6 +104,15 @@ export const trackNewAlerRuleFormError = async (props: AlertRuleTrackingProps & reportInteraction('grafana_alerting_rule_form_error', props); }; +export const trackInsightsFeedback = async (props: { useful: boolean; panel: string }) => { + const defaults = { + grafana_version: config.buildInfo.version, + org_id: contextSrv.user.orgId, + user_id: contextSrv.user.id, + }; + reportInteraction('grafana_alerting_insights', { ...defaults, ...props }); +}; + export type AlertRuleTrackingProps = { user_id: number; grafana_version?: string; diff --git a/public/app/features/alerting/unified/insights/RatingModal.tsx b/public/app/features/alerting/unified/insights/RatingModal.tsx new file mode 100644 index 00000000000..3ae9bc69f67 --- /dev/null +++ b/public/app/features/alerting/unified/insights/RatingModal.tsx @@ -0,0 +1,95 @@ +import { css } from '@emotion/css'; +import React, { useState } from 'react'; + +import { GrafanaTheme2 } from '@grafana/data/src/themes'; +import { Button, Dropdown, Icon, IconButton, Menu, Modal, useStyles2 } from '@grafana/ui'; + +import { trackInsightsFeedback } from '../Analytics'; + +export function InsightsRatingModal({ panel }: { panel: string }) { + const styles = useStyles2(getStyles); + + const [showModal, setShowModal] = useState(false); + + const onDismiss = () => { + setShowModal(false); + }; + + const onButtonClick = (useful: boolean) => { + trackInsightsFeedback({ useful, panel: panel }); + onDismiss(); + }; + + const modal = ( + +
+

Help us improve this page by telling us whether this panel is useful to you!

+
+ + +
+
+
+ ); + + const menu = ( + + setShowModal(true)} /> + + ); + + return ( +
+ + + + {modal} +
+ ); +} + +const getStyles = (theme: GrafanaTheme2) => ({ + buttonsContainer: css({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch', + gap: '25px', + }), + buttonContainer: css({ + height: '150px', + width: '150px', + cursor: 'pointer', + justifyContent: 'center', + }), + button: css({ + display: 'flex', + flexDirection: 'column', + }), + container: css({ + maxWidth: '370px', + }), + menu: css({ + height: '25px', + margin: '0', + }), + thumbsdown: css({ + transform: 'scale(-1, -1);', + }), +}); diff --git a/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx index 0a6cf12267a..02463143376 100644 --- a/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getGrafanaInstancesByStateScene( timeRange: SceneTimeRange, @@ -43,6 +46,7 @@ export function getGrafanaInstancesByStateScene( .matchFieldsWithName('nodata') .overrideColor(overrideToFixedColor('nodata')) ) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx index 62a8bda86cd..f4b05be7441 100644 --- a/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getGrafanaEvalSuccessVsFailuresScene( timeRange: SceneTimeRange, @@ -42,6 +45,7 @@ export function getGrafanaEvalSuccessVsFailuresScene( .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Firing.tsx b/public/app/features/alerting/unified/insights/grafana/Firing.tsx index a4c01935a9d..672dd2e867a 100644 --- a/public/app/features/alerting/unified/insights/grafana/Firing.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Firing.tsx @@ -1,8 +1,11 @@ +import React from 'react'; + import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,6 +40,7 @@ export function getFiringGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc ], }) .setNoValue('0') + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx index f73b353e60f..132f9416d47 100644 --- a/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx @@ -1,8 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { overrideToFixedColor } from '../../home/Insights'; - +import { InsightsRatingModal } from '../RatingModal'; export function getInstanceStatByStatusScene( timeRange: SceneTimeRange, datasource: DataSourceRef, @@ -30,6 +32,7 @@ export function getInstanceStatByStatusScene( .setData(query) .setOverrides((b) => b.matchFieldsWithName(status).overrideColor(overrideToFixedColor(status))) .setNoValue('0') + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx index d079fddd7bd..43226ebc12d 100644 --- a/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Observable, map } from 'rxjs'; import { DataFrame } from '@grafana/data'; @@ -12,6 +13,7 @@ import { import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getGrafanaMissedIterationsScene( timeRange: SceneTimeRange, @@ -66,6 +68,7 @@ export function getGrafanaMissedIterationsScene( .setData(transformation) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx index 07ae5b7c077..11d683d2e0e 100644 --- a/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx +++ b/public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx @@ -16,6 +16,7 @@ import { Link, useStyles2 } from '@grafana/ui'; import { PANEL_STYLES } from '../../home/Insights'; import { createUrl } from '../../utils/url'; +import { InsightsRatingModal } from '../RatingModal'; export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -104,6 +105,7 @@ export function getMostFiredInstancesScene(timeRange: SceneTimeRange, datasource .setDescription(panelTitle) .setData(transformation) .setNoValue('No new alerts fired last week') + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/Paused.tsx b/public/app/features/alerting/unified/insights/grafana/Paused.tsx index 1ddd5dcb6c2..8c3e5b60c7e 100644 --- a/public/app/features/alerting/unified/insights/grafana/Paused.tsx +++ b/public/app/features/alerting/unified/insights/grafana/Paused.tsx @@ -1,8 +1,11 @@ +import React from 'react'; + import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,6 +40,7 @@ export function getPausedGrafanaAlertsScene(timeRange: SceneTimeRange, datasourc ], }) .setNoValue('0') + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx index bd4ebabc668..89171b744eb 100644 --- a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getGrafanaRulesByEvaluationScene( timeRange: SceneTimeRange, @@ -32,6 +35,7 @@ export function getGrafanaRulesByEvaluationScene( .setOverrides((b) => b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation')) ) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx index ebc91e8172c..384f4fcff06 100644 --- a/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx +++ b/public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getGrafanaRulesByEvaluationPercentageScene( timeRange: SceneTimeRange, @@ -35,6 +38,7 @@ export function getGrafanaRulesByEvaluationPercentageScene( .setOverrides((b) => b.matchFieldsWithName('active evaluation').overrideColor(overrideToFixedColor('active evaluation')) ) + .setHeaderActions() .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 55801286c9b..57e3a6c9714 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getGrafanaAlertmanagerNotificationsScene( timeRange: SceneTimeRange, @@ -41,6 +44,7 @@ export function getGrafanaAlertmanagerNotificationsScene( .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) + .setHeaderActions() .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 6cd9c679667..fb9ce64949c 100644 --- a/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx +++ b/public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getGrafanaAlertmanagerSilencesScene( timeRange: SceneTimeRange, @@ -28,6 +31,7 @@ export function getGrafanaAlertmanagerSilencesScene( .setDescription(panelTitle) .setData(query) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx index 7c5cd0ce137..c4ea820c758 100644 --- a/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -26,6 +29,7 @@ export function getAlertsByStateScene(timeRange: SceneTimeRange, datasource: Dat .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('active').overrideColor(overrideToFixedColor('active'))) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx index d1e20e97809..0cf9dd2ad5d 100644 --- a/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx +++ b/public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -25,6 +28,7 @@ export function getInvalidConfigScene(timeRange: SceneTimeRange, datasource: Dat .setData(query) .setUnit('bool_yes_no') .setOption('graphMode', BigValueGraphMode.None) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx index aa514af236a..7e06f3ef036 100644 --- a/public/app/features/alerting/unified/insights/mimir/Notifications.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Notifications.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getNotificationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -38,6 +41,7 @@ export function getNotificationsScene(timeRange: SceneTimeRange, datasource: Dat .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) + .setHeaderActions() .build(), }); } diff --git a/public/app/features/alerting/unified/insights/mimir/Silences.tsx b/public/app/features/alerting/unified/insights/mimir/Silences.tsx index bad8a823edd..99b5d047af7 100644 --- a/public/app/features/alerting/unified/insights/mimir/Silences.tsx +++ b/public/app/features/alerting/unified/insights/mimir/Silences.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { PANEL_STYLES } from '../../home/Insights'; +import { InsightsRatingModal } from '../RatingModal'; export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -25,6 +28,7 @@ export function getSilencesScene(timeRange: SceneTimeRange, datasource: DataSour .setData(query) .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) + .setHeaderActions() .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 d9d9a924feb..e07ea756bdd 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, ThresholdsMode, TooltipDisplayMode } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getRuleGroupEvaluationDurationIntervalRatioScene( timeRange: SceneTimeRange, @@ -48,6 +51,7 @@ export function getRuleGroupEvaluationDurationIntervalRatioScene( }, ], }) + .setHeaderActions() .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 11e262bd5b2..af9000e2302 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getRuleGroupEvaluationDurationScene( timeRange: SceneTimeRange, @@ -37,6 +40,7 @@ export function getRuleGroupEvaluationDurationScene( fixedColor: 'blue', }) ) + .setHeaderActions() .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 b24529c7f31..c4174ca8788 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -38,6 +41,7 @@ export function getRuleGroupEvaluationsScene(timeRange: SceneTimeRange, datasour .matchFieldsWithName('failed') .overrideColor(overrideToFixedColor('failed')) ) + .setHeaderActions() .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 de988a3692f..8a3c1b7c521 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -25,6 +28,7 @@ export function getRuleGroupIntervalScene(timeRange: SceneTimeRange, datasource: .setData(query) .setUnit('s') .setOption('graphMode', BigValueGraphMode.Area) + .setHeaderActions() .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 9703b10950d..c208db82aa1 100644 --- a/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { BigValueGraphMode, DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -32,6 +35,7 @@ export function getRulesPerGroupScene(timeRange: SceneTimeRange, datasource: Dat }) ) .setNoValue('0') + .setHeaderActions() .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 7e77c99abfb..f530fbd2a1f 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getEvalSuccessVsFailuresScene( timeRange: SceneTimeRange, @@ -36,6 +39,7 @@ export function getEvalSuccessVsFailuresScene( .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('failed').overrideColor(overrideToFixedColor('failed'))) + .setHeaderActions() .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 eadd850caed..717495c84e1 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx @@ -1,8 +1,11 @@ +import React from 'react'; + import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,6 +40,7 @@ export function getFiringCloudAlertsScene(timeRange: SceneTimeRange, datasource: ], }) .setNoValue('0') + .setHeaderActions() .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 34507e043b3..78f47e98953 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -26,6 +29,7 @@ export function getInstancesByStateScene(timeRange: SceneTimeRange, datasource: .setCustomFieldConfig('drawStyle', GraphDrawStyle.Line) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing'))) + .setHeaderActions() .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 477fbccc833..0bc61cca2ff 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getInstancesPercentageByStateScene( timeRange: SceneTimeRange, @@ -33,6 +36,7 @@ export function getInstancesPercentageByStateScene( .setMax(1) .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOverrides((b) => b.matchFieldsWithName('firing').overrideColor(overrideToFixedColor('firing'))) + .setHeaderActions() .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 392a134addd..2f27eb18bcc 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema'; import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -27,6 +30,7 @@ export function getMissedIterationsScene(timeRange: SceneTimeRange, datasource: .setOption('tooltip', { mode: TooltipDisplayMode.Multi }) .setOption('legend', { showLegend: false }) .setOverrides((b) => b.matchFieldsWithName('missed').overrideColor(overrideToFixedColor('missed'))) + .setHeaderActions() .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 9e5f912a3e9..aaa74cd3f2b 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import { PanelBuilders, SceneDataTransformer, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -40,6 +43,11 @@ export function getMostFiredRulesScene(timeRange: SceneTimeRange, datasource: Da return new SceneFlexItem({ ...PANEL_STYLES, - body: PanelBuilders.table().setTitle(panelTitle).setDescription(panelTitle).setData(transformation).build(), + body: PanelBuilders.table() + .setTitle(panelTitle) + .setDescription(panelTitle) + .setData(transformation) + .setHeaderActions() + .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 9a33b7c8386..0a0357300c0 100644 --- a/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx +++ b/public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx @@ -1,8 +1,11 @@ +import React from 'react'; + import { ThresholdsMode } from '@grafana/data'; import { PanelBuilders, SceneFlexItem, SceneQueryRunner, SceneTimeRange } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { PANEL_STYLES } from '../../../home/Insights'; +import { InsightsRatingModal } from '../../RatingModal'; export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource: DataSourceRef, panelTitle: string) { const query = new SceneQueryRunner({ @@ -37,6 +40,7 @@ export function getPendingCloudAlertsScene(timeRange: SceneTimeRange, datasource ], }) .setNoValue('0') + .setHeaderActions() .build(), }); }