From 6c1c2295cb23b7a1938f718d20be6dacf274334c Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 9 Aug 2022 16:16:52 +0200 Subject: [PATCH] fix(ui): small ui changes for dashboards and metrics --- .../MetricListItem/MetricListItem.tsx | 13 +++---- .../components/MetricsList/MetricsList.tsx | 17 +++++---- .../MetricsSearch/MetricsSearch.tsx | 4 +-- .../components/MetricsView/MetricsView.tsx | 10 ++++-- .../components/WidgetForm/WidgetForm.tsx | 33 ++++------------- .../WidgetPreview/WidgetPreview.tsx | 36 ++++++++++++++++--- frontend/app/components/ui/SVG.tsx | 4 ++- frontend/app/svg/icons/columns-gap-filled.svg | 3 ++ frontend/app/svg/icons/info-circle-fill.svg | 3 ++ frontend/app/utils.ts | 2 +- 10 files changed, 72 insertions(+), 53 deletions(-) create mode 100644 frontend/app/svg/icons/columns-gap-filled.svg create mode 100644 frontend/app/svg/icons/info-circle-fill.svg diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx index 492a41bd5..38af42702 100644 --- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx +++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx @@ -51,8 +51,8 @@ function MetricTypeIcon({ type }: any) { return ( -
- +
+
) @@ -63,7 +63,7 @@ function MetricListItem(props: Props) { return ( -
+
{/*
@@ -76,17 +76,14 @@ function MetricListItem(props: Props) {
{/*
*/} -
- -
{metric.owner}
-
+
{metric.isPublic ? 'Team' : 'Private'}
-
{metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}
+
{metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}
); } diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx index 3cc6dff40..983d70603 100644 --- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx +++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx @@ -27,6 +27,7 @@ function MetricsList(props: Props) { metricStore.updateKey('sessionsPage', 1); }, []) + console.log(list, list.length) return useObserver(() => ( } > -
-
-
Metric
+
+
+
Title
{/*
Type
*/} -
Dashboards
Owner
-
Visibility
-
Last Modified
+
Visibility
+
Last Modified
{sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => ( @@ -54,7 +54,10 @@ function MetricsList(props: Props) { ))}
-
+
+
+ Showing {Math.min(list.length, metricStore.pageSize)} out of {list.length} Sessions +
@@ -31,4 +31,4 @@ function MetricsSearch(props) { )); } -export default MetricsSearch; \ No newline at end of file +export default MetricsSearch; diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx index a8c1d96c4..216d1369b 100644 --- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx +++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx @@ -18,17 +18,21 @@ function MetricsView(props: Props) { metricStore.fetchList(); }, []); return useObserver(() => ( -
-
+
+
{metricsCount}
-
+
+
+ + Create custom Metrics to capture key interactions and track KPIs. +
)); diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx index 88e0a59b4..40e80a7c9 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { metricTypes, metricOf, issueOptions } from 'App/constants/filterOptions'; import { FilterKey } from 'Types/filter/filterType'; import { useStore } from 'App/mstore'; @@ -8,7 +8,6 @@ import FilterSeries from '../FilterSeries'; import { confirm, Popup } from 'UI'; import Select from 'Shared/Select' import { withSiteId, dashboardMetricDetails, metricDetails } from 'App/routes' -import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal'; interface Props { history: any; @@ -17,8 +16,8 @@ interface Props { } function WidgetForm(props: Props) { - const [showDashboardSelectionModal, setShowDashboardSelectionModal] = useState(false); - const { history, match: { params: { siteId, dashboardId, metricId } } } = props; + + const { history, match: { params: { siteId, dashboardId } } } = props; const { metricStore, dashboardStore } = useStore(); const dashboards = dashboardStore.dashboards; const isSaving = useObserver(() => metricStore.isSaving); @@ -201,31 +200,13 @@ function WidgetForm(props: Props) {
{metric.exists() && ( - <> - - - + )}
- { canAddToDashboard && ( - setShowDashboardSelectionModal(false)} - /> - )}
)); } diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx index bde05f398..3cc02fd76 100644 --- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx +++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx @@ -2,19 +2,22 @@ import React from 'react'; import cn from 'classnames'; import WidgetWrapper from '../WidgetWrapper'; import { useStore } from 'App/mstore'; -import { SegmentSelection } from 'UI'; +import { SegmentSelection, Button, Icon } from 'UI'; import { useObserver } from 'mobx-react-lite'; import SelectDateRange from 'Shared/SelectDateRange'; import { FilterKey } from 'Types/filter/filterType'; import WidgetDateRange from '../WidgetDateRange/WidgetDateRange'; // import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period'; +import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal'; interface Props { className?: string; } function WidgetPreview(props: Props) { + const [showDashboardSelectionModal, setShowDashboardSelectionModal] = React.useState(false); const { className = '' } = props; const { metricStore, dashboardStore } = useStore(); + const dashboards = dashboardStore.dashboards; const metric: any = useObserver(() => metricStore.instance); const isTimeSeries = metric.metricType === 'timeseries'; const isTable = metric.metricType === 'table'; @@ -53,9 +56,12 @@ function WidgetPreview(props: Props) { } } + const canAddToDashboard = metric.exists() && dashboards.length > 0; + return useObserver(() => ( -
-
+ <> +
+

{getWidgetTitle()}

@@ -99,13 +105,33 @@ function WidgetPreview(props: Props) { )}
+ {/* add to dashboard */} + {metric.exists() && ( + + )}
-
+
+ { canAddToDashboard && ( + setShowDashboardSelectionModal(false)} + /> + )} + )); } -export default WidgetPreview; \ No newline at end of file +export default WidgetPreview; diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index d5cd23f17..dd207816e 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -111,6 +111,7 @@ const SVG = (props: Props) => { case 'cog': return ; case 'cogs': return ; case 'collection': return ; + case 'columns-gap-filled': return ; case 'columns-gap': return ; case 'console/error': return ; case 'console/exception': return ; @@ -230,7 +231,8 @@ const SVG = (props: Props) => { case 'hourglass-start': return ; case 'id-card': return ; case 'image': return ; - case 'info-circle': return ; + case 'info-circle-fill': return ; + case 'info-circle': return ; case 'info-square': return ; case 'info': return ; case 'inspect': return ; diff --git a/frontend/app/svg/icons/columns-gap-filled.svg b/frontend/app/svg/icons/columns-gap-filled.svg new file mode 100644 index 000000000..4bb29842d --- /dev/null +++ b/frontend/app/svg/icons/columns-gap-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/app/svg/icons/info-circle-fill.svg b/frontend/app/svg/icons/info-circle-fill.svg new file mode 100644 index 000000000..9af7ae43b --- /dev/null +++ b/frontend/app/svg/icons/info-circle-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/app/utils.ts b/frontend/app/utils.ts index 9444e121e..142016d2b 100644 --- a/frontend/app/utils.ts +++ b/frontend/app/utils.ts @@ -347,4 +347,4 @@ export const compareJsonObjects = (obj1: any, obj2: any) => { export const getInitials = (name: any) => { const names = name.split(' '); return names.slice(0, 2).map((n: any) => n[0]).join(''); -} \ No newline at end of file +}