mirror of https://github.com/apache/druid.git
Web-console: remove specific column filters (#8343)
* add clear filter * update tool kit * remove usless check * auto run * add %
This commit is contained in:
parent
dd2e53baf4
commit
e64070b8bf
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -10,6 +10,7 @@ exports[`sql view matches snapshot 1`] = `
|
|||
addToGroupBy={[Function]}
|
||||
clear={[Function]}
|
||||
columnMetadataLoading={true}
|
||||
currentFilters={[Function]}
|
||||
defaultSchema="druid"
|
||||
filterByRow={[Function]}
|
||||
hasGroupBy={[Function]}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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(
|
||||
[
|
||||
{
|
||||
|
|
|
@ -27,6 +27,7 @@ describe('column tree', () => {
|
|||
it('matches snapshot', () => {
|
||||
const columnTree = (
|
||||
<ColumnTree
|
||||
currentFilters={() => []}
|
||||
queryAst={() => undefined}
|
||||
hasGroupBy={() => false}
|
||||
clear={() => null}
|
||||
|
|
|
@ -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}`}
|
||||
|
|
|
@ -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()}
|
||||
|
|
Loading…
Reference in New Issue