/
QueryExecutionMetadata.jsx
105 lines (101 loc) · 3.69 KB
/
QueryExecutionMetadata.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from "react";
import PropTypes from "prop-types";
import WarningTwoTone from "@ant-design/icons/WarningTwoTone";
import TimeAgo from "@/components/TimeAgo";
import Tooltip from "@/components/Tooltip";
import useAddToDashboardDialog from "../hooks/useAddToDashboardDialog";
import useEmbedDialog from "../hooks/useEmbedDialog";
import QueryControlDropdown from "@/components/EditVisualizationButton/QueryControlDropdown";
import EditVisualizationButton from "@/components/EditVisualizationButton";
import useQueryResultData from "@/lib/useQueryResultData";
import { durationHumanize, pluralize, prettySize } from "@/lib/utils";
import "./QueryExecutionMetadata.less";
export default function QueryExecutionMetadata({
query,
queryResult,
isQueryExecuting,
selectedVisualization,
showEditVisualizationButton,
onEditVisualization,
extraActions,
}) {
const queryResultData = useQueryResultData(queryResult);
const openAddToDashboardDialog = useAddToDashboardDialog(query);
const openEmbedDialog = useEmbedDialog(query);
return (
<div className="query-execution-metadata">
<span className="m-r-5">
<QueryControlDropdown
query={query}
queryResult={queryResult}
queryExecuting={isQueryExecuting}
showEmbedDialog={openEmbedDialog}
embed={false}
apiKey={query.api_key}
selectedTab={selectedVisualization}
openAddToDashboardForm={openAddToDashboardDialog}
/>
</span>
{extraActions}
{showEditVisualizationButton && (
<EditVisualizationButton openVisualizationEditor={onEditVisualization} selectedTab={selectedVisualization} />
)}
<span className="m-l-5 m-r-10">
<span>
{queryResultData.truncated === true && (
<span className="m-r-5">
<Tooltip
title={
"Result truncated to " +
queryResultData.rows.length +
" rows. Databricks may truncate query results that are unstably large."
}>
<WarningTwoTone twoToneColor="#FF9800" />
</Tooltip>
</span>
)}
<strong>{queryResultData.rows.length}</strong> {pluralize("row", queryResultData.rows.length)}
</span>
<span className="m-l-5">
{!isQueryExecuting && (
<React.Fragment>
<strong>{durationHumanize(queryResultData.runtime)}</strong>
<span className="hidden-xs"> runtime</span>
</React.Fragment>
)}
{isQueryExecuting && <span>Running…</span>}
</span>
{queryResultData.metadata.data_scanned && (
<span className="m-l-5">
Data Scanned
<strong>{prettySize(queryResultData.metadata.data_scanned)}</strong>
</span>
)}
</span>
<div>
<span className="m-r-10">
<span className="hidden-xs">Refreshed </span>
<strong>
<TimeAgo date={queryResultData.retrievedAt} placeholder="-" />
</strong>
</span>
</div>
</div>
);
}
QueryExecutionMetadata.propTypes = {
query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
queryResult: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
isQueryExecuting: PropTypes.bool,
selectedVisualization: PropTypes.number,
showEditVisualizationButton: PropTypes.bool,
onEditVisualization: PropTypes.func,
extraActions: PropTypes.node,
};
QueryExecutionMetadata.defaultProps = {
isQueryExecuting: false,
selectedVisualization: null,
showEditVisualizationButton: false,
onEditVisualization: () => {},
extraActions: null,
};