From 4230fc98ed6b32d252970ad7d3152c4d405d3fd8 Mon Sep 17 00:00:00 2001 From: Christopher Kolstad Date: Fri, 15 Oct 2021 10:05:10 +0200 Subject: [PATCH] Feat/new metrics tab (#432) * New metric tab if environment flag is active * Prepare new metrics tab - need styling help!! --- .../EnvironmentMetricComponent.tsx | 50 +++++++++++++++++++ .../FeatureMetrics/FeatureMetrics.tsx | 10 +++- .../FeatureSeenApplications.styles.ts | 15 ++++++ .../FeatureSeenApplications.tsx | 41 +++++++++++++++ .../useFeatureMetrics/useFeatureMetrics.ts | 3 +- frontend/src/interfaces/featureToggle.ts | 2 +- 6 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx create mode 100644 frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.styles.ts create mode 100644 frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx diff --git a/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx b/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx new file mode 100644 index 0000000000..23748ecdb8 --- /dev/null +++ b/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx @@ -0,0 +1,50 @@ +import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics'; +import { useParams } from 'react-router-dom'; +import { IFeatureViewParams } from '../../../../interfaces/params'; +import React from 'react'; +import useFeature from '../../../../hooks/api/getters/useFeature/useFeature'; +import FeatureEnvironmentMetrics from '../FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics'; +import FeatureSeenApplications from '../FeatureSeenApplications/FeatureSeenApplications'; +import { Grid } from '@material-ui/core'; + +const emptyMetric = (environment: string) => ({ + yes: 0, + no: 0, + environment, + timestamp: '', +}); +const EnvironmentMetricComponent: React.FC = () => { + const { projectId, featureId } = useParams(); + const { feature } = useFeature(projectId, featureId); + const { metrics } = useFeatureMetrics(projectId, featureId); + + const featureMetrics = feature?.environments.map(env => { + const envMetric = metrics.lastHourUsage.find( + metric => metric.environment === env.name + ); + return envMetric || emptyMetric(env.name); + }); + + const metricComponents = featureMetrics.map(metric => { + return ( + + + ) + }) + return ( + <> + +

{'Environments'}

+
+ {metricComponents} + + +

Applications

+
+ + + + ); +}; + +export default EnvironmentMetricComponent; diff --git a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx index 00e3d309fd..2a896cf81c 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx @@ -3,15 +3,23 @@ import useFeature from '../../../../hooks/api/getters/useFeature/useFeature'; import MetricComponent from '../../view/metric-container'; import { useStyles } from './FeatureMetrics.styles'; import { IFeatureViewParams } from '../../../../interfaces/params'; +import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; +import ConditionallyRender from '../../../common/ConditionallyRender'; +import EnvironmentMetricComponent from '../EnvironmentMetricComponent/EnvironmentMetricComponent'; const FeatureMetrics = () => { const styles = useStyles(); const { projectId, featureId } = useParams(); const { feature } = useFeature(projectId, featureId); + const { uiConfig } = useUiConfig(); + const isEnterprise = uiConfig.flags.E; return (
- + } + elseShow={} + />
); }; diff --git a/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.styles.ts new file mode 100644 index 0000000000..21235e0bac --- /dev/null +++ b/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + listLink: { + color: '#212121', + textDecoration: 'none', + fontWeight: 'normal', + display: 'block', + }, + truncate: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + } +})); diff --git a/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx b/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx new file mode 100644 index 0000000000..9034cc1711 --- /dev/null +++ b/frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx @@ -0,0 +1,41 @@ +import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics'; +import { Link, useParams } from 'react-router-dom'; +import { IFeatureViewParams } from '../../../../interfaces/params'; +import { Grid, List, ListItem, ListItemText } from '@material-ui/core'; +import React from 'react'; +import { useStyles } from './FeatureSeenApplications.styles'; + +const FeatureSeenApplications: React.FC = () => { + const { projectId, featureId } = useParams(); + const { metrics } = useFeatureMetrics(projectId, featureId); + const styles = useStyles() + let seenApplications; + if (metrics?.seenApplications?.length > 0) { + seenApplications = metrics.seenApplications.map(appName => { + return ( + {appName} + + } />) + }); + } else { + seenApplications = (); + } + + return ( + + + + {seenApplications} + + + ); +} + +export default FeatureSeenApplications; diff --git a/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts b/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts index c43ca34802..66ffc70b70 100644 --- a/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts +++ b/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts @@ -2,6 +2,7 @@ import { formatApiPath } from '../../../../utils/format-path'; import { useEffect, useState } from 'react'; import useSWR, { mutate } from 'swr'; import { IFeatureMetrics } from '../../../../interfaces/featureToggle'; +import handleErrorResponses from '../httpErrorResponseHandler'; interface IUseFeatureMetricsOptions { refreshInterval?: number; @@ -18,7 +19,7 @@ const useFeatureMetrics = (projectId: string, featureId: string, options: IUseFe const path = formatApiPath(`api/admin/client-metrics/features/${featureId}`); const res = await fetch(path, { method: 'GET' - }); + }).then(handleErrorResponses('feature metrics')); if (res.ok) { return res.json(); } else { diff --git a/frontend/src/interfaces/featureToggle.ts b/frontend/src/interfaces/featureToggle.ts index ca2d54b86b..e89944f553 100644 --- a/frontend/src/interfaces/featureToggle.ts +++ b/frontend/src/interfaces/featureToggle.ts @@ -60,5 +60,5 @@ export interface IFeatureMetrics { version: number; maturity: string; lastHourUsage: IFeatureEnvironmentMetrics[], - seenApplication: string[] + seenApplications: string[] }