-
Notifications
You must be signed in to change notification settings - Fork 160
/
index.tsx
118 lines (115 loc) · 3.8 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { FC } from "react";
import { Photon, PhotonVersion } from "@lepton-dashboard/interfaces/photon";
import { Col, Empty, Row } from "antd";
import { Link } from "@lepton-dashboard/components/link";
import { PhotonIcon } from "@lepton-dashboard/components/icons";
import { css } from "@emotion/react";
import { useAntdTheme } from "@lepton-dashboard/hooks/use-antd-theme";
import { useInject } from "@lepton-libs/di";
import { DeploymentService } from "@lepton-dashboard/services/deployment.service";
import { useStateFromObservable } from "@lepton-libs/hooks/use-state-from-observable";
import { PopoverDeploymentTable } from "@lepton-dashboard/components/photon-item/components/popover-deployment-table";
import { ExtraInfo } from "@lepton-dashboard/components/photon-item/components/extra-info";
import { VersionDescription } from "@lepton-dashboard/components/photon-item/components/version-description";
import { Actions } from "@lepton-dashboard/components/photon-item/components/actions";
import { TimeDescription } from "@lepton-dashboard/components/photon-item/components/time-description";
import { Description } from "@lepton-dashboard/components/description";
export const PhotonItem: FC<{
photon?: Photon;
versions?: PhotonVersion[];
versionView?: boolean;
showDetail?: boolean;
extraActions?: boolean;
}> = ({
photon,
versions,
versionView = false,
showDetail = false,
extraActions = false,
}) => {
const theme = useAntdTheme();
const deploymentService = useInject(DeploymentService);
const deployments = useStateFromObservable(
() => deploymentService.list(),
[]
);
const relatedDeployments = deployments.filter((d) => {
if (versions) {
return versions.some((v) => v.id === d.photon_id);
} else {
return d.photon_id === photon?.id;
}
});
return photon ? (
<Row gutter={[0, 12]}>
{!versionView && (
<Col span={24}>
<Row>
<Col flex="1 1 auto">
<Link
css={css`
color: ${theme.colorTextHeading};
`}
to={`/photons/versions/${photon.name}`}
relative="route"
>
<Description.Item
css={css`
font-weight: 600;
font-size: 16px;
`}
icon={<PhotonIcon />}
term={photon.name}
/>
</Link>
</Col>
<Col flex="0 0 auto">
<Actions photon={photon} extraActions={extraActions} />
</Col>
</Row>
</Col>
)}
{!versionView && (
<Col span={24}>
<Description.Container>
<Description.Item description={photon.model} />
</Description.Container>
</Col>
)}
<Col span={24}>
<Row>
<Col flex="1 1 auto">
<Description.Container
css={css`
font-size: 12px;
`}
>
<PopoverDeploymentTable
photon={photon}
deployments={relatedDeployments}
/>
{!versionView && (
<TimeDescription
detail={showDetail}
photon={photon}
versions={versions}
/>
)}
{versions && !showDetail && (
<VersionDescription photon={photon} versions={versions} />
)}
</Description.Container>
</Col>
{versionView && (
<Col flex="0 0 auto">
<Actions photon={photon} extraActions={extraActions} />
</Col>
)}
</Row>
</Col>
{showDetail && <ExtraInfo versionView={versionView} photon={photon} />}
</Row>
) : (
<Empty />
);
};