Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problems: show status icon

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-28 19:24:57 +03:00
parent f31f9757ba
commit eb2ba5ae07
8 changed files with 124 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/panel-triggers/components/GFHeartIcon.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import classNames from 'classnames';
interface GFHeartIconProps {
status: 'critical' | 'warning' | 'online' | 'ok' | 'problem';
className?: string;
}
export default function GFHeartIcon(props: GFHeartIconProps) {
const status = props.status;
const className = classNames("icon-gf", props.className,
{ "icon-gf-critical": status === 'critical' || status === 'problem' },
{ "icon-gf-warning": status === 'warning' },
{ "icon-gf-online": status === 'online' || status === 'ok' },
);
return (
<i className={className}></i>
);
}

32
src/panel-triggers/components/Problems.tsx
View File

@@ -7,6 +7,7 @@ import { ProblemsPanelOptions, Trigger, ZBXEvent, GFTimeRange, RTCell, ZBXTag, T
import EventTag from './EventTag';
import ProblemDetails from './ProblemDetails';
import { AckProblemData } from './Modal';
import GFHeartIcon from './GFHeartIcon';
export interface ProblemListProps {
problems: Trigger[];
@@ -84,22 +85,32 @@ export class ProblemList extends PureComponent<ProblemListProps, ProblemListStat
const timeColWidth = problems && problems.length ? problems[0].lastchange.length * 9 : 160;
const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
const statusCell = props => StatusCell(props, options.okEventColor, DEFAULT_PROBLEM_COLOR, highlightNewerThan);
const statusIconCell = props => StatusIconCell(props, highlightNewerThan);
const columns = [
{ Header: 'Host', accessor: 'host', show: options.hostField },
{ Header: 'Host (Technical Name)', accessor: 'hostTechName', show: options.hostTechNameField },
{ Header: 'Host Groups', accessor: 'groups', show: options.hostGroups, Cell: GroupCell },
{ Header: 'Proxy', accessor: 'proxy', show: options.hostProxy },
{ Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
{
Header: 'Severity', show: options.severityField, className: 'problem-severity', width: 120,
accessor: problem => problem.priority,
id: 'severity',
Cell: props => SeverityCell(props, options.triggerSeverity),
},
{
Header: '', id: 'statusIcon', show: options.statusIcon, className: 'problem-status-icon', width: 50,
accessor: 'value',
Cell: statusIconCell,
},
{ Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
{ Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell},
{ Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
{
Header: 'Tags', accessor: 'tags', show: options.showTags, className: 'problem-tags',
Cell: props => <TagCell {...props} onTagClick={this.handleTagClick} />
},
{ Header: 'Time', className: 'last-change', width: timeColWidth,
{
Header: 'Time', className: 'last-change', width: timeColWidth,
accessor: 'lastchangeUnix',
id: 'lastchange',
Cell: row => row.original.lastchange,
@@ -171,7 +182,6 @@ const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
function StatusCell(props: RTCell<Trigger>, okColor = DEFAULT_OK_COLOR, problemColor = DEFAULT_PROBLEM_COLOR, highlightNewerThan?: string) {
// console.log(props);
const status = props.value === '0' ? 'RESOLVED' : 'PROBLEM';
const color = props.value === '0' ? okColor : problemColor;
let newProblem = false;
@@ -183,6 +193,20 @@ function StatusCell(props: RTCell<Trigger>, okColor = DEFAULT_OK_COLOR, problemC
);
}
function StatusIconCell(props: RTCell<Trigger>, highlightNewerThan?: string) {
const status = props.value === '0' ? 'ok' : 'problem';
let newProblem = false;
if (highlightNewerThan) {
newProblem = isNewProblem(props.original, highlightNewerThan);
}
const className = classNames('zbx-problem-status-icon',
{ 'problem-status--new': newProblem },
{ 'zbx-problem': props.value === '1' },
{ 'zbx-ok': props.value === '0' },
);
return <GFHeartIcon status={status} className={className} />;
}
function GroupCell(props: RTCell<Trigger>) {
let groups = "";
if (props.value && props.value.length) {