Apache/druid
1
0
Fork 0
mirror of https://github.com/apache/druid.git synced 2025-02-25 20:48:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

show full value in SQL view (#8660)

Browse Source
This commit is contained in:
Vadim Ogievetsky 2019-10-10 14:16:11 -07:00 committed by Clint Wylie
parent bba262a4c5
commit 6c609293b2
1 changed files with 103 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web-console/src/views/query-view/query-output/query-output.tsx
View File

@ -26,11 +26,18 @@ import {
import React from 'react';
import ReactTable from 'react-table';
import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
import { copyAndAlert } from '../../../utils';
import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
import './query-output.scss';
function trimValue(str: any): string {
str = String(str);
if (str.length < 102) return str;
return str.substr(0, 100) + '...';
}
export interface QueryOutputProps {
loading: boolean;
queryResult?: HeaderRows;
@ -40,7 +47,25 @@ export interface QueryOutputProps {
runeMode: boolean;
}
export class QueryOutput extends React.PureComponent<QueryOutputProps> {
export interface QueryOutputState {
showValue?: string;
}
export class QueryOutput extends React.PureComponent<QueryOutputProps, QueryOutputState> {
constructor(props: QueryOutputProps) {
super(props);
this.state = {};
}
renderShowValueDialog(): JSX.Element | undefined {
const { showValue } = this.state;
if (!showValue) return;
return (
<ShowValueDialog onClose={() => this.setState({ showValue: undefined })} str={showValue} />
);
}
render(): JSX.Element {
const { queryResult, parsedQuery, loading, error } = this.props;
@ -87,6 +112,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
};
})}
/>
{this.renderShowValueDialog()}
</div>
);
}
@ -104,7 +130,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
if (sorted.id === h) {
basicActions.push({
icon: sorted.desc ? IconNames.SORT_ASC : IconNames.SORT_DESC,
title: `Order by: ${h} ${sorted.desc ? 'ASC' : 'DESC'}`,
title: `Order by: ${trimValue(h)} ${sorted.desc ? 'ASC' : 'DESC'}`,
onAction: () => {
onQueryChange(parsedQuery.orderBy(h, sorted.desc ? 'ASC' : 'DESC'), true);
},
@ -116,14 +142,14 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
basicActions.push(
{
icon: IconNames.SORT_DESC,
title: `Order by: ${h} DESC`,
title: `Order by: ${trimValue(h)} DESC`,
onAction: () => {
onQueryChange(parsedQuery.orderBy(h, 'DESC'), true);
},
},
{
icon: IconNames.SORT_ASC,
title: `Order by: ${h} ASC`,
title: `Order by: ${trimValue(h)} ASC`,
onAction: () => {
onQueryChange(parsedQuery.orderBy(h, 'ASC'), true);
},
@ -132,7 +158,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
}
basicActions.push({
icon: IconNames.CROSS,
title: `Remove: ${h}`,
title: `Remove: ${trimValue(h)}`,
onAction: () => {
onQueryChange(parsedQuery.excludeColumn(h), true);
},
@ -143,12 +169,13 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
<Menu>
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: ${h}`}
text={`Copy: ${trimValue(h)}`}
onClick={() => {
copyAndAlert(h, `${h}' copied to clipboard`);
}}
/>
{runeMode && (
{!runeMode && (
<>
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: ORDER BY ${basicIdentifierEscape(h)} ASC`}
@ -159,8 +186,6 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
)
}
/>
)}
{runeMode && (
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: 'ORDER BY ${basicIdentifierEscape(h)} DESC'`}
@ -171,6 +196,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
)
}
/>
</>
)}
</Menu>
);
@ -178,23 +204,36 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
return actionsMenu ? actionsMenu : undefined;
}
getRowActions(row: string, header: string) {
getRowActions(row: any, header: string) {
const { parsedQuery, onQueryChange, runeMode } = this.props;
const showFullValueMenuItem =
typeof row === 'string' ? (
<MenuItem
icon={IconNames.EYE_OPEN}
text={`Show full value`}
onClick={() => {
this.setState({ showValue: row });
}}
/>
) : (
undefined
);
let actionsMenu;
if (parsedQuery) {
actionsMenu = (
<Menu>
<MenuItem
icon={IconNames.FILTER_KEEP}
text={`Filter by: ${header} = ${row}`}
text={`Filter by: ${trimValue(header)} = ${trimValue(row)}`}
onClick={() => {
onQueryChange(parsedQuery.filterRow(header, row, '='), true);
}}
/>
<MenuItem
icon={IconNames.FILTER_REMOVE}
text={`Filter by: ${header} != ${row}`}
text={`Filter by: ${trimValue(header)} != ${trimValue(row)}`}
onClick={() => {
onQueryChange(parsedQuery.filterRow(header, row, '!='), true);
}}
@ -203,20 +242,21 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
<>
<MenuItem
icon={IconNames.FILTER_KEEP}
text={`Filter by: ${header} >= ${row}`}
text={`Filter by: ${trimValue(header)} >= ${trimValue(row)}`}
onClick={() => {
onQueryChange(parsedQuery.filterRow(header, row, '>='), true);
}}
/>
<MenuItem
icon={IconNames.FILTER_KEEP}
text={`Filter by: ${header} <= ${row}`}
text={`Filter by: ${trimValue(header)} <= ${trimValue(row)}`}
onClick={() => {
onQueryChange(parsedQuery.filterRow(header, row, '<='), true);
}}
/>
</>
)}
{showFullValueMenuItem}
</Menu>
);
} else {
@ -224,10 +264,11 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
<Menu>
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: ${row}`}
text={`Copy: ${trimValue(row)}`}
onClick={() => copyAndAlert(row, `${row} copied to clipboard`)}
/>
{runeMode && (
{!runeMode && (
<>
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: ${basicIdentifierEscape(header)} = ${basicLiteralEscape(row)}`}
@ -240,8 +281,6 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
)
}
/>
)}
{runeMode && (
<MenuItem
icon={IconNames.CLIPBOARD}
text={`Copy: ${basicIdentifierEscape(header)} != ${basicLiteralEscape(row)}`}
@ -254,7 +293,9 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
)
}
/>
</>
)}
{showFullValueMenuItem}
</Menu>
);
}