feat: add feature impact metrics initial area (#10548)

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureExposureMetrics.tsx

@@ -23,7 +23,7 @@ import {
 import { aggregateFeatureMetrics } from './aggregateFeatureMetrics.ts';
 import { PageHeader } from 'component/common/PageHeader/PageHeader.tsx';
 
-export const FeatureMetrics = () => {
+export const FeatureExposureMetrics = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const environments = useFeatureMetricsEnvironments(projectId, featureId);

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx

@@ -0,0 +1,32 @@
+import { PageContent } from 'component/common/PageContent/PageContent.tsx';
+import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx';
+import { Button, styled, Typography } from '@mui/material';
+import Add from '@mui/icons-material/Add';
+
+const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: 'normal',
+    lineHeight: theme.spacing(5),
+}));
+
+export const FeatureImpactMetrics = () => {
+    return (
+        <PageContent>
+            <PageHeader
+                titleElement={
+                    <StyledHeaderTitle>Impact Metrics</StyledHeaderTitle>
+                }
+                actions={
+                    <Button
+                        variant='contained'
+                        startIcon={<Add />}
+                        onClick={() => {}}
+                        disabled={false}
+                    >
+                        Add Chart
+                    </Button>
+                }
+            />
+        </PageContent>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsOverview.tsx

@@ -0,0 +1,15 @@
+import { FeatureExposureMetrics } from './FeatureExposureMetrics.tsx';
+import { FeatureImpactMetrics } from './FeatureImpactMetrics.tsx';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
+import { Stack } from '@mui/material';
+
+export const FeatureMetricsOverview = () => {
+    const impactMetricsEnabled = useUiFlag('impactMetrics');
+
+    return (
+        <Stack spacing={2}>
+            {impactMetricsEnabled ? <FeatureImpactMetrics /> : null}
+            <FeatureExposureMetrics />
+        </Stack>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -3,13 +3,13 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import FeatureLog from './FeatureLog/FeatureLog.tsx';
 import { FeatureOverview } from './FeatureOverview/FeatureOverview.tsx';
 import { FeatureEnvironmentVariants } from './FeatureVariants/FeatureEnvironmentVariants/FeatureEnvironmentVariants.tsx';
-import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics.tsx';
 import { FeatureSettings } from './FeatureSettings/FeatureSettings.tsx';
 import useLoading from 'hooks/useLoading';
 import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureViewHeader } from './FeatureViewHeader.tsx';
 import { styled } from '@mui/material';
+import { FeatureMetricsOverview } from './FeatureMetrics/FeatureMetricsOverview.tsx';
 
 export const StyledLink = styled(Link)(() => ({
     maxWidth: '100%',
@@ -42,7 +42,7 @@ export const FeatureView = () => {
         <div ref={ref}>
             <FeatureViewHeader feature={feature} />
             <Routes>
-                <Route path='metrics' element={<FeatureMetrics />} />
+                <Route path='metrics' element={<FeatureMetricsOverview />} />
                 <Route path='logs' element={<FeatureLog />} />
                 <Route
                     path='variants'