From c48539820256cae874217578f3f707ec669ec140 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 8 Feb 2022 20:24:51 +0100 Subject: [PATCH] feat(ui) - filters and metrics fixes --- .../CustomMetricWidgetPreview.tsx | 24 ++++++++------- .../CustomMetricForm/CustomMetricForm.tsx | 10 +++---- .../SaveSearchModal/SaveSearchModal.tsx | 12 ++++++-- .../ui/SegmentSelection/SegmentSelection.js | 29 ++++++++++++------- frontend/app/types/account/account.js | 1 + frontend/app/types/customMetric.js | 2 +- frontend/app/types/filter/savedFilter.js | 2 +- 7 files changed, 49 insertions(+), 31 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx index 05b08263d..8af9784d5 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx @@ -1,9 +1,8 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { connect } from 'react-redux'; import { Loader, NoContent, Icon } from 'UI'; -import { widgetHOC, Styles } from '../../common'; -import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts'; -import { LineChart, Line, Legend } from 'recharts'; +import { Styles } from '../../common'; +import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line, Legend } from 'recharts'; import Period, { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period'; import stl from './CustomMetricWidgetPreview.css'; import { getChartFormatter } from 'Types/dashboard/helper'; @@ -45,7 +44,17 @@ function CustomMetricWidget(props: Props) { const gradientDef = Styles.gradientDef(); const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' } + const prevMetricRef = useRef(); + useEffect(() => { + // Check for title change + if (prevMetricRef.current && prevMetricRef.current.name !== metric.name) { + prevMetricRef.current = metric; + return + }; + prevMetricRef.current = metric; + + // fetch new data for the widget preview new APIClient()['post']('/custom_metrics/try', { ...metricParams, ...metric.toSaveData() }) .then(response => response.json()) .then(({ errors, data }) => { @@ -102,13 +111,6 @@ function CustomMetricWidget(props: Props) { margin={Styles.chartMargins} syncId={ showSync ? "domainsErrors_4xx" : undefined } > - {/* - - - - - - */} props.editMetric({ ...metric, [ name ]: value }, false); const changeConditionTab = (e, { name, value }) => { - props.editMetric({[ 'type' ]: value }); + props.editMetric({[ 'viewType' ]: value }); }; const save = () => { @@ -84,14 +84,14 @@ function CustomMetricForm(props: Props) {
diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx index 9ea8d41fb..b579652e9 100644 --- a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx +++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx @@ -4,6 +4,7 @@ import { editSavedSearch as edit, save, remove } from 'Duck/search'; import { Button, Modal, Form, Icon, Checkbox } from 'UI'; import { confirm } from 'UI/Confirmation'; import stl from './SaveSearchModal.css'; +import cn from 'classnames'; interface Props { filter: any; @@ -14,6 +15,7 @@ interface Props { closeHandler: () => void; savedSearch: any; remove: (filterId: number) => Promise; + userId: number; } function SaveSearchModal(props: Props) { const { savedSearch, filter, loading, show, closeHandler } = props; @@ -77,7 +79,7 @@ function SaveSearchModal(props: Props) { -
+
-
props.edit({ 'isPublic' : !savedSearch.isPublic }) }> +
props.edit({ 'isPublic' : !savedSearch.isPublic }) } + > Team Visible
-
+
{ savedSearch.exists() &&
Changes in filters will be updated.
} @@ -115,6 +120,7 @@ function SaveSearchModal(props: Props) { } export default connect(state => ({ + userId: state.getIn([ 'user', 'account', 'id' ]), savedSearch: state.getIn([ 'search', 'savedSearch' ]), filter: state.getIn(['search', 'instance']), loading: state.getIn([ 'search', 'saveRequest', 'loading' ]) || diff --git a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js index d1d3ae6df..44219c1ec 100644 --- a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js +++ b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from 'UI'; +import { Icon, Popup } from 'UI'; import cn from 'classnames'; import styles from './segmentSelection.css'; @@ -19,15 +19,24 @@ class SegmentSelection extends React.Component { }, className) } > { list.map(item => ( -
this.setActiveItem(item) } - > - { item.icon && } -
{ item.name }
-
+ !item.disabled && this.setActiveItem(item) } + > + { item.icon && } +
{ item.name }
+
+ } + disabled={!item.disabled} + content={ `Coming soon` } + size="tiny" + inverted + position="top center" + /> )) } diff --git a/frontend/app/types/account/account.js b/frontend/app/types/account/account.js index fc1ff958e..39bfe4726 100644 --- a/frontend/app/types/account/account.js +++ b/frontend/app/types/account/account.js @@ -10,6 +10,7 @@ export default Member.extend({ banner: undefined, email: '', verifiedEmail: undefined, + id: undefined, smtp: false, license: '', expirationDate: undefined, diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js index 94d6cd5c1..14b327cab 100644 --- a/frontend/app/types/customMetric.js +++ b/frontend/app/types/customMetric.js @@ -27,7 +27,7 @@ export const FilterSeries = Record({ export default Record({ metricId: undefined, name: 'Series', - type: 'session_count', + viewType: 'lineChart', series: List(), isPublic: false, startDate: '', diff --git a/frontend/app/types/filter/savedFilter.js b/frontend/app/types/filter/savedFilter.js index 3d9947fc6..f10b0686b 100644 --- a/frontend/app/types/filter/savedFilter.js +++ b/frontend/app/types/filter/savedFilter.js @@ -12,7 +12,7 @@ export default Record({ createdAt: undefined, count: 0, watchdogs: List(), - isPublic: true, + isPublic: false, }, { idKey: 'searchId', methods: {