Refactorying the repoHome view

ui/src/views/Repo.tsx

@@ -9,7 +9,7 @@ import { init, activate, repoSlice as slice } from '../redux/repo'
 
 import ActivateButton from "../components/ActivateButton"
 import Main from './main'
-import RepoHome from './RepoHome'
+import RepoHome from './repoHome'
 import RepoLock from "./RepoLock";
 import RepoDeploy from './RepoDeploy'
 import RepoRollabck from './RepoRollback'

ui/src/views/repoHome/ActivityLogs.tsx

@@ -0,0 +1,64 @@
+import { shallowEqual } from "react-redux";
+import { Timeline, Typography } from 'antd'
+import { SyncOutlined } from '@ant-design/icons'
+import moment from "moment"
+
+import { useAppSelector } from '../../redux/hooks'
+import { DeploymentStatusEnum } from "../../models"
+
+import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
+import UserAvatar from '../../components/UserAvatar'
+import DeploymentRefCode from '../../components/DeploymentRefCode'
+
+const { Text } = Typography
+
+export default function ActivityLogs(): JSX.Element {
+    const {
+        deployments,
+    } = useAppSelector(state => state.repoHome, shallowEqual)
+
+    return (
+        <Timeline>
+            {deployments.map((d, idx) => {
+                const dot = (d.status === DeploymentStatusEnum.Running)? 
+                    <SyncOutlined style={{color: "purple"}} spin />
+                    : 
+                    <></>
+                const avatar = <UserAvatar user={d.deployer} />
+
+                return (
+                    <Timeline.Item key={idx} color={getStatusColor(d.status)} dot={dot}>
+                        <p>
+                            <Text strong>{d.env}</Text> <DeploymentRefCode deployment={d}/> <a href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}>• View detail #{d.number}</a>
+                        </p>
+                        <p>
+                            Deployed by {avatar} {moment(d.createdAt).fromNow()} <DeploymentStatusBadge deployment={d}/>
+                        </p>
+                    </Timeline.Item>
+                )
+            })}
+        </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/views/RepoHome.tsx → ui/src/views/repoHome/index.tsx

@@ -3,13 +3,13 @@ import { useParams } from "react-router-dom";
 import { shallowEqual } from "react-redux";
 import { PageHeader, Select } from 'antd'
 
-import { useAppSelector, useAppDispatch } from '../redux/hooks'
-import { repoHomeSlice as slice, fetchEnvs, fetchDeployments, perPage } from '../redux/repoHome'
-import { subscribeEvents } from "../apis"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks'
+import { repoHomeSlice as slice, fetchEnvs, fetchDeployments, perPage } from '../../redux/repoHome'
+import { subscribeEvents } from "../../apis"
 
-import ActivityLogs from '../components/ActivityLogs'
-import Spin from '../components/Spin'
-import Pagination from '../components/Pagination'
+import ActivityLogs from './ActivityLogs'
+import Spin from '../../components/Spin'
+import Pagination from '../../components/Pagination'
 
 const { Option } = Select
 
@@ -78,8 +78,9 @@ export default function RepoHome(): JSX.Element {
             </div>
             <div style={{marginTop: "30px", padding: "16px 24px"}}>
                 {(loading)? 
-                    <div style={{textAlign: "center"}}><Spin /></div> :
-                    <ActivityLogs deployments={deployments}/>
+                    <div style={{textAlign: "center"}}><Spin /></div> 
+                    :
+                    <ActivityLogs />
                 }
             </div>
             <div style={{marginTop: "20px", textAlign: "center"}}>