Skip to content

Commit 75d0f19

Browse files
iAladdiniAladdin
committed
WIP:edit Acme form
1 parent ce4e399 commit 75d0f19

File tree

9 files changed

+217
-77
lines changed

9 files changed

+217
-77
lines changed

‎frontend/src/actions/domain.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
LOADED_DOMAIN_STATUS,
99
} from "types/domain";
1010
import { GoogleDNSARecordResponse, GoogleDNSCNAMEResponse, GoogleDNSNSResponse } from "types/dns";
11+
import { acmePrefix } from "widgets/DomainStatus";
1112

1213
export const loadDomainDNSInfo = (domain: string): ThunkResult<void> => {
1314
return async (dispatch, getState) => {
@@ -18,6 +19,7 @@ export const loadDomainDNSInfo = (domain: string): ThunkResult<void> => {
1819
dispatch({ type: INIT_DOMAIN_STATUS, payload: { domain } });
1920
await dispatch(loadDomainDNSInfoWithType(domain, "A"));
2021
await dispatch(loadDomainDNSInfoWithType(domain, "CNAME"));
22+
await dispatch(loadDomainDNSInfoWithType(acmePrefix + domain, "CNAME"));
2123
await dispatch(loadDomainDNSInfoWithType(domain, "NS"));
2224
};
2325
};

‎frontend/src/forms/Route/expansion.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ const styles = (theme: Theme) =>
1818
"&expanded": {
1919
margin: "auto",
2020
},
21+
"& .MuiExpansionPanelSummary-root": {
22+
height: "48px",
23+
},
24+
"& .MuiExpansionPanelSummary-root.Mui-expanded": {
25+
height: 48,
26+
minHeight: 48,
27+
borderBottom: `1px solid ${theme.palette.divider}`,
28+
},
2129
},
2230
heading: {
2331
flexBasis: "40%",
@@ -62,7 +70,7 @@ class ExpansionRaw extends React.PureComponent<ExpansionProps, State> {
6270
if (typeof title === "string") {
6371
return (
6472
<>
65-
<Typography className={classes.heading}>{title}</Typography>
73+
<Box className={classes.heading}>{title}</Box>
6674
{subTitle ? <Typography className={classes.secondaryHeading}>{subTitle}</Typography> : null}
6775
</>
6876
);

‎frontend/src/layout/AppBar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ class AppBarComponentRaw extends React.PureComponent<Props, State> {
220220
return "Edit";
221221
case "sso":
222222
return "SSO";
223+
case "acme":
224+
return "ACME DNS Server";
223225
case "ci":
224226
return "CI";
225227
case "metrics":

‎frontend/src/pages/Certificate/AcmeEdit.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { createStyles, Grid, Theme, withStyles, WithStyles } from "@material-ui/core";
2+
import { push } from "connected-react-router";
3+
import { BasePage } from "pages/BasePage";
4+
import React from "react";
5+
import { connect } from "react-redux";
6+
import { TDispatchProp } from "types";
7+
import { createCertificateAction } from "actions/certificate";
8+
import { RootState } from "reducers";
9+
import { CertificateFormTypeContent } from "types/certificate";
10+
import { H6 } from "widgets/Label";
11+
12+
const mapStateToProps = (state: RootState, ownProps: any) => {
13+
return {
14+
acmeServer: state.get("certificates").get("acmeServer"),
15+
initialValues: {
16+
acmeDomain: "",
17+
nsDomain: "",
18+
},
19+
};
20+
};
21+
22+
const styles = (theme: Theme) =>
23+
createStyles({
24+
root: {},
25+
});
26+
27+
export interface Props extends WithStyles<typeof styles>, TDispatchProp, ReturnType<typeof mapStateToProps> {}
28+
29+
class CertificateAcmeEditRaw extends React.PureComponent<Props> {
30+
private submit = async (certificate: CertificateFormTypeContent) => {
31+
try {
32+
const { dispatch } = this.props;
33+
await dispatch(createCertificateAction(certificate, true));
34+
dispatch(push("/certificates"));
35+
} catch (e) {
36+
console.log(e);
37+
}
38+
};
39+
40+
public render() {
41+
const { initialValues, classes } = this.props;
42+
if (!initialValues) {
43+
return "Certificate not found";
44+
}
45+
46+
return (
47+
<BasePage secondHeaderRight={<H6>New Certificate</H6>}>
48+
<div className={classes.root}>
49+
<Grid container spacing={2}>
50+
<Grid item xs={8} sm={8} md={8}></Grid>
51+
</Grid>
52+
</div>
53+
</BasePage>
54+
);
55+
}
56+
}
57+
58+
export const CertificateAcmeEditPage = withStyles(styles)(connect(mapStateToProps)(CertificateAcmeEditRaw));

‎frontend/src/pages/Certificate/Detail.tsx‎

Lines changed: 84 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from "react";
2-
import { createStyles, Theme, withStyles, WithStyles, Grid, Box } from "@material-ui/core";
2+
import { createStyles, Theme, withStyles, WithStyles, Grid, Box, Button } from "@material-ui/core";
33
import { connect } from "react-redux";
44
import { TDispatchProp } from "types";
55
import { Certificate, dns01Issuer, http01Issuer } from "types/certificate";
66
import { BasePage } from "pages/BasePage";
77
import { RootState } from "reducers";
8-
import { withRouter, RouteComponentProps } from "react-router-dom";
8+
import { withRouter, RouteComponentProps, Link } from "react-router-dom";
99
import { FlexRowItemCenterBox } from "widgets/Box";
1010
import { KPanel } from "widgets/KPanel";
1111
import { Alert } from "@material-ui/lab";
12-
import DomainStatus from "widgets/DomainStatus";
12+
import DomainStatus, { acmePrefix } from "widgets/DomainStatus";
1313
import { Expansion } from "forms/Route/expansion";
1414
import { Loading } from "widgets/Loading";
1515
import { CollapseWrapper } from "widgets/CollapseWrapper";
@@ -47,7 +47,7 @@ interface State {}
4747

4848
class CertificateDetailRaw extends React.PureComponent<Props, State> {
4949
private renderDomainGuide = (cert: Certificate | undefined) => {
50-
const { classes, ingressIP } = this.props;
50+
const { classes, ingressIP, acmeServer } = this.props;
5151
if (cert === undefined) {
5252
return null;
5353
} else {
@@ -85,39 +85,61 @@ class CertificateDetailRaw extends React.PureComponent<Props, State> {
8585
</Box>
8686
);
8787
} else if (cert.get("httpsCertIssuer") === dns01Issuer) {
88-
const domains = cert.get("wildcardCertDNSChallengeDomainMap");
89-
return (
90-
<Box>
91-
<Box className={classes.key}>Domains</Box>
92-
<Box pl={0} pt={1}>
93-
{domains
94-
?.map((cname, domain) => {
95-
return (
96-
<>
97-
<CollapseWrapper
98-
title={
99-
<FlexRowItemCenterBox>
100-
<DomainStatus domain={domain} cnameDomain={cname} mr={1} />
101-
{domain}
102-
</FlexRowItemCenterBox>
103-
}
104-
defaultOpen={true}
105-
showIcon={true}
106-
>
107-
<Box p={1}>
108-
Add a CNAME Record
109-
<pre className={classes.action}>
110-
{domain} CNAME {cname}{" "}
111-
</pre>
112-
</Box>
113-
</CollapseWrapper>
114-
</>
115-
);
116-
})
117-
.toList()}
88+
if (!acmeServer || !acmeServer.get("ready")) {
89+
const domains = cert.get("domains");
90+
return (
91+
<Box>
92+
<Box className={classes.key}>Domains</Box>
93+
<Box pl={0} pt={1}>
94+
{domains
95+
?.map((domain) => {
96+
return (
97+
<FlexRowItemCenterBox key={domain}>
98+
<DomainStatus domain={acmePrefix + domain} cnameDomain={""} mr={1} />
99+
{domain}
100+
</FlexRowItemCenterBox>
101+
);
102+
})
103+
.toList()}
104+
</Box>
118105
</Box>
119-
</Box>
120-
);
106+
);
107+
} else {
108+
const domains = cert.get("wildcardCertDNSChallengeDomainMap");
109+
return (
110+
<Box>
111+
<Box className={classes.key}>Domains</Box>
112+
<Box pl={0} pt={1}>
113+
{domains
114+
?.map((ns, domain) => {
115+
return (
116+
<Box key={domain}>
117+
<CollapseWrapper
118+
title={
119+
<FlexRowItemCenterBox>
120+
<DomainStatus domain={acmePrefix + domain} nsDomain={ns} mr={1} />
121+
{domain}
122+
</FlexRowItemCenterBox>
123+
}
124+
defaultOpen={true}
125+
showIcon={true}
126+
>
127+
<Box p={1}>
128+
Add a NS Record
129+
<pre className={classes.action}>
130+
{acmePrefix}
131+
{domain} NS {ns}{" "}
132+
</pre>
133+
</Box>
134+
</CollapseWrapper>
135+
</Box>
136+
);
137+
})
138+
.toList()}
139+
</Box>
140+
</Box>
141+
);
142+
}
121143
} else {
122144
const domains = cert.get("domains");
123145
return (
@@ -154,42 +176,46 @@ class CertificateDetailRaw extends React.PureComponent<Props, State> {
154176
<Box p={2}>
155177
<Expansion title="ACME DNS Server" defaultUnfold>
156178
<Loading />
179+
Waiting for staring.
157180
</Expansion>
158181
</Box>
159182
);
160183
}
161184

162185
return (
163186
<Box p={2}>
164-
<Expansion title="ACME DNS Server" defaultUnfold={!acmeServer.get("ready")}>
187+
<Expansion title="ACME DNS Server is running" defaultUnfold={!acmeServer.get("ready")}>
165188
<Box p={2}>
166189
{acmeServer.get("ready") ? (
167190
<Alert severity="success">Kalm DNS server is running well, you don't need to do any more.</Alert>
168191
) : (
169-
<>
170-
<Alert severity="info">
171-
You simply need to do the following to get your DNS server up and running.
172-
</Alert>
192+
<Alert severity="info">
193+
You simply need to do the following to get your DNS server up and running.
194+
</Alert>
195+
)}
196+
<>
197+
<Box p={1}>
198+
DNS Server Domain:
173199
<Box p={1}>
174-
DNS Server Domain: {acmeServer.get("acmeDomain")}
175-
<Box p={1}>
176-
Add a CNAME Record
177-
<pre className={classes.action}>
178-
{acmeServer.get("acmeDomain")} CNAME {acmeServer.get("nsDomain")}
179-
</pre>
180-
</Box>
200+
NS Record:
201+
<pre className={classes.action}>
202+
{acmeServer.get("acmeDomain")} NS {acmeServer.get("nsDomain")}
203+
</pre>
181204
</Box>
205+
</Box>
206+
<Box p={1}>
207+
Shadow Domain:
182208
<Box p={1}>
183-
Shadow Domain: {acmeServer.get("nsDomain")}
184-
<Box p={1}>
185-
Add a A Record
186-
<pre className={classes.action}>
187-
{acmeServer.get("nsDomain")} A {acmeServer.get("ipForNameServer")}
188-
</pre>
189-
</Box>
209+
A Record:
210+
<pre className={classes.action}>
211+
{acmeServer.get("nsDomain")} A {acmeServer.get("ipForNameServer")}
212+
</pre>
190213
</Box>
191-
</>
192-
)}
214+
</Box>
215+
<Button color="primary" variant="outlined" size="small" component={Link} to="/certificates/acme/edit">
216+
Edit
217+
</Button>
218+
</>
193219
</Box>
194220
</Expansion>
195221
</Box>
@@ -225,7 +251,7 @@ class CertificateDetailRaw extends React.PureComponent<Props, State> {
225251
<FlexRowItemCenterBox>
226252
<Box className={classes.key}>Status</Box>
227253
<Box pl={2} />
228-
{certInfo?.get("ready") ? "Ready" : "Not Ready"}
254+
{certInfo?.get("ready") ? certInfo?.get("ready") : "Not Ready"}
229255
</FlexRowItemCenterBox>
230256

231257
{this.renderDomainGuide(certInfo)}

‎frontend/src/pages/Certificate/List.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import sc from "utils/stringConstants";
1414
import { PendingBadge } from "widgets/Badge";
1515
import { FlexRowItemCenterBox } from "widgets/Box";
1616
import { CustomizedButton } from "widgets/Button";
17-
import DomainStatus from "widgets/DomainStatus";
17+
import DomainStatus, { acmePrefix } from "widgets/DomainStatus";
1818
import { EmptyInfoBox } from "widgets/EmptyInfoBox";
1919
import { EditIcon, KalmCertificatesIcon } from "widgets/Icon";
2020
import { IconLinkWithToolTip } from "widgets/IconButtonWithTooltip";
@@ -78,15 +78,20 @@ class CertificateListPageRaw extends React.PureComponent<Props, State> {
7878
private renderDomains = (cert: Certificate) => {
7979
const { classes } = this.props;
8080
const isWildcardDomain = cert.get("httpsCertIssuer") === dns01Issuer;
81+
const isSelfManaged = cert.get("isSelfManaged");
82+
8183
const domainStatus = (domain: string) => {
82-
const cname = cert.get("wildcardCertDNSChallengeDomain");
84+
if (isSelfManaged) {
85+
return null;
86+
}
87+
const cnameMap = cert.get("wildcardCertDNSChallengeDomainMap");
88+
const cleanDomain = domain.replace("*.", "");
8389
return isWildcardDomain ? (
84-
<DomainStatus mr={1} domain={domain} cnameDomain={cname} />
90+
<DomainStatus mr={1} domain={acmePrefix + cleanDomain} nsDomain={cnameMap?.get(cleanDomain)} />
8591
) : (
8692
<DomainStatus mr={1} domain={domain} />
8793
);
8894
};
89-
const prefix = isWildcardDomain ? "*." : "";
9095
return (
9196
<Box className={classes.domainsColumn}>
9297
{cert
@@ -95,7 +100,7 @@ class CertificateListPageRaw extends React.PureComponent<Props, State> {
95100
return (
96101
<FlexRowItemCenterBox key={domain}>
97102
{domainStatus(`${domain}`)}
98-
{`${prefix}${domain}`}
103+
{`${domain}`}
99104
</FlexRowItemCenterBox>
100105
);
101106
})

‎frontend/src/routes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { EditEndpointPage } from "pages/SSO/EditEndpoint";
3333
import { CertificateNewPage } from "pages/Certificate/New";
3434
import { CertificateUploadPage } from "pages/Certificate/Upload";
3535
import { CertificateEditPage } from "pages/Certificate/Edit";
36+
import { CertificateAcmeEditPage } from "pages/Certificate/AcmeEdit";
3637
import { RegistryNewPage } from "pages/Registry/New";
3738
import { RegistryEditPage } from "pages/Registry/Edit";
3839
import { DeployKeyDetailPage } from "pages/CI/Detail";
@@ -99,6 +100,7 @@ export const KalmRoutes = (
99100
<Route exact path="/certificates/upload" component={CertificateUploadPage} />
100101
<Route exact path="/certificates/:name/edit" component={CertificateEditPage} />
101102
<Route exact path="/certificates/:name" component={CertificateDetailPage} />
103+
<Route exact path="/certificates/acme/edit" component={CertificateAcmeEditPage} />
102104
<Route component={NoMatch} />
103105
</Switch>
104106
</RequireAuthorizatedDashboard>

‎frontend/src/utils/stringConstants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ const stringConstants = {
8383
CERT_DNS01_WILDCARD: "Automatic certification for wildcard domains with Let's Encrypt",
8484
CERT_DNS01_WILDCARD_DESC:
8585
"Use a certificate signed by Let's Encrypt for wildcard domains. Safe and fast. Renewing and updating are fully-automatic.",
86+
CERT_DNS01_SERVER_NOT_READY: "Please config and runing kalm dns server first.",
8687
NODES_INFO_BOX_TEXT:
8788
"Data and metrics regarding nodes in the cluster is displayed here. For cluster administration operations, please see platform specific instructions.",
8889
ROUTE_HOSTS_INPUT_HELPER:

0 commit comments

Comments
 (0)