Use div and flexbox instead of grid for metrics tab

frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.style.ts

@@ -0,0 +1,100 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'flex',
+        borderRadius: '10px',
+        backgroundColor: '#fff',
+        padding: '2rem 2rem 2rem 2rem',
+        marginBottom: '1rem',
+        flexDirection: 'column',
+        width: '50%',
+        position: 'relative'
+    },
+    environmentContainer: {
+        display: 'flex',
+        marginBottom: '1rem',
+        width: '100%',
+        position: 'relative'
+    },
+    environmentHeader: {
+        display: 'flex',
+        width: '100%',
+        fontSize: theme.fontSizes.subHeader,
+        fontWeight: 'bold'
+    },
+    applicationHeader: {
+        display: 'flex',
+        width: '100%',
+        fontSize: theme.fontSizes.subHeader,
+        fontWeight: 'bold'
+    },
+    applicationContainer: {
+        display: 'flex',
+        width: '100%',
+        position: 'relative',
+        marginBottom: '1rem'
+    },
+    [theme.breakpoints.down(1000)]: {
+        container: {
+            width: '100%'
+        }
+    },
+    headerContainer: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+    },
+    title: {
+        fontSize: theme.fontSizes.subHeader,
+        fontWeight: 'normal',
+        margin: 0
+    },
+    bodyContainer: {
+        display: 'flex',
+        align: 'items',
+        marginTop: '1rem',
+        height: '100%'
+    },
+    trueCountContainer: {
+        marginBottom: '0.5rem',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    trueCount: {
+        width: '10px',
+        height: '10px',
+        borderRadius: '50%',
+        marginRight: '0.75rem',
+        backgroundColor: theme.palette.primary.main
+    },
+    falseCount: {
+        width: '10px',
+        height: '10px',
+        borderRadius: '50%',
+        marginRight: '0.75rem',
+        backgroundColor: theme.palette.grey[300]
+    },
+    paragraph: {
+        fontSize: theme.fontSizes.smallBody
+    },
+    textContainer: {
+        marginRight: '1rem',
+        maxWidth: '150px'
+    },
+    primaryMetric: {
+        width: '100%'
+    },
+    icon: {
+        fill: theme.palette.grey[300],
+        height: '75px',
+        width: '75px'
+    },
+    chartContainer: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+}));

frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx

@@ -5,18 +5,19 @@ 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';
+import { useStyles } from './EnvironmentMetricComponent.style';
 
 const emptyMetric = (environment: string) => ({
     yes: 0,
     no: 0,
     environment,
-    timestamp: '',
+    timestamp: ''
 });
 const EnvironmentMetricComponent: React.FC = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
     const { metrics } = useFeatureMetrics(projectId, featureId);
+    const styles = useStyles();
 
     const featureMetrics = feature?.environments.map(env => {
         const envMetric = metrics.lastHourUsage.find(
@@ -27,26 +28,23 @@ const EnvironmentMetricComponent: React.FC = () => {
 
     const metricComponents = featureMetrics.map(metric => {
         return (
-            <Grid item sm={4}>
-                <FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
-            </Grid>)
-    })
+            <FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
+        );
+    });
+
     return (
         <>
-            <Grid container data-loading spacing={1}>
-                <Grid item xs={12}>
-                <h2>{'Environments'}</h2>
-                <hr />
-                </Grid>
+            <div className={styles.environmentHeader}>Environments</div>
+            <div className={styles.environmentContainer}>
                 {metricComponents}
-            </Grid>
-            <Grid container data-loading>
-                <h2>Applications</h2>
-                <hr />
+            </div>
+            <div className={styles.applicationHeader}>Applications</div>
+            <div className={styles.applicationsContainer}>
                 <FeatureSeenApplications />
-            </Grid>
+            </div>
         </>
-    );
+    )
+        ;
 };
 
 export default EnvironmentMetricComponent;

frontend/src/component/feature/FeatureView2/FeatureSeenApplications/FeatureSeenApplications.tsx

@@ -4,36 +4,42 @@ import { IFeatureViewParams } from '../../../../interfaces/params';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { useStyles } from './FeatureSeenApplications.styles';
+import ConditionallyRender from '../../../common/ConditionallyRender';
 
 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 (<Grid item xs={4}>
+    const styles = useStyles();
+    const seenApplications = (seenApps: string[]) => {
+        return seenApps.map(appName => {
+            return (<Grid item md={4} xs={6} xl={3}>
                 <Link
                     to={`/applications/${appName}`}
                     className={[
                         styles.listLink,
-                        styles.truncate,
+                        styles.truncate
                     ].join(' ')}
                 >
                     {appName}
                 </Link>
-            </Grid>)
+            </Grid>);
         });
-    } else {
-        seenApplications = (<Grid item xs={12}><div>{'Not seen in any applications'}</div></Grid>);
-    }
+    };
+
+    const noApplications = (<Grid item xs={12}>
+        <div>{'Not seen in any applications'}</div>
+    </Grid>);
+
 
     return (
         <Grid container spacing={1}>
             <hr />
-            {seenApplications}
+            <ConditionallyRender
+                condition={metrics?.seenApplications?.length > 0}
+                show={seenApplications(metrics.seenApplications)}
+                elseShow={noApplications} />
         </Grid>
     );
-}
+};
 
 export default FeatureSeenApplications;