mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: display datasource information under each section (#76070)
* display datasource information under each section * Minor - change legend to multi in some panels that were missing it * Don't show ds info to grafana sections * Remove unused classname * Remove unused import * Fix pickers styling by placing it to the right
This commit is contained in:
parent
16d77dda67
commit
095749b131
@ -1,9 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import { DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
|
||||
import { getDataSourceSrv } from '@grafana/runtime';
|
||||
import {
|
||||
EmbeddedScene,
|
||||
NestedScene,
|
||||
QueryVariable,
|
||||
SceneControlsSpacer,
|
||||
SceneFlexItem,
|
||||
SceneFlexLayout,
|
||||
SceneReactObject,
|
||||
@ -14,6 +17,7 @@ import {
|
||||
VariableValueSelectors,
|
||||
} from '@grafana/scenes';
|
||||
|
||||
import { SectionSubheader } from '../insights/SectionSubheader';
|
||||
import { getGrafanaInstancesByStateScene } from '../insights/grafana/AlertsByStateScene';
|
||||
import { getGrafanaEvalSuccessVsFailuresScene } from '../insights/grafana/EvalSuccessVsFailuresScene';
|
||||
import { getFiringGrafanaAlertsScene } from '../insights/grafana/Firing';
|
||||
@ -42,19 +46,27 @@ import { getMissedIterationsScene } from '../insights/mimir/rules/MissedIteratio
|
||||
import { getMostFiredRulesScene } from '../insights/mimir/rules/MostFiredRules';
|
||||
import { getPendingCloudAlertsScene } from '../insights/mimir/rules/Pending';
|
||||
|
||||
const ashDs = {
|
||||
export interface DataSourceInformation {
|
||||
type: string;
|
||||
uid: string;
|
||||
settings: DataSourceInstanceSettings<DataSourceJsonData> | undefined;
|
||||
}
|
||||
const ashDs: DataSourceInformation = {
|
||||
type: 'loki',
|
||||
uid: 'grafanacloud-alert-state-history',
|
||||
settings: undefined,
|
||||
};
|
||||
|
||||
const cloudUsageDs = {
|
||||
const cloudUsageDs: DataSourceInformation = {
|
||||
type: 'prometheus',
|
||||
uid: 'grafanacloud-usage',
|
||||
settings: undefined,
|
||||
};
|
||||
|
||||
const grafanaCloudPromDs = {
|
||||
const grafanaCloudPromDs: DataSourceInformation = {
|
||||
type: 'prometheus',
|
||||
uid: 'grafanacloud-prom',
|
||||
settings: undefined,
|
||||
};
|
||||
|
||||
const SERIES_COLORS = {
|
||||
@ -82,38 +94,80 @@ export const PANEL_STYLES = { minHeight: 300 };
|
||||
|
||||
const THIS_WEEK_TIME_RANGE = new SceneTimeRange({ from: 'now-1w', to: 'now' });
|
||||
|
||||
export function SectionSubheader({ children }: React.PropsWithChildren) {
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
|
||||
export function getInsightsScenes() {
|
||||
const dataSourceSrv = getDataSourceSrv();
|
||||
|
||||
[ashDs, cloudUsageDs, grafanaCloudPromDs].forEach((ds) => {
|
||||
ds.settings = dataSourceSrv.getInstanceSettings(ds.uid);
|
||||
});
|
||||
|
||||
const categories = [];
|
||||
|
||||
const showGrafanaManaged = ashDs.settings && cloudUsageDs.settings;
|
||||
const showGrafanaAlertmanager = Boolean(cloudUsageDs.settings);
|
||||
const showMimirAlertmanager = Boolean(cloudUsageDs.settings);
|
||||
const showMimirManaged = cloudUsageDs.settings && grafanaCloudPromDs.settings;
|
||||
const showMimirManagedPerGroup = Boolean(cloudUsageDs.settings);
|
||||
|
||||
if (showGrafanaManaged) {
|
||||
categories.push(
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getGrafanaManagedScenes(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (showGrafanaAlertmanager) {
|
||||
categories.push(
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getGrafanaAlertmanagerScenes(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (showMimirAlertmanager) {
|
||||
categories.push(
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getCloudScenes(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (showMimirManaged) {
|
||||
categories.push(
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getMimirManagedRulesScenes(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (showMimirManagedPerGroup) {
|
||||
categories.push(
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getMimirManagedRulesPerGroupScenes(),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return new EmbeddedScene({
|
||||
$timeRange: THIS_WEEK_TIME_RANGE,
|
||||
controls: [new SceneTimePicker({}), new SceneRefreshPicker({})],
|
||||
controls: [
|
||||
new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Monitor the status of your system.</div>, datasources: [] },
|
||||
}),
|
||||
new SceneControlsSpacer(),
|
||||
new SceneTimePicker({}),
|
||||
new SceneRefreshPicker({}),
|
||||
],
|
||||
body: new SceneFlexLayout({
|
||||
direction: 'column',
|
||||
children: [
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getGrafanaManagedScenes(),
|
||||
}),
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getGrafanaAlertmanagerScenes(),
|
||||
}),
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getCloudScenes(),
|
||||
}),
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getMimirManagedRulesScenes(),
|
||||
}),
|
||||
new SceneFlexItem({
|
||||
ySizing: 'content',
|
||||
body: getMimirManagedRulesPerGroupScenes(),
|
||||
}),
|
||||
],
|
||||
children: categories,
|
||||
}),
|
||||
});
|
||||
}
|
||||
@ -129,7 +183,7 @@ function getGrafanaManagedScenes() {
|
||||
new SceneFlexItem({
|
||||
body: new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Grafana-managed rules</div> },
|
||||
props: { children: <div>Grafana-managed rules</div>, datasources: [] },
|
||||
}),
|
||||
}),
|
||||
new SceneFlexLayout({
|
||||
@ -196,7 +250,7 @@ function getGrafanaAlertmanagerScenes() {
|
||||
new SceneFlexItem({
|
||||
body: new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Grafana Alertmanager</div> },
|
||||
props: { children: <div>Grafana Alertmanager</div>, datasources: [] },
|
||||
}),
|
||||
}),
|
||||
new SceneFlexLayout({
|
||||
@ -221,7 +275,7 @@ function getCloudScenes() {
|
||||
new SceneFlexItem({
|
||||
body: new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Mimir Alertmanager</div> },
|
||||
props: { children: <div>Mimir Alertmanager</div>, datasources: [cloudUsageDs] },
|
||||
}),
|
||||
}),
|
||||
new SceneFlexLayout({
|
||||
@ -252,7 +306,7 @@ function getMimirManagedRulesScenes() {
|
||||
new SceneFlexItem({
|
||||
body: new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Mimir-managed rules</div> },
|
||||
props: { children: <div>Mimir-managed rules</div>, datasources: [grafanaCloudPromDs, cloudUsageDs] },
|
||||
}),
|
||||
}),
|
||||
new SceneFlexLayout({
|
||||
@ -297,7 +351,7 @@ function getMimirManagedRulesPerGroupScenes() {
|
||||
new SceneFlexItem({
|
||||
body: new SceneReactObject({
|
||||
component: SectionSubheader,
|
||||
props: { children: <div>Mimir-managed Rules - Per Rule Group</div> },
|
||||
props: { children: <div>Mimir-managed Rules - Per Rule Group</div>, datasources: [cloudUsageDs] },
|
||||
}),
|
||||
}),
|
||||
new SceneFlexLayout({
|
||||
|
@ -0,0 +1,38 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data/src/themes';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { DataSourceInformation } from '../home/Insights';
|
||||
|
||||
export function DataSourcesInfo({ datasources }: { datasources: DataSourceInformation[] }) {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const displayDs = datasources.map((ds) => (
|
||||
<div key={ds.uid}>
|
||||
{ds.settings?.meta.info.logos.small && (
|
||||
<img className={styles.dsImage} src={ds.settings?.meta.info.logos.small} alt={ds.settings?.name || ds.uid} />
|
||||
)}
|
||||
<span>{ds.settings?.name || ds.uid}</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
return <div className={styles.dsContainer}>{displayDs}</div>;
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
dsImage: css({
|
||||
label: 'ds-image',
|
||||
width: '16px',
|
||||
marginRight: '3px',
|
||||
}),
|
||||
dsContainer: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
gap: '10px',
|
||||
marginBottom: '10px',
|
||||
justifyContent: 'flex-end',
|
||||
}),
|
||||
});
|
@ -0,0 +1,31 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data/src/themes';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { DataSourceInformation } from '../home/Insights';
|
||||
|
||||
import { DataSourcesInfo } from './DataSourcesInfo';
|
||||
|
||||
export function SectionSubheader({
|
||||
children,
|
||||
datasources,
|
||||
}: React.PropsWithChildren<{ datasources: DataSourceInformation[] }>) {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div>{children}</div>
|
||||
<DataSourcesInfo datasources={datasources} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
}),
|
||||
});
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes';
|
||||
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
|
||||
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
|
||||
|
||||
import { overrideToFixedColor, PANEL_STYLES } from '../../../home/Insights';
|
||||
import { InsightsRatingModal } from '../../RatingModal';
|
||||
@ -32,6 +32,7 @@ export function getGrafanaAlertmanagerNotificationsScene(datasource: DataSourceR
|
||||
.setDescription(panelTitle)
|
||||
.setData(query)
|
||||
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
|
||||
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
|
||||
.setOverrides((b) =>
|
||||
b
|
||||
.matchFieldsWithName('success')
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes';
|
||||
import { DataSourceRef, GraphDrawStyle } from '@grafana/schema';
|
||||
import { DataSourceRef, GraphDrawStyle, TooltipDisplayMode } from '@grafana/schema';
|
||||
|
||||
import { PANEL_STYLES } from '../../../home/Insights';
|
||||
import { InsightsRatingModal } from '../../RatingModal';
|
||||
@ -26,6 +26,7 @@ export function getGrafanaAlertmanagerSilencesScene(datasource: DataSourceRef, p
|
||||
.setDescription(panelTitle)
|
||||
.setData(query)
|
||||
.setCustomFieldConfig('drawStyle', GraphDrawStyle.Line)
|
||||
.setOption('tooltip', { mode: TooltipDisplayMode.Multi })
|
||||
.setHeaderActions(<InsightsRatingModal panel={panelTitle} />)
|
||||
.build(),
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user