Skip to content

Commit 422ab8b

Browse files
author
Laurie T. Malau
committed
Allow selection of billing months
1 parent c4708b3 commit 422ab8b

File tree

1 file changed

+51
-67
lines changed

1 file changed

+51
-67
lines changed

‎components/dashboard/src/teams/TeamUsage.tsx

Lines changed: 51 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Pagination from "../components/Pagination";
1616
import Header from "../components/Header";
1717
import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
1818
import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
19+
import { ReactComponent as CreditsSvg } from "../images/credits.svg";
1920

2021
function TeamUsage() {
2122
const { teams } = useContext(TeamsContext);
@@ -28,8 +29,9 @@ function TeamUsage() {
2829
const [errorMessage, setErrorMessage] = useState("");
2930
const today = new Date();
3031
const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
31-
const timestampOfStart = startOfCurrentMonth.getTime();
32-
const [startDateOfBillMonth] = useState(timestampOfStart);
32+
const timestampStartOfCurrentMonth = startOfCurrentMonth.getTime();
33+
const [startDateOfBillMonth, setStartDateOfBillMonth] = useState(timestampStartOfCurrentMonth);
34+
const [endDateOfBillMonth, setEndDateOfBillMonth] = useState(Date.now());
3335

3436
useEffect(() => {
3537
if (!team) {
@@ -40,8 +42,8 @@ function TeamUsage() {
4042
try {
4143
const billedUsageResult = await getGitpodService().server.listBilledUsage(
4244
attributionId,
43-
startDateOfBillMonth, // TODO: set based on selected month
44-
Date.now(), // TODO: set based on selected month
45+
startDateOfBillMonth,
46+
endDateOfBillMonth,
4547
);
4648
setBilledUsage(billedUsageResult);
4749
} catch (error) {
@@ -50,7 +52,7 @@ function TeamUsage() {
5052
}
5153
}
5254
})();
53-
}, [team]);
55+
}, [team, startDateOfBillMonth, endDateOfBillMonth]);
5456

5557
if (!showUsageBasedPricingUI) {
5658
return <Redirect to="/" />;
@@ -79,7 +81,34 @@ function TeamUsage() {
7981
const calculateTotalUsage = () => {
8082
let totalCredits = 0;
8183
billedUsage.forEach((session) => (totalCredits += session.credits));
82-
return totalCredits;
84+
return totalCredits.toFixed(2);
85+
};
86+
87+
const handleMonthClick = (start: any, end: any) => {
88+
setStartDateOfBillMonth(start);
89+
setEndDateOfBillMonth(end);
90+
};
91+
92+
const getBillingHistory = () => {
93+
let rows = [];
94+
// This goes back 6 months from the current month
95+
for (let i = 1; i < 7; i++) {
96+
const endDateVar = i - 1;
97+
const startDate = new Date(today.getFullYear(), today.getMonth() - i);
98+
const endDate = new Date(today.getFullYear(), today.getMonth() - endDateVar, 0);
99+
const timeStampOfStartDate = startDate.getTime();
100+
const timeStampOfEndDate = endDate.getTime();
101+
rows.push(
102+
<div
103+
key={`billing${i}`}
104+
className="text-sm text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 truncate cursor-pointer gp-link"
105+
onClick={() => handleMonthClick(timeStampOfStartDate, timeStampOfEndDate)}
106+
>
107+
{startDate.toLocaleString("default", { month: "long" })} {startDate.getFullYear()}
108+
</div>,
109+
);
110+
}
111+
return rows;
83112
};
84113

85114
const lastResultOnCurrentPage = currentPage * resultsPerPage;
@@ -90,50 +119,29 @@ function TeamUsage() {
90119
return (
91120
<>
92121
<Header title="Usage" subtitle="Manage team usage." />
93-
<div className="app-container pt-9">
122+
<div className="app-container pt-5">
94123
{errorMessage && <p className="text-base">{errorMessage}</p>}
95124
{!errorMessage && (
96125
<div className="flex space-x-16">
97126
<div className="flex">
98127
<div className="space-y-8 mb-6" style={{ width: "max-content" }}>
99128
<div className="flex flex-col truncate">
100-
<div className="text-base text-gray-500 truncate">Period</div>
101-
<div className="text-lg text-gray-600 font-semibold truncate">
129+
<div className="text-base text-gray-500 truncate">Current Month</div>
130+
<div
131+
className="text-sm text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 truncate cursor-pointer mb-5"
132+
onClick={() => handleMonthClick(timestampStartOfCurrentMonth, Date.now())}
133+
>
102134
{startOfCurrentMonth.toLocaleString("default", { month: "long" })}{" "}
103135
{startOfCurrentMonth.getFullYear()}
104136
</div>
137+
<div className="text-base text-gray-500 truncate">Previous Months</div>
138+
{getBillingHistory()}
105139
</div>
106140
<div className="flex flex-col truncate">
107141
<div className="text-base text-gray-500">Total usage</div>
108142
<div className="flex text-lg text-gray-600 font-semibold">
109-
<svg
110-
className="my-auto mr-1"
111-
width="20"
112-
height="20"
113-
fill="none"
114-
xmlns="http://www.w3.org/2000/svg"
115-
>
116-
<path
117-
fill-rule="evenodd"
118-
clip-rule="evenodd"
119-
d="M5 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5Zm5.2 11.4a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z"
120-
fill="url(#a)"
121-
/>
122-
<defs>
123-
<linearGradient
124-
id="a"
125-
x1="4.3"
126-
y1="4.3"
127-
x2="16.071"
128-
y2="17.107"
129-
gradientUnits="userSpaceOnUse"
130-
>
131-
<stop stop-color="#FFAD33" />
132-
<stop offset="1" stop-color="#FF8A00" />
133-
</linearGradient>
134-
</defs>
135-
</svg>
136-
<span>{calculateTotalUsage()} Total Credits</span>
143+
<CreditsSvg className="my-auto mr-1" />
144+
<span>{calculateTotalUsage()} Credits</span>
137145
</div>
138146
</div>
139147
</div>
@@ -147,14 +155,16 @@ function TeamUsage() {
147155
{" "}
148156
workspaces
149157
</a>{" "}
150-
or checked your other teams?
158+
in{" "}
159+
{new Date(startDateOfBillMonth).toLocaleString("default", {
160+
month: "long",
161+
})}{" "}
162+
{new Date(startDateOfBillMonth).getFullYear()} or checked your other teams?
151163
</p>
152164
</div>
153165
)}
154166
{billedUsage.length > 0 && (
155167
<div className="flex flex-col w-full mb-8">
156-
<h3>All Usage</h3>
157-
<span className="text-gray-500 mb-5">View usage details of all team members.</span>
158168
<ItemsList className="mt-2 text-gray-500">
159169
<Item header={false} className="grid grid-cols-5 bg-gray-100 mb-5">
160170
<ItemField className="my-auto">
@@ -167,33 +177,7 @@ function TeamUsage() {
167177
<span>Usage</span>
168178
</ItemField>
169179
<ItemField className="flex my-auto">
170-
<svg
171-
className="my-auto mr-1"
172-
width="20"
173-
height="20"
174-
fill="none"
175-
xmlns="http://www.w3.org/2000/svg"
176-
>
177-
<path
178-
fill-rule="evenodd"
179-
clip-rule="evenodd"
180-
d="M5 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5Zm5.2 11.4a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z"
181-
fill="url(#a)"
182-
/>
183-
<defs>
184-
<linearGradient
185-
id="a"
186-
x1="4.3"
187-
y1="4.3"
188-
x2="16.071"
189-
y2="17.107"
190-
gradientUnits="userSpaceOnUse"
191-
>
192-
<stop stop-color="#FFAD33" />
193-
<stop offset="1" stop-color="#FF8A00" />
194-
</linearGradient>
195-
</defs>
196-
</svg>
180+
<CreditsSvg className="my-auto mr-1" />
197181
<span>Credits</span>
198182
</ItemField>
199183
<ItemField className="my-auto" />

0 commit comments

Comments
 (0)