IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Allow users to give feedback on each insights panel (#75990)

Browse Source 
* Add menu to track user feedback on each pane;

* Add RatingModal component

* Open modal with panel header actions

* Fix lint
This commit is contained in:
Virginia Cepeda 2023-10-05 09:02:18 -03:00 committed by GitHub
parent ef93be7dba
commit 68c25080e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 214 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/alerting/unified/Analytics.ts
View File

@ -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;

95
public/app/features/alerting/unified/insights/RatingModal.tsx Normal file
View File

@ -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<boolean>(false);
const onDismiss = () => {
setShowModal(false);
};
const onButtonClick = (useful: boolean) => {
trackInsightsFeedback({ useful, panel: panel });
onDismiss();
};
const modal = (
<Modal
title="Rate this panel"
isOpen={showModal}
onDismiss={onDismiss}
onClickBackdrop={onDismiss}
className={styles.container}
>
<div>
<p>Help us improve this page by telling us whether this panel is useful to you!</p>
<div className={styles.buttonsContainer}>
<Button variant="secondary" className={styles.buttonContainer} onClick={() => onButtonClick(false)}>
<div className={styles.button}>
<Icon name="thumbs-up" className={styles.thumbsdown} size="xxxl" />
<span>{`I don't like it`}</span>
</div>
</Button>
<Button variant="secondary" className={styles.buttonContainer} onClick={() => onButtonClick(true)}>
<div className={styles.button}>
<Icon name="thumbs-up" size="xxxl" />
<span>I like it</span>
</div>
</Button>
</div>
</div>
</Modal>
);
const menu = (
<Menu>
<Menu.Item label="Rate this panel" icon="comment-alt-message" onClick={() => setShowModal(true)} />
</Menu>
);
return (
<div>
<Dropdown overlay={menu} placement="bottom-start">
<IconButton name="ellipsis-v" variant="secondary" className={styles.menu} aria-label="Rate this panel" />
</Dropdown>
{modal}
</div>
);
}
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);',
}),
});

4
public/app/features/alerting/unified/insights/grafana/AlertsByStateScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/EvalSuccessVsFailuresScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/Firing.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

5
public/app/features/alerting/unified/insights/grafana/InstanceStatusScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

3
public/app/features/alerting/unified/insights/grafana/MissedIterationsScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

2
public/app/features/alerting/unified/insights/grafana/MostFiredInstancesTable.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/Paused.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/RulesByEvaluation.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/RulesByEvaluationPercentage.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/alertmanager/NotificationsScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/grafana/alertmanager/SilencesByStateScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/AlertsByState.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/InvalidConfig.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/Notifications.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/Silences.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationIntervalRatioScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationDurationScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupEvaluationsScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/perGroup/RuleGroupIntervalScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/perGroup/RulesPerGroupScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/EvalSuccessVsFailuresScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/Firing.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/InstancesByState.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/InstancesPercentageByState.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/MissedIterationsScene.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

10
public/app/features/alerting/unified/insights/mimir/rules/MostFiredRules.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}

4
public/app/features/alerting/unified/insights/mimir/rules/Pending.tsx
View File

@ -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(<InsightsRatingModal panel={panelTitle} />)
.build(),
});
}