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

problems: fix alert list styles

Browse Source
This commit is contained in:
Alexander Zobnin
2019-01-15 17:31:05 +03:00
parent 466b328ad7
commit 195373953c
4 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/panel-triggers/components/AlertList/AlertCard.tsx
View File

@@ -53,6 +53,7 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
render() {
const { problem, panelOptions } = this.props;
const cardClass = classNames('alert-rule-item', 'zbx-trigger-card', { 'zbx-trigger-highlighted': panelOptions.highlightBackground });
const descriptionClass = classNames('alert-rule-item__text', { 'zbx-description--newline': panelOptions.descriptionAtNewLine });
const severityDesc = _.find(panelOptions.triggerSeverity, s => s.priority === Number(problem.priority));
const lastchange = formatLastChange(problem.lastchangeUnix, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat);
const age = moment.unix(problem.lastchangeUnix).fromNow(true);
@@ -95,7 +96,7 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
)}
</p>
<div className="alert-rule-item__text">
<div className={descriptionClass}>
{panelOptions.statusField && <AlertStatus problem={problem} blink={blink} />}
{panelOptions.severityField && (
<AlertSeverity severityDesc={severityDesc} blink={blink} highlightBackground={panelOptions.highlightBackground} />

47
src/panel-triggers/components/AlertList/AlertList.tsx
View File

@@ -59,33 +59,32 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
const { problems, panelOptions } = this.props;
const currentProblems = this.getCurrentProblems(this.state.page);
return [
return (
<div className="triggers-panel-container" key="alertListContainer">
<div className="triggers-panel-scroll">
<section className="card-section card-list-layout-list">
<ol className="alert-rule-list">
{currentProblems.map(problem =>
<AlertCard
key={problem.triggerid}
problem={problem}
panelOptions={panelOptions}
onTagClick={this.handleTagClick}
onProblemAck={this.handleProblemAck}
/>
)}
</ol>
</section>
<section className="card-section card-list-layout-list">
<ol className="alert-rule-list">
{currentProblems.map(problem =>
<AlertCard
key={problem.triggerid}
problem={problem}
panelOptions={panelOptions}
onTagClick={this.handleTagClick}
onProblemAck={this.handleProblemAck}
/>
)}
</ol>
</section>
<div className="triggers-panel-footer" key="alertListFooter">
<PaginationControl
itemsLength={problems.length}
pageSize={this.props.pageSize}
pageIndex={this.state.page}
onPageChange={this.handlePageChange}
/>
</div>
</div>,
<div className="triggers-panel-footer" key="alertListFooter">
<PaginationControl
itemsLength={problems.length}
pageSize={this.props.pageSize}
pageIndex={this.state.page}
onPageChange={this.handlePageChange}
/>
</div>
];
);
}
}