2021-09-27 13:35:32 +02:00
|
|
|
import { Tabs, Tab } from '@material-ui/core';
|
2021-10-01 13:49:18 +02:00
|
|
|
import { Route, useHistory, useParams } from 'react-router-dom';
|
2021-09-14 14:20:23 +02:00
|
|
|
import useFeature from '../../../hooks/api/getters/useFeature/useFeature';
|
2021-09-27 13:35:32 +02:00
|
|
|
import useTabs from '../../../hooks/useTabs';
|
|
|
|
import { IFeatureViewParams } from '../../../interfaces/params';
|
2021-10-01 13:49:18 +02:00
|
|
|
import FeatureLog from './FeatureLog/FeatureLog';
|
|
|
|
import FeatureMetrics from './FeatureMetrics/FeatureMetrics';
|
|
|
|
import FeatureOverview from './FeatureOverview/FeatureOverview';
|
2021-09-27 13:35:32 +02:00
|
|
|
import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
|
2021-10-01 13:49:18 +02:00
|
|
|
import FeatureVariants from './FeatureVariants/FeatureVariants';
|
2021-09-27 13:35:32 +02:00
|
|
|
import { useStyles } from './FeatureView2.styles';
|
2021-09-14 14:20:23 +02:00
|
|
|
|
|
|
|
const FeatureView2 = () => {
|
2021-10-01 13:49:18 +02:00
|
|
|
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
2021-09-14 14:20:23 +02:00
|
|
|
const { feature } = useFeature(projectId, featureId);
|
2021-10-01 13:49:18 +02:00
|
|
|
const { a11yProps } = useTabs(0);
|
2021-09-27 13:35:32 +02:00
|
|
|
const styles = useStyles();
|
2021-09-30 11:44:30 +02:00
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const basePath = `/projects/${projectId}/features2/${featureId}`;
|
|
|
|
|
2021-09-27 13:35:32 +02:00
|
|
|
const tabData = [
|
2021-09-30 11:44:30 +02:00
|
|
|
{
|
|
|
|
title: 'Overview',
|
|
|
|
path: `${basePath}/overview`,
|
|
|
|
name: 'overview',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Strategies',
|
|
|
|
path: `${basePath}/strategies`,
|
|
|
|
name: 'strategies',
|
|
|
|
},
|
2021-10-01 13:49:18 +02:00
|
|
|
{
|
|
|
|
title: 'Metrics',
|
|
|
|
path: `${basePath}/metrics`,
|
|
|
|
name: 'Metrics',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Event log',
|
|
|
|
path: `${basePath}/logs`,
|
|
|
|
name: 'Event log',
|
|
|
|
},
|
|
|
|
{ title: 'Variants', path: `${basePath}/variants`, name: 'Variants' },
|
2021-09-27 13:35:32 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
const renderTabs = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
|
|
|
<Tab
|
|
|
|
key={tab.title}
|
|
|
|
label={tab.title}
|
2021-10-01 13:49:18 +02:00
|
|
|
value={tab.path}
|
2021-09-27 13:35:32 +02:00
|
|
|
{...a11yProps(index)}
|
2021-09-30 11:44:30 +02:00
|
|
|
onClick={() => {
|
|
|
|
history.push(tab.path);
|
|
|
|
}}
|
2021-09-27 13:35:32 +02:00
|
|
|
className={styles.tabButton}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-09-14 14:20:23 +02:00
|
|
|
return (
|
2021-09-27 13:35:32 +02:00
|
|
|
<>
|
|
|
|
<div className={styles.header}>
|
|
|
|
<div className={styles.innerContainer}>
|
|
|
|
<h2 className={styles.featureViewHeader}>{feature.name}</h2>
|
|
|
|
</div>
|
|
|
|
<div className={styles.separator} />
|
|
|
|
<div className={styles.tabContainer}>
|
|
|
|
<Tabs
|
2021-10-01 13:49:18 +02:00
|
|
|
value={history.location.pathname}
|
2021-09-27 13:35:32 +02:00
|
|
|
indicatorColor="primary"
|
|
|
|
textColor="primary"
|
|
|
|
className={styles.tabNavigation}
|
|
|
|
>
|
|
|
|
{renderTabs()}
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-10-01 13:49:18 +02:00
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/overview`}
|
|
|
|
component={FeatureOverview}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/strategies`}
|
|
|
|
component={FeatureStrategies}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/metrics`}
|
|
|
|
component={FeatureMetrics}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/logs`}
|
|
|
|
component={FeatureLog}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/variants`}
|
|
|
|
component={FeatureVariants}
|
|
|
|
/>
|
2021-09-27 13:35:32 +02:00
|
|
|
</>
|
2021-09-14 14:20:23 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FeatureView2;
|