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-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
padding: 10px;
}
.tab-content .alert {
margin-bottom: 0;
}
.data-table.table {
@ -67,7 +72,7 @@ button.execute-btn {
}
.graph-controls {
padding: 15px 0 10px 10px;
margin-bottom: 10px;
}
.graph-controls input {
@ -99,10 +104,6 @@ button.execute-btn {
color: #495057;
}
.tabpane-alert {
margin: 10px;
}
.graph-legend {
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 {
limitSeries(series) {
const maxSeries = 10000;
@ -588,11 +577,11 @@ class DataTable extends PureComponent {
const data = this.props.data;
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) {
return <TabPaneAlert color="secondary">Empty query result</TabPaneAlert>;
return <Alert color="secondary">Empty query result</Alert>;
}
let rows = [];
@ -619,16 +608,16 @@ class DataTable extends PureComponent {
rows.push(<tr><td>scalar</td><td>{data.result[1]}</td></tr>);
break;
default:
return <TabPaneAlert color="danger">Unsupported result value type '{data.resultType}'</TabPaneAlert>;
return <Alert color="danger">Unsupported result value type '{data.resultType}'</Alert>;
}
}
return (
<>
{data.result.length !== limitedSeries.length &&
<TabPaneAlert color="danger">
<Alert color="danger">
<strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {limitedSeries.length}.
</TabPaneAlert>
</Alert>
}
<Table hover size="sm" className="data-table">
<tbody>