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: Explore button in Insights view (#96496)

Browse Source 
* 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
This commit is contained in:
Pepe Cano
2024-11-28 12:18:45 +01:00
committed by GitHub
parent 4721d5164b
commit 59d4b91e4c
31 changed files with 160 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.betterer.results
View File

@@ -1731,7 +1731,9 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
],
"public/app/features/alerting/unified/home/Insights.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/alerting/unified/home/PluginIntegrations.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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 <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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 <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
],
"public/app/features/alerting/unified/mocks.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],

24
public/app/features/alerting/unified/home/Insights.tsx
View File

@@ -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: <div>Monitor the status of your system.</div> },
props: {
children: (
<>
<Text>
Monitor the status of your system{' '}
<Tooltip
content={
<div>
Alerting insights provides pre-built dashboards to monitor your alerting data.
<br />
<br />
You can identify patterns in why things go wrong and discover trends in alerting performance
within your organization.
</div>
}
>
<Icon name="info-circle" size="sm" />
</Tooltip>
</Text>
</>
),
},
}),
new SceneControlsSpacer(),
new SceneTimePicker({}),

68
public/app/features/alerting/unified/insights/RatingModal.tsx → public/app/features/alerting/unified/insights/InsightsMenuButton.tsx
View File

@@ -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<InsightsMenuButton>) => {
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<boolean>(false);
@@ -50,6 +105,7 @@ export function InsightsRatingModal({ panel }: { panel: string }) {
const menu = (
<Menu>
<Menu.Item label="Explore" icon="compass" url={url} target="_blank" />
<Menu.Item label="Rate this panel" icon="comment-alt-message" onClick={() => setShowModal(true)} />
</Menu>
);
@@ -62,6 +118,14 @@ export function InsightsRatingModal({ panel }: { panel: string }) {
{modal}
</div>
);
};
interface InsightsMenuButtonState extends SceneObjectState {
panel: string;
}
export class InsightsMenuButton extends SceneObjectBase<InsightsMenuButtonState> {
static Component = InsightsMenuButtonRenderer;
}
const getStyles = (theme: GrafanaTheme2) => ({

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}

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

@@ -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(<InsightsRatingModal panel={panelTitle} />)
.setHeaderActions([new InsightsMenuButton({ panel: panelTitle })])
.build(),
});
}