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:
Virginia Cepeda 2023-10-06 14:36:26 -03:00 committed by GitHub
parent 16d77dda67
commit 095749b131
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 162 additions and 37 deletions

View File

@ -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({

View File

@ -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',
}),
});

View File

@ -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',
}),
});

View File

@ -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')

View File

@ -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(),
});