feat(ui) - filters check for empty values

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx

@@ -4,7 +4,6 @@ import { Loader, NoContent, Icon } from 'UI';
 import { Styles } from '../../common';
 import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
 import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-// import CustomMetricWidgetHoc from '../../common/CustomMetricWidgetHoc';
 import stl from './CustomMetricWidget.css';
 import { getChartFormatter, getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper'; 
 import { edit, remove, setAlertMetricId, setActiveWidget } from 'Duck/customMetrics';
@@ -49,23 +48,17 @@ function CustomMetricWidget(props: Props) {
   const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
 
   useEffect(() => {
-    // dataWrapper: (p, period) => SessionsImpactedBySlowRequests({ chart: p})
-		// 	.update("chart", getChartFormatter(period))
-    
     new APIClient()['post']('/custom_metrics/chart', { ...metricParams, q: metric.name })
       .then(response => response.json())
       .then(({ errors, data }) => {
         if (errors) {
           console.log('err', errors)
         } else {
-          // console.log('data', data);
-          // const _data = data[0].map(CustomMetric).update("chart", getChartFormatter(period)).toJS();
           const _data = getChartFormatter(period)(data[0]);
-          // console.log('__data', _data)
           setData({ chart: _data });
         }
       }).finally(() => setLoading(false));
-  }, [])
+  }, [period])
 
   const deleteHandler = async () => {
     if (await confirm({
@@ -135,7 +128,6 @@ function CustomMetricWidget(props: Props) {
                   strokeWidth={ 2 }
                   strokeOpacity={ 0.8 }
                   fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                  // onClick={clickHandler}
                 />
               </AreaChart>
             </ResponsiveContainer>

frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import FilterList from 'Shared/Filters/FilterList';
 import { edit, updateSeries } from 'Duck/customMetrics';
 import { connect } from 'react-redux';
-import { IconButton, Button, Icon, SegmentSelection } from 'UI';
+import { IconButton, Icon } from 'UI';
 import FilterSelection from '../../Filters/FilterSelection';
 import SeriesName from './SeriesName';
 
@@ -75,10 +75,6 @@ function FilterSeries(props: Props) {
   return (
     <div className="border rounded bg-white">
       <div className="border-b px-5 h-12 flex items-center relative">
-        {/* <div className="font-medium flex items-center">
-          { series.name }
-          <div className="ml-3 cursor-pointer"><Icon name="pencil" size="14" /></div>
-        </div> */}
         <div className="mr-auto">
           <SeriesName name={series.name} onUpdate={() => null } />
         </div>    
@@ -99,7 +95,6 @@ function FilterSeries(props: Props) {
           <div className="p-5">
             { series.filter.filters.size > 0 ? (
               <FilterList
-                // filters={series.filter.filters.toJS()}
                 filter={series.filter}
                 onUpdateFilter={onUpdateFilter}
                 onRemoveFilter={onRemoveFilter}

frontend/app/types/filter/newFilter.js

@@ -100,7 +100,7 @@ export default Record({
       ..._filter,
       key: _filter.key,
       type: _filter.type, // camelCased(filter.type.toLowerCase()),
-      value: value
+      value: value.length === 0 ? [""] : value,
     }
   },
 })