From e64070b8bfb5fa51531d5c06dc843a24fb048454 Mon Sep 17 00:00:00 2001 From: mcbrewster <37322608+mcbrewster@users.noreply.github.com> Date: Mon, 19 Aug 2019 20:54:18 -0600 Subject: [PATCH] Web-console: remove specific column filters (#8343) * add clear filter * update tool kit * remove usless check * auto run * add % --- web-console/package-lock.json | 6 +++--- web-console/package.json | 2 +- .../__snapshots__/query-view.spec.tsx.snap | 1 + .../string-menu-items/string-menu-items.tsx | 4 +++- .../time-menu-items/time-menu-items.tsx | 20 +++++++++---------- .../column-tree/column-tree.spec.tsx | 1 + .../query-view/column-tree/column-tree.tsx | 13 +++++++++++- .../src/views/query-view/query-view.tsx | 12 +++++++---- 8 files changed, 39 insertions(+), 20 deletions(-) diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 5c25e00ce13..956e3f95af6 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -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" } diff --git a/web-console/package.json b/web-console/package.json index 8f3b214cea8..e353e862695 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -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", diff --git a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap index 1090f255c82..6e4c46901a2 100644 --- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap +++ b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap @@ -10,6 +10,7 @@ exports[`sql view matches snapshot 1`] = ` addToGroupBy={[Function]} clear={[Function]} columnMetadataLoading={true} + currentFilters={[Function]} defaultSchema="druid" filterByRow={[Function]} hasGroupBy={[Function]} diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx index 79dcc4936ea..95af9f9197e 100644 --- a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx +++ b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx @@ -72,7 +72,9 @@ export class StringMenuItems extends React.PureComponent { /> filterByRow([{ row: 'xxx', header: columnName, operator: 'LIKE' }], false)} + onClick={() => + filterByRow([{ row: '%xxx%', header: columnName, operator: 'LIKE' }], false) + } /> ); diff --git a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx index 3400ae3896c..0c72bb65dff 100644 --- a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx +++ b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx @@ -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 { @@ -146,7 +146,7 @@ export class TimeMenuItems extends React.PureComponent { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { { - clear(); + clear(columnName, false); filterByRow( [ { diff --git a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx index d210eb2af04..8edfafdd705 100644 --- a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx +++ b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx @@ -27,6 +27,7 @@ describe('column tree', () => { it('matches snapshot', () => { const columnTree = ( []} queryAst={() => undefined} hasGroupBy={() => false} clear={() => null} diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx b/web-console/src/views/query-view/column-tree/column-tree.tsx index 47d4819dbc5..e16aa0d772a 100644 --- a/web-console/src/views/query-view/column-tree/column-tree.tsx +++ b/web-console/src/views/query-view/column-tree/column-tree.tsx @@ -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 )} + {props.currentFilters() && + props.currentFilters().includes(columnData.COLUMN_NAME) && ( + { + props.clear(columnData.COLUMN_NAME, true); + }} + /> + )} { + 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 { + 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 )} {this.renderMainArea()}