From f12299c2d68812719ca567c210add19e3efb357e Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Sun, 6 Feb 2022 15:00:43 +0100 Subject: [PATCH 1/2] feat(ui) - filters check for empty values --- .../CustomMetricWidget/CustomMetricWidget.tsx | 10 +--------- .../shared/CustomMetrics/FilterSeries/FilterSeries.tsx | 7 +------ frontend/app/types/filter/newFilter.js | 2 +- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx index 4118e7561..f956e059d 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx +++ b/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} /> diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx index 6e1c0fc07..e0181ac4e 100644 --- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx +++ b/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 (
- {/*
- { series.name } -
-
*/}
null } />
@@ -99,7 +95,6 @@ function FilterSeries(props: Props) {
{ series.filter.filters.size > 0 ? ( Date: Sun, 6 Feb 2022 15:07:19 +0100 Subject: [PATCH 2/2] feat(ui) - check for delete --- .../CustomMetrics/CustomMetricForm/CustomMetricForm.tsx | 1 + .../shared/CustomMetrics/FilterSeries/FilterSeries.tsx | 5 ++++- frontend/app/styles/main.css | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx index 34ba8aa92..b8d96a590 100644 --- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx +++ b/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} />
))} diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx index e0181ac4e..02208d3a7 100644 --- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx +++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx @@ -5,6 +5,7 @@ import { connect } from 'react-redux'; 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; @@ -80,7 +83,7 @@ function FilterSeries(props: Props) {
-
+
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css index 8915fd341..f27155e36 100644 --- a/frontend/app/styles/main.css +++ b/frontend/app/styles/main.css @@ -112,4 +112,9 @@ display: inline-block; margin-bottom: 5px; } +} + +.disabled { + opacity: 0.4; + pointer-events: none; } \ No newline at end of file