mirror of
https://github.com/prometheus/prometheus.git
synced 2024-11-09 23:24:05 -08:00
Add a tooltip for unix times (ISO strings) (#10376)
* Add a tooltip for unix times (ISO strings) Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com> * Leverage useLocalTime to adjust ISO string tooltips Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com> * revert pre styling removal Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>
This commit is contained in:
parent
f0ec619eec
commit
16e610ee8f
|
@ -5,6 +5,8 @@ import { Alert, Table } from 'reactstrap';
|
|||
import SeriesName from './SeriesName';
|
||||
import { Metric } from '../../types/types';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
export interface QueryResult {
|
||||
data:
|
||||
| null
|
||||
|
@ -24,6 +26,7 @@ export interface QueryResult {
|
|||
resultType: 'string';
|
||||
result: string;
|
||||
};
|
||||
useLocalTime: boolean;
|
||||
}
|
||||
|
||||
interface InstantSample {
|
||||
|
@ -47,7 +50,7 @@ const limitSeries = <S extends InstantSample | RangeSamples>(series: S[]): S[] =
|
|||
return series;
|
||||
};
|
||||
|
||||
const DataTable: FC<QueryResult> = ({ data }) => {
|
||||
const DataTable: FC<QueryResult> = ({ data, useLocalTime }) => {
|
||||
if (data === null) {
|
||||
return <Alert color="light">No data queried yet</Alert>;
|
||||
}
|
||||
|
@ -76,17 +79,21 @@ const DataTable: FC<QueryResult> = ({ data }) => {
|
|||
break;
|
||||
case 'matrix':
|
||||
rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
|
||||
const valueText = s.values
|
||||
.map((v) => {
|
||||
return v[1] + ' @' + v[0];
|
||||
})
|
||||
.join('\n');
|
||||
const valuesAndTimes = s.values.map((v) => {
|
||||
const printedDatetime = moment.unix(v[0]).toISOString(useLocalTime);
|
||||
return (
|
||||
<React.Fragment>
|
||||
{v[1]} @{<span title={printedDatetime}>{v[0]}</span>}
|
||||
<br />
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<tr style={{ whiteSpace: 'pre' }} key={index}>
|
||||
<td>
|
||||
<SeriesName labels={s.metric} format={doFormat} />
|
||||
</td>
|
||||
<td>{valueText}</td>
|
||||
<td>{valuesAndTimes}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -325,7 +325,7 @@ class Panel extends Component<PanelProps, PanelState> {
|
|||
onChangeTime={this.handleChangeEndTime}
|
||||
/>
|
||||
</div>
|
||||
<DataTable data={this.state.data} />
|
||||
<DataTable data={this.state.data} useLocalTime={this.props.useLocalTime} />
|
||||
</>
|
||||
)}
|
||||
</TabPane>
|
||||
|
|
Loading…
Reference in a new issue