Skip to content

Commit 493309b

Browse files
author
Laurie T. Malau
committed
Show workspace and user details
1 parent 81c98f8 commit 493309b

File tree

1 file changed

+56
-35
lines changed

1 file changed

+56
-35
lines changed

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

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,16 @@ import { ReactComponent as Spinner } from "../icons/Spinner.svg";
2424
import { ReactComponent as SortArrow } from "../images/sort-arrow.svg";
2525
import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
2626

27+
interface ExtendedBillableSession extends BillableSession {
28+
contextURL: string;
29+
}
30+
2731
function TeamUsage() {
2832
const { teams } = useContext(TeamsContext);
2933
const location = useLocation();
3034
const team = getCurrentTeam(location, teams);
3135
const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
32-
const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
36+
const [billedUsage, setBilledUsage] = useState<ExtendedBillableSession[]>([]);
3337
const [currentPage, setCurrentPage] = useState(1);
3438
const [resultsPerPage] = useState(15);
3539
const [errorMessage, setErrorMessage] = useState("");
@@ -55,6 +59,9 @@ function TeamUsage() {
5559
if (!team) {
5660
return;
5761
}
62+
if (billedUsage.length === 0) {
63+
setIsLoading(true);
64+
}
5865
(async () => {
5966
const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
6067
const request: BillableSessionRequest = {
@@ -65,7 +72,14 @@ function TeamUsage() {
6572
};
6673
try {
6774
const billedUsageResult = await getGitpodService().server.listBilledUsage(request);
68-
setBilledUsage(billedUsageResult);
75+
const extendedResult = await Promise.all(
76+
billedUsageResult.map(async (res) => {
77+
const ws = await getGitpodService().server.getWorkspace(res.workspaceId);
78+
return Object.assign(res, { contextURL: ws.workspace.contextURL });
79+
}),
80+
);
81+
console.log(extendedResult);
82+
setBilledUsage(extendedResult);
6983
} catch (error) {
7084
if (error.code === ErrorCodes.PERMISSION_DENIED) {
7185
setErrorMessage("Access to usage details is restricted to team owners.");
@@ -141,7 +155,7 @@ function TeamUsage() {
141155
const displayTime = (time: string) => {
142156
const options: Intl.DateTimeFormatOptions = {
143157
day: "numeric",
144-
month: "long",
158+
month: "short",
145159
year: "numeric",
146160
hour: "numeric",
147161
minute: "numeric",
@@ -184,7 +198,7 @@ function TeamUsage() {
184198
</div>
185199
</div>
186200
</div>
187-
{billedUsage.length === 0 && !errorMessage && !isLoading && (
201+
{!isLoading && billedUsage.length === 0 && !errorMessage && (
188202
<div className="flex flex-col w-full mb-8">
189203
<h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
190204
<p className="text-center text-gray-500 mt-1">
@@ -212,26 +226,22 @@ function TeamUsage() {
212226
{billedUsage.length > 0 && !isLoading && (
213227
<div className="flex flex-col w-full mb-8">
214228
<ItemsList className="mt-2 text-gray-500">
215-
<Item header={false} className="grid grid-cols-5 bg-gray-100 mb-5">
229+
<Item header={false} className="grid grid-cols-5 gap-x-8 bg-gray-100 mb-5">
216230
<ItemField className="my-auto">
217231
<span>Type</span>
218232
</ItemField>
219-
<ItemField className="my-auto">
220-
<span>Class</span>
233+
<ItemField className="col-span-2 my-auto">
234+
<span>ID</span>
221235
</ItemField>
222236
<ItemField className="my-auto">
223-
<span>Usage</span>
224-
</ItemField>
225-
<ItemField className="flex my-auto">
226-
<CreditsSvg className="my-auto mr-1" />
227237
<span>Credits</span>
228238
</ItemField>
229239
<ItemField className="my-auto cursor-pointer">
230240
<span
231241
className="flex my-auto"
232242
onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}
233243
>
234-
Started
244+
Timestamp
235245
<SortArrow
236246
className={`h-4 w-4 my-auto ${
237247
isStartedTimeDescending ? "" : " transform rotate-180"
@@ -241,30 +251,41 @@ function TeamUsage() {
241251
</ItemField>
242252
</Item>
243253
{currentPaginatedResults &&
244-
currentPaginatedResults.map((usage) => (
245-
<div
246-
key={usage.instanceId}
247-
className="flex p-3 grid grid-cols-5 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
248-
>
249-
<div className="my-auto">
250-
<span>{getType(usage.workspaceType)}</span>
251-
</div>
252-
<div className="my-auto">
253-
<span className="text-gray-400">{usage.workspaceClass}</span>
254-
</div>
255-
<div className="my-auto">
256-
<span className="text-gray-700">{getMinutes(usage)}</span>
257-
</div>
258-
<div className="my-auto">
259-
<span className="text-gray-700">{usage.credits.toFixed(1)}</span>
260-
</div>
261-
<div className="my-auto">
262-
<span className="text-gray-400">
263-
{displayTime(usage.startTime)}
264-
</span>
254+
currentPaginatedResults.map((usage) => {
255+
return (
256+
<div
257+
key={usage.instanceId}
258+
className="flex p-3 grid grid-cols-5 gap-x-8 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
259+
>
260+
<div className="flex flex-col my-auto">
261+
<span>{getType(usage.workspaceType)}</span>
262+
<span className="text-sm text-gray-400">
263+
{usage.workspaceClass}
264+
</span>
265+
</div>
266+
<div className="flex flex-col col-span-2 my-auto">
267+
<span className="text-gray-700">{usage.workspaceId}</span>
268+
<span className="text-sm text-gray-400">
269+
{usage.contextURL}
270+
</span>
271+
</div>
272+
<div className="flex flex-col my-auto">
273+
<span className="text-gray-700">
274+
{usage.credits.toFixed(1)}
275+
</span>
276+
<span className="text-sm text-gray-400">
277+
{getMinutes(usage)}
278+
</span>
279+
</div>
280+
<div className="flex flex-col my-auto">
281+
<span className="text-gray-400">
282+
{displayTime(usage.startTime)}
283+
</span>
284+
<span className="text-sm text-gray-400">user</span>
285+
</div>
265286
</div>
266-
</div>
267-
))}
287+
);
288+
})}
268289
</ItemsList>
269290
{billedUsage.length > resultsPerPage && (
270291
<Pagination

0 commit comments

Comments
 (0)