[usage] smaller UI improvements

Author: svenefftinge

components/dashboard/src/teams/TeamUsage.tsx

@@ -114,14 +114,11 @@ function TeamUsage() {
             return "";
         }
         const metaData = usage.metadata as WorkspaceInstanceUsageData;
-        if (!metaData.endTime) {
-            return "running";
-        }
-        const end = new Date(metaData.endTime).getTime();
+        const end = !!metaData.endTime ? new Date(metaData.endTime).getTime() : Date.now();
         const start = new Date(metaData.startTime).getTime();
         const lengthOfUsage = Math.floor(end - start);
         const inMinutes = (lengthOfUsage / (1000 * 60)).toFixed(1);
-        return inMinutes + " min";
+        return (!metaData.endTime ?? "running since ") + inMinutes + " min";
     };
 
     const handleMonthClick = (start: any, end: any) => {
@@ -190,29 +187,31 @@ function TeamUsage() {
                                         <div className="text-base text-gray-500">Total usage</div>
                                         <div className="flex text-lg text-gray-600 font-semibold">
                                             <CreditsSvg className="my-auto mr-1" />
-                                            <span>{totalCreditsUsed} Credits</span>
+                                            <span>{Intl.NumberFormat().format(totalCreditsUsed)} Credits</span>
                                         </div>
                                     </div>
                                 )}
                             </div>
                         </div>
-                        {!isLoading && usagePage === undefined && !errorMessage && (
-                            <div className="flex flex-col w-full mb-8">
-                                <h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
-                                <p className="text-center text-gray-500 mt-1">
-                                    Have you started any
-                                    <a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
-                                        {" "}
-                                        workspaces
-                                    </a>{" "}
-                                    in{" "}
-                                    {new Date(startDateOfBillMonth).toLocaleString("default", {
-                                        month: "long",
-                                    })}{" "}
-                                    {new Date(startDateOfBillMonth).getFullYear()} or checked your other teams?
-                                </p>
-                            </div>
-                        )}
+                        {!isLoading &&
+                            (usagePage === undefined || usagePage.usageEntriesList.length === 0) &&
+                            !errorMessage && (
+                                <div className="flex flex-col w-full mb-8">
+                                    <h3 className="text-center text-gray-500 mt-8">No sessions found.</h3>
+                                    <p className="text-center text-gray-500 mt-1">
+                                        Have you started any
+                                        <a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
+                                            {" "}
+                                            workspaces
+                                        </a>{" "}
+                                        in{" "}
+                                        {new Date(startDateOfBillMonth).toLocaleString("default", {
+                                            month: "long",
+                                        })}{" "}
+                                        {new Date(startDateOfBillMonth).getFullYear()} or checked your other teams?
+                                    </p>
+                                </div>
+                            )}
                         {isLoading && (
                             <div className="flex flex-col place-items-center align-center w-full">
                                 <div className="uppercase text-sm text-gray-400 dark:text-gray-500 mb-5">