drive-by extract svg

Author: Laurie T. Malau

components/dashboard/src/teams/TeamUsage.tsx

@@ -29,8 +29,9 @@ function TeamUsage() {
     const [errorMessage, setErrorMessage] = useState("");
     const today = new Date();
     const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    const timestampOfStart = startOfCurrentMonth.getTime();
-    const [startDateOfBillMonth] = useState(timestampOfStart);
+    const timestampStartOfCurrentMonth = startOfCurrentMonth.getTime();
+    const [startDateOfBillMonth, setStartDateOfBillMonth] = useState(timestampStartOfCurrentMonth);
+    const [endDateOfBillMonth, setEndDateOfBillMonth] = useState(Date.now());
 
     useEffect(() => {
         if (!team) {
@@ -41,8 +42,8 @@ function TeamUsage() {
             try {
                 const billedUsageResult = await getGitpodService().server.listBilledUsage(
                     attributionId,
-                    startDateOfBillMonth, // TODO: set based on selected month
-                    Date.now(), // TODO: set based on selected month
+                    startDateOfBillMonth,
+                    endDateOfBillMonth,
                 );
                 setBilledUsage(billedUsageResult);
             } catch (error) {
@@ -51,7 +52,7 @@ function TeamUsage() {
                 }
             }
         })();
-    }, [team]);
+    }, [team, startDateOfBillMonth, endDateOfBillMonth]);
 
     if (!showUsageBasedPricingUI) {
         return <Redirect to="/" />;
@@ -83,6 +84,32 @@ function TeamUsage() {
         return totalCredits;
     };
 
+    const handleCurrentMonthClick = (start: any, end: any) => {
+        setStartDateOfBillMonth(start);
+        setEndDateOfBillMonth(end);
+    };
+
+    const getBillingHistory = () => {
+        let rows = [];
+        for (let i = 1; i < 7; i++) {
+            const endDateVar = i + 2;
+            const startDate = new Date(today.getFullYear(), today.getMonth() - i);
+            const endDate = new Date(today.getFullYear(), today.getMonth(), endDateVar);
+            const timeStampOfStartDate = startDate.getTime();
+            const timeStampOfEndDate = endDate.getTime();
+            rows.push(
+                <div
+                    key={`billing${i}`}
+                    className="text-lg text-gray-600 font-semibold truncate cursor-pointer"
+                    onClick={() => handleCurrentMonthClick(timeStampOfStartDate, timeStampOfEndDate)}
+                >
+                    {startDate.toLocaleString("default", { month: "long" })} {startOfCurrentMonth.getFullYear()}
+                </div>,
+            );
+        }
+        return rows;
+    };
+
     const lastResultOnCurrentPage = currentPage * resultsPerPage;
     const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
     const numberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
@@ -99,15 +126,21 @@ function TeamUsage() {
                             <div className="space-y-8 mb-6" style={{ width: "max-content" }}>
                                 <div className="flex flex-col truncate">
                                     <div className="text-base text-gray-500 truncate">Period</div>
-                                    <div className="text-lg text-gray-600 font-semibold truncate">
+                                    <div
+                                        className="text-lg text-gray-600 font-semibold truncate cursor-pointer"
+                                        onClick={() =>
+                                            handleCurrentMonthClick(timestampStartOfCurrentMonth, Date.now())
+                                        }
+                                    >
                                         {startOfCurrentMonth.toLocaleString("default", { month: "long" })}{" "}
                                         {startOfCurrentMonth.getFullYear()}
                                     </div>
+                                    {getBillingHistory()}
                                 </div>
                                 <div className="flex flex-col truncate">
                                     <div className="text-base text-gray-500">Total usage</div>
                                     <div className="flex text-lg text-gray-600 font-semibold">
-                                        <CreditsSvg />
+                                        <CreditsSvg className="my-auto mr-1" />
                                         <span>{calculateTotalUsage()} Total Credits</span>
                                     </div>
                                 </div>
@@ -142,7 +175,7 @@ function TeamUsage() {
                                             <span>Usage</span>
                                         </ItemField>
                                         <ItemField className="flex my-auto">
-                                            <CreditsSvg />
+                                            <CreditsSvg className="my-auto mr-1" />
                                             <span>Credits</span>
                                         </ItemField>
                                         <ItemField className="my-auto" />