Add pagination to list usage

Author: AlexTugarev

components/dashboard/src/Pagination/Pagination.tsx

@@ -8,20 +8,19 @@ import { getPaginationNumbers } from "./getPagination";
 import Arrow from "../components/Arrow";
 
 interface PaginationProps {
-    totalResults: number;
     totalNumberOfPages: number;
     currentPage: number;
-    setCurrentPage: any;
+    setPage: (page: number) => void;
 }
 
-function Pagination({ totalNumberOfPages, currentPage, setCurrentPage }: PaginationProps) {
+function Pagination({ totalNumberOfPages, currentPage, setPage }: PaginationProps) {
     const calculatedPagination = getPaginationNumbers(totalNumberOfPages, currentPage);
 
     const nextPage = () => {
-        if (currentPage !== totalNumberOfPages) setCurrentPage(currentPage + 1);
+        if (currentPage !== totalNumberOfPages) setPage(currentPage + 1);
     };
     const prevPage = () => {
-        if (currentPage !== 1) setCurrentPage(currentPage - 1);
+        if (currentPage !== 1) setPage(currentPage - 1);
     };
     const getClassnames = (pageNumber: string | number) => {
         if (pageNumber === currentPage) {
@@ -47,8 +46,8 @@ function Pagination({ totalNumberOfPages, currentPage, setCurrentPage }: Paginat
                         return <li className={getClassnames(pn)}>&#8230;</li>;
                     }
                     return (
-                        <li key={i} className={getClassnames(pn)}>
-                            <span onClick={() => setCurrentPage(pn)}>{pn}</span>
+                        <li key={i} className={getClassnames(pn)} onClick={() => typeof pn === "number" && setPage(pn)}>
+                            <span>{pn}</span>
                         </li>
                     );
                 })}

components/dashboard/src/teams/TeamUsage.tsx

@@ -9,10 +9,10 @@ import { useLocation } from "react-router";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import {
-    BillableSessionRequest,
+    ListBilledUsageRequest,
     BillableWorkspaceType,
     ExtendedBillableSession,
-    SortOrder,
+    ListBilledUsageResponse,
 } from "@gitpod/gitpod-protocol/lib/usage";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
@@ -21,7 +21,6 @@ import Header from "../components/Header";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { ReactComponent as CreditsSvg } from "../images/credits.svg";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
-import { ReactComponent as SortArrow } from "../images/sort-arrow.svg";
 import { ReactComponent as UsageIcon } from "../images/usage-default.svg";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { toRemoteURL } from "../projects/render-utils";
@@ -31,17 +30,15 @@ function TeamUsage() {
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
-    const [billedUsage, setBilledUsage] = useState<ExtendedBillableSession[]>([]);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [resultsPerPage] = useState(50);
+    const [usagePage, setUsagePage] = useState<ListBilledUsageResponse | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState("");
     const today = new Date();
     const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
     const timestampStartOfCurrentMonth = startOfCurrentMonth.getTime();
     const [startDateOfBillMonth, setStartDateOfBillMonth] = useState(timestampStartOfCurrentMonth);
     const [endDateOfBillMonth, setEndDateOfBillMonth] = useState(Date.now());
+    const [totalCreditsUsed, setTotalCreditsUsed] = useState<number>(0);
     const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [isStartedTimeDescending, setIsStartedTimeDescending] = useState<boolean>(true);
 
     useEffect(() => {
         if (!team) {
@@ -57,30 +54,8 @@ function TeamUsage() {
         if (!team) {
             return;
         }
-        if (billedUsage.length === 0) {
-            setIsLoading(true);
-        }
-        (async () => {
-            const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
-            const request: BillableSessionRequest = {
-                attributionId,
-                startedTimeOrder: isStartedTimeDescending ? SortOrder.Descending : SortOrder.Ascending,
-                from: startDateOfBillMonth,
-                to: endDateOfBillMonth,
-            };
-            try {
-                const { server } = getGitpodService();
-                const billedUsageResult = await server.listBilledUsage(request);
-                setBilledUsage(billedUsageResult);
-            } catch (error) {
-                if (error.code === ErrorCodes.PERMISSION_DENIED) {
-                    setErrorMessage("Access to usage details is restricted to team owners.");
-                }
-            } finally {
-                setIsLoading(false);
-            }
-        })();
-    }, [team, startDateOfBillMonth, endDateOfBillMonth, isStartedTimeDescending]);
+        loadPage(1);
+    }, [team, startDateOfBillMonth, endDateOfBillMonth]);
 
     useEffect(() => {
         if (!teamBillingMode) {
@@ -91,6 +66,39 @@ function TeamUsage() {
         }
     }, [teamBillingMode]);
 
+    const loadPage = async (page: number = 1) => {
+        if (!team) {
+            return;
+        }
+        if (usagePage === undefined) {
+            setIsLoading(true);
+            setTotalCreditsUsed(0);
+        }
+        const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
+        const request: ListBilledUsageRequest = {
+            attributionId,
+            fromDate: startDateOfBillMonth,
+            toDate: endDateOfBillMonth,
+            perPage: 50,
+            page,
+        };
+        try {
+            const page = await getGitpodService().server.listBilledUsage(request);
+            setUsagePage(page);
+            setTotalCreditsUsed(Math.ceil(page.totalCreditsUsed));
+        } catch (error) {
+            if (error.code === ErrorCodes.PERMISSION_DENIED) {
+                setErrorMessage("Access to usage details is restricted to team owners.");
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSetPage = async (page: number) => {
+        await loadPage(page);
+    };
+
     const getType = (type: BillableWorkspaceType) => {
         if (type === "regular") {
             return "Workspace";
@@ -111,12 +119,6 @@ function TeamUsage() {
         return inMinutes + " min";
     };
 
-    const calculateTotalUsage = () => {
-        let totalCredits = 0;
-        billedUsage.forEach((session) => (totalCredits += session.credits));
-        return totalCredits.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    };
-
     const handleMonthClick = (start: any, end: any) => {
         setStartDateOfBillMonth(start);
         setEndDateOfBillMonth(end);
@@ -155,10 +157,7 @@ function TeamUsage() {
         return new Date(time).toLocaleDateString(undefined, options).replace("at ", "");
     };
 
-    const lastResultOnCurrentPage = currentPage * resultsPerPage;
-    const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
-    const totalNumberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
-    const currentPaginatedResults = billedUsage.slice(firstResultOnCurrentPage, lastResultOnCurrentPage);
+    const currentPaginatedResults = usagePage?.sessions ?? [];
 
     return (
         <>
@@ -181,16 +180,18 @@ function TeamUsage() {
                                     <div className="text-base text-gray-500 truncate">Previous Months</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 className="my-auto mr-1" />
-                                        <span>{calculateTotalUsage()} Credits</span>
+                                {!isLoading && (
+                                    <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 className="my-auto mr-1" />
+                                            <span>{totalCreditsUsed} Credits</span>
+                                        </div>
                                     </div>
-                                </div>
+                                )}
                             </div>
                         </div>
-                        {!isLoading && billedUsage.length === 0 && !errorMessage && (
+                        {!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">
@@ -215,7 +216,7 @@ function TeamUsage() {
                                 <Spinner className="m-2 h-5 w-5 animate-spin" />
                             </div>
                         )}
-                        {billedUsage.length > 0 && !isLoading && (
+                        {!isLoading && currentPaginatedResults.length > 0 && (
                             <div className="flex flex-col w-full mb-8">
                                 <ItemsList className="mt-2 text-gray-400 dark:text-gray-500">
                                     <Item
@@ -233,17 +234,7 @@ function TeamUsage() {
                                         </ItemField>
                                         <ItemField className="my-auto" />
                                         <ItemField className="col-span-3 my-auto cursor-pointer">
-                                            <span
-                                                className="flex my-auto"
-                                                onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}
-                                            >
-                                                Timestamp
-                                                <SortArrow
-                                                    className={`ml-2 h-4 w-4 my-auto ${
-                                                        isStartedTimeDescending ? "" : " transform rotate-180"
-                                                    }`}
-                                                />
-                                            </span>
+                                            <span>Timestamp</span>
                                         </ItemField>
                                     </Item>
                                     {currentPaginatedResults &&
@@ -310,12 +301,11 @@ function TeamUsage() {
                                             );
                                         })}
                                 </ItemsList>
-                                {billedUsage.length > resultsPerPage && (
+                                {usagePage && usagePage.totalPages > 1 && (
                                     <Pagination
-                                        totalResults={billedUsage.length}
-                                        currentPage={currentPage}
-                                        setCurrentPage={setCurrentPage}
-                                        totalNumberOfPages={totalNumberOfPages}
+                                        currentPage={usagePage.page}
+                                        setPage={(page) => handleSetPage(page)}
+                                        totalNumberOfPages={usagePage.totalPages}
                                     />
                                 )}
                             </div>

components/gitpod-protocol/src/gitpod-service.ts

@@ -61,7 +61,7 @@ import { RemotePageMessage, RemoteTrackMessage, RemoteIdentifyMessage } from "./
 import { IDEServer } from "./ide-protocol";
 import { InstallationAdminSettings, TelemetryData } from "./installation-admin-protocol";
 import { Currency } from "./plans";
-import { BillableSession, BillableSessionRequest } from "./usage";
+import { ListBilledUsageResponse, ListBilledUsageRequest } from "./usage";
 import { SupportedWorkspaceClass } from "./workspace-class";
 import { BillingMode } from "./billing-mode";
 
@@ -297,7 +297,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getSpendingLimitForTeam(teamId: string): Promise<number | undefined>;
     setSpendingLimitForTeam(teamId: string, spendingLimit: number): Promise<void>;
 
-    listBilledUsage(req: BillableSessionRequest): Promise<BillableSession[]>;
+    listBilledUsage(req: ListBilledUsageRequest): Promise<ListBilledUsageResponse>;
 
     setUsageAttribution(usageAttribution: string): Promise<void>;
 

components/gitpod-protocol/src/usage.ts

@@ -40,16 +40,24 @@ export interface ExtendedBillableSession extends BillableSession {
     user?: Pick<User.Profile, "name" | "avatarURL">;
 }
 
-export interface BillableSessionRequest {
+/**
+ * This is a paginated request
+ */
+export interface ListBilledUsageRequest {
     attributionId: string;
-    startedTimeOrder: SortOrder;
-    from?: number;
-    to?: number;
+    fromDate?: number;
+    toDate?: number;
+    perPage: number;
+    page: number;
 }
 
-export type BillableWorkspaceType = WorkspaceType;
-
-export enum SortOrder {
-    Descending = 0,
-    Ascending = 1,
+export interface ListBilledUsageResponse {
+    sessions: ExtendedBillableSession[];
+    totalCreditsUsed: number;
+    totalPages: number;
+    total: number;
+    perPage: number;
+    page: number;
 }
+
+export type BillableWorkspaceType = WorkspaceType;

components/server/ee/src/workspace/gitpod-server-impl.ts

@@ -71,7 +71,8 @@ import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositor
 import { EligibilityService } from "../user/eligibility-service";
 import { AccountStatementProvider } from "../user/account-statement-provider";
 import { GithubUpgradeURL, PlanCoupon } from "@gitpod/gitpod-protocol/lib/payment-protocol";
-import { ExtendedBillableSession, BillableSessionRequest } from "@gitpod/gitpod-protocol/lib/usage";
+import { ListBilledUsageRequest, ListBilledUsageResponse } from "@gitpod/gitpod-protocol/lib/usage";
+import { ListBilledUsageRequest as ListBilledUsage } from "@gitpod/usage-api/lib/usage/v1/usage_pb";
 import {
     AssigneeIdentityIdentifier,
     TeamSubscription,
@@ -2149,48 +2150,60 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         return result;
     }
 
-    async listBilledUsage(ctx: TraceContext, req: BillableSessionRequest): Promise<ExtendedBillableSession[]> {
-        const { attributionId, startedTimeOrder, from, to } = req;
+    async listBilledUsage(ctx: TraceContext, req: ListBilledUsageRequest): Promise<ListBilledUsageResponse> {
+        const { attributionId, fromDate, toDate, perPage, page } = req;
         traceAPIParams(ctx, { attributionId });
         let timestampFrom;
         let timestampTo;
         const user = this.checkAndBlockUser("listBilledUsage");
 
         await this.guardCostCenterAccess(ctx, user.id, attributionId, "get");
 
-        if (from) {
-            timestampFrom = Timestamp.fromDate(new Date(from));
+        if (fromDate) {
+            timestampFrom = Timestamp.fromDate(new Date(fromDate));
         }
-        if (to) {
-            timestampTo = Timestamp.fromDate(new Date(to));
+        if (toDate) {
+            timestampTo = Timestamp.fromDate(new Date(toDate));
         }
         const usageClient = this.usageServiceClientProvider.getDefault();
         const response = await usageClient.listBilledUsage(
             ctx,
             attributionId,
-            startedTimeOrder as number,
+            ListBilledUsage.Ordering.ORDERING_DESCENDING,
+            perPage,
+            page,
             timestampFrom,
             timestampTo,
         );
-        const sessions = response.getSessionsList().map((s) => UsageService.mapBilledSession(s));
-        const extendedSessions = await Promise.all(
-            sessions.map(async (session) => {
-                const ws = await this.workspaceDb.trace(ctx).findWorkspaceAndInstance(session.workspaceId);
-                let profile: User.Profile | undefined = undefined;
-                if (session.workspaceType === "regular" && session.userId) {
-                    const user = await this.userDB.findUserById(session.userId);
-                    if (user) {
-                        profile = User.getProfile(user);
+        const sessions = await Promise.all(
+            response
+                .getSessionsList()
+                .map((s) => UsageService.mapBilledSession(s))
+                .map(async (session) => {
+                    const ws = await this.workspaceDb.trace(ctx).findWorkspaceAndInstance(session.workspaceId);
+                    let profile: User.Profile | undefined = undefined;
+                    if (session.workspaceType === "regular" && session.userId) {
+                        // TODO add caching to void repeated loading of same profile details here
+                        const user = await this.userDB.findUserById(session.userId);
+                        if (user) {
+                            profile = User.getProfile(user);
+                        }
                     }
-                }
-                return {
-                    ...session,
-                    contextURL: ws?.contextURL,
-                    user: profile ? <User.Profile>{ name: profile.name, avatarURL: profile.avatarURL } : undefined,
-                };
-            }),
+                    return {
+                        ...session,
+                        contextURL: ws?.contextURL,
+                        user: profile,
+                    };
+                }),
         );
-        return extendedSessions;
+        return {
+            sessions,
+            total: response.getTotal(),
+            totalPages: response.getTotalPages(),
+            page: response.getPage(),
+            perPage: response.getPerPage(),
+            totalCreditsUsed: response.getTotalCreditsUsed(),
+        };
     }
 
     protected async guardCostCenterAccess(