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

View File

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

View File

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

View File

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

View File

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

View File

@ -56,7 +56,7 @@ export interface TimeMenuItemsProps {
filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
queryAst?: SqlQuery;
columnName: string;
clear: () => void;
clear: (column: string, preferablyRun: boolean) => void;
}
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')],
spacing: [' ', ' '],
});
clear();
clear(columnName, false);
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')],
spacing: [' ', ' '],
});
clear();
clear(columnName, false);
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')],
spacing: [' ', ' '],
});
clear();
clear(columnName, false);
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')],
spacing: [' ', ' '],
});
clear();
clear(columnName, false);
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')],
spacing: [' ', ' '],
});
clear();
clear(columnName, false);
filterByRow([{ row: additiveExpression, header: columnName, operator: '>=' }], true);
}}
/>
@ -207,7 +207,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current hour`}
onClick={() => {
const next = this.getNextHour(hour, day, month, year);
clear();
clear(columnName, false);
filterByRow(
[
{
@ -233,7 +233,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current day`}
onClick={() => {
const next = this.getNextDay(day, month, year);
clear();
clear(columnName, false);
filterByRow(
[
{
@ -255,7 +255,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
text={`Current month`}
onClick={() => {
const next = this.getNextMonth(month, year);
clear();
clear(columnName, false);
filterByRow(
[
{
@ -276,7 +276,7 @@ export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
<MenuItem
text={`Current year`}
onClick={() => {
clear();
clear(columnName, false);
filterByRow(
[
{

View File

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

View File

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

View File

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