add workspaces list

lowcoder-org · FalkWolsky · Apr 19, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
commit eb401ee94d95126940d0878256851a33d83bf5cb
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -1,26 +1,29 @@
 import React from "react";
 import { useParams } from "react-router-dom";
-import { 
-  Spin, 
-  Typography, 
-  Card, 
-  Row, 
-  Col, 
-  Tag, 
-  Tabs, 
-  Alert, 
-  Descriptions, 
+import {
+  Spin,
+  Typography,
+  Card,
+  Row,
+  Col,
+  Tag,
+  Tabs,
+  Alert,
+  Descriptions,
   Button,
-  Statistic
+  Statistic,
+  Divider,
 } from "antd";
-import { 
-  ReloadOutlined, 
-  LinkOutlined, 
-  ClusterOutlined, 
-  TeamOutlined, 
-  UserOutlined 
+import {
+  ReloadOutlined,
+  LinkOutlined,
+  ClusterOutlined,
+  TeamOutlined,
+  UserOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
-import { useEnvironmentDetail } from './hooks/useEnvironmentDetail';
+import { useEnvironmentDetail } from "./hooks/useEnvironmentDetail";
+import WorkspacesList from "./components/WorkspacesList";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
@@ -32,19 +35,37 @@ const { TabPane } = Tabs;
 const EnvironmentDetail: React.FC = () => {
   // Get environment ID from URL params
   const { environmentId: id } = useParams<{ environmentId: string }>();
-
+
+  // Use the custom hook to handle data fetching and state management
   // Use the custom hook to handle data fetching and state management
-  const { environment, loading, error, refresh } = useEnvironmentDetail(id);
-
+  const {
+    environment,
+    loading,
+    error,
+    refresh,
+    workspaces,
+    workspacesLoading,
+    workspacesError,
+    refreshWorkspaces,
+    workspaceStats,
+  } = useEnvironmentDetail(id);
   // If loading, show spinner
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          padding: "50px",
+        }}
+      >
         <Spin size="large" tip="Loading environment details..." />
       </div>
     );
   }
-  
+
   // If error, show error message
   if (error) {
     return (
@@ -53,7 +74,7 @@ const EnvironmentDetail: React.FC = () => {
         description={error}
         type="error"
         showIcon
-        style={{ margin: '24px' }}
+        style={{ margin: "24px" }}
         action={
           <Button type="primary" icon={<ReloadOutlined />} onClick={refresh}>
             Try Again
@@ -62,7 +83,7 @@ const EnvironmentDetail: React.FC = () => {
       />
     );
   }
-  
+
   // If no environment data, show message
   if (!environment) {
     return (
@@ -71,122 +92,219 @@ const EnvironmentDetail: React.FC = () => {
         description="The requested environment could not be found"
         type="warning"
         showIcon
-        style={{ margin: '24px' }}
+        style={{ margin: "24px" }}
       />
     );
   }
-  
+
   return (
-    <div className="environment-detail-container" style={{ padding: '24px' }}>
+    <div className="environment-detail-container" style={{ padding: "24px" }}>
       {/* Header with environment name and controls */}
-      <div className="environment-header" style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div
+        className="environment-header"
+        style={{
+          marginBottom: "24px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
         <div>
-          <Title level={3}>{environment.environmentName || 'Unnamed Environment'}</Title>
+          <Title level={3}>
+            {environment.environmentName || "Unnamed Environment"}
+          </Title>
           <Text type="secondary">ID: {environment.environmentId}</Text>
         </div>
-        <Button 
-          icon={<ReloadOutlined />} 
-          onClick={refresh}
-        >
+        <Button icon={<ReloadOutlined />} onClick={refresh}>
           Refresh
         </Button>
       </div>
-      
+
       {/* Basic Environment Information Card */}
-      <Card 
-        title="Environment Overview" 
-        style={{ marginBottom: '24px' }}
+      <Card
+        title="Environment Overview"
+        style={{ marginBottom: "24px" }}
         extra={environment.isMaster && <Tag color="green">Master</Tag>}
       >
-        <Descriptions bordered column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}>
+        <Descriptions
+          bordered
+          column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
+        >
           <Descriptions.Item label="Domain">
             {environment.environmentFrontendUrl ? (
-              <a href={environment.environmentFrontendUrl} target="_blank" rel="noopener noreferrer">
+              <a
+                href={environment.environmentFrontendUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 {environment.environmentFrontendUrl} <LinkOutlined />
               </a>
             ) : (
-              'No domain set'
+              "No domain set"
             )}
           </Descriptions.Item>
           <Descriptions.Item label="Environment Type">
-            <Tag color={environment.environmentType === 'production' ? 'red' : environment.environmentType === 'testing' ? 'orange' : 'blue'}>
+            <Tag
+              color={
+                environment.environmentType === "production"
+                  ? "red"
+                  : environment.environmentType === "testing"
+                    ? "orange"
+                    : "blue"
+              }
+            >
               {environment.environmentType}
             </Tag>
           </Descriptions.Item>
           <Descriptions.Item label="API Key Status">
-            {environment.environmentApikey ? <Tag color="green">Configured</Tag> : <Tag color="red">Not Configured</Tag>}
+            {environment.environmentApikey ? (
+              <Tag color="green">Configured</Tag>
+            ) : (
+              <Tag color="red">Not Configured</Tag>
+            )}
           </Descriptions.Item>
           <Descriptions.Item label="Master Environment">
-            {environment.isMaster ? 'Yes' : 'No'}
+            {environment.isMaster ? "Yes" : "No"}
           </Descriptions.Item>
         </Descriptions>
       </Card>
-      
+
       {/* Tabs for Workspaces and User Groups */}
       <Tabs defaultActiveKey="workspaces">
-        <TabPane 
-          tab={<span><ClusterOutlined /> Workspaces</span>} 
+        <TabPane
+          tab={
+            <span>
+              <ClusterOutlined /> Workspaces
+            </span>
+          }
           key="workspaces"
         >
           <Card>
-            {/* Placeholder for workspace statistics */}
-            <Row gutter={16} style={{ marginBottom: '24px' }}>
+            {/* Header with refresh button */}
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "16px",
+              }}
+            >
+              <Title level={5}>Workspaces in this Environment</Title>
+              <Button
+                icon={<SyncOutlined />}
+                onClick={refreshWorkspaces}
+                size="small"
+                loading={workspacesLoading}
+              >
+                Refresh Workspaces
+              </Button>
+            </div>
+
+            {/* Workspace Statistics */}
+            <Row gutter={16} style={{ marginBottom: "24px" }}>
               <Col span={8}>
-                <Statistic 
-                  title="Total Workspaces" 
-                  value={0} 
-                  prefix={<ClusterOutlined />} 
+                <Statistic
+                  title="Total Workspaces"
+                  value={workspaceStats.total}
+                  prefix={<ClusterOutlined />}
                 />
               </Col>
               <Col span={8}>
-                <Statistic 
-                  title="Managed Workspaces" 
-                  value={0} 
-                  prefix={<ClusterOutlined />} 
+                <Statistic
+                  title="Managed Workspaces"
+                  value={workspaceStats.managed}
+                  prefix={<ClusterOutlined />}
                 />
               </Col>
               <Col span={8}>
-                <Statistic 
-                  title="Unmanaged Workspaces" 
-                  value={0} 
-                  prefix={<ClusterOutlined />} 
+                <Statistic
+                  title="Unmanaged Workspaces"
+                  value={workspaceStats.unmanaged}
+                  prefix={<ClusterOutlined />}
                 />
               </Col>
             </Row>
-
-            {/* Placeholder for workspace list */}
-            <Alert
-              message="Workspace Information"
-              description="Workspace data will be implemented in the next phase. This section will display workspace details and management options."
-              type="info"
-              showIcon
+
+            <Divider style={{ margin: "16px 0" }} />
+
+            {/* Show error if workspace loading failed */}
+            {workspacesError && (
+              <Alert
+                message="Error loading workspaces"
+                description={workspacesError}
+                type="error"
+                showIcon
+                style={{ marginBottom: "16px" }}
+                action={
+                  workspacesError.includes("No API key configured") ? (
+                    <Button size="small" type="primary" disabled>
+                      API Key Required
+                    </Button>
+                  ) : (
+                    <Button
+                      size="small"
+                      type="primary"
+                      onClick={refreshWorkspaces}
+                    >
+                      Try Again
+                    </Button>
+                  )
+                }
+              />
+            )}
+
+            {(!environment.environmentApikey ||
+              !environment.environmentApiServiceUrl) &&
+              !workspacesError && (
+                <Alert
+                  message="Configuration Issue"
+                  description={
+                    !environment.environmentApikey
+                      ? "An API key is required to fetch workspaces for this environment."
+                      : "An API service URL is required to fetch workspaces for this environment."
+                  }
+                  type="warning"
+                  showIcon
+                  style={{ marginBottom: "16px" }}
+                />
+              )}
+
+            {/* Workspaces List */}
+            <WorkspacesList
+              workspaces={workspaces}
+              loading={workspacesLoading && !workspacesError}
+              error={workspacesError}
             />
           </Card>
         </TabPane>
-
-        <TabPane 
-          tab={<span><TeamOutlined /> User Groups</span>} 
+
+        <TabPane
+          tab={
+            <span>
+              <TeamOutlined /> User Groups
+            </span>
+          }
           key="userGroups"
         >
           <Card>
             {/* Placeholder for user group statistics */}
-            <Row gutter={16} style={{ marginBottom: '24px' }}>
+            <Row gutter={16} style={{ marginBottom: "24px" }}>
               <Col span={8}>
-                <Statistic 
-                  title="Total User Groups" 
-                  value={0} 
-                  prefix={<TeamOutlined />} 
+                <Statistic
+                  title="Total User Groups"
+                  value={0}
+                  prefix={<TeamOutlined />}
                 />
               </Col>
               <Col span={8}>
-                <Statistic 
-                  title="Total Users" 
-                  value={0} 
-                  prefix={<UserOutlined />} 
+                <Statistic
+                  title="Total Users"
+                  value={0}
+                  prefix={<UserOutlined />}
                 />
               </Col>
             </Row>
-            
+
             {/* Placeholder for user group list */}
             <Alert
               message="User Group Information"