feat: frontend-report-environment-metrics (#5447)

Zaimwa9 · tiagoapolo · web-flow · commit 9182c416e1d4 · 2025-06-16T09:25:57.000+02:00
Co-authored-by: Tiago Paiva &lt;tiago@tiagopaiva.me&gt;
diff --git a/frontend/common/hooks/useMediaQuery.tsx b/frontend/common/hooks/useMediaQuery.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() =>
+    typeof window !== 'undefined' ? window.matchMedia(query).matches : false,
+  )
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query)
+
+    const updateMatch = () => setMatches(mediaQuery.matches)
+    mediaQuery.addEventListener('change', updateMatch)
+
+    updateMatch()
+
+    return () => mediaQuery.removeEventListener('change', updateMatch)
+  }, [query])
+
+  return matches
+}
diff --git a/frontend/common/services/useEnvironment.ts b/frontend/common/services/useEnvironment.ts
@@ -12,6 +12,15 @@ export const environmentService = service
           url: `environments/${query.id}/`,
         }),
       }),
+      getEnvironmentMetrics: builder.query<
+        Res['environmentMetrics'],
+        Req['getEnvironmentMetrics']
+      >({
+        providesTags: () => [{ id: 'METRICS', type: 'Environment' }],
+        query: (query: Req['getEnvironmentMetrics']) => ({
+          url: `environments/${query.id}/metrics/`,
+        }),
+      }),
       getEnvironments: builder.query<
         Res['environments'],
         Req['getEnvironments']
@@ -75,6 +84,7 @@ export async function updateEnvironment(
 // END OF FUNCTION_EXPORTS
 
 export const {
+  useGetEnvironmentMetricsQuery,
   useGetEnvironmentQuery,
   useGetEnvironmentsQuery,
   useUpdateEnvironmentMutation,
diff --git a/frontend/common/services/useFeatureVersion.ts b/frontend/common/services/useFeatureVersion.ts
@@ -103,14 +103,17 @@ export const getFeatureStateCrud = (
   }
 }
 export const featureVersionService = service
-  .enhanceEndpoints({ addTagTypes: ['FeatureVersion'] })
+  .enhanceEndpoints({ addTagTypes: ['FeatureVersion', 'Environment'] })
   .injectEndpoints({
     endpoints: (builder) => ({
       createAndSetFeatureVersion: builder.mutation<
         Res['featureVersion'],
         Req['createAndSetFeatureVersion']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'FeatureVersion' }],
+        invalidatesTags: [
+          { id: 'LIST', type: 'FeatureVersion' },
+          { id: 'METRICS', type: 'Environment' },
+        ],
         queryFn: async (query: Req['createAndSetFeatureVersion']) => {
           // todo: this will be removed when we combine saving value and segment overrides
           const mode = query.featureStates.find(
diff --git a/frontend/common/services/useIdentity.ts b/frontend/common/services/useIdentity.ts
@@ -10,7 +10,7 @@ const getIdentityEndpoint = (environmentId: string, isEdge: boolean) => {
 }
 
 export const identityService = service
-  .enhanceEndpoints({ addTagTypes: ['Identity'] })
+  .enhanceEndpoints({ addTagTypes: ['Identity', 'Environment'] })
   .injectEndpoints({
     endpoints: (builder) => ({
       createIdentities: builder.mutation<
@@ -133,6 +133,7 @@ export const identityService = service
         invalidatesTags: (res) => [
           { id: 'LIST', type: 'Identity' },
           { id: res?.id, type: 'Identity' },
+          { id: 'METRICS', type: 'Environment' },
         ],
         query: (query: Req['updateIdentity']) => ({
           body: query.data,
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
@@ -684,6 +684,7 @@ export type Req = {
   }
   getBuildVersion: {}
   createOnboardingSupportOptIn: {}
+  getEnvironmentMetrics: { id: string }
   getUserEnvironmentPermissions: {
     environmentId: string
     userId: string
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
@@ -995,6 +995,15 @@ export type Res = {
   conversionEvents: PagedResponse<ConversionEvent>
   splitTest: PagedResponse<SplitTestResult>
   onboardingSupportOptIn: { id: string }
+  environmentMetrics: {
+    metrics: {
+      value: number
+      description: string
+      name: string
+      entity: 'features' | 'identities' | 'segments' | 'workflows'
+      rank: number
+    }[]
+  }
   profile: User
   onboarding: {}
   userPermissions: UserPermissions
diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
@@ -24,7 +24,7 @@ import GithubStar from './GithubStar'
 import Tooltip from './Tooltip'
 import classNames from 'classnames'
 import { apps, gitBranch, gitCompare, statsChart } from 'ionicons/icons'
-import NavSubLink from './NavSubLink'
+import NavSubLink from './navigation/NavSubLink'
 import SettingsIcon from './svg/SettingsIcon'
 import UsersIcon from './svg/UsersIcon'
 import BreadcrumbSeparator from './BreadcrumbSeparator'
@@ -344,6 +344,12 @@ const App = class extends Component {
     }
     const isOrganisationSelect = document.location.pathname === '/organisations'
     const integrations = Object.keys(Utils.getIntegrationData())
+    const environmentMetricsEnabled = Utils.getFlagsmithHasFeature(
+      'environment_metrics',
+    )
+    const projectMetricsTooltipEnabled = Utils.getFlagsmithHasFeature(
+      'project_metrics_tooltip',
+    )
     return (
       <Provider store={getStore()}>
         <AccountProvider
@@ -610,6 +616,21 @@ const App = class extends Component {
                           >
                             Compare
                           </NavSubLink>
+                          {projectMetricsTooltipEnabled && (
+                            <NavSubLink
+                              icon={gitCompare}
+                              to=''
+                              id='reporting-link'
+                              disabled
+                              tooltip={
+                                Utils.getFlagsmithValue(
+                                  'project_metrics_tooltip',
+                                ) || 'Coming soon - fallback'
+                              }
+                            >
+                              Reporting
+                            </NavSubLink>
+                          )}
                           <Permission
                             level='project'
                             permission='ADMIN'
diff --git a/frontend/web/components/Tooltip.tsx b/frontend/web/components/Tooltip.tsx
@@ -6,7 +6,7 @@ import { sanitize } from 'dompurify'
 import { createPortal } from 'react-dom'
 
 export type TooltipProps = {
-  title: ReactNode
+  title: ReactNode | React.ReactNode
   children: string | undefined | null
   place?: _TooltipProps['place']
   plainText?: boolean
diff --git a/frontend/web/components/base/LabelWithTooltip.tsx b/frontend/web/components/base/LabelWithTooltip.tsx
@@ -0,0 +1,26 @@
+import Icon from 'components/Icon'
+import { FC } from 'react'
+
+interface LabelWithTooltipProps {
+  label: string
+  tooltip?: string
+}
+
+const LabelWithTooltip: FC<LabelWithTooltipProps> = ({ label, tooltip }) => {
+  return (
+    <>
+      {label}{' '}
+      {tooltip && (
+        <Tooltip
+          title={<Icon name='info-outlined' width={12} height={12} />}
+          place='top'
+          titleClassName='cursor-pointer'
+        >
+          {tooltip}
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
+export default LabelWithTooltip
diff --git a/frontend/web/components/base/accordion/AccordionCard.tsx b/frontend/web/components/base/accordion/AccordionCard.tsx
@@ -0,0 +1,45 @@
+import React, { useState, FC } from 'react'
+import { IconButton, Collapse } from '@material-ui/core'
+import { chevronDown, chevronUp } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
+
+interface AccordionCardProps {
+  children?: React.ReactNode
+  title?: string
+  className?: string
+}
+
+const AccordionCard: FC<AccordionCardProps> = ({
+  children,
+  title = 'Summary',
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className='d-flex flex-column px-3 py-3 accordion-card m-0'>
+      <div
+        style={{
+          alignItems: 'center',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+        onClick={() => setOpen(!open)}
+        className='d-flex flex-row justify-content-between font-weight-medium'
+      >
+        {title}
+        <IconButton size='small'>
+          <IonIcon
+            className='fs-small me-2 text-muted'
+            icon={open ? chevronUp : chevronDown}
+          />
+        </IconButton>
+      </div>
+      <Collapse in={open}>
+        <div className='mt-2 mb-2'>{children}</div>
+      </Collapse>
+    </div>
+  )
+}
+
+export default AccordionCard
diff --git a/frontend/web/components/metrics/EnvironmentMetric.tsx b/frontend/web/components/metrics/EnvironmentMetric.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react'
+import { Link } from 'react-router-dom'
+import LabelWithTooltip from 'components/base/LabelWithTooltip'
+interface EnvironmentMetricProps {
+  label: string
+  value: string | number
+  link?: string
+  tooltip?: string
+}
+
+const EnvironmentMetric: FC<EnvironmentMetricProps> = ({
+  label,
+  link,
+  tooltip,
+  value,
+}) => {
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '3px 8px',
+        textAlign: 'center',
+      }}
+    >
+      <div className='d-flex items-center gap-1'>
+        {link ? (
+          <Link to={link} className='metric-label'>
+            <LabelWithTooltip label={label} tooltip={tooltip} />
+          </Link>
+        ) : (
+          <p className='metric-label'>
+            <LabelWithTooltip label={label} tooltip={tooltip} />
+          </p>
+        )}
+      </div>
+      <p className='metric-value'>{value}</p>
+    </div>
+  )
+}
+
+export default EnvironmentMetric
diff --git a/frontend/web/components/metrics/EnvironmentMetricsList.tsx b/frontend/web/components/metrics/EnvironmentMetricsList.tsx
@@ -0,0 +1,63 @@
+import React, { FC, useEffect } from 'react'
+import AccordionCard from 'components/base/accordion/AccordionCard'
+import { useGetEnvironmentMetricsQuery } from 'common/services/useEnvironment'
+import EnvironmentMetric from './EnvironmentMetric'
+import { getExtraMetricsData } from './constants'
+
+interface EnvironmentMetricsListProps {
+  environmentApiKey: string
+  projectId: string
+  forceRefetch?: boolean
+}
+
+const EnvironmentMetricsList: FC<EnvironmentMetricsListProps> = ({
+  environmentApiKey,
+  forceRefetch,
+  projectId,
+}) => {
+  const { data, refetch } = useGetEnvironmentMetricsQuery({
+    id: environmentApiKey,
+  })
+
+  const MAX_COLUMNS = 6
+  const columns = Math.min(data?.metrics?.length || 0, MAX_COLUMNS) || 1
+
+  const extraMetricsData = getExtraMetricsData(projectId, environmentApiKey)
+
+  useEffect(() => {
+    if (forceRefetch) {
+      refetch()
+    }
+  }, [forceRefetch, refetch])
+
+  if (!data || data.metrics.length === 0) {
+    return null
+  }
+
+  return (
+    <div className='mb-3'>
+      <AccordionCard title='Summary'>
+        <div className='flex gap-2 mt-4'>
+          <div
+            className='metrics-grid'
+            style={{
+              gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            }}
+          >
+            {data?.metrics.map((metric) => (
+              <EnvironmentMetric
+                key={metric.name}
+                label={metric.description}
+                value={metric.value}
+                link={extraMetricsData?.[metric.name]?.link}
+                tooltip={extraMetricsData?.[metric.name]?.tooltip}
+              />
+            ))}
+          </div>
+        </div>
+      </AccordionCard>
+    </div>
+  )
+}
+
+export default EnvironmentMetricsList
diff --git a/frontend/web/components/metrics/constants.ts b/frontend/web/components/metrics/constants.ts
@@ -0,0 +1,26 @@
+type ExtraMetrics = Record<string, { link?: string; tooltip?: string }>
+
+type GetExtraMetricsFunc = (
+  projectId: string,
+  environmentApiKey: string,
+) => ExtraMetrics
+
+export const getExtraMetricsData: GetExtraMetricsFunc = (
+  projectId,
+  environmentApiKey,
+) => {
+  return {
+    enabled_features: {
+      tooltip: 'The number of features enabled for this environment',
+    },
+    identity_overrides: {
+      link: `/project/${projectId}/environment/${environmentApiKey}/identities`,
+    },
+    open_change_requests: {
+      link: `/project/${projectId}/environment/${environmentApiKey}/change-requests`,
+    },
+    segment_overrides: {
+      link: `/project/${projectId}/segments`,
+    },
+  }
+}
diff --git a/frontend/web/components/navigation/NavSubLink.tsx b/frontend/web/components/navigation/NavSubLink.tsx
diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
diff --git a/frontend/web/components/pages/HomeAside.tsx b/frontend/web/components/pages/HomeAside.tsx
diff --git a/frontend/web/styles/components/_index.scss b/frontend/web/styles/components/_index.scss
diff --git a/frontend/web/styles/components/_metrics.scss b/frontend/web/styles/components/_metrics.scss
diff --git a/frontend/web/styles/project/_project-nav.scss b/frontend/web/styles/project/_project-nav.scss

Original file line number	Diff line number	Diff line change
`@@ -684,6 +684,7 @@ export type Req = {`
`684`	`684`	`}`
`685`	`685`	`getBuildVersion: {}`
`686`	`686`	`createOnboardingSupportOptIn: {}`
	`687`	`+ getEnvironmentMetrics: { id: string }`
`687`	`688`	`getUserEnvironmentPermissions: {`
`688`	`689`	`environmentId: string`
`689`	`690`	`userId: string`