2022-03-28 10:49:59 +02:00
|
|
|
|
import useProject from 'hooks/api/getters/useProject/useProject';
|
2022-02-28 17:20:47 +01:00
|
|
|
|
import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
|
2021-10-01 12:15:02 +02:00
|
|
|
|
import ProjectInfo from './ProjectInfo/ProjectInfo';
|
|
|
|
|
import { useStyles } from './Project.styles';
|
2022-06-21 09:08:37 +02:00
|
|
|
|
import { usePageTitle } from 'hooks/usePageTitle';
|
2021-10-01 12:15:02 +02:00
|
|
|
|
|
2022-04-26 10:53:46 +02:00
|
|
|
|
interface IProjectOverviewProps {
|
2022-06-21 09:08:37 +02:00
|
|
|
|
projectName: string;
|
2021-10-01 12:15:02 +02:00
|
|
|
|
projectId: string;
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-21 09:08:37 +02:00
|
|
|
|
const ProjectOverview = ({ projectId, projectName }: IProjectOverviewProps) => {
|
2021-10-20 12:05:44 +02:00
|
|
|
|
const { project, loading } = useProject(projectId, {
|
2022-05-25 10:14:22 +02:00
|
|
|
|
refreshInterval: 15 * 1000, // ms
|
2021-10-20 12:05:44 +02:00
|
|
|
|
});
|
2022-05-13 14:51:22 +02:00
|
|
|
|
const { members, features, health, description, environments } = project;
|
2022-05-02 15:52:41 +02:00
|
|
|
|
const { classes: styles } = useStyles();
|
2022-06-21 09:08:37 +02:00
|
|
|
|
usePageTitle(`Project overview – ${projectName}`);
|
2021-10-01 12:15:02 +02:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<div className={styles.containerStyles}>
|
|
|
|
|
<ProjectInfo
|
|
|
|
|
id={projectId}
|
2021-11-24 14:36:21 +01:00
|
|
|
|
description={description}
|
2021-10-01 12:15:02 +02:00
|
|
|
|
memberCount={members}
|
|
|
|
|
health={health}
|
|
|
|
|
featureCount={features?.length}
|
|
|
|
|
/>
|
2021-10-08 15:18:43 +02:00
|
|
|
|
<div className={styles.projectToggles}>
|
2022-05-25 10:14:22 +02:00
|
|
|
|
<ProjectFeatureToggles
|
|
|
|
|
features={features}
|
|
|
|
|
environments={environments}
|
|
|
|
|
loading={loading}
|
2021-10-08 15:18:43 +02:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2021-10-01 12:15:02 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ProjectOverview;
|