diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx index ceef9f659d..22bae055ed 100644 --- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx +++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx @@ -137,6 +137,11 @@ export const ProjectHealthChart: FC = ({ : 'health', xAxisKey: 'date', }, + plugins: { + legend: { + display: !isAggregate, + }, + }, scales: { y: { min: 0, diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx index f00c52d368..92c133f8cc 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx @@ -9,7 +9,6 @@ import { ProjectHealthGrid } from './ProjectHealthGrid.tsx'; import { useFeedback } from 'component/feedbackNew/useFeedback'; import FeedbackIcon from '@mui/icons-material/ChatOutlined'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { useUiFlag } from 'hooks/useUiFlag'; const ModalContentContainer = styled('section')(({ theme }) => ({ minHeight: '100vh', @@ -18,7 +17,7 @@ const ModalContentContainer = styled('section')(({ theme }) => ({ backgroundColor: theme.palette.background.default, display: 'flex', flexFlow: 'column', - gap: theme.spacing(2), + gap: theme.spacing(2.5), paddingInline: theme.spacing(4), paddingBlock: theme.spacing(3.75), })); @@ -141,7 +140,6 @@ export const ProjectStatusModal = ({ open, onClose, onFollowLink }: Props) => { }); }; const { isOss } = useUiConfig(); - const healthToDebtEnabled = useUiFlag('healthToTechDebt'); return ( { - - {healthToDebtEnabled ? 'Technical debt' : 'Health'} - {!isOss() && ( diff --git a/website/docs/reference/insights.mdx b/website/docs/reference/insights.mdx index ce9d38c060..10dda53bef 100644 --- a/website/docs/reference/insights.mdx +++ b/website/docs/reference/insights.mdx @@ -1,5 +1,5 @@ --- -title: Insights +title: Analytics --- :::note Availability @@ -9,16 +9,16 @@ title: Insights ::: -Insights is a feature designed to help you better understand and gain insights into what is happening in your Unleash instance. You can view insights across all projects or by selecting single or multiple projects using the filter. +Analytics is a feature designed to help you better understand and gain insights into what is happening in your Unleash instance. You can view analytics across all projects or by selecting single or multiple projects using the filter. In total, there are 6 different charts available that show information over time: -- Total users (Pro, Enterprise) -- Flags (Pro, Enterprise) -- Health (Enterprise) -- Median time to production (Enterprise) -- Flag evaluation metrics (Enterprise) -- Updates per environment type (Enterprise) +- Total users +- Flags +- Technical debt +- Median time to production +- Flag evaluation metrics +- Updates per environment type ### Total users @@ -33,11 +33,11 @@ The flags chart displays the total number of active (not archived) feature flags ![Flags chart](/img/insights-total-flags.png) -### Health +### Technical debt -The health chart represents the percentage of flags in the selected projects that are not stale or potentially stale. This chart helps you monitor the overall health of your feature flags, ensuring that they are actively maintained and relevant. The chart also shows how the overall health changes over time, allowing you to identify potential issues early and take corrective actions. +The technical debt rating shows the percentage of healthy flags in a project compared to stale or potentially stale flags. This helps you ensure all flags are actively maintained and relevant. You can also view these changes over time to identify potential issues early and take corrective actions. -![Health chart](/img/insights-health.png) +![Technical debt chart](/img/insights-technical-debt.png) ### Median time to production diff --git a/website/docs/reference/projects.mdx b/website/docs/reference/projects.mdx index 84ee9156c3..794c301aee 100644 --- a/website/docs/reference/projects.mdx +++ b/website/docs/reference/projects.mdx @@ -117,10 +117,10 @@ To change the default strategy for an environment in a project: Unleash supports [predefined](./rbac#predefined-roles) and [custom roles](./rbac#custom-project-roles) at the project level. The two predefined project roles are Owner and Member. By default, the person creating the project becomes the Owner. If a project does not have an Owner, it is shown as owned by _System_. -## View project insights +## View project status -Project insights is a great way to see how your project performed in the last 30 days compared to the previous 30 days. You can explore key metrics such as the total number of changes, the average time to production, the number of features created and archived, and project health. +The [Project status](./technical-debt#project-status) dashboard provides an overview of your project's technical debt, information on project resources like API keys, recent activity within the project, and feature flag lifecycle information. -To view your project insights, go to the **Insights** within a project. +For additional, in-depth analysis, go to **Analytics** and filter by your project. diff --git a/website/docs/reference/technical-debt.md b/website/docs/reference/technical-debt.md index ba4254fb8e..f0b42b0c56 100644 --- a/website/docs/reference/technical-debt.md +++ b/website/docs/reference/technical-debt.md @@ -32,8 +32,6 @@ While a flag's state does not affect its behavior in applications, using states ## Project status -Each project has a **Project status** dashboard, where you can view its health status and the total number of unhealthy flags. All active flags are considered healthy, while stale and potentially stale flags are considered unhealthy. To keep your project in a healthy state, [archive stale feature flags](/reference/feature-toggles#archive-a-feature-flag) and remove code from your codebase. +Each project has a **Project status** dashboard, where you can view its technical debt rating—the percentage of healthy flags compared to stale or potentially stale flags. To keep your project's technical debt low, [archive stale feature flags](/reference/feature-toggles#archive-a-feature-flag) and remove them from your codebase. To view your project's technical debt rating over time, go to [Analytics](/reference/insights). ![Project status dashboard](/img/project-status-dashboard.png) - -Your overall project health rating is the percentage of healthy flags in your project. To view your project health over time, go to [Insights](/reference/insights). \ No newline at end of file diff --git a/website/static/img/insights-health.png b/website/static/img/insights-health.png deleted file mode 100644 index 17d009a38c..0000000000 Binary files a/website/static/img/insights-health.png and /dev/null differ diff --git a/website/static/img/insights-technical-debt.png b/website/static/img/insights-technical-debt.png new file mode 100644 index 0000000000..eec6096e76 Binary files /dev/null and b/website/static/img/insights-technical-debt.png differ diff --git a/website/static/img/project-status-dashboard.png b/website/static/img/project-status-dashboard.png index 1b020446e7..7f8effb626 100644 Binary files a/website/static/img/project-status-dashboard.png and b/website/static/img/project-status-dashboard.png differ