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

Commitb8c7625

Browse files
authored
Merge pull request#1606 from iamfaran/environments-only
Environments UI Screens - Thank you very much!
2 parentsf3a3693 +fa725fa commitb8c7625

File tree

35 files changed

+4484
-4
lines changed

35 files changed

+4484
-4
lines changed

‎client/packages/lowcoder/src/constants/routesURL.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ export const AUDIT_LOG_DETAIL = "/setting/audit/:eventId/detail";
2424
exportconstAPP_USAGE_DASHBOARD="/setting/app-usage";
2525
exportconstAPP_USAGE_DETAIL="/setting/app-usage/:eventId/detail";
2626

27+
exportconstENVIRONMENT_SETTING="/setting/environments";
28+
exportconstENVIRONMENT_DETAIL=`${ENVIRONMENT_SETTING}/:environmentId`;
29+
exportconstENVIRONMENT_WORKSPACE_DETAIL=`${ENVIRONMENT_DETAIL}/workspaces/:workspaceId`;
30+
2731
exportconstOAUTH_PROVIDER_SETTING="/setting/oauth-provider";
2832
exportconstOAUTH_PROVIDER_DETAIL="/setting/oauth-provider/detail";
2933

@@ -120,3 +124,7 @@ export const buildSubscriptionSettingsLink = (subscriptionId: string, productId
120124
exportconstbuildSubscriptionInfoLink=(productId:string)=>`${SUBSCRIPTION_SETTING}/info/${productId}`;
121125

122126
exportconstbuildSupportTicketLink=(ticketId:string)=>`${SUPPORT_URL}/details/${ticketId}`;
127+
128+
exportconstbuildEnvironmentId=(environmentId:string)=>`${ENVIRONMENT_SETTING}/${environmentId}`;
129+
exportconstbuildEnvironmentWorkspaceId=(environmentId:string,workspaceId:string)=>
130+
`${ENVIRONMENT_SETTING}/${environmentId}/workspaces/${workspaceId}`;
Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
importReact,{useState}from"react";
2+
import{useParams}from"react-router-dom";
3+
import{
4+
Spin,
5+
Typography,
6+
Card,
7+
Tag,
8+
Tabs,
9+
Alert,
10+
Descriptions,
11+
Dropdown,
12+
Menu,
13+
Button,
14+
Breadcrumb,
15+
}from"antd";
16+
import{
17+
ReloadOutlined,
18+
LinkOutlined,
19+
ClusterOutlined,
20+
TeamOutlined,
21+
UserOutlined,
22+
SyncOutlined,
23+
EditOutlined,
24+
EllipsisOutlined,
25+
MoreOutlined,
26+
HomeOutlined
27+
}from"@ant-design/icons";
28+
29+
import{useEnvironmentContext}from"./context/EnvironmentContext";
30+
import{workspaceConfig}from"./config/workspace.config";
31+
import{userGroupsConfig}from"./config/usergroups.config";
32+
importDeployableItemsTabfrom"./components/DeployableItemsTab";
33+
importEditEnvironmentModalfrom"./components/EditEnvironmentModal";
34+
import{Environment}from"./types/environment.types";
35+
importhistoryfrom"@lowcoder-ee/util/history";
36+
37+
const{ Title, Text}=Typography;
38+
const{ TabPane}=Tabs;
39+
40+
41+
/**
42+
* Environment Detail Page Component
43+
* Shows detailed information about a specific environment
44+
*/
45+
constEnvironmentDetail:React.FC=()=>{
46+
// Get environment ID from URL params
47+
const{
48+
environment,
49+
isLoadingEnvironment,
50+
error,
51+
updateEnvironmentData
52+
}=useEnvironmentContext();
53+
54+
55+
56+
const[isEditModalVisible,setIsEditModalVisible]=useState(false);
57+
const[isUpdating,setIsUpdating]=useState(false);
58+
59+
// Handle edit menu item click
60+
consthandleEditClick=()=>{
61+
setIsEditModalVisible(true);
62+
};
63+
64+
// Handle modal close
65+
consthandleCloseModal=()=>{
66+
setIsEditModalVisible(false);
67+
};
68+
69+
// Handle save environment
70+
consthandleSaveEnvironment=async(environmentId:string,data:Partial<Environment>)=>{
71+
setIsUpdating(true);
72+
try{
73+
awaitupdateEnvironmentData(environmentId,data);
74+
handleCloseModal();
75+
}catch(error){
76+
console.error('Failed to update environment:',error);
77+
}finally{
78+
setIsUpdating(false);
79+
}
80+
};
81+
82+
// Dropdown menu for environment actions
83+
constactionsMenu=(
84+
<Menu>
85+
<Menu.Itemkey="edit"icon={<EditOutlined/>}onClick={handleEditClick}>
86+
Edit Environment
87+
</Menu.Item>
88+
{/* Add more menu items here if needed */}
89+
</Menu>
90+
);
91+
debugger
92+
93+
if(isLoadingEnvironment){
94+
return(
95+
<divstyle={{display:'flex',justifyContent:'center',padding:'50px'}}>
96+
<Spinsize="large"tip="Loading environment..."/>
97+
</div>
98+
);
99+
}
100+
101+
if(error||!environment){
102+
return(
103+
<Alert
104+
message="Error loading environment"
105+
description={error||"Environment not found"}
106+
type="error"
107+
showIcon
108+
/>
109+
);
110+
}
111+
return(
112+
<div
113+
className="environment-detail-container"
114+
style={{padding:"24px",flex:1}}
115+
>
116+
<Breadcrumbstyle={{marginBottom:"16px"}}>
117+
<Breadcrumb.Item>
118+
<span
119+
style={{cursor:"pointer"}}
120+
onClick={()=>history.push("/setting/environments")}
121+
>
122+
<HomeOutlined/> Environments
123+
</span>
124+
</Breadcrumb.Item>
125+
<Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
126+
</Breadcrumb>
127+
128+
{/* Header with environment name and controls */}
129+
{/* Header with environment name and controls */}
130+
<div
131+
className="environment-header"
132+
style={{
133+
marginBottom:"24px",
134+
display:"flex",
135+
justifyContent:"space-between",
136+
alignItems:"flex-start",
137+
flexWrap:"wrap",
138+
gap:"16px",
139+
}}
140+
>
141+
<divstyle={{flex:"1 1 auto",minWidth:"200px"}}>
142+
<Titlelevel={3}style={{margin:0,wordBreak:"break-word"}}>
143+
{environment.environmentName||"Unnamed Environment"}
144+
</Title>
145+
<Texttype="secondary">ID:{environment.environmentId}</Text>
146+
</div>
147+
<divstyle={{flexShrink:0}}>
148+
<Button
149+
icon={<EditOutlined/>}
150+
onClick={handleEditClick}
151+
type="primary"
152+
>
153+
Edit Environment
154+
</Button>
155+
</div>
156+
</div>
157+
158+
{/* Basic Environment Information Card - improved responsiveness */}
159+
<Card
160+
title="Environment Overview"
161+
style={{marginBottom:"24px"}}
162+
extra={environment.isMaster&&<Tagcolor="green">Master</Tag>}
163+
>
164+
<Descriptions
165+
bordered
166+
layout="vertical"// Change to vertical layout on smaller screens
167+
column={{xxl:4,xl:3,lg:3,md:2,sm:1,xs:1}}
168+
size="small"// Use smaller size on mobile
169+
>
170+
<Descriptions.Itemlabel="Domain">
171+
{environment.environmentFrontendUrl ?(
172+
<a
173+
href={environment.environmentFrontendUrl}
174+
target="_blank"
175+
rel="noopener noreferrer"
176+
>
177+
{environment.environmentFrontendUrl}<LinkOutlined/>
178+
</a>
179+
) :(
180+
"No domain set"
181+
)}
182+
</Descriptions.Item>
183+
<Descriptions.Itemlabel="Environment Type">
184+
<Tag
185+
color={
186+
environment.environmentType==="production"
187+
?"red"
188+
:environment.environmentType==="testing"
189+
?"orange"
190+
:"blue"
191+
}
192+
>
193+
{environment.environmentType}
194+
</Tag>
195+
</Descriptions.Item>
196+
<Descriptions.Itemlabel="API Key Status">
197+
{environment.environmentApikey ?(
198+
<Tagcolor="green">Configured</Tag>
199+
) :(
200+
<Tagcolor="red">Not Configured</Tag>
201+
)}
202+
</Descriptions.Item>
203+
<Descriptions.Itemlabel="Master Environment">
204+
{environment.isMaster ?"Yes" :"No"}
205+
</Descriptions.Item>
206+
</Descriptions>
207+
</Card>
208+
209+
{/* Tabs for Workspaces and User Groups */}
210+
<TabsdefaultActiveKey="workspaces">
211+
<TabPanetab="Workspaces"key="workspaces">
212+
{/* Using our new generic component with the workspace config */}
213+
<DeployableItemsTab
214+
environment={environment}
215+
config={workspaceConfig}
216+
title="Workspaces in this Environment"
217+
/>
218+
</TabPane>
219+
<TabPane
220+
tab={
221+
<span>
222+
<TeamOutlined/> User Groups
223+
</span>
224+
}
225+
key="userGroups"
226+
>
227+
{/* Using our new generic component with the user group config */}
228+
<DeployableItemsTab
229+
environment={environment}
230+
config={userGroupsConfig}
231+
title="User Groups in this Environment"
232+
/>
233+
</TabPane>
234+
</Tabs>
235+
{/* Edit Environment Modal */}
236+
{environment&&(
237+
<EditEnvironmentModal
238+
visible={isEditModalVisible}
239+
environment={environment}
240+
onClose={handleCloseModal}
241+
onSave={handleSaveEnvironment}
242+
loading={isUpdating}
243+
/>
244+
)}
245+
</div>
246+
);
247+
};
248+
249+
exportdefaultEnvironmentDetail;
Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1-
exportfunctionEnvironments(){
2-
return<></>;
3-
}
1+
importReactfrom"react";
2+
import{Switch,Route}from"react-router-dom";
3+
import{EnvironmentProvider}from"./context/EnvironmentContext";
4+
importEnvironmentsListfrom"./EnvironmentsList";
5+
importEnvironmentScopedRoutesfrom"./components/EnvironmentScopedRoutes";
6+
7+
import{
8+
ENVIRONMENT_SETTING,
9+
ENVIRONMENT_DETAIL
10+
}from"@lowcoder-ee/constants/routesURL";
11+
12+
/**
13+
* Top-level Environments component that wraps all environment-related routes
14+
* with the EnvironmentProvider for shared state management
15+
*/
16+
constEnvironments:React.FC=()=>{
17+
return(
18+
<EnvironmentProvider>
19+
<Switch>
20+
{/* Route that shows the list of environments */}
21+
<Routeexactpath={ENVIRONMENT_SETTING}>
22+
<EnvironmentsList/>
23+
</Route>
24+
25+
{/* All other routes under /environments/:envId */}
26+
<Routepath={ENVIRONMENT_DETAIL}>
27+
<EnvironmentScopedRoutes/>
28+
</Route>
29+
</Switch>
30+
</EnvironmentProvider>
31+
);
32+
};
33+
34+
exportdefaultEnvironments;

0 commit comments

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