-
Notifications
You must be signed in to change notification settings - Fork 160
/
index.tsx
88 lines (87 loc) · 2.88 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { FC, useMemo } from "react";
import { Popover, Table, Tag } from "antd";
import { Deployment } from "@lepton-dashboard/interfaces/deployment";
import { Photon } from "@lepton-dashboard/interfaces/photon";
import { DeploymentStatus } from "@lepton-dashboard/components/deployment-status";
import { useNavigate } from "react-router-dom";
import { css as classNameCss } from "@emotion/css";
import { Link } from "@lepton-dashboard/components/link";
import { DeploymentIcon } from "@lepton-dashboard/components/icons";
import { Description } from "@lepton-dashboard/components/description";
import { DateParser } from "@lepton-dashboard/components/date-parser";
import { css } from "@emotion/react";
export const PopoverDeploymentTable: FC<{
photon: Photon;
deployments: Deployment[];
}> = ({ photon, deployments }) => {
const navigate = useNavigate();
const color = useMemo(() => {
const running = deployments.some((d) => d.status.state === "Running");
const hasDeployments = deployments.length > 0;
if (running) {
return "success";
} else if (hasDeployments) {
return "processing";
} else {
return "default";
}
}, [deployments]);
return (
<Tag
color={color}
css={css`
margin-right: 0;
`}
>
<Description.Item
icon={<DeploymentIcon />}
description={
<Popover
open={deployments.length > 0 ? undefined : false}
placement="bottomLeft"
content={
<Table
rowClassName={classNameCss`cursor: pointer;`}
size="small"
showHeader={false}
pagination={false}
bordered
rowKey="id"
onRow={(record) => {
return {
onClick: () => navigate(`/deployments/detail/${record.id}`),
};
}}
columns={[
{
title: "Status",
dataIndex: ["status", "state"],
render: (state) => <DeploymentStatus status={state} />,
},
{
title: "Name",
dataIndex: "name",
render: (v) => v,
},
{
title: "Created",
dataIndex: "created_at",
render: (data) => <DateParser detail date={data} />,
},
]}
dataSource={deployments}
/>
}
>
<span>
<Link to={`/deployments/list/${photon.name}`} relative="route">
{deployments.length > 0 ? deployments.length : "No"}{" "}
{deployments.length > 1 ? "deployments" : "deployment"}
</Link>
</span>
</Popover>
}
/>
</Tag>
);
};