problems: mark acknowledged problems with different color

This commit is contained in:
Alexander Zobnin
2018-12-28 19:35:09 +03:00
parent eb2ba5ae07
commit c4b0c6da07
3 changed files with 15 additions and 4 deletions

View File

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

View File

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

View File

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