Remove TabPaneAlert

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2019-02-12 23:42:02 +01:00
parent 08e474dd48
commit 2ace1d732e
2 changed files with 11 additions and 21 deletions

View file

@ -27,6 +27,11 @@ button.execute-btn {
border-left: 1px solid #dee2e6; border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
padding: 10px;
}
.tab-content .alert {
margin-bottom: 0;
} }
.data-table.table { .data-table.table {
@ -67,7 +72,7 @@ button.execute-btn {
} }
.graph-controls { .graph-controls {
padding: 15px 0 10px 10px; margin-bottom: 10px;
} }
.graph-controls input { .graph-controls input {
@ -99,10 +104,6 @@ button.execute-btn {
color: #495057; color: #495057;
} }
.tabpane-alert {
margin: 10px;
}
.graph-legend { .graph-legend {
margin: 15px 0 15px 25px; margin: 15px 0 15px 25px;
} }

View file

@ -563,17 +563,6 @@ class ExpressionInput extends Component {
} }
} }
function TabPaneAlert(props) {
return (
<>
{/* Without the following <div> hack, giving the <Alert> any top margin
makes the entire tab pane look detached by that margin. */}
<div style={{height: '1px'}}></div>
<Alert className="tabpane-alert" color={props.color}>{props.children}</Alert>
</>
);
}
class DataTable extends PureComponent { class DataTable extends PureComponent {
limitSeries(series) { limitSeries(series) {
const maxSeries = 10000; const maxSeries = 10000;
@ -588,11 +577,11 @@ class DataTable extends PureComponent {
const data = this.props.data; const data = this.props.data;
if (data === null) { if (data === null) {
return <TabPaneAlert color="light">No data queried yet</TabPaneAlert>; return <Alert color="light">No data queried yet</Alert>;
} }
if (data.result === null || data.result.length === 0) { if (data.result === null || data.result.length === 0) {
return <TabPaneAlert color="secondary">Empty query result</TabPaneAlert>; return <Alert color="secondary">Empty query result</Alert>;
} }
let rows = []; let rows = [];
@ -619,16 +608,16 @@ class DataTable extends PureComponent {
rows.push(<tr><td>scalar</td><td>{data.result[1]}</td></tr>); rows.push(<tr><td>scalar</td><td>{data.result[1]}</td></tr>);
break; break;
default: default:
return <TabPaneAlert color="danger">Unsupported result value type '{data.resultType}'</TabPaneAlert>; return <Alert color="danger">Unsupported result value type '{data.resultType}'</Alert>;
} }
} }
return ( return (
<> <>
{data.result.length !== limitedSeries.length && {data.result.length !== limitedSeries.length &&
<TabPaneAlert color="danger"> <Alert color="danger">
<strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {limitedSeries.length}. <strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {limitedSeries.length}.
</TabPaneAlert> </Alert>
} }
<Table hover size="sm" className="data-table"> <Table hover size="sm" className="data-table">
<tbody> <tbody>