feat: update metrics view in the accordion footer

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts

@@ -70,8 +70,8 @@ export const useStyles = makeStyles(theme => ({
         alignItems: 'center',
     },
     percentageContainer: {
-        width: '50px',
-        height: '50px',
+        width: '90px',
+        height: '90px',
         border: `2px solid ${theme.palette.primary.light}`,
         borderRadius: '50%',
         display: 'flex',
@@ -95,6 +95,7 @@ export const useStyles = makeStyles(theme => ({
     requestText: {
         textAlign: 'center',
         marginTop: '1rem',
+        fontSize: theme.fontSizes.smallBody,
     },
     linkContainer: {
         display: 'flex',
@@ -135,6 +136,9 @@ export const useStyles = makeStyles(theme => ({
         truncator: {
             textAlign: 'center',
         },
+        resultContainer: {
+            flexWrap: 'wrap',
+        },
     },
     [theme.breakpoints.down(400)]: {
         accordionHeader: {
@@ -145,4 +149,20 @@ export const useStyles = makeStyles(theme => ({
             padding: '0.5rem',
         },
     },
+    resultContainer: {
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'space-around',
+    },
+    dataContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        padding: '0px 15px',
+    },
+    resultTitle: {
+        color: theme.palette.primary.main,
+    },
 }));

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx

@@ -1,12 +1,8 @@
-import { Warning } from '@material-ui/icons';
 import {
     IFeatureEnvironment,
     IFeatureEnvironmentMetrics,
 } from '../../../../../../../interfaces/featureToggle';
 import { calculatePercentage } from '../../../../../../../utils/calculate-percentage';
-import ConditionallyRender from '../../../../../../common/ConditionallyRender';
-import FeatureEnvironmentMetrics from '../../../FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
-
 import { useStyles } from '../FeatureOverviewEnvironment.styles';
 
 interface IFeatureOverviewEnvironmentFooterProps {
@@ -32,37 +28,41 @@ const FeatureOverviewEnvironmentFooter = ({
             </div>
 
             <div className={styles.accordionBodyFooter}>
-                <ConditionallyRender
-                    condition={env.enabled}
-                    show={
-                        <FeatureEnvironmentMetrics metric={environmentMetric} />
-                    }
-                    elseShow={
-                        <div className={styles.disabledInfo}>
-                            <Warning className={styles.disabledIcon} />
-                            <p>
-                                As long as the environment is disabled, all
-                                requests made for this feature toggle will
-                                return false. Add a strategy and turn on the
-                                environment to enable it for your users.
-                            </p>
+                <div className={styles.resultContainer}>
+                    <div className={styles.dataContainer}>
+                        <h3 className={styles.resultTitle}>Exposure</h3>
+                        <div className={styles.percentageContainer}>
+                            {environmentMetric?.yes}
                         </div>
-                    }
-                />
-
-                <div className={styles.requestContainer}>
-                    Total requests {totalTraffic}
-                    <div className={styles.percentageContainer}>
-                        {calculatePercentage(
-                            totalTraffic,
-                            environmentMetric?.yes
-                        )}
-                        %
+                        <p className={styles.requestText}>
+                            Total exposure of the feature in the environment in
+                            the last hour
+                        </p>
+                    </div>
+                    <div className={styles.dataContainer}>
+                        <h3 className={styles.resultTitle}>% exposure</h3>
+                        <div className={styles.percentageContainer}>
+                            {calculatePercentage(
+                                totalTraffic,
+                                environmentMetric?.yes
+                            )}
+                            %
+                        </div>
+                        <p className={styles.requestText}>
+                            Total exposure of the feature in the environment in
+                            the last hour
+                        </p>
+                    </div>
+                    <div className={styles.dataContainer}>
+                        <h3 className={styles.resultTitle}>Total requests</h3>
+                        <div className={styles.percentageContainer}>
+                            {environmentMetric?.yes + environmentMetric?.no}
+                        </div>
+                        <p className={styles.requestText}>
+                            The total request of the feature in the environment
+                            in the last hour
+                        </p>
                     </div>
-                    <p className={styles.requestText}>
-                        Received enabled for this feature in this environment in
-                        the last hour.
-                    </p>
                 </div>
             </div>
         </>

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts

@@ -17,15 +17,18 @@ export const useStyles = makeStyles(theme => ({
         width: '75px',
     },
     infoParagraph: {
-        maxWidth: '150px',
+        maxWidth: '215px',
         marginTop: '0.25rem',
         fontSize: theme.fontSizes.smallBody,
     },
     percentage: {
         color: theme.palette.primary.light,
-        textAlign: 'center',
+        textAlign: 'right',
         fontSize: theme.fontSizes.subHeader,
     },
+    percentageCircle: {
+        transform: 'scale(0.85)',
+    },
     [theme.breakpoints.down(700)]: {
         infoParagraph: {
             display: 'none',
@@ -35,8 +38,6 @@ export const useStyles = makeStyles(theme => ({
         icon: {
             display: 'none',
         },
-    },
-    [theme.breakpoints.down(400)]: {
         percentageCircle: {
             display: 'none',
         },

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx

@@ -27,7 +27,8 @@ const FeatureOverviewEnvironmentMetrics = ({
                         {percentage}%
                     </p>
                     <p className={styles.infoParagraph} data-loading>
-                        No one has received this feature in the last hour.
+                        The feature has been requested <b>0 times</b> and
+                        exposed<b> 0 times</b> in the last hour
                     </p>
                 </div>
                 <FiberManualRecord
@@ -44,8 +45,10 @@ const FeatureOverviewEnvironmentMetrics = ({
             <div className={styles.info}>
                 <p className={styles.percentage}>{percentage}%</p>
                 <p className={styles.infoParagraph}>
-                    {environmentMetric.yes} users have received the feature in
-                    the last hour.
+                    The feature has been requested{' '}
+                    <b>{environmentMetric.yes + environmentMetric.no} times</b>{' '}
+                    and exposed <b>{environmentMetric.yes} times</b> in the last
+                    hour
                 </p>
             </div>
             <PercentageCircle

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyExecution/FeatureStrategyExecution.tsx

@@ -63,7 +63,7 @@ const FeatureStrategyExecution = ({
                     return (
                         <Fragment key={key}>
                             <p className={styles.text}>
-                                {parameters[key]}% of your user base{' '}
+                                {parameters[key]}% of your base{' '}
                                 {constraints.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}
@@ -146,8 +146,7 @@ const FeatureStrategyExecution = ({
                     return (
                         <Fragment key={param?.name}>
                             <p className={styles.text}>
-                                {strategy?.parameters[param.name]}% of your user
-                                base{' '}
+                                {strategy?.parameters[param.name]}% of your base{' '}
                                 {constraints?.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}