Skip to content

Commit 167b72d

Browse files
tiithansentiithansen
committed
feat: Display alerts on cluster overview, pods table and pod page
1 parent 9e9a5f3 commit 167b72d

File tree

15 files changed

+472
-28
lines changed

15 files changed

+472
-28
lines changed

‎src/common/seriesHelpers.ts

+7
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@ export function getSeriesValue(asyncData: any, name: string, pred: (value: any)
99
const val = getSeries(asyncData, name, pred)
1010
return val ? val[`Value #${name}`] : 0
1111
}
12+
13+
export function getAllSeries(asyncData: any, name: string, pred: (value: any) => boolean) {
14+
if (asyncData && asyncData.get(name)) {
15+
return asyncData.get(name).filter(pred)
16+
}
17+
return []
18+
}

‎src/components/AlertsTable/AlertExpandedRow.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { SceneComponentProps, SceneFlexLayout, SceneObjectBase, SceneObjectState } from "@grafana/scenes";
3+
import { TableRow } from "./types";
4+
import { TagList, useStyles2 } from "@grafana/ui";
5+
import { isString } from "lodash";
6+
import { GrafanaTheme2 } from "@grafana/data";
7+
import { css } from "@emotion/css";
8+
9+
const getStyles = (theme: GrafanaTheme2) => ({
10+
justifyStart: css`
11+
justify-content: flex-start;
12+
`,
13+
});
14+
15+
interface SceneTagListState extends SceneObjectState {
16+
tags: string[];
17+
}
18+
19+
class SceneTagList extends SceneObjectBase<SceneTagListState> {
20+
static Component = (props: SceneComponentProps<SceneTagList>) => {
21+
const styles = useStyles2(getStyles);
22+
const { tags } = props.model.useState();
23+
return (<TagList className={styles.justifyStart} tags={tags}/>)
24+
}
25+
}
26+
27+
const KNOWN_LABELS = [
28+
'alertname',
29+
'severity',
30+
'alertstate',
31+
'cluster',
32+
'namespace',
33+
]
34+
35+
function isKnownLabelKey(key: string) {
36+
return KNOWN_LABELS.includes(key);
37+
}
38+
39+
export function expandedRowSceneBuilder(rowIdBuilder: (row: TableRow) => string) {
40+
41+
return (row: TableRow) => {
42+
43+
const tags: string[] = []
44+
Object.entries(row).sort().map(([key, value]) => {
45+
if (isString(value) && value.length > 0 && !isKnownLabelKey(key) && !key.startsWith('__')) {
46+
tags.push(`${key}=${value}`);
47+
}
48+
});
49+
50+
return new SceneFlexLayout({
51+
key: rowIdBuilder(row),
52+
width: '100%',
53+
height: 500,
54+
children: [
55+
new SceneTagList({
56+
tags: tags
57+
}),
58+
],
59+
});
60+
}
61+
}

‎src/components/AlertsTable/index.tsx

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import {
2+
EmbeddedScene,
3+
SceneFlexLayout,
4+
SceneFlexItem,
5+
SceneQueryRunner,
6+
TextBoxVariable,
7+
SceneVariableSet,
8+
VariableValueSelectors,
9+
SceneVariables,
10+
} from '@grafana/scenes';
11+
import { createNamespaceVariable, resolveVariable } from 'common/variableHelpers';
12+
import { SortingState } from 'common/sortingHelpers';
13+
import { AsyncTable, Column, ColumnSortingConfig, QueryBuilder } from 'components/AsyncTable';
14+
import { TextColor } from 'common/types';
15+
import { TableRow } from './types';
16+
import { alertLabelValues } from './utils';
17+
import { expandedRowSceneBuilder } from './AlertExpandedRow';
18+
import { LabelFilters, serializeLabelFilters } from 'common/queryHelpers';
19+
20+
const KNOWN_SEVERITIES = ['critical', 'high', 'warning', 'info'];
21+
22+
interface SeverityColors {
23+
[key: string]: TextColor;
24+
}
25+
26+
const KNOWN_SEVERITY_COLORS: SeverityColors = {
27+
'critical': 'error',
28+
'high': 'warning',
29+
'warning': 'warning',
30+
'info': 'primary',
31+
}
32+
33+
const namespaceVariable = createNamespaceVariable();
34+
35+
const searchVariable = new TextBoxVariable({
36+
name: 'search',
37+
label: 'Search',
38+
value: '',
39+
});
40+
41+
const columns: Array<Column<TableRow>> = [
42+
{
43+
id: 'alertname',
44+
header: 'ALERT NAME',
45+
accessor: (row: TableRow) => row.alertname,
46+
cellProps: {
47+
color: (row: TableRow) => KNOWN_SEVERITY_COLORS[row.severity],
48+
},
49+
sortingConfig: {
50+
enabled: true,
51+
type: 'label',
52+
local: true,
53+
compare: (a, b, direction) => {
54+
return direction === 'asc' ? a.alertname.localeCompare(b.alertname) : b.alertname.localeCompare(a.alertname);
55+
}
56+
},
57+
},
58+
{
59+
id: 'alertstate',
60+
header: 'STATE',
61+
accessor: (row: TableRow) => row.alertstate.toLocaleUpperCase(),
62+
cellProps: {},
63+
sortingConfig: {
64+
enabled: true,
65+
type: 'label',
66+
local: true,
67+
compare: (a, b, direction) => {
68+
return direction === 'asc' ? a.alertstate.localeCompare(b.alertstate) : b.alertstate.localeCompare(a.alertstate);
69+
}
70+
},
71+
},
72+
{
73+
id: 'namespace',
74+
header: 'NAMESPACE',
75+
accessor: (row: TableRow) => row.namespace,
76+
cellType: 'link',
77+
cellProps: {},
78+
sortingConfig: {
79+
enabled: true,
80+
type: 'label',
81+
local: true,
82+
compare: (a, b, direction) => {
83+
return direction === 'asc' ? a.namespace.localeCompare(b.namespace) : b.namespace.localeCompare(a.namespace);
84+
}
85+
},
86+
},
87+
{
88+
id: 'cluster',
89+
header: 'CLUSTER',
90+
accessor: (row: TableRow) => row.cluster,
91+
cellType: 'link',
92+
cellProps: {},
93+
sortingConfig: {
94+
enabled: true,
95+
type: 'label',
96+
local: true,
97+
compare: (a, b, direction) => {
98+
return direction === 'asc' ? a.cluster.localeCompare(b.cluster) : b.cluster.localeCompare(a.cluster);
99+
}
100+
},
101+
},
102+
{
103+
id: 'severity',
104+
header: 'SEVERITY',
105+
accessor: (row: TableRow) => row.severity.toLocaleUpperCase(),
106+
cellProps: {
107+
color: (row: TableRow) => KNOWN_SEVERITY_COLORS[row.severity],
108+
},
109+
sortingConfig: {
110+
enabled: true,
111+
type: 'label',
112+
local: true,
113+
compare: (a, b, direction) => {
114+
return direction === 'asc' ? a.severity.localeCompare(b.severity) : b.severity.localeCompare(a.severity);
115+
}
116+
},
117+
},
118+
{
119+
id: 'Value',
120+
header: 'AGE',
121+
accessor: (row: TableRow) => Date.now()/1000 - row.Value,
122+
cellType: 'formatted',
123+
cellProps: {
124+
format: 'dtdurations'
125+
},
126+
sortingConfig: {
127+
enabled: true,
128+
type: 'value',
129+
local: true,
130+
compare: (a, b, direction) => {
131+
return direction === 'asc' ? a.Value - b.Value : b.Value - a.Value;
132+
}
133+
}
134+
}
135+
]
136+
137+
const serieMatcherPredicate = (row: TableRow) => (value: any) => value.alertname === row.alertname;
138+
139+
function rowMapper(row: TableRow, asyncRowData: any) {
140+
141+
}
142+
143+
function createRowId(row: TableRow) {
144+
return alertLabelValues(row).join('/');
145+
}
146+
147+
class AlertsQueryBuilder implements QueryBuilder<TableRow> {
148+
149+
constructor(private labelFilters?: LabelFilters) {}
150+
151+
rootQueryBuilder(variables: SceneVariableSet | SceneVariables, sorting: SortingState, sortingConfig?: ColumnSortingConfig<TableRow> | undefined) {
152+
153+
const serializedFilters = this.labelFilters ? serializeLabelFilters(this.labelFilters) : '';
154+
const hasNamespaceVariable = variables.getByName('namespace') !== undefined;
155+
156+
const finalQuery = `
157+
ALERTS{
158+
cluster="$cluster",
159+
${ hasNamespaceVariable ? `namespace=~"$namespace",` : '' }
160+
alertstate="firing",
161+
${serializedFilters}
162+
}
163+
* ignoring(alertstate) group_right(alertstate) ALERTS_FOR_STATE{
164+
cluster="$cluster",
165+
${ hasNamespaceVariable ? `namespace=~"$namespace",` : '' }
166+
${serializedFilters}
167+
}
168+
`
169+
170+
return new SceneQueryRunner({
171+
datasource: {
172+
uid: 'prometheus',
173+
type: 'prometheus',
174+
},
175+
queries: [
176+
{
177+
refId: 'namespaces',
178+
expr: finalQuery,
179+
instant: true,
180+
format: 'table'
181+
}
182+
],
183+
});
184+
}
185+
186+
rowQueryBuilder(rows: TableRow[], variables: SceneVariableSet | SceneVariables) {
187+
return []
188+
}
189+
}
190+
191+
export function AlertsTable(labelFilters?: LabelFilters, showVariableControls = true, shouldCreateVariables = true) {
192+
193+
const variables = new SceneVariableSet({
194+
variables: shouldCreateVariables ? [
195+
namespaceVariable,
196+
searchVariable,
197+
]: []
198+
})
199+
200+
const controls = showVariableControls ? [
201+
new VariableValueSelectors({})
202+
] : [];
203+
204+
const defaultSorting: SortingState = {
205+
columnId: 'alertname',
206+
direction: 'asc'
207+
}
208+
209+
const queryBuilder = new AlertsQueryBuilder(labelFilters);
210+
211+
return new EmbeddedScene({
212+
$variables: variables,
213+
controls: controls,
214+
body: new SceneFlexLayout({
215+
children: [
216+
new SceneFlexItem({
217+
width: '100%',
218+
height: '100%',
219+
body: new AsyncTable<TableRow>({
220+
columns: columns,
221+
createRowId: createRowId,
222+
asyncDataRowMapper: rowMapper,
223+
$data: queryBuilder.rootQueryBuilder(variables, defaultSorting),
224+
queryBuilder: queryBuilder,
225+
expandedRowBuilder: expandedRowSceneBuilder(createRowId)
226+
}),
227+
}),
228+
],
229+
}),
230+
})
231+
}

‎src/components/AlertsTable/types.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export interface TableRow {
2+
cluster: string;
3+
namespace: string;
4+
alertname: string;
5+
severity: string;
6+
alertstate: string;
7+
Value: number;
8+
}

‎src/components/AlertsTable/utils.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { isString } from "lodash";
2+
import { TableRow } from "./types";
3+
4+
export function alertLabelValues(row: TableRow) {
5+
const labels: any[] = []
6+
Object.entries(row).sort().map(([key, value]) => {
7+
if (isString(value) && value.length > 0) {
8+
labels.push(value);
9+
}
10+
});
11+
return labels;
12+
}

‎src/components/AsyncTable/index.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,9 @@ type LinkCellProps<TableRow> = {
2929
export type FormattedCellProps<TableRow> = {
3030
decimals?: number;
3131
format?: string;
32-
color?: TextColor | ((row: TableRow) => TextColor)
3332
}
3433

35-
export type CellProps<TableRow> = LinkCellProps<TableRow> | FormattedCellProps<TableRow>;
34+
export type CellProps<TableRow> = { color?: TextColor | ((row: TableRow) => TextColor) } & (LinkCellProps<TableRow> | FormattedCellProps<TableRow>);
3635

3736
export interface ColumnSortingConfig<TableRow> {
3837
enabled: boolean;
@@ -92,6 +91,7 @@ function ExpandedRow<TableRow>({ table, row }: ExpandedRowProps<TableRow>) {
9291
function mapColumn<TableRow>(column: Column<TableRow>): ColumnDef<TableRow> {
9392

9493
let cell = undefined;
94+
const cellProps = column.cellProps || {}
9595
switch (column.cellType) {
9696
case 'link':
9797
const linkCellProps = column.cellProps as LinkCellProps<TableRow>;
@@ -108,16 +108,21 @@ function mapColumn<TableRow>(column: Column<TableRow>): ColumnDef<TableRow> {
108108
value: props.row.getValue(column.id),
109109
decimals: formattedCellProps.decimals,
110110
format: formattedCellProps.format,
111-
color: (formattedCellProps.color && isFunction(formattedCellProps.color))
112-
? formattedCellProps.color(props.row.original)
113-
: formattedCellProps.color,
111+
color: (cellProps.color && isFunction(cellProps.color))
112+
? cellProps.color(props.row.original)
113+
: cellProps.color,
114114
})
115115
break;
116116
case 'custom':
117117
cell = (props: CellContext<TableRow, any>) => column.cellBuilder!(props.row.original)
118118
break;
119119
default:
120-
cell = (props: CellContext<TableRow, any>) => DefaultCell(props.row.getValue(column.id))
120+
cell = (props: CellContext<TableRow, any>) => DefaultCell({
121+
text: props.row.getValue(column.id),
122+
color: (cellProps.color && isFunction(cellProps.color))
123+
? cellProps.color(props.row.original)
124+
: cellProps.color,
125+
})
121126
break;
122127
}
123128

@@ -193,7 +198,6 @@ export class AsyncTable<TableRow> extends SceneObjectBase<TableState<TableRow>>
193198
uid: datasourceVariable?.toString(),
194199
type: 'prometheus',
195200
},
196-
197201
queries: [
198202
...this.state.queryBuilder.rowQueryBuilder(rows.map(row => row.original), sceneVariables),
199203
],

‎src/components/Cell/DefaultCell.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React from 'react';
22
import { Text } from '@grafana/ui';
3+
import { TextColor } from 'common/types';
34

4-
export const DefaultCell = (text: string | number) => {
5+
interface DefaultCellProps {
6+
text: string | number;
7+
color?: TextColor;
8+
}
9+
10+
export const DefaultCell = ({ text, color }: DefaultCellProps) => {
511
return (
6-
<Text>
12+
<Text color={color}>
713
{text}
814
</Text>
915
);

0 commit comments

Comments
 (0)