feat: display warning and prevent creation on limit

.prettierignore

@@ -3,4 +3,5 @@
 *.json
 *.handlebars
 *.css
-.bablerc
+.bablerc
+**/CHANGELOG.md

frontend/common/dispatcher/app-actions.js

@@ -37,6 +37,12 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       projectId,
     })
   },
+  getEnv(environmentId) {
+    Dispatcher.handleViewAction({
+      actionType: Actions.GET_ENVIRONMENT,
+      environmentId,
+    })
+  },
   createFlag(projectId, environmentId, flag, segmentOverrides) {
     Dispatcher.handleViewAction({
       actionType: Actions.CREATE_FLAG,

frontend/common/providers/FeatureListProvider.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import FeatureListStore from 'common/stores/feature-list-store'
+import ProjectStore from 'common/stores/project-store'
 
 const FeatureListProvider = class extends React.Component {
   static displayName = 'FeatureListProvider'
@@ -11,8 +12,9 @@ const FeatureListProvider = class extends React.Component {
       isLoading: FeatureListStore.isLoading,
       isSaving: FeatureListStore.isSaving,
       lastSaved: FeatureListStore.getLastSaved(),
+      maxFeaturesAllowed: ProjectStore.getMaxFeaturesAllowed(),
       projectFlags: FeatureListStore.getProjectFlags(),
-      usageData: FeatureListStore.getFeatureUsage(),
+      totalFeatures: ProjectStore.getTotalFeatures(),
     }
     ES6Component(this)
     this.listenTo(FeatureListStore, 'change', () => {
@@ -22,7 +24,9 @@ const FeatureListProvider = class extends React.Component {
         isLoading: FeatureListStore.isLoading,
         isSaving: FeatureListStore.isSaving,
         lastSaved: FeatureListStore.getLastSaved(),
+        maxFeaturesAllowed: ProjectStore.getMaxFeaturesAllowed(),
         projectFlags: FeatureListStore.getProjectFlags(),
+        totalFeatures: ProjectStore.getTotalFeatures(),
         usageData: FeatureListStore.getFeatureUsage(),
       })
     })

frontend/common/services/useSubscriptionMetadata.ts

@@ -0,0 +1,49 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const getSubscriptionMetadataService = service
+  .enhanceEndpoints({ addTagTypes: ['GetSubscriptionMetadata'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getSubscriptionMetadata: builder.query<
+        Res['getSubscriptionMetadata'],
+        Req['getSubscriptionMetadata']
+      >({
+        providesTags: (res) => [
+          { id: res?.id, type: 'GetSubscriptionMetadata' },
+        ],
+        query: (query: Req['getSubscriptionMetadata']) => ({
+          url: `organisations/${query.id}/get-subscription-metadata/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getSubscriptionMetadata(
+  store: any,
+  data: Req['getSubscriptionMetadata'],
+  options?: Parameters<
+    typeof getSubscriptionMetadataService.endpoints.getSubscriptionMetadata.initiate
+  >[1],
+) {
+  return store.dispatch(
+    getSubscriptionMetadataService.endpoints.getSubscriptionMetadata.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetSubscriptionMetadataQuery,
+  // END OF EXPORTS
+} = getSubscriptionMetadataService
+
+/* Usage examples:
+const { data, isLoading } = useGetSubscriptionMetadataQuery({ id: 2 }, {}) //get hook
+const [getSubscriptionMetadata, { isLoading, data, isSuccess }] = useGetSubscriptionMetadataMutation() //create hook
+getSubscriptionMetadataService.endpoints.getSubscriptionMetadata.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/stores/project-store.js

@@ -1,6 +1,7 @@
 import { getIsWidget } from 'components/pages/WidgetPage'
 
 import Constants from 'common/constants'
+import Utils from 'common/utils/utils'
 
 const Dispatcher = require('../dispatcher/dispatcher')
 const BaseStore = require('./base/_store')
@@ -83,6 +84,14 @@ const controller = {
       store.saved()
     })
   },
+  getEnv: (envId) => {
+    data.get(`${Project.api}environments/${envId}/`).then((environment) => {
+      environment.total_segment_overrides =
+        environment.total_segment_overrides || 0
+      store.model = Object.assign(store.model, { environment })
+      store.saved()
+    })
+  },
   getProject: (id, cb, force) => {
     if (force) {
       store.loading()
@@ -92,6 +101,12 @@ const controller = {
         data.get(`${Project.api}environments/?project=${id}`).catch(() => []),
       ])
         .then(([project, environments]) => {
+          project.max_segments_allowed = project.max_segments_allowed
+          project.max_features_allowed = project.max_features_allowed
+          project.max_segment_overrides_allowed =
+            project.max_segment_overrides_allowed
+          project.total_features = project.total_features || 0
+          project.total_segments = project.total_segments || 0
           store.model = Object.assign(project, {
             environments: _.sortBy(environments.results, 'name'),
           })
@@ -118,6 +133,12 @@ const controller = {
         data.get(`${Project.api}environments/?project=${id}`).catch(() => []),
       ])
         .then(([project, environments]) => {
+          project.max_segments_allowed = project.max_segments_allowed
+          project.max_features_allowed = project.max_features_allowed
+          project.max_segment_overrides_allowed =
+            project.max_segment_overrides_allowed
+          project.total_features = project.total_features || 0
+          project.total_segments = project.total_segments || 0
           store.model = Object.assign(project, {
             environments: _.sortBy(environments.results, 'name'),
           })
@@ -162,6 +183,24 @@ const store = Object.assign({}, BaseStore, {
     })
   },
   getEnvs: () => store.model && store.model.environments,
+  getMaxFeaturesAllowed: () => {
+    return store.model && store.model.max_features_allowed
+  },
+  getMaxSegmentOverridesAllowed: () => {
+    return store.model && store.model.max_segment_overrides_allowed
+  },
+  getMaxSegmentsAllowed: () => {
+    return store.model && store.model.max_segments_allowed
+  },
+  getTotalFeatures: () => {
+    return store.model && store.model.total_features
+  },
+  getTotalSegmentOverrides: () => {
+    return store.model && store.model.environment.total_segment_overrides
+  },
+  getTotalSegments: () => {
+    return store.model && store.model.total_segments
+  },
   id: 'project',
   model: null,
 })
@@ -187,6 +226,9 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
     case Actions.EDIT_ENVIRONMENT:
       controller.editEnv(action.env)
       break
+    case Actions.GET_ENVIRONMENT:
+      controller.getEnv(action.environmentId)
+      break
     case Actions.DELETE_ENVIRONMENT:
       controller.deleteEnv(action.env)
       break

frontend/common/types/requests.ts

@@ -105,5 +105,6 @@ export type Req = {
     user: string
   }
   getProjectFlags: { project: string }
+  getGetSubscriptionMetadata: { id: string }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -50,6 +50,7 @@ export type Environment = {
   minimum_change_request_approvals?: number
   allow_client_traits: boolean
   hide_sensitive_data: boolean
+  total_segment_overrides?: number
 }
 export type Project = {
   id: number
@@ -62,6 +63,11 @@ export type Project = {
   use_edge_identities: boolean
   prevent_flag_defaults: boolean
   enable_realtime_updates: boolean
+  max_segments_allowed?: number | null
+  max_features_allowed?: number | null
+  max_segment_overrides_allowed?: number | null
+  total_features?: number
+  total_segments?: number
   environments: Environment[]
 }
 
@@ -336,5 +342,6 @@ export type Res = {
 
   projectFlags: PagedResponse<ProjectFlag>
   identityFeatureStates: IdentityFeatureState[]
+  getSubscriptionMetadata: { id: string }
   // END OF TYPES
 }

frontend/common/utils/utils.tsx

@@ -14,6 +14,8 @@ import {
 import flagsmith from 'flagsmith'
 import { ReactNode } from 'react'
 import _ from 'lodash'
+import ErrorMessage from 'components/ErrorMessage'
+import WarningMessage from 'components/WarningMessage'
 import Constants from 'common/constants'
 
 const semver = require('semver')
@@ -54,25 +56,40 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     return 100 - total
   },
 
-  calculaterRemainingCallsPercentage(value, total) {
-    const minRemainingPercentage = 30
+  calculateRemainingLimitsPercentage(
+    total: number | undefined,
+    max: number | undefined,
+    threshold = 90,
+  ) {
     if (total === 0) {
       return 0
     }
-
-    const percentage = (value / total) * 100
-    const remainingPercentage = 100 - percentage
-
-    if (remainingPercentage <= minRemainingPercentage) {
-      return true
+    const percentage = (total / max) * 100
+    if (percentage >= threshold) {
+      return {
+        percentage: Math.floor(percentage),
+      }
     }
-    return false
+    return 0
+  },
+
+  displayLimitAlert(type: string, percentage: number | undefined) {
+    const envOrProject =
+      type === 'segment overrides' ? 'environment' : 'project'
+    return percentage >= 100 ? (
+      <ErrorMessage
+        error={`Your ${envOrProject} reached the limit of ${type}, please contact support to discuss increasing this limit.`}
+      />
+    ) : percentage ? (
+      <WarningMessage
+        warningMessage={`Your ${envOrProject} is  using ${percentage}% of the total allowance of ${type}.`}
+      />
+    ) : null
   },
 
   changeRequestsEnabled(value: number | null | undefined) {
     return typeof value === 'number'
   },
-
   escapeHtml(html: string) {
     const text = document.createTextNode(html)
     const p = document.createElement('p')

frontend/web/components/App.js

@@ -19,10 +19,14 @@ import { resolveAuthFlow } from '@datadog/ui-extensions-sdk'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import { getOrganisationUsage } from 'common/services/useOrganisationUsage'
+import { getSubscriptionMetadata } from 'common/services/useSubscriptionMetadata'
 import Button from './base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from './Icon'
 import AccountStore from 'common/stores/account-store'
 import InfoMessage from './InfoMessage'
+import Format from 'common/utils/format'
+import ErrorMessage from 'components/ErrorMessage'
+import WarningMessage from 'components/WarningMessage'
 
 const App = class extends Component {
   static propTypes = {
@@ -38,6 +42,7 @@ const App = class extends Component {
     asideIsVisible: !isMobile,
     lastEnvironmentId: '',
     lastProjectId: '',
+    maxApiCalls: 50000,
     pin: '',
     showAnnouncement: true,
     totalApiCalls: 0,
@@ -70,6 +75,13 @@ const App = class extends Component {
       AccountStore.getOrganisation()?.id &&
       this.state.activeOrganisation !== AccountStore.getOrganisation().id
     ) {
+      getSubscriptionMetadata(getStore(), {
+        id: AccountStore.getOrganisation()?.id,
+      }).then((res) => {
+        this.setState({
+          maxApiCalls: res?.data?.max_api_calls,
+        })
+      })
       getOrganisationUsage(getStore(), {
         organisationId: AccountStore.getOrganisation()?.id,
       }).then((res) => {
@@ -288,6 +300,17 @@ const App = class extends Component {
     )
     const dismissed = flagsmith.getTrait('dismissed_announcement')
     const showBanner = !dismissed || dismissed !== announcementValue.id
+    const maxApiCallsPercentage = Utils.calculateRemainingLimitsPercentage(
+      this.state.totalApiCalls,
+      this.state.maxApiCalls,
+      70,
+    ).percentage
+
+    const alertMaxApiCallsText = `You have used ${Format.shortenNumber(
+      this.state.totalApiCalls,
+    )}/${Format.shortenNumber(
+      this.state.maxApiCalls,
+    )} of your allowed requests.`
 
     return (
       <Provider store={getStore()}>
@@ -484,6 +507,31 @@ const App = class extends Component {
                         </div>
                       ) : (
                         <Fragment>
+                          <Row>
+                            {user &&
+                              Utils.getFlagsmithHasFeature(
+                                'payments_enabled',
+                              ) &&
+                              Utils.getFlagsmithHasFeature(
+                                'max_api_calls_alert',
+                              ) &&
+                              (maxApiCallsPercentage &&
+                              maxApiCallsPercentage < 100 ? (
+                                <WarningMessage
+                                  warningMessage={alertMaxApiCallsText}
+                                  warningMessageClass={'announcement'}
+                                  enabledButton
+                                />
+                              ) : (
+                                maxApiCallsPercentage >= 100 && (
+                                  <ErrorMessage
+                                    error={alertMaxApiCallsText}
+                                    errorMessageClass={'announcement'}
+                                    enabledButton
+                                  />
+                                )
+                              ))}
+                          </Row>
                           {user &&
                             showBanner &&
                             Utils.getFlagsmithHasFeature('announcement') &&

frontend/web/components/Aside.js

@@ -50,6 +50,7 @@ const Aside = class extends Component {
               ? {}
               : { live_from_after: new Date().toISOString() },
           )
+          AppActions.getEnv(this.props.environmentId)
         }
       })
     }
@@ -77,6 +78,7 @@ const Aside = class extends Component {
               ? {}
               : { live_from_after: new Date().toISOString() },
           )
+          AppActions.getEnv(this.props.environmentId)
         }
       }
     }