@@ -46,6 +46,7 @@ import { getEnvironmentTagColor } from "./utils/environmentUtils";
46
46
import { formatAPICalls , getAPICallsStatusColor } from "./services/license.service" ;
47
47
import ErrorComponent from './components/ErrorComponent' ;
48
48
import { Level1SettingPageContent } from "../styled" ;
49
+ import { trans } from "i18n" ;
49
50
50
51
/**
51
52
* Environment Detail Page Component
@@ -105,9 +106,9 @@ const EnvironmentDetail: React.FC = () => {
105
106
if ( error || ! environment ) {
106
107
return (
107
108
< ErrorComponent
108
- errorMessage = { "Environment Not Found" }
109
+ errorMessage = { trans ( "enterprise.environments.detail.environmentNotFound" ) }
109
110
returnPath = "/setting/environments"
110
- returnLabel = "Return to Environments List"
111
+ returnLabel = { trans ( "enterprise.environments.detail.returnToEnvironmentsList" ) }
111
112
/>
112
113
) ;
113
114
}
@@ -138,26 +139,26 @@ const EnvironmentDetail: React.FC = () => {
138
139
// Stats data for the cards
139
140
const statsData = [
140
141
{
141
- title : "Type" ,
142
- value : environment . environmentType || "Unknown" ,
142
+ title : trans ( "enterprise.environments.detail.type" ) ,
143
+ value : environment . environmentType || trans ( "enterprise.environments.detail.unknown" ) ,
143
144
icon : < CloudServerOutlined /> ,
144
145
color : getEnvironmentTagColor ( environment . environmentType )
145
146
} ,
146
147
{
147
- title : "Status" ,
148
- value : environment . isLicensed ? "Licensed" : "Unlicensed" ,
148
+ title : trans ( "enterprise.environments.detail.status" ) ,
149
+ value : environment . isLicensed ? trans ( "enterprise.environments.detail.licensed" ) : trans ( "enterprise.environments.detail.unlicensed" ) ,
149
150
icon : environment . isLicensed ? < CheckCircleOutlined /> : < CloseCircleOutlined /> ,
150
151
color : environment . isLicensed ? "#52c41a" : "#ff4d4f"
151
152
} ,
152
153
{
153
- title : "API Key" ,
154
- value : environment . environmentApikey ? "Configured" : "Not Set" ,
154
+ title : trans ( "enterprise.environments.detail.apiKey" ) ,
155
+ value : environment . environmentApikey ? trans ( "enterprise.environments.detail.configured" ) : trans ( "enterprise.environments.detail.notSet" ) ,
155
156
icon : < SafetyOutlined /> ,
156
157
color : environment . environmentApikey ? "#1890ff" : "#faad14"
157
158
} ,
158
159
{
159
- title : "Master Env" ,
160
- value : environment . isMaster ? "Yes" : "No" ,
160
+ title : trans ( "enterprise.environments.detail.masterEnv" ) ,
161
+ value : environment . isMaster ? trans ( "enterprise.environments.yes" ) : trans ( "enterprise.environments.no" ) ,
161
162
icon : < UserOutlined /> ,
162
163
color : environment . isMaster ? "#722ed1" : "#8c8c8c"
163
164
}
@@ -168,7 +169,7 @@ const EnvironmentDetail: React.FC = () => {
168
169
key : 'workspaces' ,
169
170
label : (
170
171
< span >
171
- < AppstoreOutlined /> Workspaces
172
+ < AppstoreOutlined /> { trans ( "enterprise.environments.detail.workspaces" ) }
172
173
</ span >
173
174
) ,
174
175
children : < WorkspacesTab environment = { environment } />
@@ -177,7 +178,7 @@ const EnvironmentDetail: React.FC = () => {
177
178
key : 'userGroups' ,
178
179
label : (
179
180
< span >
180
- < UsergroupAddOutlined /> User Groups
181
+ < UsergroupAddOutlined /> { trans ( "enterprise.environments.detail.userGroups" ) }
181
182
</ span >
182
183
) ,
183
184
children : < UserGroupsTab environment = { environment } />
@@ -192,12 +193,12 @@ const EnvironmentDetail: React.FC = () => {
192
193
items = { [
193
194
{
194
195
key : 'environments' ,
195
- title : 'Environments' ,
196
+ title : trans ( "enterprise.environments.title" ) ,
196
197
onClick : ( ) => history . push ( '/setting/environments' )
197
198
} ,
198
199
{
199
200
key : 'current' ,
200
- title : environment . environmentName || "Environment Detail"
201
+ title : environment . environmentName || trans ( "enterprise.environments.detail.environmentDetail" )
201
202
}
202
203
] }
203
204
/>
@@ -224,7 +225,7 @@ const EnvironmentDetail: React.FC = () => {
224
225
225
226
{ /* Basic Environment Information Card */ }
226
227
< Card
227
- title = "Environment Overview"
228
+ title = { trans ( "enterprise.environments.detail.environmentOverview" ) }
228
229
style = { {
229
230
marginBottom : "24px" ,
230
231
borderRadius : '4px' ,
@@ -238,7 +239,7 @@ const EnvironmentDetail: React.FC = () => {
238
239
column = { { xxl : 4 , xl : 3 , lg : 3 , md : 2 , sm : 1 , xs : 1 } }
239
240
size = "small"
240
241
>
241
- < Descriptions . Item label = "Domain" >
242
+ < Descriptions . Item label = { trans ( "enterprise.environments.domain" ) } >
242
243
{ environment . environmentFrontendUrl ? (
243
244
< a
244
245
href = { environment . environmentFrontendUrl }
@@ -248,32 +249,32 @@ const EnvironmentDetail: React.FC = () => {
248
249
{ environment . environmentFrontendUrl } < LinkOutlined />
249
250
</ a >
250
251
) : (
251
- "No domain set"
252
+ trans ( "enterprise.environments.detail.noDomainSet" )
252
253
) }
253
254
</ Descriptions . Item >
254
- < Descriptions . Item label = "Environment ID" >
255
+ < Descriptions . Item label = { trans ( "enterprise.environments.detail.environmentId" ) } >
255
256
< code style = { { padding : '2px 6px' , background : '#f5f5f5' , borderRadius : '3px' } } >
256
257
{ environment . environmentId }
257
258
</ code >
258
259
</ Descriptions . Item >
259
- < Descriptions . Item label = "License Status" >
260
+ < Descriptions . Item label = { trans ( "enterprise.environments.detail.licenseStatus" ) } >
260
261
{ ( ( ) => {
261
262
switch ( environment . licenseStatus ) {
262
263
case 'checking' :
263
- return < Tag icon = { < SyncOutlined spin /> } color = "blue" style = { { borderRadius : '4px' } } > Checking... </ Tag > ;
264
+ return < Tag icon = { < SyncOutlined spin /> } color = "blue" style = { { borderRadius : '4px' } } > { trans ( "enterprise.environments.licenseStatus.checking" ) } </ Tag > ;
264
265
case 'licensed' :
265
- return < Tag icon = { < CheckCircleOutlined /> } color = "green" style = { { borderRadius : '4px' } } > Licensed </ Tag > ;
266
+ return < Tag icon = { < CheckCircleOutlined /> } color = "green" style = { { borderRadius : '4px' } } > { trans ( "enterprise.environments.licenseStatus.licensed" ) } </ Tag > ;
266
267
case 'unlicensed' :
267
- return < Tag icon = { < CloseCircleOutlined /> } color = "orange" style = { { borderRadius : '4px' } } > License Needed </ Tag > ;
268
+ return < Tag icon = { < CloseCircleOutlined /> } color = "orange" style = { { borderRadius : '4px' } } > { trans ( "enterprise.environments.detail.licenseNeeded" ) } </ Tag > ;
268
269
case 'error' :
269
- return < Tag icon = { < ExclamationCircleOutlined /> } color = "orange" style = { { borderRadius : '4px' } } > Setup Required </ Tag > ;
270
+ return < Tag icon = { < ExclamationCircleOutlined /> } color = "orange" style = { { borderRadius : '4px' } } > { trans ( "enterprise.environments.detail.setupRequired" ) } </ Tag > ;
270
271
default :
271
- return < Tag color = "default" style = { { borderRadius : '4px' } } > Unknown </ Tag > ;
272
+ return < Tag color = "default" style = { { borderRadius : '4px' } } > { trans ( "enterprise.environments.detail.unknown" ) } </ Tag > ;
272
273
}
273
274
} ) ( ) }
274
275
</ Descriptions . Item >
275
- < Descriptions . Item label = "Created" >
276
- { environment . createdAt ? new Date ( environment . createdAt ) . toLocaleDateString ( ) : "Unknown" }
276
+ < Descriptions . Item label = { trans ( "enterprise.environments.detail.created" ) } >
277
+ { environment . createdAt ? new Date ( environment . createdAt ) . toLocaleDateString ( ) : trans ( "enterprise.environments.detail.unknown" ) }
277
278
</ Descriptions . Item >
278
279
</ Descriptions >
279
280
</ Card >
@@ -285,7 +286,7 @@ const EnvironmentDetail: React.FC = () => {
285
286
title = {
286
287
< span >
287
288
< CrownOutlined style = { { color : '#52c41a' , marginRight : '8px' } } />
288
- License Details
289
+ { trans ( "enterprise.environments.detail.licenseDetails" ) }
289
290
</ span >
290
291
}
291
292
style = { {
@@ -304,7 +305,7 @@ const EnvironmentDetail: React.FC = () => {
304
305
styles = { { body : { padding : '16px' } } }
305
306
>
306
307
< Statistic
307
- title = "API Calls Remaining"
308
+ title = { trans ( "enterprise.environments.detail.apiCallsRemaining" ) }
308
309
value = { environment . licenseDetails . remainingAPICalls }
309
310
formatter = { ( value ) => (
310
311
< span style = { {
@@ -333,7 +334,7 @@ const EnvironmentDetail: React.FC = () => {
333
334
color : '#8c8c8c' ,
334
335
marginTop : '4px'
335
336
} } >
336
- { environment . licenseDetails . apiCallsUsage || 0 } % used
337
+ { trans ( "enterprise.environments.percentUsed" , { percent : environment . licenseDetails . apiCallsUsage || 0 } ) }
337
338
</ div >
338
339
</ div >
339
340
</ Card >
@@ -347,7 +348,7 @@ const EnvironmentDetail: React.FC = () => {
347
348
styles = { { body : { padding : '16px' } } }
348
349
>
349
350
< Statistic
350
- title = "Total API Calls Limit"
351
+ title = { trans ( "enterprise.environments.detail.totalApiCallsLimit" ) }
351
352
value = { environment . licenseDetails . totalAPICallsLimit }
352
353
formatter = { ( value ) => value ?. toLocaleString ( ) }
353
354
prefix = { < ApiOutlined /> }
@@ -356,7 +357,7 @@ const EnvironmentDetail: React.FC = () => {
356
357
color = "blue"
357
358
style = { { marginTop : '12px' } }
358
359
>
359
- { environment . licenseDetails . eeLicenses . length } License { environment . licenseDetails . eeLicenses . length !== 1 ? 's' : '' }
360
+ { environment . licenseDetails . eeLicenses . length } { environment . licenseDetails . eeLicenses . length !== 1 ? trans ( "enterprise.environments.detail.licenses" ) : trans ( "enterprise.environments.detail.license" ) }
360
361
</ Tag >
361
362
</ Card >
362
363
</ Col >
@@ -369,8 +370,8 @@ const EnvironmentDetail: React.FC = () => {
369
370
styles = { { body : { padding : '16px' } } }
370
371
>
371
372
< Statistic
372
- title = "Enterprise Edition"
373
- value = { environment . licenseDetails . eeActive ? "Active" : "Inactive" }
373
+ title = { trans ( "enterprise.environments.detail.enterpriseEdition" ) }
374
+ value = { environment . licenseDetails . eeActive ? trans ( "enterprise.environments.detail.active" ) : trans ( "enterprise.environments.detail.inactive" ) }
374
375
formatter = { ( value ) => (
375
376
< Tag
376
377
color = { environment . licenseDetails ?. eeActive ? "green" : "red" }
@@ -388,7 +389,7 @@ const EnvironmentDetail: React.FC = () => {
388
389
< div style = { { marginTop : '24px' } } >
389
390
< Typography . Title level = { 5 } style = { { marginBottom : '16px' } } >
390
391
< UserOutlined style = { { marginRight : '8px' } } />
391
- License Information
392
+ { trans ( "enterprise.environments.detail.licenseInformation" ) }
392
393
</ Typography . Title >
393
394
394
395
< Row gutter = { [ 16 , 16 ] } >
@@ -408,13 +409,13 @@ const EnvironmentDetail: React.FC = () => {
408
409
</ strong >
409
410
</ div >
410
411
< div style = { { fontSize : '12px' , color : '#8c8c8c' , marginBottom : '8px' } } >
411
- ID : { license . customerId }
412
+ { trans ( "enterprise.environments.id" ) } : { license . customerId }
412
413
</ div >
413
414
< div style = { { fontSize : '12px' , color : '#8c8c8c' , marginBottom : '8px' } } >
414
415
UUID: < span style = { { fontFamily : 'monospace' } } > { license . uuid . substring ( 0 , 8 ) } ...</ span >
415
416
</ div >
416
417
< Tag color = "blue" >
417
- { license . apiCallsLimit . toLocaleString ( ) } calls
418
+ { license . apiCallsLimit . toLocaleString ( ) } { trans ( "enterprise.environments.detail. calls" ) }
418
419
</ Tag >
419
420
</ Card >
420
421
</ Col >
0 commit comments