Merge branch 'dev' of https://github.com/openreplay/openreplay into dev

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/CustomMetricForm/CustomMetricForm.tsx

@@ -105,6 +105,7 @@ function CustomMetricForm(props: Props) {
                 seriesIndex={index}
                 series={series}
                 onRemoveSeries={() => removeSeries(index)}
+                canDelete={metric.series.size > 1}
               />
             </div>
           ))}

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

@@ -2,9 +2,10 @@ 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';
+import cn from 'classnames';
 
 interface Props {
   seriesIndex: number;
@@ -12,9 +13,11 @@ interface Props {
   edit: typeof edit;
   updateSeries: typeof updateSeries;
   onRemoveSeries: (seriesIndex) => void;
+  canDelete?: boolean; 
 }
 
 function FilterSeries(props: Props) {
+  const { canDelete } = props;
   const [expanded, setExpanded] = useState(true)
   const { series, seriesIndex } = props;
 
@@ -75,16 +78,12 @@ 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>    
     
         <div className="flex items-center cursor-pointer" >
-          <div onClick={props.onRemoveSeries} className="ml-3">
+          <div onClick={props.onRemoveSeries} className={cn("ml-3", {'disabled': !canDelete})}>
             <Icon name="trash" size="16" />
           </div>
 
@@ -99,7 +98,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/styles/main.css

@@ -112,4 +112,9 @@
     display: inline-block;
     margin-bottom: 5px;
   }
+}
+
+.disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }

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