Skip to content
This repository was archived by the owner on May 30, 2024. It is now read-only.

Commit 6323529

Browse files
author
Noah Lee
authored
Refactoring the deployment page (#359)
* Refactoring the deployment page * Add the commit changes
1 parent 3fa3906 commit 6323529

File tree

8 files changed

+250
-279
lines changed

8 files changed

+250
-279
lines changed

Diff for: ‎ui/src/components/DeployConfirm.tsx

-202
This file was deleted.

Diff for: ‎ui/src/components/DeploymentDescriptor/CommitChanges.tsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { useState } from "react"
2+
import { Button, Typography, List, Avatar } from "antd"
3+
import moment from "moment"
4+
5+
import { Commit } from "../../models"
6+
7+
interface CommitChangesProps {
8+
changes:Commit[]
9+
}
10+
11+
export default function CommitChanges(props: CommitChangesProps): JSX.Element {
12+
return (
13+
<List
14+
style={{
15+
maxHeight: 400,
16+
overflow: "auto",
17+
}}
18+
bordered
19+
dataSource={props.changes}
20+
renderItem={(commit, idx) => {
21+
return (
22+
<CommitChange key={idx} commit={commit}/>
23+
)
24+
}}
25+
/>
26+
)
27+
}
28+
29+
function CommitChange(props: {commit: Commit}): JSX.Element {
30+
const [message, ...description] = props.commit.message.split(/(\r\n|\n|\r)/g)
31+
32+
const [hide, setHide] = useState(true)
33+
34+
const onClickHide = () => {
35+
setHide(!hide)
36+
}
37+
38+
return (
39+
<List.Item>
40+
<List.Item.Meta
41+
title={
42+
<>
43+
<a href={props.commit.htmlUrl} target="_blank">{message}</a>
44+
{/* Display the description when the button is clicked. */}
45+
{(description.length)?
46+
<Button size="small" type="text" onClick={onClickHide}>
47+
<Typography.Text className="gitploy-code" code>...</Typography.Text>
48+
</Button>
49+
:
50+
<></>}
51+
{(!hide) ?
52+
<Typography.Paragraph style={{margin: 0}}>
53+
<pre style={{marginBottom: 0, fontSize: 12}}>
54+
{description.join("").trim()}
55+
</pre>
56+
</Typography.Paragraph>
57+
:
58+
<></>}
59+
</>
60+
}
61+
description={(props.commit?.author)?
62+
<>
63+
<Avatar size="small" src={props.commit.author.avatarUrl} />&nbsp;
64+
<Typography.Text strong>{props.commit.author.login}</Typography.Text> committed&nbsp;
65+
{moment(props.commit.author?.date).fromNow()}
66+
</>
67+
:
68+
<></>
69+
}
70+
/>
71+
<div style={{marginLeft: 30}}>
72+
<Button
73+
href={props.commit.htmlUrl}
74+
target="_blank"
75+
>
76+
{props.commit.sha.substring(0, 7)}
77+
</Button>
78+
</div>
79+
</List.Item>
80+
)
81+
}

Diff for: ‎ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Button, Descriptions, Modal, Typography } from "antd"
2+
import moment from "moment"
3+
4+
import DeploymentStatusBadge from "../DeploymentStatusBadge"
5+
import UserAvatar from "../UserAvatar"
6+
import CommitChanges from "./CommitChanges"
7+
8+
import { Commit, Deployment } from "../../models"
9+
import { getShortRef } from "../../libs"
10+
import { useState } from "react"
11+
12+
const { Text } = Typography
13+
14+
interface DeploymentDescriptorProps {
15+
deployment: Deployment
16+
commits: Commit[]
17+
}
18+
19+
export default function DeploymentDescriptor(props: DeploymentDescriptorProps): JSX.Element {
20+
const [visible, setVisible] = useState<boolean>(false)
21+
22+
const showModal = () => {
23+
setVisible(true)
24+
}
25+
26+
const hideModal = () => {
27+
setVisible(false)
28+
}
29+
30+
return (
31+
<Descriptions title="Information" bordered column={1}>
32+
<Descriptions.Item label="Environment">{props.deployment.env}</Descriptions.Item>
33+
<Descriptions.Item label="Ref">
34+
<Text className="gitploy-code" code>{getShortRef(props.deployment)}</Text>
35+
</Descriptions.Item>
36+
<Descriptions.Item label="Status">
37+
<DeploymentStatusBadge deployment={props.deployment}/>
38+
</Descriptions.Item>
39+
<Descriptions.Item label="Deployer">
40+
<UserAvatar user={props.deployment.deployer} boldName={false}/>
41+
</Descriptions.Item>
42+
<Descriptions.Item label="Deploy Time">
43+
{moment(props.deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
44+
</Descriptions.Item>
45+
<Descriptions.Item label="Changes">
46+
<Button
47+
type="link"
48+
style={{padding: 0, height: 20}}
49+
onClick={showModal}
50+
>
51+
View
52+
</Button>
53+
<Modal
54+
title="Changes"
55+
visible={visible}
56+
width={800}
57+
// Hide OK Button
58+
okButtonProps={{style: {display: "none"}}}
59+
cancelText="Close"
60+
onCancel={hideModal}
61+
>
62+
<CommitChanges changes={props.commits}/>
63+
</Modal>
64+
</Descriptions.Item>
65+
</Descriptions>
66+
)
67+
}

Diff for: ‎ui/src/components/DeploymentDescriptor/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import DeploymentDescriptor from "./DeploymentDescriptor"
2+
3+
export default DeploymentDescriptor

Diff for: ‎ui/src/components/DeploymentStatusSteps.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Timeline, Typography } from "antd"
2+
import { ClockCircleOutlined } from "@ant-design/icons"
23
import moment from "moment"
34

45
import { DeploymentStatus } from "../models"
56

6-
const { Paragraph, Text, Link } = Typography
7+
const { Text, Link } = Typography
78

89
interface DeploymentStatusStepsProps {
910
statuses: DeploymentStatus[]
@@ -17,13 +18,14 @@ export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps)
1718
<Timeline.Item
1819
key={idx}
1920
color={getStatusColor(status.status)}
20-
style={(idx === props.statuses.length - 1)? {paddingBottom: 0} : {}}
2121
>
22-
<Paragraph style={{margin: 0}}>
23-
<Text strong>{status.description}</Text>
24-
{(status.logUrl !== "")? <Link href={status.logUrl} target="_blank"> View</Link> : <></>}<br/>
25-
<Text>Updated</Text> <Text code className="gitploy-code">{status.status}</Text> <Text>at {moment(status.createdAt).format('HH:mm:ss')}</Text>
26-
</Paragraph>
22+
<ClockCircleOutlined /> {moment(status.createdAt).format("YYYY-MM-DD HH:mm:ss")}<br/>
23+
<b>{status.description}</b>&nbsp;&nbsp;
24+
{(status.logUrl !== "")?
25+
<Link href={status.logUrl} target="_blank">View Detail</Link>
26+
:
27+
<></>}<br />
28+
Updated <Text className="gitploy-code" code>{status.status}</Text> {moment(status.createdAt).fromNow()}
2729
</Timeline.Item>
2830
)
2931
})}

0 commit comments

Comments
 (0)