From 224ec8d0d9d3ce0b9422c6c35dd378d3d5cd6449 Mon Sep 17 00:00:00 2001 From: Palash Date: Thu, 23 Jun 2022 01:04:38 +0530 Subject: [PATCH 1/4] feat: search filter is added in the trace filter --- .../Panel/PanelBody/CommonCheckBox/index.tsx | 51 +++++++++++++++++-- frontend/src/store/reducers/trace.ts | 21 ++++++++ frontend/src/types/actions/trace.ts | 10 +++- frontend/src/types/reducer/trace.ts | 1 + 4 files changed, 79 insertions(+), 4 deletions(-) diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index 0681e7e5d5..72d7439ade 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -1,12 +1,19 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; +import { Button, Input } from 'antd'; +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; +import { INITIAL_FILTER_VALUE } from 'store/reducers/trace'; +import AppActions from 'types/actions'; +import { UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE } from 'types/actions/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; import CheckBoxComponent from '../Common/Checkbox'; +const { Search } = Input; + function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { - const { filter } = useSelector( + const { filter, filterDisplayValue } = useSelector( (state) => state.traces, ); @@ -15,9 +22,34 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { const status = filter.get(name) || {}; const statusObj = Object.keys(status); + const numberOfFilters = filterDisplayValue.get(name) || 0; + const dispatch = useDispatch>(); + const [searchFilter, setSearchFilter] = useState(''); + + const onClickMoreHandler = (): void => { + const newFilterDisplayValue = new Map(filterDisplayValue); + const preValue = + (newFilterDisplayValue.get(name) || 0) + INITIAL_FILTER_VALUE; + + newFilterDisplayValue.set(name, preValue); + + dispatch({ + type: UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE, + payload: newFilterDisplayValue, + }); + }; return ( <> + setSearchFilter(e.target.value)} + style={{ + padding: '0 3%', + }} + placeholder="Filter Values" + /> + {statusObj .sort((a, b) => { const countA = +status[a]; @@ -28,6 +60,13 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { } return countA - countB; }) + .filter((_, index) => index < numberOfFilters) + .filter((filter) => { + if (searchFilter.length === 0) { + return true; + } + return filter.includes(searchFilter); + }) .map((e) => ( ))} + + {numberOfFilters && statusObj.length > numberOfFilters && ( + + )} ); } diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index b99ee7dd3a..4023d375ca 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/frontend/src/store/reducers/trace.ts @@ -11,6 +11,7 @@ import { UPDATE_SELECTED_TAGS, UPDATE_SPAN_ORDER, UPDATE_SPAN_ORDER_PARAMS, + UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE, UPDATE_SPANS_AGGREGATE, UPDATE_SPANS_AGGREGATE_PAGE_NUMBER, UPDATE_SPANS_AGGREGATE_PAGE_SIZE, @@ -23,6 +24,8 @@ import { } from 'types/actions/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; +export const INITIAL_FILTER_VALUE = 4; + const initialValue: TraceReducer = { filter: new Map(), filterToFetchData: ['duration', 'status', 'serviceName'], @@ -53,6 +56,17 @@ const initialValue: TraceReducer = { loading: true, payload: { items: {} }, }, + filterDisplayValue: new Map([ + ['component', INITIAL_FILTER_VALUE], + ['duration', INITIAL_FILTER_VALUE], + ['httpCode', INITIAL_FILTER_VALUE], + ['httpHost', INITIAL_FILTER_VALUE], + ['httpMethod', INITIAL_FILTER_VALUE], + ['httpUrl', INITIAL_FILTER_VALUE], + ['operation', INITIAL_FILTER_VALUE], + ['serviceName', INITIAL_FILTER_VALUE], + ['status', INITIAL_FILTER_VALUE], + ]), }; const traceReducer = ( @@ -251,6 +265,13 @@ const traceReducer = ( }; } + case UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE: { + return { + ...state, + filterDisplayValue: action.payload, + }; + } + default: return state; } diff --git a/frontend/src/types/actions/trace.ts b/frontend/src/types/actions/trace.ts index da97d05129..f043926142 100644 --- a/frontend/src/types/actions/trace.ts +++ b/frontend/src/types/actions/trace.ts @@ -31,6 +31,8 @@ export const UPDATE_SPANS_AGGREGATE_PAGE_NUMBER = export const UPDATE_SPANS_AGGREGATE_PAGE_SIZE = 'UPDATE_SPANS_AGGREGATE_PAGE_SIZE'; export const UPDATE_SPAN_ORDER_PARAMS = 'UPDATE_SPAN_ORDER_PARAMS'; +export const UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE = + 'UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE'; export interface UpdateFilter { type: typeof UPDATE_TRACE_FILTER; @@ -187,6 +189,11 @@ export interface UpdateSpanParams { }; } +export interface UpdateTraceFilterDisplayValue { + type: typeof UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE; + payload: TraceReducer['filterDisplayValue']; +} + export type TraceActions = | UpdateFilter | GetTraceFilter @@ -208,4 +215,5 @@ export type TraceActions = | UpdateSpanOrder | UpdateSpansAggregatePageNumber | UpdateSpanSize - | UpdateSpanParams; + | UpdateSpanParams + | UpdateTraceFilterDisplayValue; diff --git a/frontend/src/types/reducer/trace.ts b/frontend/src/types/reducer/trace.ts index babeb344c6..fc1c08f4fc 100644 --- a/frontend/src/types/reducer/trace.ts +++ b/frontend/src/types/reducer/trace.ts @@ -32,6 +32,7 @@ export interface TraceReducer { payload: PayloadProps; }; yAxisUnit: string | undefined; + filterDisplayValue: Map; } interface SpansAggregateData { From 729c7fce7b84d67f8433d984ae87152306e3ef43 Mon Sep 17 00:00:00 2001 From: Palash Date: Thu, 23 Jun 2022 01:08:51 +0530 Subject: [PATCH 2/4] chore: initial value is made 8 --- frontend/src/store/reducers/trace.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index 4023d375ca..3f7672cdd5 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/frontend/src/store/reducers/trace.ts @@ -24,7 +24,7 @@ import { } from 'types/actions/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; -export const INITIAL_FILTER_VALUE = 4; +export const INITIAL_FILTER_VALUE = 8; const initialValue: TraceReducer = { filter: new Map(), From d7d0d70aa5e281834f87087f996e5a95e37aede4 Mon Sep 17 00:00:00 2001 From: Palash Date: Thu, 23 Jun 2022 01:12:12 +0530 Subject: [PATCH 3/4] chore: search filter is made conditional as filters need to be present --- .../Panel/PanelBody/CommonCheckBox/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index 72d7439ade..29255ae549 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -41,14 +41,16 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { return ( <> - setSearchFilter(e.target.value)} - style={{ - padding: '0 3%', - }} - placeholder="Filter Values" - /> + {statusObj.length > 0 && ( + setSearchFilter(e.target.value)} + style={{ + padding: '0 3%', + }} + placeholder="Filter Values" + /> + )} {statusObj .sort((a, b) => { From 1e980c3886701dc12c3b59e3ff29ceb44944da60 Mon Sep 17 00:00:00 2001 From: Palash Date: Thu, 23 Jun 2022 12:37:42 +0530 Subject: [PATCH 4/4] feat: condition is updated --- .../Filters/Panel/PanelBody/CommonCheckBox/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index 29255ae549..440c9652a7 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -39,6 +39,10 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { }); }; + const isMoreButtonAvilable = Boolean( + numberOfFilters && statusObj.length > numberOfFilters, + ); + return ( <> {statusObj.length > 0 && ( @@ -62,13 +66,15 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { } return countA - countB; }) - .filter((_, index) => index < numberOfFilters) .filter((filter) => { if (searchFilter.length === 0) { return true; } - return filter.includes(searchFilter); + return filter + .toLocaleLowerCase() + .includes(searchFilter.toLocaleLowerCase()); }) + .filter((_, index) => index < numberOfFilters) .map((e) => ( ))} - {numberOfFilters && statusObj.length > numberOfFilters && ( + {isMoreButtonAvilable && (