From 6dd14cba700dc756a2fa4e740994b7f10e14c832 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 21 Nov 2023 19:43:16 +0100 Subject: [PATCH] UI fixes v1.15.0 (#1690) * Api v1.15.0 (#1685) * fix(chalice): (EE) fixed Path Analysis breaking when specifying a session's filter in addition to a start-point * chore(helm): Updating chalice image release * fix(ui): filter keys conflcit with metadata, path analysis 4 col * fix(ui): clear the filers and series on card type change * fix(ui): console redux tab null check --------- Co-authored-by: Kraiem Taha Yassine Co-authored-by: rjshrjndrn --- .../app/components/Session_/Storage/Storage.tsx | 14 +++++++------- .../FilterAutoComplete/FilterAutoComplete.tsx | 8 +++++++- frontend/app/duck/customField.js | 6 +++--- frontend/app/mstore/metricStore.ts | 4 +++- frontend/app/mstore/types/widget.ts | 5 +++-- frontend/app/types/filter/newFilter.js | 3 ++- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx index 05713bfd9..e1b9da81a 100644 --- a/frontend/app/components/Session_/Storage/Storage.tsx +++ b/frontend/app/components/Session_/Storage/Storage.tsx @@ -111,7 +111,7 @@ function Storage(props: Props) { return
; } - const stateDiff = diff(prevItem.state, item.state); + const stateDiff = diff(prevItem.state, item?.state); if (!stateDiff) { return ( @@ -171,23 +171,23 @@ function Storage(props: Props) { switch (type) { case STORAGE_TYPES.REDUX: case STORAGE_TYPES.NGRX: - src = itemD.action; + src = itemD?.action; name = src && src.type; break; case STORAGE_TYPES.VUEX: - src = itemD.mutation; + src = itemD?.mutation; name = src && src.type; break; case STORAGE_TYPES.MOBX: - src = itemD.payload; + src = itemD?.payload; name = `@${item.type} ${src && src.type}`; break; case STORAGE_TYPES.ZUSTAND: src = null; - name = itemD.mutation.join(''); + name = itemD?.mutation.join(''); } - if (src !== null && !showDiffs && itemD.state) { + if (src !== null && !showDiffs && itemD?.state) { setShowDiffs(true); } @@ -217,7 +217,7 @@ function Storage(props: Props) { style={{ flex: 1 }} className="flex-1 flex gap-2 pt-2 items-center justify-end self-start" > - {typeof item.duration === 'number' && ( + {typeof item?.duration === 'number' && (
{formatMs(itemD.duration)}
)}
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx index 6f058fb86..e9ef6116f 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx @@ -144,8 +144,14 @@ function FilterAutoComplete(props: Props) { }, [value]) const loadOptions = (inputValue: string, callback: (options: []) => void) => { + // remove underscore from params + const _params = Object.keys(params).reduce((acc: any, key: string) => { + acc[key] = params[key].replace('_', ''); + return acc; + }, {}); + new APIClient() - [method?.toLocaleLowerCase()](endpoint, { ...params, q: inputValue }) + [method?.toLocaleLowerCase()](endpoint, { ..._params, q: inputValue }) .then((response: any) => { return response.json(); }) diff --git a/frontend/app/duck/customField.js b/frontend/app/duck/customField.js index 9320dc5bc..d92df59ef 100644 --- a/frontend/app/duck/customField.js +++ b/frontend/app/duck/customField.js @@ -43,9 +43,9 @@ const reducer = (state = initialState, action = {}) => { case FETCH_LIST_ACTIVE_SUCCESS: clearMetaFilters(); action.data.forEach((item) => { - addElementToFiltersMap(FilterCategory.METADATA, item.key); - addElementToLiveFiltersMap(FilterCategory.METADATA, item.key); - addElementToFlagConditionsMap(FilterCategory.METADATA, item.key) + addElementToFiltersMap(FilterCategory.METADATA, '_' + item.key); + addElementToLiveFiltersMap(FilterCategory.METADATA, '_' + item.key); + addElementToFlagConditionsMap(FilterCategory.METADATA, '_' + item.key) }); return state.set('list', List(action.data).map(CustomField)) diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index 5fcd0e974..1e09fadf2 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -136,6 +136,9 @@ export default class MetricStore { const obj: any = { metricType: value }; obj.series = this.instance.series; + obj.series = obj.series.slice(0, 1); + obj.series[0].filter.filters = []; + obj['metricValue'] = []; if (value === TABLE) { @@ -196,7 +199,6 @@ export default class MetricStore { } } - console.log('obj', obj); this.instance.update(obj); } diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index e12211545..3cd2c2241 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -215,12 +215,13 @@ export default class Widget { config: { ...this.config, col: - this.metricType === 'funnel' || + this.metricType === FUNNEL || this.metricOf === FilterKey.ERRORS || this.metricOf === FilterKey.SESSIONS || this.metricOf === FilterKey.SLOWEST_RESOURCES || this.metricOf === FilterKey.MISSING_RESOURCES || - this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION + this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION || + this.metricType === USER_PATH ? 4 : this.metricType === WEB_VITALS ? 1 diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 5457cafc9..13544afdd 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -604,7 +604,8 @@ export const addElementToFiltersMap = ( key, type, category, - label: capitalize(key), + // remove _ from key + label: key.replace(/^_/, '').charAt(0).toUpperCase() + key.slice(2), operator: operator, operatorOptions, icon,