mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
Remove TabPaneAlert
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
parent
08e474dd48
commit
2ace1d732e
11
src/App.css
11
src/App.css
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
21
src/App.js
21
src/App.js
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue