Refactoring the deployment page

ui/src/components/DeploymentDescriptor/CommitChanges.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react"
+import { Button, Typography, List, Avatar } from "antd"
+import moment from "moment"
+
+import { Commit } from "../../models"
+
+interface CommitChangesProps {
+    changes:Commit[]
+}
+
+export default function CommitChanges(props: CommitChangesProps): JSX.Element {
+    return (
+        <List
+            style={{
+                maxHeight: 400,
+                overflow: "auto",
+            }}
+            bordered
+            dataSource={props.changes}
+            renderItem={(commit, idx) => {
+                return (
+                    <CommitChange key={idx} commit={commit}/>
+                )
+            }}
+        />
+    )
+}
+
+function CommitChange(props: {commit: Commit}): JSX.Element {
+    const [message, ...description] = props.commit.message.split(/(\r\n|\n|\r)/g)
+
+    const [hide, setHide] = useState(true)
+
+    const onClickHide = () => {
+        setHide(!hide)
+    }
+
+    return (
+        <List.Item>
+            <List.Item.Meta 
+                title={
+                    <>
+                        <a href={props.commit.htmlUrl} target="_blank">{message}</a>
+                        {/* Display the description when the button is clicked. */}
+                        {(description.length)?
+                            <Button size="small" type="text" onClick={onClickHide}>
+                                <Typography.Text className="gitploy-code" code>...</Typography.Text>
+                            </Button>
+                            :
+                            <></>}
+                        {(!hide) ?
+                            <Typography.Paragraph style={{margin: 0}}>
+                                <pre style={{marginBottom: 0, fontSize: 12}}>
+                                    {description.join("").trim()}
+                                </pre>
+                            </Typography.Paragraph> 
+                            :
+                            <></>}
+                    </>
+                }
+                description={(props.commit?.author)?
+                    <>
+                        <Avatar size="small" src={props.commit.author.avatarUrl} />&nbsp;
+                        <Typography.Text strong>{props.commit.author.login}</Typography.Text> committed&nbsp;
+                        {moment(props.commit.author?.date).fromNow()}
+                    </>
+                    :
+                    <></>
+                }
+            />
+            <div style={{marginLeft: 30}}>
+                <Button
+                    href={props.commit.htmlUrl}
+                    target="_blank"
+                >
+                        {props.commit.sha.substring(0, 7)}
+                </Button>
+            </div>
+        </List.Item>
+    )
+}

ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx

@@ -0,0 +1,67 @@
+import { Button, Descriptions, Modal, Typography } from "antd"
+import moment from "moment"
+
+import DeploymentStatusBadge from "../DeploymentStatusBadge"
+import UserAvatar from "../UserAvatar"
+import CommitChanges from "./CommitChanges"
+
+import { Commit, Deployment } from "../../models"
+import { getShortRef } from "../../libs"
+import { useState } from "react"
+
+const { Text } = Typography
+
+interface DeploymentDescriptorProps {
+    deployment: Deployment
+    commits: Commit[]
+}
+
+export default function DeploymentDescriptor(props: DeploymentDescriptorProps): JSX.Element {
+    const [visible, setVisible] = useState<boolean>(false)
+
+    const showModal = () => {
+      setVisible(true)
+    }
+
+    const hideModal = () => {
+      setVisible(false)
+    }
+
+    return (
+        <Descriptions title="Information" bordered column={1}>
+            <Descriptions.Item label="Environment">{props.deployment.env}</Descriptions.Item>
+            <Descriptions.Item label="Ref">
+                <Text className="gitploy-code" code>{getShortRef(props.deployment)}</Text>
+            </Descriptions.Item>
+            <Descriptions.Item label="Status">
+                <DeploymentStatusBadge deployment={props.deployment}/>
+            </Descriptions.Item>
+            <Descriptions.Item label="Deployer">
+                <UserAvatar user={props.deployment.deployer} boldName={false}/>
+            </Descriptions.Item>
+            <Descriptions.Item label="Deploy Time">
+                {moment(props.deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
+            </Descriptions.Item>
+            <Descriptions.Item label="Changes">
+                <Button 
+                    type="link"
+                    style={{padding: 0, height: 20}}
+                    onClick={showModal}
+                >
+                    View 
+                </Button>
+                <Modal 
+                    title="Changes" 
+                    visible={visible}
+                    width={800}
+                    // Hide OK Button
+                    okButtonProps={{style: {display: "none"}}}
+                    cancelText="Close"
+                    onCancel={hideModal}
+                >
+                    <CommitChanges changes={props.commits}/>
+                </Modal>
+            </Descriptions.Item>
+        </Descriptions>
+    )
+}

ui/src/components/DeploymentDescriptor/index.tsx

@@ -0,0 +1,3 @@
+import DeploymentDescriptor from "./DeploymentDescriptor"
+
+export default DeploymentDescriptor

ui/src/components/DeploymentStatusSteps.tsx

@@ -1,9 +1,10 @@
 import { Timeline, Typography } from "antd"
+import { ClockCircleOutlined } from "@ant-design/icons"
 import moment from "moment"
 
 import { DeploymentStatus } from "../models"
 
-const { Paragraph, Text, Link } = Typography
+const { Text, Link } = Typography
 
 interface DeploymentStatusStepsProps {
     statuses: DeploymentStatus[]
@@ -17,13 +18,14 @@ export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps)
                     <Timeline.Item 
                         key={idx}
                         color={getStatusColor(status.status)}
-                        style={(idx === props.statuses.length - 1)? {paddingBottom: 0} : {}}
                     >
-                        <Paragraph style={{margin: 0}}>
-                            <Text strong>{status.description}</Text> 
-                            {(status.logUrl !== "")? <Link href={status.logUrl} target="_blank"> View</Link> : <></>}<br/>
-                            <Text>Updated</Text> <Text code className="gitploy-code">{status.status}</Text> <Text>at {moment(status.createdAt).format('HH:mm:ss')}</Text>
-                        </Paragraph>
+                        <ClockCircleOutlined /> {moment(status.createdAt).format("YYYY-MM-DD HH:mm:ss")}<br/>
+                        <b>{status.description}</b>&nbsp;&nbsp;
+                        {(status.logUrl !== "")? 
+                            <Link href={status.logUrl} target="_blank">View Detail</Link> 
+                            : 
+                            <></>}<br />
+                        Updated <Text className="gitploy-code" code>{status.status}</Text> {moment(status.createdAt).fromNow()}
                     </Timeline.Item>
                 )
             })}