AlertTab style fixes

This commit is contained in:
Torkel Ödegaard 2019-01-04 12:18:49 +01:00
parent 2eeba9dae1
commit f749ced36e
3 changed files with 33 additions and 34 deletions

View File

@ -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;
} }

View File

@ -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>
); );
} }

View File

@ -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;
} }