From db16f2b89bd8c90e04872ff1e771d8cad68f7082 Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 12 Aug 2022 11:25:13 +0200 Subject: [PATCH] fix(ui): metric rows, paddings, dashboard nav link --- .../DashboardList/DashboardList.tsx | 2 +- .../DashboardList/DashboardListItem.tsx | 4 +- .../DashboardList/DashboardsView.tsx | 4 +- .../MetricListItem/MetricListItem.tsx | 43 ++++++++----------- .../components/MetricsList/MetricsList.tsx | 4 +- .../components/MetricsView/MetricsView.tsx | 6 +-- frontend/app/components/Header/Header.js | 5 +++ 7 files changed, 32 insertions(+), 36 deletions(-) diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 4aa5a43e5..466103dc8 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -31,7 +31,7 @@ function DashboardList() { } >
-
+
Title
Visibility
Created
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx index 057b22d9a..61aeb15b9 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx @@ -22,14 +22,14 @@ function DashboardListItem(props: Props) { history.push(path); }; return ( -
+
-
{dashboard.name}
+
{dashboard.name}
{/*
*/} diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx index 75b4aaf4e..c9b98a745 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx @@ -21,10 +21,10 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) { } return ( -
+
- +
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx index 18f580851..23bcedb2e 100644 --- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx +++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx @@ -1,27 +1,13 @@ import React from 'react'; -import { Icon, Link, Popup } from 'UI'; +import { Icon, Link } from 'UI'; import { checkForRecent } from 'App/date'; import { Tooltip } from 'react-tippy' +import { withRouter, RouteComponentProps } from 'react-router-dom'; +import { withSiteId } from 'App/routes'; -interface Props { +interface Props extends RouteComponentProps { metric: any; -} - -function DashboardLink({ dashboards}: any) { - return ( - dashboards.map((dashboard: any) => ( - - -
-
- -
- {dashboard.name} -
- - - )) - ); + siteId: string; } function MetricTypeIcon({ type }: any) { @@ -49,18 +35,23 @@ function MetricTypeIcon({ type }: any) { ) } -function MetricListItem(props: Props) { - const { metric } = props; - + +function MetricListItem(props: Props) { + const { metric, history, siteId } = props; + + const onItemClick = () => { + const path = withSiteId(`/metrics/${metric.metricId}`, siteId); + history.push(path); + }; return ( -
+
- +
{metric.name} - +
{metric.owner}
@@ -75,4 +66,4 @@ function MetricListItem(props: Props) { ); } -export default MetricListItem; +export default withRouter(MetricListItem); diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx index 8c453688e..dea6c4a4f 100644 --- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx +++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx @@ -8,7 +8,7 @@ import { sliceListPerPage } from 'App/utils'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; import { IWidget } from 'App/mstore/types/widget'; -function MetricsList() { +function MetricsList({ siteId }: { siteId: string }) { const { metricStore } = useStore(); const metrics = useObserver(() => metricStore.metrics); const metricsSearch = useObserver(() => metricStore.metricsSearch); @@ -46,7 +46,7 @@ function MetricsList() { {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => ( - + ))}
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx index afe0dd337..85cefe70d 100644 --- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx +++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx @@ -9,14 +9,14 @@ import { useObserver } from 'mobx-react-lite'; interface Props{ siteId: number; } -function MetricsView(props: Props) { +function MetricsView({ siteId }: Props) { const { metricStore } = useStore(); React.useEffect(() => { metricStore.fetchList(); }, []); return useObserver(() => ( -
+
@@ -30,7 +30,7 @@ function MetricsView(props: Props) { Create custom Metrics to capture key interactions and track KPIs.
- +
)); } diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js index 1b5b97c22..f06c7321e 100644 --- a/frontend/app/components/Header/Header.js +++ b/frontend/app/components/Header/Header.js @@ -4,6 +4,7 @@ import { NavLink, withRouter } from 'react-router-dom'; import cn from 'classnames'; import { sessions, + metrics, assist, client, dashboard, @@ -27,6 +28,7 @@ import { useStore } from 'App/mstore'; import { useObserver } from 'mobx-react-lite'; const DASHBOARD_PATH = dashboard(); +const METRICS_PATH = metrics(); const SESSIONS_PATH = sessions(); const ASSIST_PATH = assist(); const CLIENT_PATH = client(CLIENT_DEFAULT_TAB); @@ -94,6 +96,9 @@ const Header = (props) => { to={ withSiteId(DASHBOARD_PATH, siteId) } className={ styles.nav } activeClassName={ styles.active } + isActive={ (_, location) => { + return location.pathname.includes(DASHBOARD_PATH) || location.pathname.includes(METRICS_PATH); + }} > { 'Dashboards' }