Skip to content

[Fix]: Update more UI Pages for the Environments + Add API Call Count in UI #1724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
May 29, 2025
Merged

[Fix]: Update more UI Pages for the Environments + Add API Call Count in UI #1724

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0ee3f1f
Add api calls count
iamfaran May 29, 2025
49d8481
update alert texts for environment modals
iamfaran May 29, 2025
2252d2c
add less aggressive license messages
iamfaran May 29, 2025
0009f4a
Merge branch 'fix/environment-type' into fix/antD-errrors-environments
iamfaran May 29, 2025
b7109c5
[Fix]: antd errors for environments
iamfaran May 29, 2025
55ff3e5
[Fix] tabs and breadcrumbs error
iamfaran May 29, 2025
880a4fb
[FIx]: improve UI for environments
iamfaran May 29, 2025
f507287
fix environment detail width issue
iamfaran May 29, 2025
b35861b
[Fix] Workspace Detail Page UI
iamfaran May 29, 2025
5b54276
[Fix]: query deployment param
iamfaran May 29, 2025
e54c63f
[Fix] remove updated dependenceis need for DS and QL
iamfaran May 29, 2025
2714dde
[Fix] unlicensed environment page UI
iamfaran May 29, 2025
ed8459b
Merge UI, deploy endpoints, Add API count and update license messages
iamfaran May 29, 2025
f823ecd
Merge branch 'dev' of github.com:lowcoder-org/lowcoder into fix/ui-an…
iamfaran May 29, 2025
540af6f
change progressbar direction
iamfaran May 29, 2025
c28c62f
[Fix] antD deprecated properties
iamfaran May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[Fix] unlicensed environment page UI
  • Loading branch information
@iamfaran
iamfaran committed May 29, 2025
commit 2714ddefc67d752d27fbf9bc90cf1668b5d8a57a
235 changes: 134 additions & 101 deletions ...packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@ import {
ArrowLeftOutlined,
CloseCircleOutlined,
ExclamationCircleOutlined,
WarningOutlined
WarningOutlined,
CloudServerOutlined
} from '@ant-design/icons';
import { Environment } from '../types/environment.types';
import ContactLowcoderModal from './ContactLowcoderModal';
import ModernBreadcrumbs from './ModernBreadcrumbs';
import EnvironmentHeader from './EnvironmentHeader';
import StatsCard from './StatsCard';
import { Level1SettingPageContent } from "../../styled";
import history from "@lowcoder-ee/util/history";

const { Title, Text } = Typography;
Expand All @@ -20,7 +25,7 @@ interface UnlicensedEnvironmentViewProps {
}

/**
* Modern UI for unlicensed environments
* Consistent UI for unlicensed environments matching other environment pages
*/
const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
environment,
Expand Down Expand Up @@ -65,84 +70,110 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
}
};

// Stats data consistent with other environment pages
const statsData = [
{
title: "Type",
value: environment.environmentType || "Unknown",
icon: <CloudServerOutlined />,
color: "#1890ff"
},
{
title: "Status",
value: "Unlicensed",
icon: <CloseCircleOutlined />,
color: "#ff4d4f"
},
{
title: "Master Env",
value: environment.isMaster ? "Yes" : "No",
icon: <CloudServerOutlined />,
color: environment.isMaster ? "#722ed1" : "#8c8c8c"
},
{
title: "License Issue",
value: environment.licenseStatus === 'error' ? "Error" : "Missing",
icon: environment.licenseStatus === 'error' ? <ExclamationCircleOutlined /> : <CloseCircleOutlined />,
color: environment.licenseStatus === 'error' ? "#faad14" : "#ff4d4f"
}
];

return (
<div style={{
padding: "24px",
flex: 1,
minWidth: '1000px',
background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
}}>
<Row justify="center" style={{ minHeight: '80vh' }}>
<Col xs={24} sm={20} md={16} lg={14} xl={12}>
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
minHeight: '70vh',
textAlign: 'center'
}}>
{/* Main Status Card */}
<Card
style={{
width: '100%',
borderRadius: '16px',
boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
border: 'none',
background: 'white',
overflow: 'hidden'
}}
styles={{ body: { padding: '48px 32px' } }}
>
<Level1SettingPageContent style={{ minWidth: "1000px" }}>
{/* Environment Header Component */}
<EnvironmentHeader
environment={environment}
onEditClick={onEditClick}
/>

{/* Stats Cards Row */}
<Row gutter={[16, 16]} style={{ marginBottom: "24px" }}>
{statsData.map((stat, index) => (
<Col xs={24} sm={12} lg={6} key={index}>
<StatsCard
title={stat.title}
value={stat.value}
icon={stat.icon}
color={stat.color}
/>
</Col>
))}
</Row>

{/* Breadcrumbs */}
<ModernBreadcrumbs
items={[
{
key: 'environments',
title: 'Environments',
onClick: () => history.push('/setting/environments')
},
{
key: 'current',
title: environment.environmentName || "Environment Detail"
}
]}
/>

{/* License Issue Card */}
<Card
style={{
marginBottom: "24px",
borderRadius: '4px',
border: '1px solid #f0f0f0',
background: 'white'
}}
styles={{ body: { padding: '32px' } }}
>
<Row justify="center">
<Col xs={24} sm={20} md={16} lg={12}>
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center'
}}>
{/* Status Icon */}
<div style={{ marginBottom: '24px' }}>
{getLicenseIcon()}
</div>

{/* Environment Info */}
<div style={{ marginBottom: '32px' }}>
<Title level={2} style={{ marginBottom: '8px', color: '#262626' }}>
{getLicenseTitle()}
</Title>
<Text style={{
fontSize: '16px',
color: '#595959',
display: 'block',
marginBottom: '16px',
lineHeight: '1.6'
}}>
{getLicenseDescription()}
</Text>

{/* Environment Details */}
<div style={{
background: '#fafafa',
padding: '16px',
borderRadius: '8px',
marginTop: '24px',
border: '1px solid #f0f0f0'
}}>
<Text strong style={{ color: '#8c8c8c', fontSize: '14px' }}>Environment:</Text>
<Text style={{
display: 'block',
fontSize: '16px',
color: '#262626',
marginTop: '4px'
}}>
{environment.environmentName || 'Unnamed Environment'}
</Text>
<Text style={{
fontSize: '13px',
color: '#8c8c8c',
fontFamily: 'monospace'
}}>
ID: {environment.environmentId}
</Text>
</div>
</div>
{/* License Issue Information */}
<Title level={2} style={{ marginBottom: '12px', color: '#262626' }}>
{getLicenseTitle()}
</Title>
<Text style={{
fontSize: '16px',
color: '#595959',
marginBottom: '24px',
lineHeight: '1.6',
maxWidth: '500px'
}}>
{getLicenseDescription()}
</Text>

{/* Action Buttons */}
<Space size="large" direction="vertical" style={{ width: '100%' }}>
<Space size="large" direction="vertical" style={{ width: '100%', maxWidth: '400px' }}>
<Button
type="primary"
size="large"
Expand All @@ -151,12 +182,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
style={{
width: '100%',
height: '48px',
borderRadius: '8px',
borderRadius: '4px',
fontSize: '16px',
fontWeight: 500,
background: 'linear-gradient(135deg, #1890ff 0%, #0050b3 100%)',
border: 'none',
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
fontWeight: 500
}}
>
Contact Lowcoder Team
Expand All @@ -169,11 +197,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
style={{
width: '100%',
height: '48px',
borderRadius: '8px',
borderRadius: '4px',
fontSize: '16px',
fontWeight: 500,
borderColor: '#d9d9d9',
color: '#595959'
fontWeight: 500
}}
>
Edit Environment
Expand All @@ -186,39 +212,46 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
style={{
width: '100%',
height: '48px',
borderRadius: '8px',
borderRadius: '4px',
fontSize: '16px',
fontWeight: 500,
borderColor: '#d9d9d9',
color: '#8c8c8c'
fontWeight: 500
}}
>
Back to Environments
</Button>
</Space>
</Card>

{/* Footer Help Text */}
<Text style={{
marginTop: '24px',
color: '#8c8c8c',
fontSize: '14px',
maxWidth: '400px',
lineHeight: '1.5'
}}>
Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
</Text>
</div>
</Col>
</Row>
</div>
</Col>
</Row>
</Card>

{/* Help Text */}
<Card
style={{
borderRadius: '4px',
border: '1px solid #f0f0f0',
background: '#fafafa'
}}
styles={{ body: { padding: '16px' } }}
>
<Text style={{
color: '#8c8c8c',
fontSize: '14px',
textAlign: 'center',
display: 'block',
lineHeight: '1.5'
}}>
Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
</Text>
</Card>

{/* Contact Lowcoder Modal */}
<ContactLowcoderModal
visible={isContactModalVisible}
onClose={() => setIsContactModalVisible(false)}
environment={environment}
/>
</div>
</Level1SettingPageContent>
);
};

Expand Down