Skip to content

Commit c00d66f

Browse files
author
FalkWolsky
committed
Updating Promo Pages
1 parent 3a855b4 commit c00d66f

File tree

6 files changed

+323
-65
lines changed

6 files changed

+323
-65
lines changed

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2484,7 +2484,7 @@ export const en = {
24842484
"GrantUpdateDeletePermission": "Grant or update permissions",
24852485
"LibraryQueryActions": "Create / Update / Delete library queries",
24862486
"PublishLibraryQuery": "Publish library query",
2487-
"AuditLogsPreviewTitle": "Preview the Audit Log in action",
2487+
"AuditLogsPreviewTitle": "Preview the Audit Log in action (click to zoom)",
24882488
"ScreenshotPlaceholder1": "[ Screenshot 1 Placeholder ]",
24892489
"ScreenshotPlaceholder2": "[ Screenshot 2 Placeholder ]",
24902490
"ScreenshotPlaceholder3": "[ Screenshot 3 Placeholder ]",
@@ -2514,7 +2514,7 @@ export const en = {
25142514
"MetricDevices": "Access by device (desktop, tablet, mobile)",
25152515
"MetricBrowsers": "Access by browser and OS",
25162516
"MetricCountries": "Geographic origin of users",
2517-
"AppUsageScreenshotsTitle": "App Usage Analytics in action",
2517+
"AppUsageScreenshotsTitle": "App Usage Analytics in action (click to zoom)",
25182518
"AppUsageScreenshot1": "[ App Usage Dashboard Screenshot ]",
25192519
"AppUsageScreenshot2": "[ Per-App Views Chart ]",
25202520
"AppUsageScreenshot3": "[ Geo Distribution Map ]",
@@ -2538,19 +2538,23 @@ export const en = {
25382538
"EnvironmentsIntro1": "Lowcoder Environments allow you to separate your Dev, Test, and Prod stages cleanly and safely.",
25392539
"EnvironmentsIntro2": "Enterprise teams benefit from structured release workflows, approval processes, and version stability across stages.",
25402540
"EnvironmentsIntro3": "With the Environments feature, admins can control what gets deployed, when, and where — all from a single interface.",
2541+
"EnvironmentsIntro4" : "Lowcoder includes multiple object types like Workspaces, Data Sources, Data Queries, and Apps. Since many of these objects are interconnected (e.g. a Data Source can be shared across multiple Apps), a pure Git-based export would not capture all dependencies consistently. Instead, Lowcoder offers a selective, integrated deployment mechanism directly within the UI. Apps, data sources, and queries can be selectively managed and deployed across environments. Managed objects ensure safe, controlled staging and production releases.",
25412542
"yourDeploymentID" : "Your Deployment ID",
2542-
"EnvironmentsFeaturePreviewTitle" : "Environments & Deployment in action",
2543+
"EnvironmentsFeaturePreviewTitle" : "Environments & Deployment in action (click to zoom)",
25432544

2544-
"EnvironmentsUseCasesTitle": "Why Use Environments?",
2545+
"EnvironmentsUseCasesTitle": "Why Use Environments? (Staging)",
25452546
"EnvironmentsUseCase1": "Prevent unintended changes in production by testing apps in dedicated Dev or QA environments.",
25462547
"EnvironmentsUseCase2": "Align with corporate IT governance by implementing staged deployments with audit-ready tracking.",
25472548
"EnvironmentsUseCase3": "Empower teams to build confidently with environment-specific configurations, data, and integrations.",
25482549

25492550
"EnvironmentsFeaturesTitle": "What You Get",
25502551
"EnvironmentsFeature1": "Centralized dashboard to view and manage all Lowcoder environments.",
2551-
"EnvironmentsFeature2": "Deployment of applications, data sources, and configurations between environments, directly from the UI.",
2552+
"EnvironmentsFeature2": "Deployment of applications, data sources, and configurations between environments, directly from the UI without the need for Additional CI/CD tools.",
25522553
"EnvironmentsFeature3": "Environment-specific access controls and visibility rules.",
25532554
"EnvironmentsFeature5": "Clear separation of concerns for staging, sandbox, and production operations.",
2555+
2556+
"apiUsage" : "API Calls.",
2557+
"loadingApiUsage" : "Loading API usage data..."
25542558
},
25552559

25562560
"subscription": {

‎client/packages/lowcoder/src/pages/setting/advanced/AdvancedSetting.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -326,8 +326,8 @@ export function AdvancedSetting() {
326326
<div className="section-title">{trans("advanced.APIConsumption")}</div>
327327
<HelpText style={{ marginBottom: 12 }}>{trans("advanced.APIConsumptionDescription")}</HelpText>
328328
<div className="section-content">
329-
{trans("advanced.overallAPIConsumption")} : {apiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(apiUsage) + " API Calls.": 'Loading API usage data...'}<br/>
330-
{trans("advanced.lastMonthAPIConsumption")} : {lastMonthApiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(lastMonthApiUsage) + " API Calls." : 'Loading API usage data...'}
329+
{trans("advanced.overallAPIConsumption")} : {apiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(apiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}<br/>
330+
{trans("advanced.lastMonthAPIConsumption")} : {lastMonthApiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(lastMonthApiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}
331331
</div>
332332
</AdvancedSettingContent>
333333
</Level1SettingPageContent>

‎client/packages/lowcoder/src/pages/setting/appUsage/index.tsx

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@ import { APP_USAGE_DASHBOARD, APP_USAGE_DETAIL } from "@lowcoder-ee/constants/ro
22
import { Route, Switch } from "react-router-dom";
33
import { AppUsageDashboard } from "./dashboard";
44
import { AppUsageDetail } from "./detail";
5-
import { useSelector } from "react-redux";
5+
import { useSelector, useDispatch } from "react-redux";
66
import { selectIsLicenseActive } from "redux/selectors/enterpriseSelectors";
77
import styled from "styled-components";
8-
import { Card, Row, Col, Typography } from "antd";
8+
import { Card, Row, Col, Typography, Divider } from "antd";
99
import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
1010
import { trans } from "i18n";
1111

12+
import { Image } from 'antd';
13+
import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
14+
import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
15+
import { getOrgApiUsage, getOrgLastMonthApiUsage } from "redux/selectors/orgSelectors";
16+
import { fetchAPIUsageAction, fetchLastMonthAPIUsageAction } from "redux/reduxActions/orgActions";
17+
import { HelpText } from "components/HelpText";
18+
import { useEffect } from "react";
19+
1220
const { Paragraph, Text } = Typography;
1321

1422
const StyledSection = styled.div`
@@ -43,6 +51,21 @@ const AppUsageRoutes = () => (
4351
);
4452

4553
const AppUsageDoc = () => {
54+
55+
const user = useSelector(getUser);
56+
const deploymentId = useSelector(getDeploymentId);
57+
const dispatch = useDispatch();
58+
59+
const apiUsage = useSelector(getOrgApiUsage);
60+
useEffect(() => {
61+
dispatch(fetchAPIUsageAction(user.currentOrgId));
62+
}, [user.currentOrgId])
63+
64+
const lastMonthApiUsage = useSelector(getOrgLastMonthApiUsage);
65+
useEffect(() => {
66+
dispatch(fetchLastMonthAPIUsageAction(user.currentOrgId));
67+
}, [user.currentOrgId])
68+
4669
return (
4770
<Level1SettingPageContent>
4871
<Level1SettingPageTitle>{trans("enterprise.AppUsageTitle")}</Level1SettingPageTitle>
@@ -72,23 +95,81 @@ const AppUsageDoc = () => {
7295
<Card title={trans("enterprise.AppUsageScreenshotsTitle")}>
7396
<Row gutter={[24, 24]}>
7497
<Col span={8}>
75-
<div className="image-placeholder">
76-
<Text type="secondary">{trans("enterprise.AppUsageScreenshot1")}</Text>
77-
</div>
98+
<Image
99+
width="100%"
100+
height={180}
101+
src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20App%20Usage%20Metrics%20Geomap.png"
102+
alt="Enterprise Edition | App Usage Metrics Geomap"
103+
style={{ borderRadius: 8, objectFit: 'cover', border: "1px solid #d9d9d9" }}
104+
preview={{
105+
mask: <Text>Enterprise Edition | App Usage Metrics Geomap</Text>,
106+
}}
107+
/>
78108
</Col>
79109
<Col span={8}>
80-
<div className="image-placeholder">
81-
<Text type="secondary">{trans("enterprise.AppUsageScreenshot2")}</Text>
82-
</div>
83-
</Col>
84-
<Col span={8}>
85-
<div className="image-placeholder">
86-
<Text type="secondary">{trans("enterprise.AppUsageScreenshot3")}</Text>
87-
</div>
110+
<Image
111+
width="100%"
112+
height={180}
113+
src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20App%20Usage%20Metrics%20Stats.png"
114+
alt="Enterprise Edition | App Usage Metrics and Statistics"
115+
style={{ borderRadius: 8, objectFit: 'cover', border: "1px solid #d9d9d9" }}
116+
preview={{
117+
mask: <Text>Enterprise Edition | App Usage Metrics and Statistics</Text>,
118+
}}
119+
/>
88120
</Col>
89121
</Row>
90122
</Card>
91123
</StyledSection>
124+
125+
<StyledSection>
126+
<Card title={trans("enterprise.yourDeploymentID")}>
127+
<Paragraph><h3>{deploymentId}</h3></Paragraph>
128+
</Card>
129+
</StyledSection>
130+
131+
<StyledSection>
132+
<Card title={trans("enterprise.PricingTitle")}>
133+
<Paragraph>{trans("enterprise.PricingIntro")}</Paragraph>
134+
135+
<Paragraph>
136+
<Text strong>{trans("enterprise.FlatRateTitle")}</Text>
137+
<br />
138+
{trans("enterprise.FlatRateDesc")}
139+
</Paragraph>
140+
<ul>
141+
<li>{trans("enterprise.FlatRatePoint1")}</li>
142+
<li>{trans("enterprise.FlatRatePoint2")}</li>
143+
</ul>
144+
145+
<Divider />
146+
147+
<Paragraph>
148+
<Text strong>{trans("enterprise.UsagePricingTitle")}</Text>
149+
<br />
150+
{trans("enterprise.UsagePricingDesc")}
151+
</Paragraph>
152+
<ul>
153+
<li>{trans("enterprise.API100k")}</li>
154+
<li>{trans("enterprise.API1M")}</li>
155+
<li>{trans("enterprise.API10M")}</li>
156+
</ul>
157+
158+
<Paragraph>{trans("enterprise.UsageOverrunDesc")}</Paragraph>
159+
<Paragraph>{trans("enterprise.UsageTopUpInfo")}</Paragraph>
160+
161+
<Divider/>
162+
163+
<Text strong className="section-title">{trans("advanced.APIConsumption")}</Text>
164+
<HelpText style={{ marginBottom: 12 }}>{trans("advanced.APIConsumptionDescription")}</HelpText>
165+
<div className="section-content">
166+
{trans("advanced.overallAPIConsumption")} : {apiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(apiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}<br/>
167+
{trans("advanced.lastMonthAPIConsumption")} : {lastMonthApiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(lastMonthApiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}
168+
</div>
169+
170+
</Card>
171+
</StyledSection>
172+
92173
</Level1SettingPageContent>
93174
);
94175
};

‎client/packages/lowcoder/src/pages/setting/audit/index.tsx

Lines changed: 68 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import { AUDIT_LOG_DASHBOARD, AUDIT_LOG_DETAIL } from "@lowcoder-ee/constants/ro
22
import { Route, Switch } from "react-router-dom";
33
import { AuditLogDashboard } from "./dashboard";
44
import { AuditLogDetail } from "./detail";
5-
import { useSelector } from "react-redux";
5+
import { useSelector, useDispatch } from "react-redux";
66
import styled from "styled-components";
77
import { Card, Divider, Typography, Row, Col, Image } from "antd";
88
import { HelpText } from "components/HelpText";
99
import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
1010
import { trans } from "i18n";
1111
import { selectIsLicenseActive } from "redux/selectors/enterpriseSelectors";
12-
// import { getOrgApiUsage, getOrgLastMonthApiUsage } from "redux/selectors/orgSelectors";
12+
13+
import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
14+
import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
15+
import { getOrgApiUsage, getOrgLastMonthApiUsage } from "redux/selectors/orgSelectors";
16+
import { fetchAPIUsageAction, fetchLastMonthAPIUsageAction } from "redux/reduxActions/orgActions";
17+
import { useEffect } from "react";
1318

1419
const { Title, Paragraph, Text } = Typography;
1520

@@ -45,14 +50,28 @@ const AuditLogRoutes = () => (
4550
);
4651

4752
const Audit = () => {
53+
54+
const user = useSelector(getUser);
55+
const deploymentId = useSelector(getDeploymentId);
56+
const dispatch = useDispatch();
57+
58+
const apiUsage = useSelector(getOrgApiUsage);
59+
useEffect(() => {
60+
dispatch(fetchAPIUsageAction(user.currentOrgId));
61+
}, [user.currentOrgId])
62+
63+
const lastMonthApiUsage = useSelector(getOrgLastMonthApiUsage);
64+
useEffect(() => {
65+
dispatch(fetchLastMonthAPIUsageAction(user.currentOrgId));
66+
}, [user.currentOrgId])
67+
4868
return (
4969
<Level1SettingPageContent>
5070
<Level1SettingPageTitle>{trans("enterprise.AuditLogsTitle")}</Level1SettingPageTitle>
5171

5272
<StyledSection>
5373
<Card title={trans("enterprise.AuditLogsIntroTitle")}>
54-
<Paragraph>{trans("enterprise.AuditLogsIntro1")}</Paragraph>
55-
<Paragraph>{trans("enterprise.AuditLogsIntro2")}</Paragraph>
74+
<Paragraph>{trans("enterprise.AuditLogsIntro1")} {trans("enterprise.AuditLogsIntro2")}</Paragraph>
5675
<Paragraph>{trans("enterprise.AuditLogsIntro3")}</Paragraph>
5776
</Card>
5877
</StyledSection>
@@ -104,24 +123,51 @@ const Audit = () => {
104123
<Card title={trans("enterprise.AuditLogsPreviewTitle")}>
105124
<Row gutter={[24, 24]}>
106125
<Col span={8}>
107-
<div className="image-placeholder">
108-
<Text type="secondary">{trans("enterprise.ScreenshotPlaceholder1")}</Text>
109-
</div>
126+
<Image
127+
width="100%"
128+
height={180}
129+
src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20Audit%20Log%20Filters.png"
130+
alt="Enterprise Edition | Audit Log Data Filters"
131+
style={{ borderRadius: 8, objectFit: 'cover', border: "1px solid #d9d9d9" }}
132+
preview={{
133+
mask: <Text>Enterprise Edition | Audit Log Data Filters</Text>,
134+
}}
135+
/>
110136
</Col>
111137
<Col span={8}>
112-
<div className="image-placeholder">
113-
<Text type="secondary">{trans("enterprise.ScreenshotPlaceholder2")}</Text>
114-
</div>
138+
<Image
139+
width="100%"
140+
height={180}
141+
src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20Audit%20Log%20Table.png"
142+
alt="Enterprise Edition | Audit Log Table"
143+
style={{ borderRadius: 8, objectFit: 'cover', border: "1px solid #d9d9d9" }}
144+
preview={{
145+
mask: <Text>Enterprise Edition | Audit Log Table</Text>,
146+
}}
147+
/>
115148
</Col>
116149
<Col span={8}>
117-
<div className="image-placeholder">
118-
<Text type="secondary">{trans("enterprise.ScreenshotPlaceholder3")}</Text>
119-
</div>
150+
<Image
151+
width="100%"
152+
height={180}
153+
src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/refs/heads/main/images/Enterprise%20Edition%20%7C%20Audit%20Log%20Details.png"
154+
alt="Enterprise Edition | Audit Log Details"
155+
style={{ borderRadius: 8, objectFit: 'cover', border: "1px solid #d9d9d9" }}
156+
preview={{
157+
mask: <Text>Enterprise Edition | Audit Log Details</Text>,
158+
}}
159+
/>
120160
</Col>
121161
</Row>
122162
</Card>
123163
</StyledSection>
124164

165+
<StyledSection>
166+
<Card title={trans("enterprise.yourDeploymentID")}>
167+
<Paragraph><h3>{deploymentId}</h3></Paragraph>
168+
</Card>
169+
</StyledSection>
170+
125171
<StyledSection>
126172
<Card title={trans("enterprise.PricingTitle")}>
127173
<Paragraph>{trans("enterprise.PricingIntro")}</Paragraph>
@@ -151,6 +197,15 @@ const Audit = () => {
151197

152198
<Paragraph>{trans("enterprise.UsageOverrunDesc")}</Paragraph>
153199
<Paragraph>{trans("enterprise.UsageTopUpInfo")}</Paragraph>
200+
201+
<Divider/>
202+
203+
<Text strong className="section-title">{trans("advanced.APIConsumption")}</Text>
204+
<HelpText style={{ marginBottom: 12 }}>{trans("advanced.APIConsumptionDescription")}</HelpText>
205+
<div className="section-content">
206+
{trans("advanced.overallAPIConsumption")} : {apiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(apiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}<br/>
207+
{trans("advanced.lastMonthAPIConsumption")} : {lastMonthApiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(lastMonthApiUsage) + " " + trans("enterprise.apiUsage") : trans("enterprise.loadingApiUsage")}
208+
</div>
154209
</Card>
155210
</StyledSection>
156211
</Level1SettingPageContent>

0 commit comments

Comments
 (0)