initial problems panel
This commit is contained in:
Alexander Zobnin
105
src/panel-triggers/components/EventTag.tsx
Normal file
105
src/panel-triggers/components/EventTag.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import { ZBXTag } from '../types';
|
||||
|
||||
const TAG_COLORS = [
|
||||
'#E24D42',
|
||||
'#1F78C1',
|
||||
'#BA43A9',
|
||||
'#705DA0',
|
||||
'#466803',
|
||||
'#508642',
|
||||
'#447EBC',
|
||||
'#C15C17',
|
||||
'#890F02',
|
||||
'#757575',
|
||||
'#0A437C',
|
||||
'#6D1F62',
|
||||
'#584477',
|
||||
'#629E51',
|
||||
'#2F4F4F',
|
||||
'#BF1B00',
|
||||
'#806EB7',
|
||||
'#8a2eb8',
|
||||
'#699e00',
|
||||
'#000000',
|
||||
'#3F6833',
|
||||
'#2F575E',
|
||||
'#99440A',
|
||||
'#E0752D',
|
||||
'#0E4AB4',
|
||||
'#58140C',
|
||||
'#052B51',
|
||||
'#511749',
|
||||
'#3F2B5B',
|
||||
];
|
||||
|
||||
const TAG_BORDER_COLORS = [
|
||||
'#FF7368',
|
||||
'#459EE7',
|
||||
'#E069CF',
|
||||
'#9683C6',
|
||||
'#6C8E29',
|
||||
'#76AC68',
|
||||
'#6AA4E2',
|
||||
'#E7823D',
|
||||
'#AF3528',
|
||||
'#9B9B9B',
|
||||
'#3069A2',
|
||||
'#934588',
|
||||
'#7E6A9D',
|
||||
'#88C477',
|
||||
'#557575',
|
||||
'#E54126',
|
||||
'#A694DD',
|
||||
'#B054DE',
|
||||
'#8FC426',
|
||||
'#262626',
|
||||
'#658E59',
|
||||
'#557D84',
|
||||
'#BF6A30',
|
||||
'#FF9B53',
|
||||
'#3470DA',
|
||||
'#7E3A32',
|
||||
'#2B5177',
|
||||
'#773D6F',
|
||||
'#655181',
|
||||
];
|
||||
|
||||
/**
|
||||
* Returns tag badge background and border colors based on hashed tag name.
|
||||
* @param name tag name
|
||||
*/
|
||||
export function getTagColorsFromName(name: string): { color: string; borderColor: string } {
|
||||
const hash = djb2(name.toLowerCase());
|
||||
const color = TAG_COLORS[Math.abs(hash % TAG_COLORS.length)];
|
||||
const borderColor = TAG_BORDER_COLORS[Math.abs(hash % TAG_BORDER_COLORS.length)];
|
||||
return { color, borderColor };
|
||||
}
|
||||
|
||||
function djb2(str) {
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
interface EventTagProps {
|
||||
tag: ZBXTag;
|
||||
}
|
||||
|
||||
function EventTag(props: EventTagProps) {
|
||||
const { tag } = props;
|
||||
const tagColor = getTagColorsFromName(tag.tag);
|
||||
const style: React.CSSProperties = {
|
||||
background: tagColor.color,
|
||||
borderColor: tagColor.borderColor,
|
||||
};
|
||||
return (
|
||||
<span className="label label-tag zbx-tag" style={style}>
|
||||
{tag.tag}: {tag.value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default EventTag;
|
||||
354
src/panel-triggers/components/Problems.tsx
Normal file
354
src/panel-triggers/components/Problems.tsx
Normal file
@@ -0,0 +1,354 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactTable from 'react-table';
|
||||
import EventTag from './EventTag';
|
||||
import Tooltip from './Tooltip';
|
||||
import { ProblemsPanelOptions, Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup } from '../types';
|
||||
import * as utils from '../../datasource-zabbix/utils';
|
||||
|
||||
export interface ProblemListProps {
|
||||
problems: Trigger[];
|
||||
panelOptions: ProblemsPanelOptions;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export class ProblemList extends PureComponent<ProblemListProps, any> {
|
||||
buildColumns() {
|
||||
const result = [];
|
||||
const options = this.props.panelOptions;
|
||||
const problems = this.props.problems;
|
||||
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 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', accessor: 'severity', show: options.severityField, className: 'problem-severity', width: 120, Cell: SeverityCell },
|
||||
{ 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', Cell: TagCell },
|
||||
{ Header: 'Time', accessor: 'lastchange', className: 'last-change', width: timeColWidth },
|
||||
{ Header: 'Details', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander },
|
||||
];
|
||||
for (const column of columns) {
|
||||
if (column.show || column.show === undefined) {
|
||||
delete column.show;
|
||||
result.push(column);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.problems, this.props.panelOptions);
|
||||
const columns = this.buildColumns();
|
||||
// const data = this.props.problems.map(p => [p.host, p.description]);
|
||||
return (
|
||||
<div className="panel-problems">
|
||||
<ReactTable
|
||||
data={this.props.problems}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
loading={this.props.loading}
|
||||
SubComponent={props => <ProblemDetails {...props} />}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// interface CellProps {
|
||||
// row: any;
|
||||
// original: any;
|
||||
// }
|
||||
|
||||
function SeverityCell(props) {
|
||||
// console.log(props);
|
||||
return (
|
||||
<div className='severity-cell' style={{ background: props.original.color }}>
|
||||
{props.value}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
|
||||
const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
|
||||
|
||||
function StatusCell(props, 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;
|
||||
if (highlightNewerThan) {
|
||||
newProblem = isNewProblem(props.original, highlightNewerThan);
|
||||
}
|
||||
return (
|
||||
<span className={newProblem ? 'problem-status--new' : ''} style={{ color }}>{status}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupCell(props) {
|
||||
let groups = "";
|
||||
if (props.value && props.value.length) {
|
||||
groups = props.value.map(g => g.name).join(', ');
|
||||
}
|
||||
return (
|
||||
<span>{groups}</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ProblemCell(props) {
|
||||
const comments = props.original.comments;
|
||||
return (
|
||||
<div>
|
||||
<span className="problem-description">{props.value}</span>
|
||||
{/* {comments && <FAIcon icon="file-text-o" customClass="comments-icon" />} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TagCell(props) {
|
||||
const tags = props.value || [];
|
||||
return [
|
||||
tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} />)
|
||||
];
|
||||
}
|
||||
|
||||
function CustomExpander(props) {
|
||||
return (
|
||||
<span className={props.isExpanded ? "expanded" : ""}>
|
||||
<i className="fa fa-info-circle"></i>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface FAIconProps {
|
||||
icon: string;
|
||||
customClass?: string;
|
||||
}
|
||||
|
||||
function FAIcon(props: FAIconProps) {
|
||||
return (
|
||||
<span className={`fa-icon-container ${props.customClass || ''}`}>
|
||||
<i className={`fa fa-${props.icon}`}></i>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemItemProps {
|
||||
item: ZBXItem;
|
||||
showName?: boolean;
|
||||
}
|
||||
|
||||
function ProblemItem(props: ProblemItemProps) {
|
||||
const { item, showName } = props;
|
||||
return (
|
||||
<div className="problem-item">
|
||||
<FAIcon icon="thermometer-three-quarters" />
|
||||
{showName && <span className="problem-item-name">{item.name}: </span>}
|
||||
<span className="problem-item-value">{item.lastvalue}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemItemsProps {
|
||||
items: ZBXItem[];
|
||||
}
|
||||
|
||||
class ProblemItems extends PureComponent<ProblemItemsProps> {
|
||||
render() {
|
||||
const { items } = this.props;
|
||||
return (items.length > 1 ?
|
||||
items.map(item => <ProblemItem item={item} key={item.itemid} showName={true} />) :
|
||||
<ProblemItem item={items[0]} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface AcknowledgesListProps {
|
||||
acknowledges: ZBXAcknowledge[];
|
||||
}
|
||||
|
||||
function AcknowledgesList(props: AcknowledgesListProps) {
|
||||
const { acknowledges } = props;
|
||||
return (
|
||||
<div className="problem-ack-list">
|
||||
<div className="problem-ack-col problem-ack-time">
|
||||
{acknowledges.map(ack => <span key={ack.acknowledgeid} className="problem-ack-time">{ack.time}</span>)}
|
||||
</div>
|
||||
<div className="problem-ack-col problem-ack-user">
|
||||
{acknowledges.map(ack => <span key={ack.acknowledgeid} className="problem-ack-user">{ack.user}</span>)}
|
||||
</div>
|
||||
<div className="problem-ack-col problem-ack-message">
|
||||
{acknowledges.map(ack => <span key={ack.acknowledgeid} className="problem-ack-message">{ack.message}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemGroupsProps {
|
||||
groups: ZBXGroup[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function ProblemGroups(props: ProblemGroupsProps) {
|
||||
let groups = "";
|
||||
if (props.groups && props.groups.length) {
|
||||
groups = props.groups.map(g => g.name).join(', ');
|
||||
}
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<FAIcon icon="folder" />
|
||||
<span>{groups}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemHostsProps {
|
||||
hosts: ZBXHost[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function ProblemHosts(props: ProblemHostsProps) {
|
||||
let hosts = "";
|
||||
if (props.hosts && props.hosts.length) {
|
||||
hosts = props.hosts.map(g => g.name).join(', ');
|
||||
}
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<FAIcon icon="server" />
|
||||
<span>{hosts}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemStatusBarProps {
|
||||
problem: Trigger;
|
||||
}
|
||||
|
||||
function ProblemStatusBar(props: ProblemStatusBarProps) {
|
||||
const { problem } = props;
|
||||
const multiEvent = problem.type === '1';
|
||||
const link = problem.url && problem.url !== '';
|
||||
const maintenance = problem.maintenance;
|
||||
const manualClose = problem.manual_close === '1';
|
||||
const error = problem.error && problem.error !== '';
|
||||
const stateUnknown = problem.state === '1';
|
||||
const closeByTag = problem.correlation_mode === '1';
|
||||
return (
|
||||
<div className="problem-statusbar">
|
||||
<ProblemStatusBarItem icon="wrench" fired={maintenance} tooltip="Host maintenance" />
|
||||
<ProblemStatusBarItem icon="globe" fired={link} link={link && problem.url} tooltip="External link" />
|
||||
<ProblemStatusBarItem icon="bullhorn" fired={multiEvent} tooltip="Trigger generates multiple problem events" />
|
||||
<ProblemStatusBarItem icon="tag" fired={closeByTag} tooltip={`OK event closes problems matched to tag: ${problem.correlation_tag}`} />
|
||||
<ProblemStatusBarItem icon="question-circle" fired={stateUnknown} tooltip="Current trigger state is unknown" />
|
||||
<ProblemStatusBarItem icon="warning" fired={error} tooltip={problem.error} />
|
||||
<ProblemStatusBarItem icon="window-close-o" fired={manualClose} tooltip="Manual close event" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProblemStatusBarItemProps {
|
||||
icon: string;
|
||||
fired?: boolean;
|
||||
link?: string;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
function ProblemStatusBarItem(props: ProblemStatusBarItemProps) {
|
||||
const { fired, icon, link, tooltip } = props;
|
||||
let item = (
|
||||
<div className={`problem-statusbar-item ${fired ? 'fired' : 'muted'}`}>
|
||||
<FAIcon icon={icon} />
|
||||
</div>
|
||||
);
|
||||
if (tooltip && fired) {
|
||||
item = (
|
||||
<Tooltip placement="bottom" content={tooltip}>
|
||||
{item}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
return link ? <a href={link} target="_blank">{item}</a> : item;
|
||||
}
|
||||
|
||||
class ProblemDetails extends PureComponent<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
show: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
requestAnimationFrame(() => {
|
||||
this.setState({ show: true });
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const problem = this.props.original as Trigger;
|
||||
const displayClass = this.state.show ? 'show' : '';
|
||||
let groups = "";
|
||||
if (problem && problem.groups) {
|
||||
groups = problem.groups.map(g => g.name).join(', ');
|
||||
}
|
||||
return (
|
||||
<div className={`problem-details-container ${displayClass}`}>
|
||||
<div className="problem-details">
|
||||
{/* <h6>Problem Details</h6> */}
|
||||
<div className="problem-details-row">
|
||||
<div className="problem-value-container">
|
||||
<div className="problem-age">
|
||||
<FAIcon icon="clock-o" />
|
||||
<span>{problem.age}</span>
|
||||
</div>
|
||||
{problem.items && <ProblemItems items={problem.items} />}
|
||||
</div>
|
||||
<ProblemStatusBar problem={problem} />
|
||||
</div>
|
||||
{problem.comments &&
|
||||
<div className="problem-description">
|
||||
<span className="description-label">Description: </span>
|
||||
<span>{problem.comments}</span>
|
||||
</div>
|
||||
}
|
||||
<div className="problem-tags">
|
||||
{problem.tags && problem.tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} />)}
|
||||
</div>
|
||||
</div>
|
||||
{problem.acknowledges &&
|
||||
<div className="problem-details-middle">
|
||||
<h6><FAIcon icon="reply-all" /> Acknowledges</h6>
|
||||
<AcknowledgesList acknowledges={problem.acknowledges} />
|
||||
</div>
|
||||
}
|
||||
<div className="problem-details-right">
|
||||
<div className="problem-details-right-item">
|
||||
<FAIcon icon="database" />
|
||||
<span>{problem.datasource}</span>
|
||||
</div>
|
||||
{problem.proxy &&
|
||||
<div className="problem-details-right-item">
|
||||
<FAIcon icon="cloud" />
|
||||
<span>{problem.proxy}</span>
|
||||
</div>
|
||||
}
|
||||
{problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />}
|
||||
{problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function isNewProblem(problem: Trigger, highlightNewerThan: string): boolean {
|
||||
try {
|
||||
const highlightIntervalMs = utils.parseInterval(highlightNewerThan);
|
||||
const durationSec = (Date.now() - problem.lastchangeUnix * 1000);
|
||||
return durationSec < highlightIntervalMs;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
91
src/panel-triggers/components/Tooltip.tsx
Normal file
91
src/panel-triggers/components/Tooltip.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Manager, Popper, Arrow, Target } from 'react-popper';
|
||||
|
||||
interface IwithTooltipProps {
|
||||
placement?: string;
|
||||
content: string | ((props: any) => JSX.Element);
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function withTooltip(WrappedComponent) {
|
||||
return class extends React.Component<IwithTooltipProps, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.setState = this.setState.bind(this);
|
||||
this.state = {
|
||||
placement: this.props.placement || 'auto',
|
||||
show: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.placement && nextProps.placement !== this.state.placement) {
|
||||
this.setState(prevState => {
|
||||
return {
|
||||
...prevState,
|
||||
placement: nextProps.placement,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderContent(content) {
|
||||
if (typeof content === 'function') {
|
||||
// If it's a function we assume it's a React component
|
||||
const ReactComponent = content;
|
||||
return <ReactComponent />;
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { content, className } = this.props;
|
||||
|
||||
return (
|
||||
<Manager className={`popper__manager ${className || ''}`}>
|
||||
<WrappedComponent {...this.props} tooltipSetState={this.setState} />
|
||||
{this.state.show ? (
|
||||
<Popper placement={this.state.placement} className="popper zbx-tooltip">
|
||||
{this.renderContent(content)}
|
||||
<Arrow className="popper__arrow" />
|
||||
</Popper>
|
||||
) : null}
|
||||
</Manager>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tooltipSetState: (prevState: object) => void;
|
||||
}
|
||||
|
||||
class Tooltip extends PureComponent<Props> {
|
||||
showTooltip = () => {
|
||||
const { tooltipSetState } = this.props;
|
||||
|
||||
tooltipSetState(prevState => ({
|
||||
...prevState,
|
||||
show: true,
|
||||
}));
|
||||
};
|
||||
|
||||
hideTooltip = () => {
|
||||
const { tooltipSetState } = this.props;
|
||||
tooltipSetState(prevState => ({
|
||||
...prevState,
|
||||
show: false,
|
||||
}));
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Target className="popper__target" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}>
|
||||
{this.props.children}
|
||||
</Target>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTooltip(Tooltip);
|
||||
@@ -1,3 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import moment from 'moment';
|
||||
@@ -6,6 +8,7 @@ import {PanelCtrl} from 'grafana/app/plugins/sdk';
|
||||
import {triggerPanelOptionsTab} from './options_tab';
|
||||
import {triggerPanelTriggersTab} from './triggers_tab';
|
||||
import {migratePanelSchema, CURRENT_SCHEMA_VERSION} from './migrations';
|
||||
import { ProblemList } from './components/Problems';
|
||||
|
||||
const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
|
||||
|
||||
@@ -680,9 +683,25 @@ export class TriggerPanelCtrl extends PanelCtrl {
|
||||
appendPaginationControls(footerElem);
|
||||
rootElem.css({'max-height': getContentHeight()});
|
||||
rootElem.css({'height': getContentHeight()});
|
||||
renderProblems();
|
||||
setFontSize();
|
||||
}
|
||||
|
||||
function renderProblems() {
|
||||
console.debug('rendering ProblemsList React component');
|
||||
// console.log(ctrl);
|
||||
let panelOptions = {};
|
||||
for (let prop in PANEL_DEFAULTS) {
|
||||
panelOptions[prop] = ctrl.panel[prop];
|
||||
}
|
||||
const problemsListProps = {
|
||||
problems: ctrl.triggerList,
|
||||
panelOptions,
|
||||
};
|
||||
const problemsReactElem = React.createElement(ProblemList, problemsListProps);
|
||||
ReactDOM.render(problemsReactElem, elem.find('.panel-content')[0]);
|
||||
}
|
||||
|
||||
let unbindDestroy = scope.$on('$destroy', function() {
|
||||
elem.off('click', '.triggers-panel-page-link');
|
||||
unbindDestroy();
|
||||
|
||||
153
src/panel-triggers/types.ts
Normal file
153
src/panel-triggers/types.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
export interface ProblemsPanelOptions {
|
||||
schemaVersion: number;
|
||||
datasources: any[];
|
||||
targets: Map<string, ProblemsPanelTarget>;
|
||||
// Fields
|
||||
hostField?: boolean;
|
||||
hostTechNameField?: boolean;
|
||||
hostGroups?: boolean;
|
||||
hostProxy?: boolean;
|
||||
showTags?: boolean;
|
||||
statusField?: boolean;
|
||||
severityField?: boolean;
|
||||
descriptionField?: boolean;
|
||||
descriptionAtNewLine?: boolean;
|
||||
// Options
|
||||
hostsInMaintenance?: boolean;
|
||||
showTriggers?: 'all triggers' | 'unacknowledged' | 'acknowledges';
|
||||
sortTriggersBy?: {
|
||||
text: string;
|
||||
value: 'lastchange' | 'priority';
|
||||
};
|
||||
showEvents?: {
|
||||
text: 'All' | 'OK' | 'Problems';
|
||||
value: 1 | Array<0 | 1>;
|
||||
};
|
||||
limit?: number;
|
||||
// View options
|
||||
fontSize?: string;
|
||||
pageSize?: number;
|
||||
highlightBackground?: boolean;
|
||||
highlightNewEvents?: boolean;
|
||||
highlightNewerThan?: string;
|
||||
customLastChangeFormat?: boolean;
|
||||
lastChangeFormat?: string;
|
||||
// Triggers severity and colors
|
||||
triggerSeverity?: TriggerSeverity[];
|
||||
okEventColor?: TriggerColor;
|
||||
ackEventColor?: TriggerColor;
|
||||
}
|
||||
|
||||
export interface ProblemsPanelTarget {
|
||||
group: {
|
||||
filter: string
|
||||
};
|
||||
host: {
|
||||
filter: string
|
||||
};
|
||||
application: {
|
||||
filter: string
|
||||
};
|
||||
trigger: {
|
||||
filter: string
|
||||
};
|
||||
tags: {
|
||||
filter: string
|
||||
};
|
||||
proxy: {
|
||||
filter: string
|
||||
};
|
||||
}
|
||||
|
||||
export interface TriggerSeverity {
|
||||
priority: number;
|
||||
severity: string;
|
||||
color: TriggerColor;
|
||||
show: boolean;
|
||||
}
|
||||
|
||||
export type TriggerColor = string;
|
||||
|
||||
export interface Trigger {
|
||||
acknowledges?: ZBXAcknowledge[];
|
||||
age?: string;
|
||||
color?: TriggerColor;
|
||||
comments?: string;
|
||||
correlation_mode?: string;
|
||||
correlation_tag?: string;
|
||||
datasource?: string;
|
||||
description?: string;
|
||||
error?: string;
|
||||
expression?: string;
|
||||
flags?: string;
|
||||
groups?: ZBXGroup[];
|
||||
host?: string;
|
||||
hostTechName?: string;
|
||||
hosts?: ZBXHost[];
|
||||
items?: ZBXItem[];
|
||||
lastEvent?: ZBXEvent;
|
||||
lastchange?: string;
|
||||
lastchangeUnix?: number;
|
||||
maintenance?: boolean;
|
||||
manual_close?: string;
|
||||
priority?: string;
|
||||
proxy?: string;
|
||||
recovery_expression?: string;
|
||||
recovery_mode?: string;
|
||||
severity?: string;
|
||||
state?: string;
|
||||
status?: string;
|
||||
tags?: ZBXTag[];
|
||||
templateid?: string;
|
||||
/** Whether the trigger can generate multiple problem events. */
|
||||
type?: string;
|
||||
url?: string;
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export interface ZBXGroup {
|
||||
groupid: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface ZBXHost {
|
||||
hostid: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface ZBXItem {
|
||||
itemid: string;
|
||||
name: string;
|
||||
key_: string;
|
||||
lastvalue?: string;
|
||||
}
|
||||
|
||||
export interface ZBXEvent {
|
||||
eventid: string;
|
||||
clock: string;
|
||||
ns?: string;
|
||||
value?: string;
|
||||
source?: string;
|
||||
object?: string;
|
||||
objectid?: string;
|
||||
acknowledged?: string;
|
||||
}
|
||||
|
||||
export interface ZBXTag {
|
||||
tag: string;
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export interface ZBXAcknowledge {
|
||||
acknowledgeid: string;
|
||||
eventid: string;
|
||||
userid: string;
|
||||
action: string;
|
||||
clock: string;
|
||||
time: string;
|
||||
message?: string;
|
||||
user: string;
|
||||
alias: string;
|
||||
name: string;
|
||||
surname: string;
|
||||
}
|
||||
354
src/sass/_panel-problems.scss
Normal file
354
src/sass/_panel-problems.scss
Normal file
@@ -0,0 +1,354 @@
|
||||
.panel-problems {
|
||||
height: 100%;
|
||||
|
||||
.fa-icon-container {
|
||||
padding-right: 0.4rem;
|
||||
color: $gray-2;
|
||||
i {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// <ReactTable /> styles
|
||||
.ReactTable {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rt-tr-group {
|
||||
flex: 0 0 auto;
|
||||
border-bottom: solid 1px $problems-border-color;
|
||||
border-left: solid 2px rgba(0, 0, 0, 0);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: solid 1px $problems-border-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-left: solid 2px rgba($blue, 0.5);
|
||||
}
|
||||
|
||||
.rt-tr {
|
||||
.rt-td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($dark-3, 2%);
|
||||
box-shadow: 0px 0px 5px rgba($blue, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
&.-even {
|
||||
background: lighten($dark-3, 1%);
|
||||
&:hover {
|
||||
background: lighten($dark-3, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rt-noData {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pagination-bottom {
|
||||
margin-top: auto;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.-pagination {
|
||||
margin-top: auto;
|
||||
height: 3rem;
|
||||
|
||||
.-previous {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.-center {
|
||||
flex: 3;
|
||||
|
||||
.-pageJump {
|
||||
margin: 0px 0.4rem;
|
||||
}
|
||||
|
||||
.select-wrap select {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.-next {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.problem-severity {
|
||||
padding: 0px;
|
||||
|
||||
.severity-cell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-status--new {
|
||||
animation: blink-opacity 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// .problem-description {
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
.rt-tr .rt-td {
|
||||
&.custom-expander {
|
||||
text-align: center;
|
||||
padding-left: 0rem;
|
||||
i {
|
||||
color: #676767;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
& .expanded {
|
||||
i {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
// background: linear-gradient(to bottom, $dark-5 50%, $dark-2 50%);
|
||||
// background-size: 100% 200%;
|
||||
// background-position: right bottom;
|
||||
// transition: all .3s ease-out;
|
||||
}
|
||||
&.custom-expander:hover {
|
||||
// background-position: right top;
|
||||
background-color: lighten($dark-3, 8%);
|
||||
i {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
&.last-change {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-icon {
|
||||
float: right;
|
||||
padding-right: 0.6rem;
|
||||
i {
|
||||
color: $gray-2;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-tags {
|
||||
&.rt-td {
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
.label-tag, .zbx-tag {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-details-container {
|
||||
display: flex;
|
||||
background-color: $dark-3;
|
||||
border: 1px solid $problems-border-color;
|
||||
border-bottom-width: 0px;
|
||||
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-out;
|
||||
|
||||
&.show {
|
||||
max-height: 16rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.problem-details-row {
|
||||
display: flex;
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
.problem-value-container {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-details {
|
||||
position: relative;
|
||||
flex: 10 0 auto;
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.description-label {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: $text-color-muted;
|
||||
}
|
||||
|
||||
.problem-age {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.problem-tags {
|
||||
padding-top: 0.6rem;
|
||||
padding-bottom: 0.6rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.problem-item-name {
|
||||
color: $text-color-muted;
|
||||
}
|
||||
|
||||
.problem-item-value {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.problem-statusbar {
|
||||
// margin-top: auto;
|
||||
margin-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// max-width: 13rem;
|
||||
|
||||
.problem-statusbar-item {
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
padding: 0.4rem 0.4rem 0.4rem 1rem;
|
||||
background: $dark-2;
|
||||
margin-right: 2px;
|
||||
border-radius: 2px;
|
||||
// border: 1px solid $dark-5;
|
||||
|
||||
&:hover {
|
||||
background: darken($dark-2, 2%);
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.fa-icon-container {
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
&.fired {
|
||||
box-shadow: 0px 0px 10px rgba($orange, 0.1);
|
||||
.fa-icon-container {
|
||||
color: $orange;
|
||||
text-shadow: 0px 0px 10px rgba($orange, 0.5);
|
||||
// animation: fade-in 1s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.problem-details-middle {
|
||||
flex: 1 0 auto;
|
||||
padding: 0.5rem 1rem;
|
||||
// border: 1px solid $dark-4;
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: $dark-4;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.problem-ack-list {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.problem-ack-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
|
||||
.problem-ack-time,
|
||||
.problem-ack-user {
|
||||
color: $text-color-muted;
|
||||
}
|
||||
// span {
|
||||
// padding-right: 0.6rem;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.problem-details-right {
|
||||
// flex: 1 0 auto;
|
||||
padding: 0.5rem 2rem;
|
||||
// background: $dark-4;
|
||||
color: $text-color-muted;
|
||||
|
||||
.problem-details-right-item {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-maintenance {
|
||||
.fa-icon-container {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-multi-event-type {
|
||||
i {
|
||||
color: $orange;
|
||||
text-shadow: 0px 0px 10px $orange;
|
||||
animation: blink-shadow 2s ease-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .rt-tr-group {
|
||||
// transition: top 1s ease-out;
|
||||
// animation: all 1s ease;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-opacity {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
color: $dark-3;
|
||||
text-shadow: unset;
|
||||
}
|
||||
100% {
|
||||
color: $orange;
|
||||
text-shadow: 0px 0px 10px rgba($orange, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-shadow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 3px $orange;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
text-shadow: 0px 0px 10px $orange;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 2px $orange;
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,7 @@ $gray-4: #D8D9DA;
|
||||
$gray-5: #ECECEC;
|
||||
$gray-6: #f4f5f8;
|
||||
$gray-7: #fbfbfb;
|
||||
$gray-blue: #292a2d;
|
||||
$gray-blue: #292a2d;
|
||||
|
||||
$white: #fff;
|
||||
|
||||
@@ -33,8 +33,10 @@ $regex: #d69e2e;
|
||||
$body-bg: rgb(20,20,20);
|
||||
$body-color: $gray-4;
|
||||
$text-color: $gray-4;
|
||||
$text-color-muted: $gray-2;
|
||||
$tight-form-func-bg: #333;
|
||||
$grafanaListAccent: lighten($dark-2, 2%);
|
||||
|
||||
$zbx-tag-color: $gray-5;
|
||||
$zbx-text-highlighted: $white;
|
||||
$problems-border-color: $dark-1;
|
||||
|
||||
@@ -32,8 +32,10 @@ $regex: #aa7b1d;
|
||||
$body-bg : $white;
|
||||
$body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
$text-color-muted: $gray-2;
|
||||
$tight-form-func-bg: $gray-5;
|
||||
$grafanaListAccent: $gray-5;
|
||||
|
||||
$zbx-tag-color: $gray-6;
|
||||
$zbx-text-highlighted: $black;
|
||||
$problems-border-color: $dark-1;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'panel-triggers';
|
||||
@import 'panel-problems';
|
||||
@import 'query_editor';
|
||||
|
||||
Reference in New Issue
Block a user