mirror of
https://github.com/grafana/grafana.git
synced 2025-02-10 15:45:43 -06:00
- Queries in Explore have been string based - This PR introduces the use of the DataQuery type to denote all queries handled in Explore - Within Explore all handling of DataQueries is transparent - Modifying DataQueries is left to the datasource - Using `target` as variable names for DataQueries to be consistent with the rest of Grafana
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React, { PureComponent } from 'react';
|
|
|
|
import { QueryTransaction } from 'app/types/explore';
|
|
import ElapsedTime from './ElapsedTime';
|
|
|
|
function formatLatency(value) {
|
|
return `${(value / 1000).toFixed(1)}s`;
|
|
}
|
|
|
|
interface QueryTransactionStatusItemProps {
|
|
transaction: QueryTransaction;
|
|
}
|
|
|
|
class QueryTransactionStatusItem extends PureComponent<QueryTransactionStatusItemProps> {
|
|
render() {
|
|
const { transaction } = this.props;
|
|
const className = transaction.done ? 'query-transaction' : 'query-transaction query-transaction--loading';
|
|
return (
|
|
<div className={className}>
|
|
<div className="query-transaction__type">{transaction.resultType}:</div>
|
|
<div className="query-transaction__duration">
|
|
{transaction.done ? formatLatency(transaction.latency) : <ElapsedTime />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
interface QueryTransactionStatusProps {
|
|
transactions: QueryTransaction[];
|
|
}
|
|
|
|
export default class QueryTransactionStatus extends PureComponent<QueryTransactionStatusProps> {
|
|
render() {
|
|
const { transactions } = this.props;
|
|
return (
|
|
<div className="query-transactions">
|
|
{transactions.map((t, i) => (
|
|
<QueryTransactionStatusItem key={`${t.rowIndex}:${t.resultType}`} transaction={t} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
}
|