problems: handle color change

This commit is contained in:
Alexander Zobnin
2018-12-27 17:49:30 +03:00
parent 00e5b0b611
commit cbfb3de3ba

View File

@@ -3,7 +3,7 @@ import ReactTable from 'react-table';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import * as utils from '../../datasource-zabbix/utils'; import * as utils from '../../datasource-zabbix/utils';
import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag } from '../types'; import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, TriggerSeverity } from '../types';
import EventTag from './EventTag'; import EventTag from './EventTag';
import ProblemDetails from './ProblemDetails'; import ProblemDetails from './ProblemDetails';
import { AckProblemData } from './Modal'; import { AckProblemData } from './Modal';
@@ -67,7 +67,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: SeverityCell, Cell: props => SeverityCell(props, options.triggerSeverity),
}, },
{ Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell }, { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
{ Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell}, { Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell},
@@ -107,7 +107,6 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
} }
render() { render() {
// console.log(this.props.problems);
const columns = this.buildColumns(); const columns = this.buildColumns();
this.rootWidth = this.rootRef && this.rootRef.clientWidth; this.rootWidth = this.rootRef && this.rootRef.clientWidth;
const { pageSize, fontSize } = this.props; const { pageSize, fontSize } = this.props;
@@ -148,10 +147,11 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
} }
} }
function SeverityCell(props: RTCell<Trigger>) { function SeverityCell(props: RTCell<Trigger>, problemSeverityDesc: TriggerSeverity[]) {
const severityDesc = _.find(problemSeverityDesc, s => s.priority === Number(props.original.priority));
return ( return (
<div className='severity-cell' style={{ background: props.original.color }}> <div className='severity-cell' style={{ background: severityDesc.color }}>
{props.original.severity} {severityDesc.severity}
</div> </div>
); );
} }