Allow sorting in the UI

Author: Laurie T. Malau

components/dashboard/src/teams/TeamUsage.tsx

@@ -8,7 +8,12 @@ import { useContext, useEffect, useState } from "react";
 import { Redirect, useLocation } from "react-router";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { BillableSession, BillableWorkspaceType, SortOrder } from "@gitpod/gitpod-protocol/lib/usage";
+import {
+    BillableSession,
+    BillableSessionRequest,
+    BillableWorkspaceType,
+    SortOrder,
+} from "@gitpod/gitpod-protocol/lib/usage";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import moment from "moment";
@@ -18,6 +23,7 @@ import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { ReactComponent as CreditsSvg } from "../images/credits.svg";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
+import Arrow from "../components/Arrow";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
@@ -34,19 +40,19 @@ function TeamUsage() {
     const [startDateOfBillMonth, setStartDateOfBillMonth] = useState(timestampStartOfCurrentMonth);
     const [endDateOfBillMonth, setEndDateOfBillMonth] = useState(Date.now());
     const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [startedTimeOrder] = useState<SortOrder>(SortOrder.Descending);
+    const [isStartedTimeDescending, setIsStartedTimeDescending] = useState<boolean>(true);
 
     useEffect(() => {
         if (!team) {
             return;
         }
         (async () => {
             const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
-            const request = {
+            const request: BillableSessionRequest = {
                 attributionId,
-                startedTimeOrder,
-                startDateOfBillMonth,
-                endDateOfBillMonth,
+                startedTimeOrder: isStartedTimeDescending ? SortOrder.Descending : SortOrder.Ascending,
+                from: startDateOfBillMonth,
+                to: endDateOfBillMonth,
             };
             try {
                 const billedUsageResult = await getGitpodService().server.listBilledUsage(request);
@@ -59,7 +65,7 @@ function TeamUsage() {
                 setIsLoading(false);
             }
         })();
-    }, [team, startDateOfBillMonth, endDateOfBillMonth, startedTimeOrder]);
+    }, [team, startDateOfBillMonth, endDateOfBillMonth, isStartedTimeDescending]);
 
     if (!showUsageBasedPricingUI) {
         return <Redirect to="/" />;
@@ -195,7 +201,12 @@ function TeamUsage() {
                                             <CreditsSvg className="my-auto mr-1" />
                                             <span>Credits</span>
                                         </ItemField>
-                                        <ItemField className="my-auto" />
+                                        <ItemField className="my-auto cursor-pointer">
+                                            <span onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}>
+                                                Started
+                                                <Arrow direction={isStartedTimeDescending ? "down" : "up"} />
+                                            </span>
+                                        </ItemField>
                                     </Item>
                                     {currentPaginatedResults &&
                                         currentPaginatedResults.map((usage) => (