Add ActivityHistory

Author: noah

ui/src/components/ActivityHistory.tsx

@@ -0,0 +1,40 @@
+import { Timeline, Typography } from 'antd'
+import moment from "moment"
+
+import { Deployment } from "../models"
+import DeploymentStatusBadge from "./DeploymentStatusBadge"
+import UserAvatar from './UserAvatar'
+import DeploymentRefCode from './DeploymentRefCode'
+import { getStatusColor } from "./partials"
+
+const { Text } = Typography
+
+interface ActivityHistoryProps {
+    deployments: Deployment[]
+}
+
+export default function ActivityHistory(props: ActivityHistoryProps): JSX.Element {
+    return (
+        <Timeline>
+            {props.deployments.map((d, idx) => {
+                return (
+                    <Timeline.Item key={idx} color={getStatusColor(d.status)}>
+                        <p>
+                            <Text strong>
+                                {`${d.repo?.namespace} / ${d.repo?.name}`}
+                            </Text>&nbsp;
+                            <a href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}>
+                                #{d.number}
+                            </a>
+                        </p>
+                        <p>
+                            <UserAvatar user={d.deployer} /> deployed <DeploymentRefCode deployment={d}/>&nbsp;
+                            to <Text strong>{d.env}</Text>&nbsp;
+                            on {moment(d.createdAt).format("LLL")} <DeploymentStatusBadge deployment={d}/>
+                        </p>
+                    </Timeline.Item>
+                )
+            })}
+        </Timeline>
+    )
+}

ui/src/components/ActivityLogs.tsx

@@ -6,6 +6,7 @@ import { Deployment, DeploymentStatusEnum } from "../models"
 import DeploymentStatusBadge from "./DeploymentStatusBadge"
 import UserAvatar from './UserAvatar'
 import DeploymentRefCode from './DeploymentRefCode'
+import { getStatusColor } from "./partials"
 
 const { Text } = Typography
 
@@ -36,25 +37,3 @@ export default function ActivityLogs(props: ActivityLogsProps): JSX.Element {
         </Timeline>
     )
 }
-
-// https://ant.design/components/timeline/#Timeline.Item
-const getStatusColor = (status: DeploymentStatusEnum) => {
-    switch (status) {
-        case DeploymentStatusEnum.Waiting:
-            return "gray"
-        case DeploymentStatusEnum.Created:
-            return "purple"
-        case DeploymentStatusEnum.Queued:
-            return "purple"
-        case DeploymentStatusEnum.Running:
-            return "purple"
-        case DeploymentStatusEnum.Success:
-            return "green"
-        case DeploymentStatusEnum.Failure:
-            return "red"
-        case DeploymentStatusEnum.Canceled:
-            return "gray"
-        default:
-            return "gray"
-    }
-}

ui/src/components/DeploymentRefCode.tsx

@@ -11,9 +11,9 @@ interface DeploymentRefCodeProps {
 export default function DeploymentRefCode(props: DeploymentRefCodeProps): JSX.Element {
     let ref: string
     if (props.deployment.type === DeploymentType.Commit) {
-        ref = props.deployment.ref.substr(0, 7)
+        ref = props.deployment.ref.substring(0, 7)
     } else if (props.deployment.type === DeploymentType.Branch && props.deployment.sha !== "") {
-        ref = `${props.deployment.ref}(${props.deployment.sha.substr(0, 7)})`
+        ref = `${props.deployment.ref}(${props.deployment.sha.substring(0, 7)})`
     } else {
         ref = props.deployment.ref
     }

ui/src/components/partials/deploymentStatus.tsx

@@ -0,0 +1,23 @@
+import { DeploymentStatusEnum } from "../../models"
+
+// https://ant.design/components/timeline/#Timeline.Item
+export const getStatusColor = (status: DeploymentStatusEnum): string => {
+    switch (status) {
+        case DeploymentStatusEnum.Waiting:
+            return "gray"
+        case DeploymentStatusEnum.Created:
+            return "purple"
+        case DeploymentStatusEnum.Queued:
+            return "purple"
+        case DeploymentStatusEnum.Running:
+            return "purple"
+        case DeploymentStatusEnum.Success:
+            return "green"
+        case DeploymentStatusEnum.Failure:
+            return "red"
+        case DeploymentStatusEnum.Canceled:
+            return "gray"
+        default:
+            return "gray"
+    }
+}

ui/src/components/partials/index.tsx

@@ -0,0 +1,3 @@
+import { getStatusColor } from "./deploymentStatus"
+
+export { getStatusColor }

ui/src/views/Activities.tsx

@@ -7,7 +7,7 @@ import { perPage, activitiesSlice, searchDeployments } from "../redux/activities
 
 import Main from "./Main"
 import SearchActivities from "../components/SearchActivities"
-import ActivityLogs from "../components/ActivityLogs"
+import ActivityHistory from "../components/ActivityHistory"
 import Pagination from "../components/Pagination"
 import Spin from '../components/Spin'
 
@@ -59,7 +59,7 @@ export default function Activities(): JSX.Element {
                             <Spin />
                         </div> 
                         :
-                        <ActivityLogs deployments={deployments}/>}
+                        <ActivityHistory deployments={deployments}/>}
                 </div>
             </div>
             <div style={{marginTop: 30, textAlign: "center"}}>