From 6bc29534a7fbfe161a8ea1d866a014f57a5b0187 Mon Sep 17 00:00:00 2001 From: Sensor Date: Sat, 25 May 2024 02:54:26 +0800 Subject: [PATCH] [Web Console] Datasource page support search datasource by keyword (#16371) * Frontend segment_timeline support filter by datasource * add dependency * fix eslint issues * resolve code style issue, update snapshot * fix comment * update licence * update package-lock.json * update snapshot * Update segment-timeline.tsx * Update segment-timeline.tsx --- licenses.yaml | 6 +- web-console/package-lock.json | 49 +++++------ web-console/package.json | 1 + .../segment-timeline.spec.tsx.snap | 56 ++++++------- .../segment-timeline/segment-timeline.tsx | 81 ++++++++++++++----- 5 files changed, 120 insertions(+), 73 deletions(-) diff --git a/licenses.yaml b/licenses.yaml index bd03e20d67dc..c8380e3940de 100644 --- a/licenses.yaml +++ b/licenses.yaml @@ -5040,7 +5040,7 @@ license_category: binary module: web-console license_name: Apache License version 2.0 copyright: Palantir Technologies -version: 4.20.1 +version: 4.20.2 --- @@ -5076,7 +5076,7 @@ license_category: binary module: web-console license_name: Apache License version 2.0 copyright: Palantir Technologies -version: 1.14.9 +version: 1.14.11 --- @@ -5085,7 +5085,7 @@ license_category: binary module: web-console license_name: Apache License version 2.0 copyright: Palantir Technologies -version: 4.9.22 +version: 4.9.24 --- diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 9d835e3da043..7e6a2fd0dc26 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -14,6 +14,7 @@ "@blueprintjs/datetime2": "^0.9.35", "@blueprintjs/icons": "^4.16.0", "@blueprintjs/popover2": "^1.14.9", + "@blueprintjs/select": "^4.9.24", "@druid-toolkit/query": "^0.22.13", "@druid-toolkit/visuals-core": "^0.3.3", "@druid-toolkit/visuals-react": "^0.3.3", @@ -823,9 +824,9 @@ } }, "node_modules/@blueprintjs/core": { - "version": "4.20.1", - "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.1.tgz", - "integrity": "sha512-nKFXfWj8PQrkweLrCr6VazYd4JJHCwiAxcgT9zzoxbEs0mSJF4yI7Qjoh5QkomtWugXrVLCDSzs4uJdaO1reAA==", + "version": "4.20.2", + "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.2.tgz", + "integrity": "sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==", "dependencies": { "@blueprintjs/colors": "^4.2.1", "@blueprintjs/icons": "^4.16.0", @@ -929,11 +930,11 @@ } }, "node_modules/@blueprintjs/popover2": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.9.tgz", - "integrity": "sha512-46gesoxeEbp1owKDGz7JwurXmVqSLq9ALes5etHqtjwdCpenBQc7GM+sFuJoLlEU7twcIlzwE6xaSU2+vnYVCQ==", + "version": "1.14.11", + "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.11.tgz", + "integrity": "sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==", "dependencies": { - "@blueprintjs/core": "^4.20.1", + "@blueprintjs/core": "^4.20.2", "@juggle/resize-observer": "^3.4.0", "@popperjs/core": "^2.11.7", "classnames": "^2.3.1", @@ -953,12 +954,12 @@ } }, "node_modules/@blueprintjs/select": { - "version": "4.9.22", - "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.22.tgz", - "integrity": "sha512-T5ofz571kPfycbxAuXlTrE7ndXIiHPCDMjADYJpb5HVOk0SYwwzDvnWjsYbyAj1SONbxOAKh4/wmFTDjZv7G2g==", + "version": "4.9.24", + "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.24.tgz", + "integrity": "sha512-OTjesxH/7UZvM7yAdHJ5u3sIjX1N8Rs4CQQ22AfqNl82SIROqkuXI31XEl6YNX1GsYfmAMiw0K7XohEKOMXR5g==", "dependencies": { - "@blueprintjs/core": "^4.20.1", - "@blueprintjs/popover2": "^1.14.9", + "@blueprintjs/core": "^4.20.2", + "@blueprintjs/popover2": "^1.14.11", "classnames": "^2.3.1", "tslib": "~2.5.0" }, @@ -19029,9 +19030,9 @@ } }, "@blueprintjs/core": { - "version": "4.20.1", - "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.1.tgz", - "integrity": "sha512-nKFXfWj8PQrkweLrCr6VazYd4JJHCwiAxcgT9zzoxbEs0mSJF4yI7Qjoh5QkomtWugXrVLCDSzs4uJdaO1reAA==", + "version": "4.20.2", + "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.2.tgz", + "integrity": "sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==", "requires": { "@blueprintjs/colors": "^4.2.1", "@blueprintjs/icons": "^4.16.0", @@ -19100,11 +19101,11 @@ } }, "@blueprintjs/popover2": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.9.tgz", - "integrity": "sha512-46gesoxeEbp1owKDGz7JwurXmVqSLq9ALes5etHqtjwdCpenBQc7GM+sFuJoLlEU7twcIlzwE6xaSU2+vnYVCQ==", + "version": "1.14.11", + "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.11.tgz", + "integrity": "sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==", "requires": { - "@blueprintjs/core": "^4.20.1", + "@blueprintjs/core": "^4.20.2", "@juggle/resize-observer": "^3.4.0", "@popperjs/core": "^2.11.7", "classnames": "^2.3.1", @@ -19114,12 +19115,12 @@ } }, "@blueprintjs/select": { - "version": "4.9.22", - "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.22.tgz", - "integrity": "sha512-T5ofz571kPfycbxAuXlTrE7ndXIiHPCDMjADYJpb5HVOk0SYwwzDvnWjsYbyAj1SONbxOAKh4/wmFTDjZv7G2g==", + "version": "4.9.24", + "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-4.9.24.tgz", + "integrity": "sha512-OTjesxH/7UZvM7yAdHJ5u3sIjX1N8Rs4CQQ22AfqNl82SIROqkuXI31XEl6YNX1GsYfmAMiw0K7XohEKOMXR5g==", "requires": { - "@blueprintjs/core": "^4.20.1", - "@blueprintjs/popover2": "^1.14.9", + "@blueprintjs/core": "^4.20.2", + "@blueprintjs/popover2": "^1.14.11", "classnames": "^2.3.1", "tslib": "~2.5.0" } diff --git a/web-console/package.json b/web-console/package.json index 3e713fc2f68a..a6f4e5146604 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -68,6 +68,7 @@ "@blueprintjs/datetime2": "^0.9.35", "@blueprintjs/icons": "^4.16.0", "@blueprintjs/popover2": "^1.14.9", + "@blueprintjs/select": "^4.9.24", "@druid-toolkit/query": "^0.22.13", "@druid-toolkit/visuals-core": "^0.3.3", "@druid-toolkit/visuals-react": "^0.3.3", diff --git a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap index 762026d86bd2..d4746e616ab3 100644 --- a/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap +++ b/web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap @@ -95,38 +95,40 @@ exports[`SegmentTimeline matches snapshot 1`] = ` class="bp4-form-content" > diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 3fc9e1ad87f0..70dfd913f0a7 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -16,7 +16,10 @@ * limitations under the License. */ -import { FormGroup, HTMLSelect, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core'; +import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core'; +import { IconNames } from '@blueprintjs/icons'; +import type { ItemPredicate, ItemRenderer } from '@blueprintjs/select'; +import { Select2 } from '@blueprintjs/select'; import type { AxisScale } from 'd3-axis'; import { scaleLinear, scaleUtc } from 'd3-scale'; import React from 'react'; @@ -528,6 +531,63 @@ ORDER BY "start" DESC`; const { capabilities } = this.props; const { datasources, activeDataType, activeDatasource, startDate, endDate } = this.state; + const filterDatasource: ItemPredicate = (query, val, _index, exactMatch) => { + const normalizedTitle = val.toLowerCase(); + const normalizedQuery = query.toLowerCase(); + + if (exactMatch) { + return normalizedTitle === normalizedQuery; + } else { + return ` ${normalizedTitle}`.includes(normalizedQuery); + } + }; + + const datasourceRenderer: ItemRenderer = ( + val, + { handleClick, handleFocus, modifiers }, + ) => { + if (!modifiers.matchesPredicate) { + return null; + } + return ( + + ); + }; + + const DatasourceSelect: React.FC = () => { + const showAll = 'Show all'; + const handleItemSelected = (selectedItem: string) => { + this.setState({ + activeDatasource: selectedItem === showAll ? null : selectedItem, + }); + }; + const datasourcesWzAll = [showAll].concat(datasources); + return ( + + items={datasourcesWzAll} + onItemSelect={handleItemSelected} + itemRenderer={datasourceRenderer} + noResults={} + itemPredicate={filterDatasource} + fill + > +