feat: project usage limits (#3313)

frontend/common/services/useProject.ts

@@ -7,6 +7,12 @@ export const projectService = service
   .enhanceEndpoints({ addTagTypes: ['Project'] })
   .injectEndpoints({
     endpoints: (builder) => ({
+      getProject: builder.query<Res['project'], Req['getProject']>({
+        providesTags: (res) => [{ id: res?.id, type: 'Project' }],
+        query: (query: Req['getProject']) => ({
+          url: `projects/${query.id}`,
+        }),
+      }),
       getProjects: builder.query<Res['projects'], Req['getProjects']>({
         providesTags: [{ id: 'LIST', type: 'Project' }],
         query: (data) => ({
@@ -28,9 +34,20 @@ export async function getProjects(
     store.dispatch(projectService.util.getRunningQueriesThunk()),
   )
 }
+export async function getProject(
+  store: any,
+  data: Req['getProject'],
+  options?: Parameters<typeof projectService.endpoints.getProject.initiate>[1],
+) {
+  store.dispatch(projectService.endpoints.getProject.initiate(data, options))
+  return Promise.all(
+    store.dispatch(projectService.util.getRunningQueriesThunk()),
+  )
+}
 // END OF FUNCTION_EXPORTS
 
 export const {
+  useGetProjectQuery,
   useGetProjectsQuery,
   // END OF EXPORTS
 } = projectService

frontend/common/types/requests.ts

@@ -235,5 +235,6 @@ export type Req = {
     data: { name: string }
   }
   getAuditLogItem: { id: string }
+  getProject: { id: string }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -397,6 +397,7 @@ export type Res = {
   auditLogs: PagedResponse<AuditLogItem>
   organisations: PagedResponse<Organisation>
   projects: ProjectSummary[]
+  project: Project
   environments: PagedResponse<Environment>
   organisationUsage: {
     totals: {

frontend/web/components/ProjectUsage.tsx

@@ -0,0 +1,82 @@
+import { FC, useEffect, useState } from 'react'
+import Project from 'common/project'
+import InfoMessage from './InfoMessage'
+import { useGetProjectQuery } from 'common/services/useProject'
+import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
+import { Environment } from 'common/types/responses'
+const _data = require('common/data/base/_data')
+
+type ProjectUsageType = {
+  projectId: string
+}
+
+const ProjectUsage: FC<ProjectUsageType> = ({ projectId }) => {
+  const { data: project } = useGetProjectQuery({ id: projectId })
+  const { data: environments } = useGetEnvironmentsQuery({ projectId })
+
+  const [segmentOverridesUsage, setSegmentOverridesUsage] = useState<number>(0)
+
+  const getSegmentOverridesUsage = (apiKeys: string[]) => {
+    apiKeys.forEach((apiKey) => {
+      _data
+        .get(`${Project.api}environments/${apiKey}`)
+        .then((res: Environment) => {
+          setSegmentOverridesUsage(
+            (prev) => prev + (res.total_segment_overrides || 0),
+          )
+        })
+    })
+  }
+
+  useEffect(() => {
+    if (environments) {
+      const apiKeys = environments.results.map((env) => env.api_key)
+      getSegmentOverridesUsage(apiKeys)
+    }
+  }, [environments])
+
+  return (
+    <div className='mt-4'>
+      <Flex>
+        <Row>
+          <InfoMessage>
+            In order to ensure consistent performance, Flagsmith has the
+            following usage limits.{' '}
+            <a
+              target='_blank'
+              href='https://docs.flagsmith.com/system-administration/system-limits'
+              rel='noreferrer'
+            >
+              <strong>Check the Docs for more details.</strong>
+            </a>
+          </InfoMessage>
+        </Row>
+        <Row className='mb-2'>
+          <h5 className='mb-0'>Project Usage</h5>
+        </Row>
+        <Flex className='gap-2'>
+          <p className='m-0 fs-small fw-normal'>
+            Features:{' '}
+            <span className='fw-bold'>
+              {project?.total_features}/{project?.max_features_allowed}
+            </span>
+          </p>
+          <p className='m-0 fs-small fw-normal'>
+            Segments:{' '}
+            <span className='fw-bold'>
+              {project?.total_segments}/{project?.max_segments_allowed}
+            </span>
+          </p>
+          <p className='m-0 fs-small fw-normal'>
+            Segment Overrides:{' '}
+            <span className='fw-bold'>
+              {segmentOverridesUsage}/{project?.max_segment_overrides_allowed}
+            </span>
+          </p>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export default ProjectUsage

frontend/web/components/pages/ProjectSettingsPage.js

@@ -18,6 +18,7 @@ import { getRolesProjectPermissions } from 'common/services/useRolePermission'
 import AccountStore from 'common/stores/account-store'
 import ImportPage from 'components/import-export/ImportPage'
 import FeatureExport from 'components/import-export/FeatureExport'
+import ProjectUsage from 'components/ProjectUsage'
 
 const ProjectSettingsPage = class extends Component {
   static displayName = 'ProjectSettingsPage'
@@ -473,6 +474,11 @@ const ProjectSettingsPage = class extends Component {
                         </form>
                       </div>
                     </TabItem>
+                    <TabItem tabLabel='Usage'>
+                      <ProjectUsage
+                        projectId={this.props.match.params.projectId}
+                      />
+                    </TabItem>
                     <TabItem tabLabel='Permissions'>
                       <EditPermissions
                         onSaveUser={() => {