Feat/new metrics tab (#432)

* New metric tab if environment flag is active

* Prepare new metrics tab - need styling help!!

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<IFeatureViewParams>();
+    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 (
+            <Grid item sm={6}>
+                <FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
+            </Grid>)
+    })
+    return (
+        <>
+            <Grid sm={12} data-loading>
+                <h2>{'Environments'}</h2>
+                <hr />
+                {metricComponents}
+            </Grid>
+            <Grid sm={12} data-loading>
+                <h2>Applications</h2>
+                <hr />
+                <FeatureSeenApplications />
+            </Grid>
+        </>
+    );
+};
+
+export default EnvironmentMetricComponent;

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<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
+    const { uiConfig } = useUiConfig();
+    const isEnterprise = uiConfig.flags.E;
 
     return (
         <div className={styles.container}>
-            <MetricComponent featureToggle={feature} />
+            <ConditionallyRender condition={isEnterprise}
+                                 show={<EnvironmentMetricComponent />}
+                                 elseShow={<MetricComponent featureToggle={feature} />}
+            />
         </div>
     );
 };

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',
+    }
+}));

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<IFeatureViewParams>();
+    const { metrics } = useFeatureMetrics(projectId, featureId);
+    const styles = useStyles()
+    let seenApplications;
+    if (metrics?.seenApplications?.length > 0) {
+        seenApplications = metrics.seenApplications.map(appName => {
+            return (<ListItem><ListItemText primary={
+                <Link
+                    to={`/applications/${appName}`}
+                    className={[
+                        styles.listLink,
+                        styles.truncate,
+                    ].join(' ')}
+                >
+                    {appName}
+                </Link>
+            } /></ListItem>)
+        });
+    } else {
+        seenApplications = (<ListItem><ListItemText primary={'Not seen in any applications'} /></ListItem>);
+    }
+
+    return (
+        <Grid sm={12}>
+            <List>
+                <ListItemText primary={'Seen in applications:'} />
+                {seenApplications}
+            </List>
+        </Grid>
+    );
+}
+
+export default FeatureSeenApplications;

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 {

frontend/src/interfaces/featureToggle.ts

@@ -60,5 +60,5 @@ export interface IFeatureMetrics {
     version: number;
     maturity: string;
     lastHourUsage: IFeatureEnvironmentMetrics[],
-    seenApplication: string[]
+    seenApplications: string[]
 }