mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-09 23:24:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add a tooltip for unix times (ISO strings) (#10376)

Browse source 
* 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:
Ondrej Kokes 2022-03-09 10:16:54 +01:00 committed by GitHub
parent f0ec619eec
commit 16e610ee8f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/ui/react-app/src/pages/graph/DataTable.tsx
View file

@ -5,6 +5,8 @@ import { Alert, Table } from 'reactstrap';
import SeriesName from './SeriesName'; import SeriesName from './SeriesName';
import { Metric } from '../../types/types'; import { Metric } from '../../types/types';
import moment from 'moment';
export interface QueryResult { export interface QueryResult {
data: data:
| null | null
@ -24,6 +26,7 @@ export interface QueryResult {
resultType: 'string'; resultType: 'string';
result: string; result: string;
}; };
useLocalTime: boolean;
} }
interface InstantSample { interface InstantSample {
@ -47,7 +50,7 @@ const limitSeries = <S extends InstantSample | RangeSamples>(series: S[]): S[] =
return series; return series;
}; };
const DataTable: FC<QueryResult> = ({ data }) => { const DataTable: FC<QueryResult> = ({ data, useLocalTime }) => {
if (data === null) { if (data === null) {
return <Alert color="light">No data queried yet</Alert>; return <Alert color="light">No data queried yet</Alert>;
} }
@ -76,17 +79,21 @@ const DataTable: FC<QueryResult> = ({ data }) => {
break; break;
case 'matrix': case 'matrix':
rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => { rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
const valueText = s.values const valuesAndTimes = s.values.map((v) => {
.map((v) => { const printedDatetime = moment.unix(v[0]).toISOString(useLocalTime);
return v[1] + ' @' + v[0]; return (
}) <React.Fragment>
.join('\n'); {v[1]} @{<span title={printedDatetime}>{v[0]}</span>}
<br />
</React.Fragment>
);
});
return ( return (
<tr style={{ whiteSpace: 'pre' }} key={index}> <tr style={{ whiteSpace: 'pre' }} key={index}>
<td> <td>
<SeriesName labels={s.metric} format={doFormat} /> <SeriesName labels={s.metric} format={doFormat} />
</td> </td>
<td>{valueText}</td> <td>{valuesAndTimes}</td>
</tr> </tr>
); );
}); });

2
web/ui/react-app/src/pages/graph/Panel.tsx
View file

@ -325,7 +325,7 @@ class Panel extends Component<PanelProps, PanelState> {
onChangeTime={this.handleChangeEndTime} onChangeTime={this.handleChangeEndTime}
/> />
</div> </div>
<DataTable data={this.state.data} /> <DataTable data={this.state.data} useLocalTime={this.props.useLocalTime} />
</> </>
)} )}
</TabPane> </TabPane>