pagination

Author: Laurie T. Malau

components/dashboard/src/components/Pagination.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
+    const { numberOfPages, currentPage, setCurrentPage } = props;
+    const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
+
+    const nextPage = () => {
+        if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
+    };
+    const prevPage = () => {
+        if (currentPage !== 1) setCurrentPage(currentPage - 1);
+    };
+
+    return (
+        <nav>
+            <ul className="flex justify-center space-x-5">
+                <li className="text-gray-400">
+                    <span onClick={prevPage}>
+                        Previous
+                    </span>
+                </li>
+                {availablePageNumbers.map((pn) => (
+                    <li key={pn} className={`text-gray-500 ${currentPage === pn ? "bg-gray-200" : ""} `}>
+                        <span onClick={() => setCurrentPage(pn)}>
+                            {pn}
+                        </span>
+                    </li>
+                ))}
+                <li className="text-gray-400">
+                    <span onClick={nextPage}>
+                        Next
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default Pagination;

components/dashboard/src/teams/TeamUsage.tsx

@@ -17,13 +17,16 @@ import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import moment from "moment";
 import Property from "../admin/Property";
 import Arrow from "../components/Arrow";
+import Pagination from "../components/Pagination";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
     const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
     const [billedUsage, setBilledUsage] = useState<BillableSession[]>([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [resultsPerPage] = useState(10);
 
     useEffect(() => {
         if (!team) {
@@ -51,6 +54,11 @@ function TeamUsage() {
         return (endTime - startTime) / (1000 * 60 * 60) + "hrs";
     };
 
+    const lastResultOnCurrentPage = currentPage * resultsPerPage;
+    const firstResultOnCurrentPage = lastResultOnCurrentPage - resultsPerPage;
+    const numberOfPages = Math.ceil(billedUsage.length / resultsPerPage);
+    const currentPaginatedResults = billedUsage.slice(firstResultOnCurrentPage, lastResultOnCurrentPage);
+
     return (
         <PageWithSubMenu
             subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
@@ -80,7 +88,7 @@ function TeamUsage() {
                     </ItemField>
                     <ItemField className="my-auto" />
                 </Item>
-                {billedUsage.map((usage) => (
+                {currentPaginatedResults.map((usage) => (
                     <div
                         key={usage.instanceId}
                         className="flex p-3 grid grid-cols-6 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
@@ -112,6 +120,7 @@ function TeamUsage() {
                     </div>
                 ))}
             </ItemsList>
+            {(billedUsage.length > resultsPerPage) && <Pagination currentPage={currentPage} setCurrentPage={setCurrentPage} numberOfPages={numberOfPages} />}
         </PageWithSubMenu>
     );
 }

components/gitpod-protocol/src/usage.ts

@@ -143,4 +143,108 @@ export const billableSessionDummyData: BillableSession[] = [
         credits: 200,
         projectId: "project-345",
     },
+    {
+        attributionId: "some-attribution-id",
+        userId: "prebuild",
+        teamId: "prebuild",
+        instanceId: "some-instance-id",
+        workspaceId: "some-workspace-id",
+        workspaceType: "prebuild",
+        workspaceClass: "XL",
+        startTime: new Date(Date.now() + -3 * 24 * 3600 * 1000).toISOString(), // 3 days ago
+        endTime: new Date().toISOString(),
+        credits: 320,
+        projectId: "project-123",
+    },
+    {
+        attributionId: "some-attribution-id2",
+        userId: "some-user",
+        teamId: "some-team",
+        instanceId: "some-instance-id2",
+        workspaceId: "some-workspace-id2",
+        workspaceType: "regular",
+        workspaceClass: "standard",
+        startTime: new Date(Date.now() + -5 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date().toISOString(),
+        credits: 130,
+        projectId: "project-123",
+    },
+    {
+        attributionId: "some-attribution-id3",
+        userId: "some-other-user",
+        teamId: "some-other-team",
+        instanceId: "some-instance-id3",
+        workspaceId: "some-workspace-id3",
+        workspaceType: "regular",
+        workspaceClass: "XL",
+        startTime: new Date(Date.now() + -5 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date(Date.now() + -4 * 24 * 3600 * 1000).toISOString(),
+        credits: 150,
+        projectId: "project-134",
+    },
+    {
+        attributionId: "some-attribution-id4",
+        userId: "some-other-user2",
+        teamId: "some-other-team2",
+        instanceId: "some-instance-id4",
+        workspaceId: "some-workspace-id4",
+        workspaceType: "regular",
+        workspaceClass: "standard",
+        startTime: new Date(Date.now() + -10 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date(Date.now() + -9 * 24 * 3600 * 1000).toISOString(),
+        credits: 330,
+        projectId: "project-137",
+    },
+    {
+        attributionId: "some-attribution-id5",
+        userId: "some-other-user3",
+        teamId: "some-other-team3",
+        instanceId: "some-instance-id5",
+        workspaceId: "some-workspace-id5",
+        workspaceType: "regular",
+        workspaceClass: "XL",
+        startTime: new Date(Date.now() + -2 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date().toISOString(),
+        credits: 222,
+        projectId: "project-138",
+    },
+    {
+        attributionId: "some-attribution-id6",
+        userId: "some-other-user4",
+        teamId: "some-other-team4",
+        instanceId: "some-instance-id6",
+        workspaceId: "some-workspace-id3",
+        workspaceType: "regular",
+        workspaceClass: "XL",
+        startTime: new Date(Date.now() + -7 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date(Date.now() + -6 * 24 * 3600 * 1000).toISOString(),
+        credits: 300,
+        projectId: "project-134",
+    },
+    {
+        attributionId: "some-attribution-id8",
+        userId: "some-other-user5",
+        teamId: "some-other-team5",
+        instanceId: "some-instance-id8",
+        workspaceId: "some-workspace-id3",
+        workspaceType: "regular",
+        workspaceClass: "standard",
+        startTime: new Date(Date.now() + -1 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date().toISOString(),
+        credits: 100,
+        projectId: "project-567",
+    },
+    {
+        attributionId: "some-attribution-id7",
+        userId: "prebuild",
+        teamId: "some-other-team7",
+        instanceId: "some-instance-id7",
+        workspaceId: "some-workspace-id7",
+        workspaceType: "prebuild",
+        workspaceClass: "XL",
+        startTime: new Date(Date.now() + -1 * 24 * 3600 * 1000).toISOString(),
+        endTime: new Date().toISOString(),
+        credits: 200,
+        projectId: "project-345",
+    }
 ];