CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/frontend/compute/purchases.tsx
Views: 687
1
import type {
2
ComputeServer,
3
ComputeServerNetworkUsage,
4
ComputeServerStorage,
5
} from "@cocalc/util/db-schema/purchases";
6
import Description from "./description";
7
import State, { DisplayNetworkUsage } from "./state";
8
import InlineComputeServer from "./inline";
9
import Cost from "@cocalc/frontend/purchases/pay-as-you-go/cost";
10
import InlineCloudFilesystem from "./cloud-filesystem/inline";
11
import { WhenKnown } from "@cocalc/frontend/compute/state";
12
13
export function ComputeServerDescription({
14
description,
15
period_end,
16
}: {
17
description: ComputeServer;
18
period_end?: Date;
19
}) {
20
const { state, configuration, compute_server_id: id } = description;
21
22
return (
23
<div>
24
<InlineComputeServer id={id} /> that {period_end ? "was" : "is"}{" "}
25
<State
26
id={id}
27
configuration={configuration}
28
state={state}
29
style={{ display: "inline-block" }}
30
/>
31
.
32
<Description configuration={configuration} state={state} short />
33
</div>
34
);
35
}
36
37
export function ComputeServerNetworkUsageDescription({
38
description,
39
period_end,
40
}: {
41
description: ComputeServerNetworkUsage;
42
period_end?: Date;
43
}) {
44
const { amount, compute_server_id: id } = description;
45
46
return (
47
<div>
48
<DisplayNetworkUsage
49
amount={amount}
50
style={{ display: "inline-block" }}
51
period_end={period_end}
52
cost={description.cost}
53
/>{" "}
54
Network used by <InlineComputeServer id={id} />.{" "}
55
{period_end == null && (
56
<div>
57
<Cost service="compute-server-network-usage" inline /> Usage is
58
updated hourly.
59
</div>
60
)}
61
</div>
62
);
63
}
64
65
export function ComputeServerStorageDescription({
66
description,
67
period_end,
68
}: {
69
description: ComputeServerStorage;
70
period_end?: Date;
71
}) {
72
const { cloud_filesystem_id } = description;
73
74
return (
75
<div>
76
Cloud Storage used by{" "}
77
<InlineCloudFilesystem
78
cloud_filesystem_id={cloud_filesystem_id}
79
showProject
80
/>
81
. {period_end == null && <Cost service="compute-server-storage" inline />}{" "}
82
{description.cost == null && <WhenKnown period_end={period_end} />}
83
</div>
84
);
85
}
86
87