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:
parent
c6495fcdda
commit
513d18e4db
4 changed files with 49 additions and 2 deletions
|
@ -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;
|
|
@ -14,3 +14,7 @@
|
|||
.tabs {
|
||||
margin: _.unit(4) 0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-top: _.unit(4);
|
||||
}
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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.",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue