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:
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

View file

@ -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>
);
});

View file

@ -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>