From 7ef82480b1826698ffa39c163b2a321cefad343f Mon Sep 17 00:00:00 2001 From: Sensor Date: Thu, 2 May 2024 17:56:14 +0800 Subject: [PATCH 01/10] Frontend segment_timeline support filter by datasource --- .../segment-timeline/segment-timeline.tsx | 66 +++++++++++++------ 1 file changed, 47 insertions(+), 19 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 3fc9e1ad87f0..705a6e6476ce 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -16,7 +16,8 @@ * limitations under the License. */ -import { FormGroup, HTMLSelect, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core'; +import {FormGroup, Radio, RadioGroup, ResizeSensor, MenuItem, Button} from '@blueprintjs/core'; +import { ItemPredicate, ItemRenderer, Select2 } from "@blueprintjs/select"; import type { AxisScale } from 'd3-axis'; import { scaleLinear, scaleUtc } from 'd3-scale'; import React from 'react'; @@ -528,6 +529,50 @@ 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}`.indexOf(normalizedQuery) >= 0; + } + }; + + 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, + }) + } + let datasourcesWzAll = [showAll].concat(datasources); + return (} + itemPredicate={filterDatasource}> + diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 61827e71840f..0d8d494d480e 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -16,8 +16,9 @@ * limitations under the License. */ -import {Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor} from '@blueprintjs/core'; -import { ItemPredicate, ItemRenderer, Select2 } from "@blueprintjs/select"; +import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core'; +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'; @@ -536,11 +537,14 @@ ORDER BY "start" DESC`; if (exactMatch) { return normalizedTitle === normalizedQuery; } else { - return ` ${normalizedTitle}`.indexOf(normalizedQuery) >= 0; + return ` ${normalizedTitle}`.includes(normalizedQuery); } }; - const datasourceRenderer: ItemRenderer = (val, {handleClick, handleFocus, modifiers,}) => { + const datasourceRenderer: ItemRenderer = ( + val, + { handleClick, handleFocus, modifiers }, + ) => { if (!modifiers.matchesPredicate) { return null; } @@ -552,26 +556,31 @@ ORDER BY "start" DESC`; onClick={handleClick} onFocus={handleFocus} roleStructure="listoption" - text={val}/> + text={val} + /> ); - } + }; 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}> - From 3d633728d6ee1cb7778e6dbfcb0dbbbf6d76b1f7 Mon Sep 17 00:00:00 2001 From: Sensor Date: Fri, 17 May 2024 23:14:35 +0800 Subject: [PATCH 09/10] Update segment-timeline.tsx --- web-console/src/components/segment-timeline/segment-timeline.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 70dfd913f0a7..063b853bc889 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -569,6 +569,7 @@ ORDER BY "start" DESC`; activeDatasource: selectedItem === showAll ? null : selectedItem, }); }; + const datasourcesWzAll = [showAll].concat(datasources); return ( From 370f2d5ff17d48b69c647934b2a83b5d78068cd3 Mon Sep 17 00:00:00 2001 From: Sensor Date: Fri, 17 May 2024 23:24:45 +0800 Subject: [PATCH 10/10] Update segment-timeline.tsx --- web-console/src/components/segment-timeline/segment-timeline.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx index 063b853bc889..70dfd913f0a7 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.tsx +++ b/web-console/src/components/segment-timeline/segment-timeline.tsx @@ -569,7 +569,6 @@ ORDER BY "start" DESC`; activeDatasource: selectedItem === showAll ? null : selectedItem, }); }; - const datasourcesWzAll = [showAll].concat(datasources); return (