Skip to content

Commit 260aa93

Browse files
svenefftingesvenefftinge
committed
[dashboard] Use new usage API for team-usage
1 parent e01c880 commit 260aa93

File tree

1 file changed

+59
-32
lines changed

1 file changed

+59
-32
lines changed

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

+59-32
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import { useLocation } from "react-router";
99
import { getCurrentTeam, TeamsContext } from "./teams-context";
1010
import { getGitpodService, gitpodHostUrl } from "../service/service";
1111
import {
12-
ListBilledUsageRequest,
13-
BillableWorkspaceType,
14-
ExtendedBillableSession,
15-
ListBilledUsageResponse,
12+
ListUsageRequest,
13+
Ordering,
14+
ListUsageResponse,
15+
WorkspaceInstanceUsageData,
16+
Usage,
1617
} from "@gitpod/gitpod-protocol/lib/usage";
1718
import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
1819
import { Item, ItemField, ItemsList } from "../components/ItemsList";
@@ -24,13 +25,14 @@ import { ReactComponent as Spinner } from "../icons/Spinner.svg";
2425
import { ReactComponent as UsageIcon } from "../images/usage-default.svg";
2526
import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
2627
import { toRemoteURL } from "../projects/render-utils";
28+
import { WorkspaceType } from "@gitpod/gitpod-protocol";
2729

2830
function TeamUsage() {
2931
const { teams } = useContext(TeamsContext);
3032
const location = useLocation();
3133
const team = getCurrentTeam(location, teams);
3234
const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
33-
const [usagePage, setUsagePage] = useState<ListBilledUsageResponse | undefined>(undefined);
35+
const [usagePage, setUsagePage] = useState<ListUsageResponse | undefined>(undefined);
3436
const [errorMessage, setErrorMessage] = useState("");
3537
const today = new Date();
3638
const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@@ -75,17 +77,20 @@ function TeamUsage() {
7577
setTotalCreditsUsed(0);
7678
}
7779
const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
78-
const request: ListBilledUsageRequest = {
80+
const request: ListUsageRequest = {
7981
attributionId,
80-
fromDate: startDateOfBillMonth,
81-
toDate: endDateOfBillMonth,
82-
perPage: 50,
83-
page,
82+
from: startDateOfBillMonth,
83+
to: endDateOfBillMonth,
84+
order: Ordering.ORDERING_DESCENDING,
85+
pagination: {
86+
perPage: 50,
87+
page,
88+
},
8489
};
8590
try {
86-
const page = await getGitpodService().server.listBilledUsage(request);
91+
const page = await getGitpodService().server.listUsage(request);
8792
setUsagePage(page);
88-
setTotalCreditsUsed(Math.ceil(page.totalCreditsUsed));
93+
setTotalCreditsUsed(Math.ceil(page.creditBalanceAtEnd));
8994
} catch (error) {
9095
if (error.code === ErrorCodes.PERMISSION_DENIED) {
9196
setErrorMessage("Access to usage details is restricted to team owners.");
@@ -97,19 +102,23 @@ function TeamUsage() {
97102
}
98103
};
99104

100-
const getType = (type: BillableWorkspaceType) => {
105+
const getType = (type: WorkspaceType) => {
101106
if (type === "regular") {
102107
return "Workspace";
103108
}
104109
return "Prebuild";
105110
};
106111

107-
const getMinutes = (usage: ExtendedBillableSession) => {
108-
if (!usage.endTime) {
112+
const getMinutes = (usage: Usage) => {
113+
if (usage.kind !== "workspaceinstance") {
114+
return "";
115+
}
116+
const metaData = usage.metadata as WorkspaceInstanceUsageData;
117+
if (!metaData.endTime) {
109118
return "running";
110119
}
111-
const end = new Date(usage.endTime).getTime();
112-
const start = new Date(usage.startTime).getTime();
120+
const end = new Date(metaData.endTime).getTime();
121+
const start = new Date(metaData.startTime).getTime();
113122
const lengthOfUsage = Math.floor(end - start);
114123
const inMinutes = (lengthOfUsage / (1000 * 60)).toFixed(1);
115124
return inMinutes + " min";
@@ -142,7 +151,7 @@ function TeamUsage() {
142151
return rows;
143152
};
144153

145-
const displayTime = (time: string) => {
154+
const displayTime = (time: string | number) => {
146155
const options: Intl.DateTimeFormatOptions = {
147156
day: "numeric",
148157
month: "short",
@@ -153,7 +162,7 @@ function TeamUsage() {
153162
return new Date(time).toLocaleDateString(undefined, options).replace("at ", "");
154163
};
155164

156-
const currentPaginatedResults = usagePage?.sessions ?? [];
165+
const currentPaginatedResults = usagePage?.usageEntriesList ?? [];
157166

158167
return (
159168
<>
@@ -237,23 +246,34 @@ function TeamUsage() {
237246
currentPaginatedResults.map((usage) => {
238247
return (
239248
<div
240-
key={usage.instanceId}
249+
key={usage.workspaceInstanceId}
241250
className="flex p-3 grid grid-cols-12 gap-x-3 justify-between transition ease-in-out rounded-xl"
242251
>
243252
<div className="flex flex-col col-span-2 my-auto">
244253
<span className="text-gray-600 dark:text-gray-100 text-md font-medium">
245-
{getType(usage.workspaceType)}
254+
{getType(
255+
(usage.metadata as WorkspaceInstanceUsageData)
256+
.workspaceType,
257+
)}
246258
</span>
247259
<span className="text-sm text-gray-400 dark:text-gray-500">
248-
{usage.workspaceClass}
260+
{
261+
(usage.metadata as WorkspaceInstanceUsageData)
262+
.workspaceClass
263+
}
249264
</span>
250265
</div>
251266
<div className="flex flex-col col-span-5 my-auto">
252267
<span className="truncate text-gray-600 dark:text-gray-100 text-md font-medium">
253-
{usage.workspaceId}
268+
{(usage.metadata as WorkspaceInstanceUsageData).workspaceId}
254269
</span>
255270
<span className="text-sm truncate text-gray-400 dark:text-gray-500">
256-
{usage.contextURL && toRemoteURL(usage.contextURL)}
271+
{(usage.metadata as WorkspaceInstanceUsageData)
272+
.contextURL &&
273+
toRemoteURL(
274+
(usage.metadata as WorkspaceInstanceUsageData)
275+
.contextURL,
276+
)}
257277
</span>
258278
</div>
259279
<div className="flex flex-col my-auto">
@@ -267,27 +287,34 @@ function TeamUsage() {
267287
<div className="my-auto" />
268288
<div className="flex flex-col col-span-3 my-auto">
269289
<span className="text-gray-400 dark:text-gray-500 truncate font-medium">
270-
{displayTime(usage.startTime)}
290+
{displayTime(usage.effectiveTime!)}
271291
</span>
272292
<div className="flex">
273-
{usage.workspaceType === "prebuild" ? (
293+
{(usage.metadata as WorkspaceInstanceUsageData)
294+
.workspaceType === "prebuild" ? (
274295
<UsageIcon className="my-auto w-4 h-4 mr-1" />
275296
) : (
276297
""
277298
)}
278-
{usage.workspaceType === "prebuild" ? (
299+
{(usage.metadata as WorkspaceInstanceUsageData)
300+
.workspaceType === "prebuild" ? (
279301
<span className="text-sm text-gray-400 dark:text-gray-500">
280302
Gitpod
281303
</span>
282304
) : (
283305
<div className="flex">
284306
<img
285307
className="my-auto rounded-full w-4 h-4 inline-block align-text-bottom mr-1 overflow-hidden"
286-
src={usage.user?.avatarURL || ""}
308+
src={
309+
(
310+
usage.metadata as WorkspaceInstanceUsageData
311+
).userAvatarURL || ""
312+
}
287313
alt="user avatar"
288314
/>
289315
<span className="text-sm text-gray-400 dark:text-gray-500">
290-
{usage.user?.name}
316+
{(usage.metadata as WorkspaceInstanceUsageData)
317+
.userName || ""}
291318
</span>
292319
</div>
293320
)}
@@ -297,11 +324,11 @@ function TeamUsage() {
297324
);
298325
})}
299326
</ItemsList>
300-
{usagePage && usagePage.totalPages > 1 && (
327+
{usagePage && usagePage.pagination && usagePage.pagination.totalPages > 1 && (
301328
<Pagination
302-
currentPage={usagePage.page}
329+
currentPage={usagePage.pagination.page}
303330
setPage={(page) => loadPage(page)}
304-
totalNumberOfPages={usagePage.totalPages}
331+
totalNumberOfPages={usagePage.pagination.totalPages}
305332
/>
306333
)}
307334
</div>

0 commit comments

Comments
 (0)