problems: mark acknowledged problems with different color
This commit is contained in:
@@ -96,7 +96,7 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
|
|||||||
Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
|
Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
|
||||||
accessor: problem => problem.priority,
|
accessor: problem => problem.priority,
|
||||||
id: 'severity',
|
id: 'severity',
|
||||||
Cell: props => SeverityCell(props, options.triggerSeverity),
|
Cell: props => SeverityCell(props, options.triggerSeverity, options.markAckEvents, options.ackEventColor),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Header: '', id: 'statusIcon', show: options.statusIcon, className: 'problem-status-icon', width: 50,
|
Header: '', id: 'statusIcon', show: options.statusIcon, className: 'problem-status-icon', width: 50,
|
||||||
@@ -169,10 +169,19 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function SeverityCell(props: RTCell<Trigger>, problemSeverityDesc: TriggerSeverity[]) {
|
function SeverityCell(props: RTCell<Trigger>, problemSeverityDesc: TriggerSeverity[], markAckEvents?: boolean, ackEventColor?: string) {
|
||||||
|
const problem = props.original;
|
||||||
|
let color: string;
|
||||||
const severityDesc = _.find(problemSeverityDesc, s => s.priority === Number(props.original.priority));
|
const severityDesc = _.find(problemSeverityDesc, s => s.priority === Number(props.original.priority));
|
||||||
|
color = severityDesc.color;
|
||||||
|
|
||||||
|
// Mark acknowledged triggers with different color
|
||||||
|
if (markAckEvents && problem.acknowledges && problem.acknowledges.length) {
|
||||||
|
color = ackEventColor;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='severity-cell' style={{ background: severityDesc.color }}>
|
<div className='severity-cell' style={{ background: color }}>
|
||||||
{severityDesc.severity}
|
{severityDesc.severity}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -66,7 +66,8 @@ export const PANEL_DEFAULTS = {
|
|||||||
// Triggers severity and colors
|
// Triggers severity and colors
|
||||||
triggerSeverity: DEFAULT_SEVERITY,
|
triggerSeverity: DEFAULT_SEVERITY,
|
||||||
okEventColor: 'rgb(56, 189, 113)',
|
okEventColor: 'rgb(56, 189, 113)',
|
||||||
ackEventColor: 'rgb(56, 219, 156)'
|
ackEventColor: 'rgb(56, 219, 156)',
|
||||||
|
markAckEvents: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const triggerStatusMap = {
|
const triggerStatusMap = {
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ export interface ProblemsPanelOptions {
|
|||||||
triggerSeverity?: TriggerSeverity[];
|
triggerSeverity?: TriggerSeverity[];
|
||||||
okEventColor?: TriggerColor;
|
okEventColor?: TriggerColor;
|
||||||
ackEventColor?: TriggerColor;
|
ackEventColor?: TriggerColor;
|
||||||
|
markAckEvents?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ProblemsPanelTarget {
|
export interface ProblemsPanelTarget {
|
||||||
|
|||||||
Reference in New Issue
Block a user