Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit873a1a3

Browse files
committed
removed Emotion styles and added different colouring based on the usage percentage
1 parent721561b commit873a1a3

File tree

2 files changed

+81
-32
lines changed

2 files changed

+81
-32
lines changed

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,70 @@ const meta: Meta<typeof ManagedAgentsConsumption> = {
2424
exportdefaultmeta;
2525
typeStory=StoryObj<typeofManagedAgentsConsumption>;
2626

27-
exportconstDefault:Story={};
27+
exportconstDefault:Story={
28+
name:"Normal Usage (42% of limit)",
29+
};
30+
31+
exportconstWarning:Story={
32+
name:"Warning (80-99% of limit)",
33+
args:{
34+
managedAgentFeature:{
35+
enabled:true,
36+
actual:96000,// 80% of limit - should show orange
37+
soft_limit:60000,
38+
limit:120000,
39+
usage_period:{
40+
start:"February 27, 2025",
41+
end:"February 27, 2026",
42+
issued_at:"February 27, 2025",
43+
},
44+
entitlement:"entitled",
45+
},
46+
},
47+
};
2848

2949
exportconstNearLimit:Story={
50+
name:"Near Limit (95% of limit)",
51+
args:{
52+
managedAgentFeature:{
53+
enabled:true,
54+
actual:114000,// 95% of limit - should show orange
55+
soft_limit:60000,
56+
limit:120000,
57+
usage_period:{
58+
start:"February 27, 2025",
59+
end:"February 27, 2026",
60+
issued_at:"February 27, 2025",
61+
},
62+
entitlement:"entitled",
63+
},
64+
},
65+
};
66+
67+
exportconstAtLimit:Story={
68+
name:"At Limit (100% of limit)",
69+
args:{
70+
managedAgentFeature:{
71+
enabled:true,
72+
actual:120000,// 100% of limit - should show red
73+
soft_limit:60000,
74+
limit:120000,
75+
usage_period:{
76+
start:"February 27, 2025",
77+
end:"February 27, 2026",
78+
issued_at:"February 27, 2025",
79+
},
80+
entitlement:"entitled",
81+
},
82+
},
83+
};
84+
85+
exportconstOverLimit:Story={
86+
name:"Over Limit (120% of limit)",
3087
args:{
3188
managedAgentFeature:{
3289
enabled:true,
33-
actual:115000,
90+
actual:144000,// 120% of limit - should show red
3491
soft_limit:60000,
3592
limit:120000,
3693
usage_period:{
@@ -44,10 +101,11 @@ export const NearLimit: Story = {
44101
};
45102

46103
exportconstOverIncluded:Story={
104+
name:"Over Included (67% of limit)",
47105
args:{
48106
managedAgentFeature:{
49107
enabled:true,
50-
actual:80000,
108+
actual:80000,// Over included but under 80% of total limit - should still be green
51109
soft_limit:60000,
52110
limit:120000,
53111
usage_period:{
@@ -61,6 +119,7 @@ export const OverIncluded: Story = {
61119
};
62120

63121
exportconstLowUsage:Story={
122+
name:"Low Usage (21% of limit)",
64123
args:{
65124
managedAgentFeature:{
66125
enabled:true,

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
21
importMuiLinkfrom"@mui/material/Link";
32
importtype{Feature}from"api/typesGenerated";
43
import{ErrorAlert}from"components/Alert/ErrorAlert";
@@ -74,13 +73,13 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
7473
// If no feature is provided or it's disabled, show disabled state
7574
if(!managedAgentFeature?.enabled){
7675
return(
77-
<divcss={styles.disabledRoot}>
76+
<divclassName="min-h-60 flex items-center justify-center rounded-lg border border-solid p-12">
7877
<StackalignItems="center"spacing={1}>
7978
<StackalignItems="center"spacing={0.5}>
80-
<spancss={styles.disabledTitle}>
79+
<spanclassName="text-base">
8180
Managed AI Agents Disabled
8281
</span>
83-
<spancss={styles.disabledDescription}>
82+
<spanclassName="text-content-secondary text-center max-w-[464px] mt-2">
8483
Managed AI agents are not included in your current license.
8584
Contact{" "}
8685
<MuiLinkhref="mailto:sales@coder.com">sales</MuiLink> to upgrade
@@ -102,6 +101,20 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
102101
constincludedPercentage=Math.min((included/limit)*100,100);
103102
constremainingPercentage=Math.max(100-includedPercentage,0);
104103

104+
// Determine usage bar color based on percentage
105+
constgetUsageColor=()=>{
106+
constactualUsagePercent=(usage/limit)*100;
107+
if(actualUsagePercent>=100){
108+
return"bg-highlight-red";// Critical: at or over limit
109+
}
110+
if(actualUsagePercent>=80){
111+
return"bg-surface-orange";// Warning: approaching limit
112+
}
113+
return"bg-highlight-green";// Normal: safe usage
114+
};
115+
116+
constusageBarColor=getUsageColor();
117+
105118
return(
106119
<sectionclassName="border border-solid rounded">
107120
<divclassName="p-4">
@@ -139,7 +152,7 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
139152
<ul>
140153
<liclassName="flex items-center gap-2">
141154
<div
142-
className="rounded-[2px]bg-highlight-green size-3 inline-block"
155+
className={`rounded-[2px]${usageBarColor} size-3 inline-block`}
143156
aria-label="Legend for current usage in the chart"
144157
/>
145158
Amount of started workspaces with an AI agent.
@@ -175,7 +188,7 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
175188

176189
<divclassName="relative h-6 bg-surface-secondary rounded overflow-hidden">
177190
<div
178-
className="absolute top-0 left-0 h-fullbg-highlight-green transition-all duration-300"
191+
className={`absolute top-0 left-0 h-full${usageBarColor} transition-all duration-300`}
179192
style={{width:`${usagePercentage}%`}}
180193
/>
181194

@@ -230,26 +243,3 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
230243
</section>
231244
);
232245
};
233-
234-
conststyles={
235-
disabledTitle:{
236-
fontSize:16,
237-
},
238-
239-
disabledRoot:(theme)=>({
240-
minHeight:240,
241-
display:"flex",
242-
alignItems:"center",
243-
justifyContent:"center",
244-
borderRadius:8,
245-
border:`1px solid${theme.palette.divider}`,
246-
padding:48,
247-
}),
248-
249-
disabledDescription:(theme)=>({
250-
color:theme.palette.text.secondary,
251-
textAlign:"center",
252-
maxWidth:464,
253-
marginTop:8,
254-
}),
255-
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp