0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00

feat(console): add token usage exceed notification (#6907)

add token usage exceed notification for dev tenants
This commit is contained in:
simeng-li 2024-12-25 14:22:59 +08:00 committed by GitHub
parent c6495fcdda
commit 513d18e4db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 49 additions and 2 deletions

View file

@ -0,0 +1,40 @@
/**
* @file Since dev tenant does not have the subscription and billing history tabs,
* we use this component to render the usage notification for dev tenants.
*/
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { TenantsContext } from '@/contexts/TenantsProvider';
import InlineNotification from '@/ds-components/InlineNotification';
type Props = {
readonly className?: string;
};
function DevTenantNotification({ className }: Props) {
const { currentTenant } = useContext(TenantsContext);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
if (!currentTenant) {
return null;
}
const {
usage: { tokenUsage },
quota: { tokenLimit },
} = currentTenant;
if (tokenLimit === null || tokenUsage < tokenLimit) {
return null;
}
return (
<InlineNotification severity="error" className={className}>
{t('subscription.token_usage_notification.dev_plan_exceeded')}
</InlineNotification>
);
}
export default DevTenantNotification;

View file

@ -14,3 +14,7 @@
.tabs {
margin: _.unit(4) 0;
}
.notification {
margin-top: _.unit(4);
}

View file

@ -8,6 +8,7 @@ import DynamicT from '@/ds-components/DynamicT';
import TabNav, { TabNavItem } from '@/ds-components/TabNav';
import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
import DevTenantNotification from './DevTenantNotification';
import styles from './index.module.scss';
function TenantSettings() {
@ -23,6 +24,7 @@ function TenantSettings() {
subtitle="tenants.description"
className={styles.cardTitle}
/>
{isDevTenant && <DevTenantNotification className={styles.notification} />}
<TabNav className={styles.tabs}>
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
<DynamicT forKey="tenants.tabs.settings" />

View file

@ -71,9 +71,10 @@ const subscription = {
usage,
token_usage_notification: {
exceeded:
'You have exceeded your <planName/> token usage limit. Users will not be able to access the Logto service properly. Please upgrade your plan to premium promptly to avoid any inconvenience.',
'You have exceeded 100% of your quota limit. Users will no longer be able to log in properly. Please upgrade immediately to avoid any inconvenience.',
close_to_limit:
'You almost reached your <planName/> token usage limit. Logto will stop granting tokens when the limit is reached. Please upgrade your plan to premium to avoid any inconvenience.',
'You almost reached your token usage limit. Logto will stop granting token if your usage exceeds 100%. Please upgrade your plan to avoid any inconvenience. Logto will stop granting tokens if your usage exceeds 100%.',
dev_plan_exceeded: "This tenant has reached the token limit per Logto's entity limit policy.",
},
};