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 <tahayk2@gmail.com>
Co-authored-by: rjshrjndrn <rjshrjndrn@gmail.com>

frontend/app/components/Session_/Storage/Storage.tsx

@@ -111,7 +111,7 @@ function Storage(props: Props) {
       return <div style={{ flex: 3 }} className="p-1" />;
     }
 
-    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' && (
             <div className="font-size-12 color-gray-medium">{formatMs(itemD.duration)}</div>
           )}
           <div className="w-12">

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();
             })

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))
 

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);
   }
 

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

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,