mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 06:56:07 -06:00
AlertTab style fixes
This commit is contained in:
parent
2eeba9dae1
commit
f749ced36e
@ -25,7 +25,7 @@ export interface EditorToolbarView {
|
|||||||
icon?: string;
|
icon?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
render?: (closeFunction?: any) => JSX.Element | JSX.Element[];
|
render?: () => JSX.Element;
|
||||||
action?: () => void;
|
action?: () => void;
|
||||||
buttonType: ToolbarButtonType;
|
buttonType: ToolbarButtonType;
|
||||||
}
|
}
|
||||||
|
@ -69,41 +69,39 @@ class StateHistory extends PureComponent<Props, State> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ margin: '0 auto', maxWidth: '720px' }}>
|
{stateHistoryItems.length > 0 && (
|
||||||
{stateHistoryItems.length > 0 && (
|
<div className="p-b-1">
|
||||||
<div style={{ marginBottom: '15px' }}>
|
<span className="muted">Last 50 state changes</span>
|
||||||
<span className="muted">Last 50 state changes</span>
|
<button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
|
||||||
<button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
|
<i className="fa fa-trash" /> {` Clear history`}
|
||||||
<i className="fa fa-trash" /> {` Clear history`}
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
<ol className="alert-rule-list">
|
||||||
<ol className="alert-rule-list">
|
{stateHistoryItems.length > 0 ? (
|
||||||
{stateHistoryItems.length > 0 ? (
|
stateHistoryItems.map((item, index) => {
|
||||||
stateHistoryItems.map((item, index) => {
|
return (
|
||||||
return (
|
<li className="alert-rule-item" key={`${item.time}-${index}`}>
|
||||||
<li className="alert-rule-item" key={`${item.time}-${index}`}>
|
<div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
|
||||||
<div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
|
<i className={item.stateModel.iconClass} />
|
||||||
<i className={item.stateModel.iconClass} />
|
</div>
|
||||||
</div>
|
<div className="alert-rule-item__body">
|
||||||
<div className="alert-rule-item__body">
|
<div className="alert-rule-item__header">
|
||||||
<div className="alert-rule-item__header">
|
<p className="alert-rule-item__name">{item.alertName}</p>
|
||||||
<p className="alert-rule-item__name">{item.alertName}</p>
|
<div className="alert-rule-item__text">
|
||||||
<div className="alert-rule-item__text">
|
<span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
|
||||||
<span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{item.info}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="alert-rule-item__time">{item.time}</div>
|
{item.info}
|
||||||
</li>
|
</div>
|
||||||
);
|
<div className="alert-rule-item__time">{item.time}</div>
|
||||||
})
|
</li>
|
||||||
) : (
|
);
|
||||||
<i>No state changes recorded</i>
|
})
|
||||||
)}
|
) : (
|
||||||
</ol>
|
<i>No state changes recorded</i>
|
||||||
</div>
|
)}
|
||||||
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -107,6 +107,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user