Skip to content

Commit d86d868

Browse files
svenefftingeroboquat
svenefftinge
authored and
roboquat
committed
[usage] minor UI improvements
1 parent 248381b commit d86d868

File tree

1 file changed

+54
-29
lines changed

1 file changed

+54
-29
lines changed

‎components/dashboard/src/components/UsageView.tsx

Lines changed: 54 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,20 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
8282
return "Prebuild";
8383
};
8484

85+
const isRunning = (usage: Usage) => {
86+
if (usage.kind !== "workspaceinstance") {
87+
return false;
88+
}
89+
const metaData = usage.metadata as WorkspaceInstanceUsageData;
90+
return metaData.endTime === "" || metaData.endTime === undefined;
91+
};
92+
8593
const getMinutes = (usage: Usage) => {
8694
if (usage.kind !== "workspaceinstance") {
8795
return "";
8896
}
8997
const metaData = usage.metadata as WorkspaceInstanceUsageData;
90-
if (!metaData.endTime) {
91-
return "running";
92-
}
93-
const end = new Date(metaData.endTime).getTime();
98+
const end = metaData.endTime ? new Date(metaData.endTime).getTime() : Date.now();
9499
const start = new Date(metaData.startTime).getTime();
95100
const lengthOfUsage = Math.floor(end - start);
96101
const inMinutes = (lengthOfUsage / (1000 * 60)).toFixed(1);
@@ -139,7 +144,12 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
139144

140145
return (
141146
<>
142-
<Header title="Usage" subtitle="View usage details (updated every 15 minutes)." />
147+
<Header
148+
title="Usage"
149+
subtitle={`${new Date(startDateOfBillMonth).toLocaleDateString()} - ${new Date(
150+
endDateOfBillMonth,
151+
).toLocaleDateString()} (updated every 15 minutes).`}
152+
/>
143153
<div className="app-container pt-5">
144154
{errorMessage && <p className="text-base">{errorMessage}</p>}
145155
{!errorMessage && (
@@ -163,29 +173,31 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
163173
<div className="text-base text-gray-500">Total usage</div>
164174
<div className="flex text-lg text-gray-600 font-semibold">
165175
<CreditsSvg className="my-auto mr-1" />
166-
<span>{totalCreditsUsed} Credits</span>
176+
<span>{Intl.NumberFormat().format(totalCreditsUsed)} Credits</span>
167177
</div>
168178
</div>
169179
)}
170180
</div>
171181
</div>
172-
{!isLoading && usagePage === undefined && !errorMessage && (
173-
<div className="flex flex-col w-full mb-8">
174-
<h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
175-
<p className="text-center text-gray-500 mt-1">
176-
Have you started any
177-
<a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
178-
{" "}
179-
workspaces
180-
</a>{" "}
181-
in{" "}
182-
{new Date(startDateOfBillMonth).toLocaleString("default", {
183-
month: "long",
184-
})}{" "}
185-
{new Date(startDateOfBillMonth).getFullYear()} or checked your other teams?
186-
</p>
187-
</div>
188-
)}
182+
{!isLoading &&
183+
(usagePage === undefined || usagePage.usageEntriesList.length === 0) &&
184+
!errorMessage && (
185+
<div className="flex flex-col w-full mb-8">
186+
<h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
187+
<p className="text-center text-gray-500 mt-1">
188+
Have you started any
189+
<a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
190+
{" "}
191+
workspaces
192+
</a>{" "}
193+
in{" "}
194+
{new Date(startDateOfBillMonth).toLocaleString("default", {
195+
month: "long",
196+
})}{" "}
197+
{new Date(startDateOfBillMonth).getFullYear()} or checked your other teams?
198+
</p>
199+
</div>
200+
)}
189201
{isLoading && (
190202
<div className="flex flex-col place-items-center align-center w-full">
191203
<div className="uppercase text-sm text-gray-400 dark:text-gray-500 mb-5">
@@ -237,9 +249,20 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
237249
</span>
238250
</div>
239251
<div className="flex flex-col col-span-5 my-auto">
240-
<span className="truncate text-gray-600 dark:text-gray-100 text-md font-medium">
241-
{(usage.metadata as WorkspaceInstanceUsageData).workspaceId}
242-
</span>
252+
<div className="flex">
253+
{isRunning(usage) && (
254+
<div
255+
className="rounded-full w-2 h-2 text-sm align-middle bg-green-500 my-auto mx-1"
256+
title="Still running"
257+
/>
258+
)}
259+
<span className="truncate text-gray-600 dark:text-gray-100 text-md font-medium">
260+
{
261+
(usage.metadata as WorkspaceInstanceUsageData)
262+
.workspaceId
263+
}
264+
</span>
265+
</div>
243266
<span className="text-sm truncate text-gray-400 dark:text-gray-500">
244267
{(usage.metadata as WorkspaceInstanceUsageData)
245268
.contextURL &&
@@ -253,9 +276,11 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
253276
<span className="text-right text-gray-500 dark:text-gray-400 font-medium">
254277
{usage.credits.toFixed(1)}
255278
</span>
256-
<span className="text-right truncate text-sm text-gray-400 dark:text-gray-500">
257-
{getMinutes(usage)}
258-
</span>
279+
<div className="flex">
280+
<span className="text-right truncate text-sm text-gray-400 dark:text-gray-500">
281+
{getMinutes(usage)}
282+
</span>
283+
</div>
259284
</div>
260285
<div className="my-auto" />
261286
<div className="flex flex-col col-span-3 my-auto">

0 commit comments

Comments
 (0)