From d607e67164a2a96fc4859a050e23ccd605578256 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Tue, 19 Jul 2022 18:22:15 +0000
Subject: [PATCH] pagination

---
 components/dashboard/src/Menu.tsx             |   8 +-
 components/dashboard/src/components/Arrow.tsx |  16 +-
 .../dashboard/src/components/DropDown.tsx     |   2 +-
 .../dashboard/src/components/Pagination.tsx   |  50 ++++
 components/dashboard/src/images/credits.svg   |   1 +
 .../dashboard/src/start/StartWorkspace.tsx    |   2 +-
 .../dashboard/src/teams/TeamBilling.tsx       |   4 +-
 .../dashboard/src/teams/TeamSettings.tsx      |  16 +-
 components/dashboard/src/teams/TeamUsage.tsx  | 221 ++++++++++++------
 .../dashboard/src/workspaces/Workspaces.tsx   |   4 +-
 components/gitpod-protocol/src/usage.ts       |   1 -
 11 files changed, 232 insertions(+), 93 deletions(-)
 create mode 100644 components/dashboard/src/components/Pagination.tsx
 create mode 100644 components/dashboard/src/images/credits.svg

diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 26c9c0dc63fbd7..de4de96518a7c5 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -217,11 +217,17 @@ export default function Menu() {
                     link: `/t/${team.slug}/members`,
                 },
             ];
+            if (showUsageBasedUI) {
+                teamSettingsList.push({
+                    title: "Usage",
+                    link: `/t/${team.slug}/usage`,
+                });
+            }
             if (currentUserInTeam?.role === "owner") {
                 teamSettingsList.push({
                     title: "Settings",
                     link: `/t/${team.slug}/settings`,
-                    alternatives: getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI }).flatMap((e) => e.link),
+                    alternatives: getTeamSettingsMenu({ team, showPaymentUI }).flatMap((e) => e.link),
                 });
             }
 
diff --git a/components/dashboard/src/components/Arrow.tsx b/components/dashboard/src/components/Arrow.tsx
index 7ac5b282516042..4fcb79fb1ed11c 100644
--- a/components/dashboard/src/components/Arrow.tsx
+++ b/components/dashboard/src/components/Arrow.tsx
@@ -4,12 +4,22 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function Arrow(props: { up: boolean; customBorderClasses?: string }) {
+function Arrow(props: { direction: string; customBorderClasses?: string }) {
+    const { direction, customBorderClasses } = props;
+
+    // Using any because of known TS bug with bracket notation:
+    // https://github.com/microsoft/TypeScript/issues/10530
+    const directionMap: any = {
+        up: "-135deg",
+        down: "45deg",
+        left: "135deg",
+        right: "315deg",
+    };
     return (
         <span
             className={
                 "mx-2 " +
-                (props.customBorderClasses ||
+                (customBorderClasses ||
                     "border-gray-400 dark:border-gray-500 group-hover:border-gray-600 dark:group-hover:border-gray-400")
             }
             style={{
@@ -18,7 +28,7 @@ function Arrow(props: { up: boolean; customBorderClasses?: string }) {
                 padding: 3,
                 borderWidth: "0 2px 2px 0",
                 display: "inline-block",
-                transform: `rotate(${props.up ? "-135deg" : "45deg"})`,
+                transform: `rotate(${directionMap[direction]})`,
             }}
         ></span>
     );
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index 7cb488d83a9458..32a7204d36290d 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -49,7 +49,7 @@ function DropDown(props: DropDownProps) {
             >
                 {props.prefix}
                 {current}
-                <Arrow up={false} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
+                <Arrow direction={"down"} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
             </span>
         </ContextMenu>
     );
diff --git a/components/dashboard/src/components/Pagination.tsx b/components/dashboard/src/components/Pagination.tsx
new file mode 100644
index 00000000000000..69177626ab9850
--- /dev/null
+++ b/components/dashboard/src/components/Pagination.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+import Arrow from "./Arrow";
+
+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 className="mt-16">
+            <ul className="flex justify-center space-x-4">
+                <li className="text-gray-400 cursor-pointer">
+                    <span onClick={prevPage}>
+                        <Arrow direction={"left"} />
+                        Previous
+                    </span>
+                </li>
+                {availablePageNumbers.map((pn) => (
+                    <li
+                        key={pn}
+                        className={`text-gray-500 cursor-pointer w-8 text-center rounded-md ${
+                            currentPage === pn ? "bg-gray-200" : ""
+                        } `}
+                    >
+                        <span onClick={() => setCurrentPage(pn)}>{pn}</span>
+                    </li>
+                ))}
+                <li className="text-gray-400 cursor-pointer">
+                    <span onClick={nextPage}>
+                        Next
+                        <Arrow direction={"right"} />
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default Pagination;
diff --git a/components/dashboard/src/images/credits.svg b/components/dashboard/src/images/credits.svg
new file mode 100644
index 00000000000000..b7f014a8653665
--- /dev/null
+++ b/components/dashboard/src/images/credits.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5Zm5.2 11.4a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z" fill="url(#a)"/><defs><linearGradient id="a" x1="4.3" y1="4.3" x2="16.071" y2="17.107" gradientUnits="userSpaceOnUse"><stop stop-color="#FFAD33"/><stop offset="1" stop-color="#FF8A00"/></linearGradient></defs></svg>
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
index 5970e5a28f8044..7915b7be1001a6 100644
--- a/components/dashboard/src/start/StartWorkspace.tsx
+++ b/components/dashboard/src/start/StartWorkspace.tsx
@@ -519,7 +519,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                                 >
                                     <button className="secondary">
                                         More Actions...
-                                        <Arrow up={false} />
+                                        <Arrow direction={"down"} />
                                     </button>
                                 </ContextMenu>
                                 <button
diff --git a/components/dashboard/src/teams/TeamBilling.tsx b/components/dashboard/src/teams/TeamBilling.tsx
index 17489439282c69..f5eb98c41436fc 100644
--- a/components/dashboard/src/teams/TeamBilling.tsx
+++ b/components/dashboard/src/teams/TeamBilling.tsx
@@ -31,7 +31,7 @@ export default function TeamBilling() {
     const team = getCurrentTeam(location, teams);
     const [members, setMembers] = useState<TeamMemberInfo[]>([]);
     const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
-    const { showPaymentUI, showUsageBasedUI, currency, setCurrency } = useContext(PaymentContext);
+    const { showPaymentUI, currency, setCurrency } = useContext(PaymentContext);
     const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
     const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
 
@@ -140,7 +140,7 @@ export default function TeamBilling() {
 
     return (
         <PageWithSubMenu
-            subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
+            subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
             title="Billing"
             subtitle="Manage team billing and plans."
         >
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index f2a32f7ac98eba..310feab4b2f145 100644
--- a/components/dashboard/src/teams/TeamSettings.tsx
+++ b/components/dashboard/src/teams/TeamSettings.tsx
@@ -15,8 +15,8 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 
-export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean; showUsageBasedUI?: boolean }) {
-    const { team, showPaymentUI, showUsageBasedUI } = params;
+export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean }) {
+    const { team, showPaymentUI } = params;
     return [
         {
             title: "General",
@@ -30,14 +30,6 @@ export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boole
                   },
               ]
             : []),
-        ...(showUsageBasedUI
-            ? [
-                  {
-                      title: "Usage",
-                      link: [`/t/${team?.slug}/usage`],
-                  },
-              ]
-            : []),
     ];
 }
 
@@ -49,7 +41,7 @@ export default function TeamSettings() {
     const { user } = useContext(UserContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
+    const { showPaymentUI } = useContext(PaymentContext);
 
     const close = () => setModal(false);
 
@@ -76,7 +68,7 @@ export default function TeamSettings() {
     return (
         <>
             <PageWithSubMenu
-                subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
+                subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
                 title="Settings"
                 subtitle="Manage general team settings."
             >
diff --git a/components/dashboard/src/teams/TeamUsage.tsx b/components/dashboard/src/teams/TeamUsage.tsx
index b10f0d78589c2a..e8eb5d8c994899 100644
--- a/components/dashboard/src/teams/TeamUsage.tsx
+++ b/components/dashboard/src/teams/TeamUsage.tsx
@@ -6,24 +6,24 @@
 
 import { useContext, useEffect, useState } from "react";
 import { Redirect, useLocation } from "react-router";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
-import { getTeamSettingsMenu } from "./TeamSettings";
 import { PaymentContext } from "../payment-context";
 import { getGitpodService } from "../service/service";
 import { BillableSession, BillableWorkspaceType } 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";
-import Property from "../admin/Property";
-import Arrow from "../components/Arrow";
+import Pagination from "../components/Pagination";
+import Header from "../components/Header";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
-    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
+    const { 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) {
@@ -47,77 +47,158 @@ function TeamUsage() {
         return "Prebuild";
     };
 
-    const getHours = (endTime: number | undefined, startTime: number) => {
-        if (!endTime) return "";
+    const getMinutes = (usage: BillableSession) => {
+        let end;
+        if (!usage.endTime) {
+            end = new Date(Date.now()).getTime();
+        } else {
+            end = new Date(usage.endTime).getTime();
+        }
+        const start = new Date(usage.startTime).getTime();
+        const lengthOfUsage = Math.floor(end - start);
+        const inMinutes = (lengthOfUsage / (1000 * 60)).toFixed(1);
+        return inMinutes + " min";
+    };
 
-        return ((endTime - startTime) / (1000 * 60 * 60)).toFixed(1) + "hrs";
+    const calculateTotalUsage = () => {
+        let totalCredits = 0;
+        billedUsage.forEach((session) => (totalCredits += session.credits));
+        return totalCredits;
     };
 
+    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 })}
-            title="Usage"
-            subtitle="Manage team usage."
-        >
-            <div className="flex flex-col w-full">
-                <div className="flex w-full mt-6 mb-6">
-                    <Property name="Last 30 days">Jun 1 - June 30</Property>
-                    <Property name="Workspaces">4,200 Min</Property>
-                    <Property name="Prebuilds">12,334 Min</Property>
-                </div>
-            </div>
-            <ItemsList className="mt-2 text-gray-500">
-                <Item header={false} className="grid grid-cols-6 bg-gray-100">
-                    <ItemField className="my-auto">
-                        <span>Type</span>
-                    </ItemField>
-                    <ItemField className="my-auto">
-                        <span>Class</span>
-                    </ItemField>
-                    <ItemField className="my-auto">
-                        <span>Amount</span>
-                    </ItemField>
-                    <ItemField className="my-auto">
-                        <span>Credits</span>
-                    </ItemField>
-                    <ItemField className="my-auto" />
-                </Item>
-                {billedUsage.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"
-                    >
-                        <div className="my-auto">
-                            <span className={usage.workspaceType === "prebuild" ? "text-orange-400" : "text-green-500"}>
-                                {getType(usage.workspaceType)}
-                            </span>
-                        </div>
-                        <div className="my-auto">
-                            <span className="text-gray-400">{usage.workspaceClass}</span>
-                        </div>
-                        <div className="my-auto">
-                            <span className="text-gray-700">
-                                {getHours(
-                                    usage.endTime ? new Date(usage.endTime).getTime() : undefined,
-                                    new Date(usage.startTime).getTime(),
-                                )}
-                            </span>
-                        </div>
-                        <div className="my-auto">
-                            <span className="text-gray-700">{usage.credits.toFixed(1)}</span>
-                        </div>
-                        <div className="my-auto">
-                            <span className="text-gray-400">
-                                {moment(new Date(usage.startTime).toDateString()).fromNow()}
-                            </span>
-                        </div>
-                        <div className="pr-2">
-                            <Arrow up={false} />
+        <>
+            <Header title="Usage" subtitle="Manage team usage." />
+            <div className="app-container pt-9">
+                <div className="flex space-x-16">
+                    <div className="flex">
+                        <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">June 2022</div>
+                            </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">
+                                    <svg
+                                        className="my-auto mr-1"
+                                        width="20"
+                                        height="20"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M5 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5Zm5.2 11.4a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z"
+                                            fill="url(#a)"
+                                        />
+                                        <defs>
+                                            <linearGradient
+                                                id="a"
+                                                x1="4.3"
+                                                y1="4.3"
+                                                x2="16.071"
+                                                y2="17.107"
+                                                gradientUnits="userSpaceOnUse"
+                                            >
+                                                <stop stop-color="#FFAD33" />
+                                                <stop offset="1" stop-color="#FF8A00" />
+                                            </linearGradient>
+                                        </defs>
+                                    </svg>
+                                    <span>{calculateTotalUsage()} Total Credits</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                ))}
-            </ItemsList>
-        </PageWithSubMenu>
+                    <div className="flex flex-col w-full mb-8">
+                        <h3>All Usage</h3>
+                        <span className="text-gray-500 mb-5">View usage details of all team members.</span>
+                        <ItemsList className="mt-2 text-gray-500">
+                            <Item header={false} className="grid grid-cols-5 bg-gray-100 mb-5">
+                                <ItemField className="my-auto">
+                                    <span>Type</span>
+                                </ItemField>
+                                <ItemField className="my-auto">
+                                    <span>Class</span>
+                                </ItemField>
+                                <ItemField className="my-auto">
+                                    <span>Usage</span>
+                                </ItemField>
+                                <ItemField className="flex my-auto">
+                                    <svg
+                                        className="my-auto mr-1"
+                                        width="20"
+                                        height="20"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M5 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5Zm5.2 11.4a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z"
+                                            fill="url(#a)"
+                                        />
+                                        <defs>
+                                            <linearGradient
+                                                id="a"
+                                                x1="4.3"
+                                                y1="4.3"
+                                                x2="16.071"
+                                                y2="17.107"
+                                                gradientUnits="userSpaceOnUse"
+                                            >
+                                                <stop stop-color="#FFAD33" />
+                                                <stop offset="1" stop-color="#FF8A00" />
+                                            </linearGradient>
+                                        </defs>
+                                    </svg>
+                                    <span>Credits</span>
+                                </ItemField>
+                                <ItemField className="my-auto" />
+                            </Item>
+                            {currentPaginatedResults.map((usage) => (
+                                <div
+                                    key={usage.instanceId}
+                                    className="flex p-3 grid grid-cols-5 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
+                                >
+                                    <div className="my-auto">
+                                        <span>{getType(usage.workspaceType)}</span>
+                                    </div>
+                                    <div className="my-auto">
+                                        <span className="text-gray-400">{usage.workspaceClass}</span>
+                                    </div>
+                                    <div className="my-auto">
+                                        <span className="text-gray-700">{getMinutes(usage)}</span>
+                                    </div>
+                                    <div className="my-auto">
+                                        <span className="text-gray-700">{usage.credits.toFixed(1)}</span>
+                                    </div>
+                                    <div className="my-auto">
+                                        <span className="text-gray-400">
+                                            {moment(new Date(usage.startTime).toDateString()).fromNow()}
+                                        </span>
+                                    </div>
+                                </div>
+                            ))}
+                        </ItemsList>
+                        {billedUsage.length > resultsPerPage && (
+                            <Pagination
+                                currentPage={currentPage}
+                                setCurrentPage={setCurrentPage}
+                                numberOfPages={numberOfPages}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
     );
 }
 
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 99065e0e2e3a1f..e4758fb9bcbdd6 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -158,7 +158,7 @@ export default function () {
                                         className="flex cursor-pointer py-6 px-6 flex-row text-gray-400 bg-gray-50  hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-xl mb-2"
                                     >
                                         <div className="pr-2">
-                                            <Arrow up={!!showInactive} />
+                                            <Arrow direction={showInactive ? "up" : "down"} />
                                         </div>
                                         <div className="flex flex-grow flex-col ">
                                             <div className="font-medium text-gray-500 dark:text-gray-200 truncate">
@@ -168,7 +168,7 @@ export default function () {
                                                 </span>
                                             </div>
                                             <div className="text-sm flex-auto">
-                                                Workspaces that have been stopped for more than 24 hours. Inactive 
+                                                Workspaces that have been stopped for more than 24 hours. Inactive
                                                 workspaces are automatically deleted after 14 days.{" "}
                                                 <a
                                                     className="gp-link"
diff --git a/components/gitpod-protocol/src/usage.ts b/components/gitpod-protocol/src/usage.ts
index 7973886a2d0f44..c7199018dcfc13 100644
--- a/components/gitpod-protocol/src/usage.ts
+++ b/components/gitpod-protocol/src/usage.ts
@@ -20,7 +20,6 @@ export interface BillableSession {
 
     workspaceType: BillableWorkspaceType;
 
-    // "standard" or "XL"
     workspaceClass: string;
 
     // When the workspace started