Apache
/
druid
mirror of https://github.com/apache/druid.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Web-console: remove specific column filters (#8343) 

* add clear filter

* update tool kit

* remove usless check

* auto run

* add %
This commit is contained in:
mcbrewster 2019-08-19 20:54:18 -06:00 committed by Fangjin Yang
parent dd2e53baf4
commit e64070b8bf
8 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-console/package-lock.json generated
View File

@ -4395,9 +4395,9 @@
"integrity": "sha512-0sYnfUHHMoajaud/i5BHKA12bUxiWEHJ9rxGqVEppFxsEcxef0TZQ5J59lU+UniEBcz/sG5fTESRyS7cOm3tSQ==" "integrity": "sha512-0sYnfUHHMoajaud/i5BHKA12bUxiWEHJ9rxGqVEppFxsEcxef0TZQ5J59lU+UniEBcz/sG5fTESRyS7cOm3tSQ=="
}, },
"druid-query-toolkit": { "druid-query-toolkit": {
"version": "0.3.20", "version": "0.3.21",
"resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.3.20.tgz", "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.3.21.tgz",
"integrity": "sha512-jrGNu+o/nD+uhbxAMLXEQrSWNEylCRmkiuFDJSPCMz7cjMNArsdIgyBQHPezNAeTDpReelAt59xJ7pvqXwPIvw==", "integrity": "sha512-CdMLIqXy3pzjZb8iq2n6B8R7jTKVyAuAUdnH6kF0EbP1Fb2XSh8Kg8O88Ew+3ye4R9PY86a4LlXMPW4NSyKX+A==",
"requires": { "requires": {
"tslib": "^1.10.0" "tslib": "^1.10.0"
} }

2
web-console/package.json
View File

@ -61,7 +61,7 @@
"d3": "^5.9.7", "d3": "^5.9.7",
"d3-array": "^2.2.0", "d3-array": "^2.2.0",
"druid-console": "^0.0.2", "druid-console": "^0.0.2",
"druid-query-toolkit": "^0.3.20", "druid-query-toolkit": "^0.3.21",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"has-own-prop": "^2.0.0", "has-own-prop": "^2.0.0",
"hjson": "^3.1.2", "hjson": "^3.1.2",

1
web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
View File

@ -10,6 +10,7 @@ exports[`sql view matches snapshot 1`] = `
addToGroupBy={[Function]} addToGroupBy={[Function]}
clear={[Function]} clear={[Function]}
columnMetadataLoading={true} columnMetadataLoading={true}
currentFilters={[Function]}
defaultSchema="druid" defaultSchema="druid"
filterByRow={[Function]} filterByRow={[Function]}
hasGroupBy={[Function]} hasGroupBy={[Function]}

4
web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
View File

@ -72,7 +72,9 @@ export class StringMenuItems extends React.PureComponent<StringMenuItemsProps> {
/> />
<MenuItem <MenuItem
text={`"${columnName}" LIKE '%xxx%'`} text={`"${columnName}" LIKE '%xxx%'`}
onClick={() => filterByRow([{ row: 'xxx', header: columnName, operator: 'LIKE' }], false)} onClick={() =>
filterByRow([{ row: '%xxx%', header: columnName, operator: 'LIKE' }], false)
}
/> />
</MenuItem> </MenuItem>
); );

20
web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
View File

@ -56,7 +56,7 @@ export interface TimeMenuItemsProps {
filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void; filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
queryAst?: SqlQuery; queryAst?: SqlQuery;
columnName: string; columnName: string;
clear: () => void; clear: (column: string, preferablyRun: boolean) => void;
} }
export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> { export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
@ -146,7 +146,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('HOUR', '1')], ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('HOUR', '1')],
spacing: [' ', ' '], spacing: [' ', ' '],
}); });
clear(); clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true); filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}} }}
/> />
@ -159,7 +159,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('DAY', '1')], ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('DAY', '1')],
spacing: [' ', ' '], spacing: [' ', ' '],
}); });
clear(); clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true); filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}} }}
/> />
@ -172,7 +172,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('DAY', '7')], ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('DAY', '7')],
spacing: [' ', ' '], spacing: [' ', ' '],
}); });
clear(); clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true); filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}} }}
/> />
@ -185,7 +185,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('MONTH', '1')], ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('MONTH', '1')],
spacing: [' ', ' '], spacing: [' ', ' '],
}); });
clear(); clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true); filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}} }}
/> />
@ -198,7 +198,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('YEAR', '1')], ex: [refExpressionFactory('CURRENT_TIMESTAMP'), intervalFactory('YEAR', '1')],
spacing: [' ', ' '], spacing: [' ', ' '],
}); });
clear(); clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true); filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}} }}
/> />
@ -207,7 +207,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current hour`} text={`Current hour`}
onClick={() => { onClick={() => {
const next = this.getNextHour(hour, day, month, year); const next = this.getNextHour(hour, day, month, year);
clear(); clear(columnName, false);
filterByRow( filterByRow(
[ [
{ {
@ -233,7 +233,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current day`} text={`Current day`}
onClick={() => { onClick={() => {
const next = this.getNextDay(day, month, year); const next = this.getNextDay(day, month, year);
clear(); clear(columnName, false);
filterByRow( filterByRow(
[ [
{ {
@ -255,7 +255,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current month`} text={`Current month`}
onClick={() => { onClick={() => {
const next = this.getNextMonth(month, year); const next = this.getNextMonth(month, year);
clear(); clear(columnName, false);
filterByRow( filterByRow(
[ [
{ {
@ -276,7 +276,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
<MenuItem <MenuItem
text={`Current year`} text={`Current year`}
onClick={() => { onClick={() => {
clear(); clear(columnName, false);
filterByRow( filterByRow(
[ [
{ {

1
web-console/src/views/query-view/column-tree/column-tree.spec.tsx
View File

@ -27,6 +27,7 @@ describe('column tree', () => {
it('matches snapshot', () => { it('matches snapshot', () => {
const columnTree = ( const columnTree = (
<ColumnTree <ColumnTree
currentFilters={() => []}
queryAst={() => undefined} queryAst={() => undefined}
hasGroupBy={() => false} hasGroupBy={() => false}
clear={() => null} clear={() => null}

13
web-console/src/views/query-view/column-tree/column-tree.tsx
View File

@ -118,6 +118,7 @@ export interface ColumnTreeProps {
onQueryStringChange: (queryString: string, run: boolean) => void; onQueryStringChange: (queryString: string, run: boolean) => void;
defaultSchema?: string; defaultSchema?: string;
defaultTable?: string; defaultTable?: string;
currentFilters: () => string[];
addFunctionToGroupBy: ( addFunctionToGroupBy: (
functionName: string, functionName: string,
spacing: string[], spacing: string[],
@ -137,7 +138,7 @@ export interface ColumnTreeProps {
filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void; filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
hasGroupBy: () => boolean; hasGroupBy: () => boolean;
queryAst: () => SqlQuery | undefined; queryAst: () => SqlQuery | undefined;
clear: () => void; clear: (column: string, preferablyRun: boolean) => void;
} }
export interface ColumnTreeState { export interface ColumnTreeState {
@ -263,6 +264,16 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
queryAst={props.queryAst()} queryAst={props.queryAst()}
/> />
)} )}
{props.currentFilters() &&
props.currentFilters().includes(columnData.COLUMN_NAME) && (
<MenuItem
icon={IconNames.FILTER_REMOVE}
text={`Remove filter`}
onClick={() => {
props.clear(columnData.COLUMN_NAME, true);
}}
/>
)}
<MenuItem <MenuItem
icon={IconNames.CLIPBOARD} icon={IconNames.CLIPBOARD}
text={`Copy: ${columnData.COLUMN_NAME}`} text={`Copy: ${columnData.COLUMN_NAME}`}

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

@ -625,13 +625,11 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
this.handleQueryStringChange(modifiedAst.toString(), preferablyRun); this.handleQueryStringChange(modifiedAst.toString(), preferablyRun);
}; };
private sqlClearWhere = (): void => { private sqlClearWhere = (column: string, preferablyRun: boolean): void => {
const { queryAst } = this.state; const { queryAst } = this.state;
if (!queryAst) return; if (!queryAst) return;
if (queryAst.whereClause) { this.handleQueryStringChange(queryAst.removeFilter(column).toString(), preferablyRun);
queryAst.whereClause = undefined;
}
}; };
private handleQueryStringChange = (queryString: string, preferablyRun?: boolean): void => { private handleQueryStringChange = (queryString: string, preferablyRun?: boolean): void => {
@ -700,6 +698,11 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
return queryAst; return queryAst;
}; };
private getCurrentFilters = () => {
const { queryAst } = this.state;
return queryAst.getCurrentFilters();
};
render(): JSX.Element { render(): JSX.Element {
const { columnMetadata, columnMetadataLoading, columnMetadataError, queryAst } = this.state; const { columnMetadata, columnMetadataLoading, columnMetadataError, queryAst } = this.state;
@ -728,6 +731,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
onQueryStringChange={this.handleQueryStringChange} onQueryStringChange={this.handleQueryStringChange}
defaultSchema={defaultSchema ? defaultSchema : 'druid'} defaultSchema={defaultSchema ? defaultSchema : 'druid'}
defaultTable={defaultTable} defaultTable={defaultTable}
currentFilters={this.getCurrentFilters}
/> />
)} )}
{this.renderMainArea()} {this.renderMainArea()}