@@ -46,6 +46,7 @@ import { getEnvironmentTagColor } from "./utils/environmentUtils";
4646import { formatAPICalls , getAPICallsStatusColor } from "./services/license.service" ;
4747import ErrorComponent from './components/ErrorComponent' ;
4848import { Level1SettingPageContent } from "../styled" ;
49+ import { trans } from "i18n" ;
4950
5051/**
5152 * Environment Detail Page Component
@@ -105,9 +106,9 @@ const EnvironmentDetail: React.FC = () => {
105106if ( error || ! environment ) {
106107return (
107108< ErrorComponent
108- errorMessage = { "Environment Not Found" }
109+ errorMessage = { trans ( "enterprise.environments.detail.environmentNotFound" ) }
109110returnPath = "/setting/environments"
110- returnLabel = "Return to Environments List"
111+ returnLabel = { trans ( "enterprise.environments.detail.returnToEnvironmentsList" ) }
111112/>
112113) ;
113114}
@@ -138,26 +139,26 @@ const EnvironmentDetail: React.FC = () => {
138139// Stats data for the cards
139140const statsData = [
140141{
141- title :"Type" ,
142- value :environment . environmentType || "Unknown" ,
142+ title :trans ( "enterprise.environments.detail.type" ) ,
143+ value :environment . environmentType || trans ( "enterprise.environments.detail.unknown" ) ,
143144icon :< CloudServerOutlined /> ,
144145color :getEnvironmentTagColor ( environment . environmentType )
145146} ,
146147{
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" ) ,
149150icon :environment . isLicensed ?< CheckCircleOutlined /> :< CloseCircleOutlined /> ,
150151color :environment . isLicensed ?"#52c41a" :"#ff4d4f"
151152} ,
152153{
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" ) ,
155156icon :< SafetyOutlined /> ,
156157color :environment . environmentApikey ?"#1890ff" :"#faad14"
157158} ,
158159{
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" ) ,
161162icon :< UserOutlined /> ,
162163color :environment . isMaster ?"#722ed1" :"#8c8c8c"
163164}
@@ -168,7 +169,7 @@ const EnvironmentDetail: React.FC = () => {
168169key :'workspaces' ,
169170label :(
170171< span >
171- < AppstoreOutlined /> Workspaces
172+ < AppstoreOutlined /> { trans ( "enterprise.environments.detail.workspaces" ) }
172173</ span >
173174) ,
174175children :< WorkspacesTab environment = { environment } />
@@ -177,7 +178,7 @@ const EnvironmentDetail: React.FC = () => {
177178key :'userGroups' ,
178179label :(
179180< span >
180- < UsergroupAddOutlined /> User Groups
181+ < UsergroupAddOutlined /> { trans ( "enterprise.environments.detail.userGroups" ) }
181182</ span >
182183) ,
183184children :< UserGroupsTab environment = { environment } />
@@ -192,12 +193,12 @@ const EnvironmentDetail: React.FC = () => {
192193items = { [
193194{
194195key :'environments' ,
195- title :'Environments' ,
196+ title :trans ( "enterprise.environments.title" ) ,
196197onClick :( ) => history . push ( '/setting/environments' )
197198} ,
198199{
199200key :'current' ,
200- title :environment . environmentName || "Environment Detail"
201+ title :environment . environmentName || trans ( "enterprise.environments.detail.environmentDetail" )
201202}
202203] }
203204/>
@@ -224,7 +225,7 @@ const EnvironmentDetail: React.FC = () => {
224225
225226{ /* Basic Environment Information Card */ }
226227< Card
227- title = "Environment Overview"
228+ title = { trans ( "enterprise.environments.detail.environmentOverview" ) }
228229style = { {
229230marginBottom :"24px" ,
230231borderRadius :'4px' ,
@@ -238,7 +239,7 @@ const EnvironmentDetail: React.FC = () => {
238239column = { { xxl :4 , xl :3 , lg :3 , md :2 , sm :1 , xs :1 } }
239240size = "small"
240241>
241- < Descriptions . Item label = "Domain" >
242+ < Descriptions . Item label = { trans ( "enterprise.environments.domain" ) } >
242243{ environment . environmentFrontendUrl ?(
243244< a
244245href = { environment . environmentFrontendUrl }
@@ -248,32 +249,32 @@ const EnvironmentDetail: React.FC = () => {
248249{ environment . environmentFrontendUrl } < LinkOutlined />
249250</ a >
250251) :(
251- "No domain set"
252+ trans ( "enterprise.environments.detail.noDomainSet" )
252253) }
253254</ Descriptions . Item >
254- < Descriptions . Item label = "Environment ID" >
255+ < Descriptions . Item label = { trans ( "enterprise.environments.detail.environmentId" ) } >
255256< code style = { { padding :'2px 6px' , background :'#f5f5f5' , borderRadius :'3px' } } >
256257{ environment . environmentId }
257258</ code >
258259</ Descriptions . Item >
259- < Descriptions . Item label = "License Status" >
260+ < Descriptions . Item label = { trans ( "enterprise.environments.detail.licenseStatus" ) } >
260261{ ( ( ) => {
261262switch ( environment . licenseStatus ) {
262263case '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 > ;
264265case '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 > ;
266267case '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 > ;
268269case '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 > ;
270271default :
271- return < Tag color = "default" style = { { borderRadius :'4px' } } > Unknown </ Tag > ;
272+ return < Tag color = "default" style = { { borderRadius :'4px' } } > { trans ( "enterprise.environments.detail.unknown" ) } </ Tag > ;
272273}
273274} ) ( ) }
274275</ 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" ) }
277278</ Descriptions . Item >
278279</ Descriptions >
279280</ Card >
@@ -285,7 +286,7 @@ const EnvironmentDetail: React.FC = () => {
285286title = {
286287< span >
287288< CrownOutlined style = { { color :'#52c41a' , marginRight :'8px' } } />
288- License Details
289+ { trans ( "enterprise.environments.detail.licenseDetails" ) }
289290</ span >
290291}
291292style = { {
@@ -304,7 +305,7 @@ const EnvironmentDetail: React.FC = () => {
304305styles = { { body :{ padding :'16px' } } }
305306>
306307< Statistic
307- title = "API Calls Remaining"
308+ title = { trans ( "enterprise.environments.detail.apiCallsRemaining" ) }
308309value = { environment . licenseDetails . remainingAPICalls }
309310formatter = { ( value ) => (
310311< span style = { {
@@ -333,7 +334,7 @@ const EnvironmentDetail: React.FC = () => {
333334color :'#8c8c8c' ,
334335marginTop :'4px'
335336} } >
336- { environment . licenseDetails . apiCallsUsage || 0 } % used
337+ { trans ( "enterprise.environments.percentUsed" , { percent : environment . licenseDetails . apiCallsUsage || 0 } ) }
337338</ div >
338339</ div >
339340</ Card >
@@ -347,7 +348,7 @@ const EnvironmentDetail: React.FC = () => {
347348styles = { { body :{ padding :'16px' } } }
348349>
349350< Statistic
350- title = "Total API Calls Limit"
351+ title = { trans ( "enterprise.environments.detail.totalApiCallsLimit" ) }
351352value = { environment . licenseDetails . totalAPICallsLimit }
352353formatter = { ( value ) => value ?. toLocaleString ( ) }
353354prefix = { < ApiOutlined /> }
@@ -356,7 +357,7 @@ const EnvironmentDetail: React.FC = () => {
356357color = "blue"
357358style = { { marginTop :'12px' } }
358359>
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" ) }
360361</ Tag >
361362</ Card >
362363</ Col >
@@ -369,8 +370,8 @@ const EnvironmentDetail: React.FC = () => {
369370styles = { { body :{ padding :'16px' } } }
370371>
371372< 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" ) }
374375formatter = { ( value ) => (
375376< Tag
376377color = { environment . licenseDetails ?. eeActive ?"green" :"red" }
@@ -388,7 +389,7 @@ const EnvironmentDetail: React.FC = () => {
388389< div style = { { marginTop :'24px' } } >
389390< Typography . Title level = { 5 } style = { { marginBottom :'16px' } } >
390391< UserOutlined style = { { marginRight :'8px' } } />
391- License Information
392+ { trans ( "enterprise.environments.detail.licenseInformation" ) }
392393</ Typography . Title >
393394
394395< Row gutter = { [ 16 , 16 ] } >
@@ -408,13 +409,13 @@ const EnvironmentDetail: React.FC = () => {
408409</ strong >
409410</ div >
410411< div style = { { fontSize :'12px' , color :'#8c8c8c' , marginBottom :'8px' } } >
411- ID :{ license . customerId }
412+ { trans ( "enterprise.environments.id" ) } :{ license . customerId }
412413</ div >
413414< div style = { { fontSize :'12px' , color :'#8c8c8c' , marginBottom :'8px' } } >
414415 UUID:< span style = { { fontFamily :'monospace' } } > { license . uuid . substring ( 0 , 8 ) } ...</ span >
415416</ div >
416417< Tag color = "blue" >
417- { license . apiCallsLimit . toLocaleString ( ) } calls
418+ { license . apiCallsLimit . toLocaleString ( ) } { trans ( "enterprise.environments.detail. calls" ) }
418419</ Tag >
419420</ Card >
420421</ Col >