Pagination, date filters and downloads

Author: filiptronicek

components/dashboard/src/Insights.tsx

@@ -8,7 +8,7 @@ import type { OrganizationMember } from "@gitpod/public-api/lib/gitpod/v1/organi
 import { LoadingState } from "@podkit/loading/LoadingState";
 import { Heading2, Subheading } from "@podkit/typography/Headings";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Accordion } from "./components/accordion/Accordion";
 import Alert from "./components/Alert";
 import Header from "./components/Header";
@@ -17,19 +17,71 @@ import { useWorkspaceSessions } from "./data/insights/list-workspace-sessions-qu
 import { useListOrganizationMembers } from "./data/organizations/members-query";
 import { WorkspaceSessionGroup } from "./insights/WorkspaceSessionGroup";
 import { gitpodHostUrl } from "./service/service";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@podkit/select/Select";
+import dayjs from "dayjs";
+import { Timestamp } from "@bufbuild/protobuf";
+import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { TextMuted } from "@podkit/typography/TextMuted";
+import { DownloadInsightsToast } from "./insights/download/DownloadInsights";
+import { useCurrentOrg } from "./data/organizations/orgs-query";
+import { useToast } from "./components/toasts/Toasts";
+import { useTemporaryState } from "./hooks/use-temporary-value";
+import { DownloadIcon } from "lucide-react";
+import { Button } from "@podkit/buttons/Button";
 
 export const Insights = () => {
-    const { data, error: errorMessage, isLoading } = useWorkspaceSessions();
+    const [prebuildsFilter, setPrebuildsFilter] = useState<"week" | "month" | "year">("week");
+    const [upperBound, lowerBound] = useMemo(() => {
+        const from = dayjs().subtract(1, prebuildsFilter);
+
+        const fromTimestamp = Timestamp.fromDate(from.toDate());
+        const toTimestamp = Timestamp.fromDate(new Date());
+        return [fromTimestamp, toTimestamp];
+    }, [prebuildsFilter]);
+    const {
+        data,
+        error: errorMessage,
+        isLoading,
+        isFetchingNextPage,
+        hasNextPage,
+        fetchNextPage,
+    } = useWorkspaceSessions({
+        from: upperBound,
+        to: lowerBound,
+    });
     const membersQuery = useListOrganizationMembers();
     const members: OrganizationMember[] = useMemo(() => membersQuery.data || [], [membersQuery.data]);
 
-    const sessions = data ?? [];
+    const hasMoreThanOnePage = (data?.pages.length ?? 0) > 1;
+    const sessions = useMemo(() => data?.pages.flatMap((p) => p) ?? [], [data]);
     const grouped = Object.groupBy(sessions, (ws) => ws.workspace?.id ?? "unknown");
+    const [page, setPage] = useState(0);
 
     return (
         <>
             <Header title="Insights" subtitle="Insights into workspace sessions in your organization" />
             <div className="app-container pt-5">
+                <div
+                    className={classNames(
+                        "flex flex-col items-start space-y-3 justify-between",
+                        "md:flex-row md:items-center md:space-x-4 md:space-y-0",
+                    )}
+                >
+                    <Select value={prebuildsFilter} onValueChange={(v) => setPrebuildsFilter(v as any)}>
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue placeholder="Select time range" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="day">Last 24 hours</SelectItem>{" "}
+                            {/* here for debugging, probably not useful */}
+                            <SelectItem value="week">Last 7 days</SelectItem>
+                            <SelectItem value="month">Last 30 days</SelectItem>
+                            <SelectItem value="year">Last 365 days</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <DownloadUsage from={upperBound} to={lowerBound} />
+                </div>
+
                 <div
                     className={classNames(
                         "flex flex-col items-start space-y-3 justify-between px-3",
@@ -100,9 +152,63 @@ export const Insights = () => {
                         )}
                     </ItemsList>
                 </div>
+
+                <div className="mt-4 mb-8 flex flex-row justify-center">
+                    {hasNextPage ? (
+                        <LoadingButton
+                            variant="secondary"
+                            onClick={() => {
+                                setPage(page + 1);
+                                fetchNextPage();
+                            }}
+                            loading={isFetchingNextPage}
+                        >
+                            Load more
+                        </LoadingButton>
+                    ) : (
+                        hasMoreThanOnePage && <TextMuted>All workspace sessions are loaded</TextMuted>
+                    )}
+                </div>
             </div>
         </>
     );
 };
 
+type DownloadUsageProps = {
+    from: Timestamp;
+    to: Timestamp;
+};
+export const DownloadUsage = ({ from, to }: DownloadUsageProps) => {
+    const { data: org } = useCurrentOrg();
+    const { toast } = useToast();
+    // When we start the download, we disable the button for a short time
+    const [downloadDisabled, setDownloadDisabled] = useTemporaryState(false, 1000);
+
+    const handleDownload = useCallback(async () => {
+        if (!org) {
+            return;
+        }
+
+        setDownloadDisabled(true);
+        toast(
+            <DownloadInsightsToast
+                organizationName={org?.slug ?? org?.id}
+                organizationId={org.id}
+                from={from}
+                to={to}
+            />,
+            {
+                autoHide: false,
+            },
+        );
+    }, [org, setDownloadDisabled, toast, from, to]);
+
+    return (
+        <Button variant="secondary" onClick={handleDownload} className="gap-1" disabled={downloadDisabled}>
+            <DownloadIcon />
+            <span>Export as CSV</span>
+        </Button>
+    );
+};
+
 export default Insights;

components/dashboard/src/data/insights/list-workspace-sessions-query.ts

@@ -3,29 +3,51 @@
  * Licensed under the GNU Affero General Public License (AGPL).
  * See License.AGPL.txt in the project root for license information.
  */
-
 import { WorkspaceSession } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { workspaceClient } from "../../service/public-api";
 import { useCurrentOrg } from "../organizations/orgs-query";
+import { Timestamp } from "@bufbuild/protobuf";
+
+const pageSize = 100;
 
-export const useWorkspaceSessions = () => {
+type Params = {
+    from?: Timestamp;
+    to?: Timestamp;
+};
+export const useWorkspaceSessions = ({ from, to }: Params = {}) => {
     const { data: org } = useCurrentOrg();
 
-    const query = useQuery<WorkspaceSession[]>({
-        queryKey: getAuthProviderDescriptionsQueryKey(org?.id),
-        queryFn: async () => {
+    const query = useInfiniteQuery<WorkspaceSession[]>({
+        queryKey: getAuthProviderDescriptionsQueryKey(org?.id, from, to),
+        queryFn: async ({ pageParam }) => {
             if (!org) {
                 throw new Error("No org specified");
             }
+
             const response = await workspaceClient.listWorkspaceSessions({
                 organizationId: org.id,
+                from,
+                to,
+                pagination: {
+                    page: pageParam ?? 0,
+                    pageSize,
+                },
             });
+
             return response.workspaceSessions;
         },
+        getNextPageParam: (lastPage, pages) => {
+            const hasMore = lastPage.length === pageSize;
+            return hasMore ? pages.length : undefined;
+        },
         enabled: !!org,
     });
+
     return query;
 };
 
-export const getAuthProviderDescriptionsQueryKey = (orgId?: string) => ["workspace-sessions", { orgId }];
+export const getAuthProviderDescriptionsQueryKey = (orgId?: string, from?: Timestamp, to?: Timestamp) => [
+    "workspace-sessions",
+    { orgId, from, to },
+];

components/dashboard/src/insights/WorkspaceSessionGroup.tsx

@@ -64,11 +64,11 @@ export const WorkspaceSessionGroup = ({ id, sessions, member }: Props) => {
                         )}
                     </span>
                 </div>
-                <AccordionTrigger className="w-full">
-                    <div className="flex flex-col col-span-2 my-auto">
+                <div className="flex flex-col col-span-2 my-auto">
+                    <AccordionTrigger className="w-full">
                         <span className="text-gray-400 dark:text-gray-500 truncate font-medium">{sessions.length}</span>
-                    </div>
-                </AccordionTrigger>
+                    </AccordionTrigger>
+                </div>
             </div>
             <AccordionContent>
                 <div className="px-3 py-2 space-y-2">

components/dashboard/src/insights/download/DownloadInsights.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2024 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 { useCallback, useEffect, useMemo, useState } from "react";
+import { AlertTriangle } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import { Button } from "@podkit/buttons/Button";
+import { useDownloadSessionsCSV } from "./download-sessions";
+import { Timestamp } from "@bufbuild/protobuf";
+import saveAs from "file-saver";
+
+type Props = {
+    from: Timestamp;
+    to: Timestamp;
+    organizationId: string;
+    organizationName: string;
+};
+export const DownloadInsightsToast = ({ organizationId, from, to, organizationName }: Props) => {
+    const [progress, setProgress] = useState(0);
+
+    const queryArgs = useMemo(
+        () => ({
+            organizationName,
+            organizationId,
+            from,
+            to,
+            onProgress: setProgress,
+        }),
+        [from, organizationId, organizationName, to],
+    );
+    const { data, error, isLoading, abort, remove } = useDownloadSessionsCSV(queryArgs);
+
+    const saveFile = useCallback(() => {
+        if (!data || !data.blob) {
+            return;
+        }
+
+        saveAs(data.blob, data.filename);
+    }, [data]);
+
+    useEffect(() => {
+        return () => {
+            abort();
+            remove();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (isLoading) {
+        return (
+            <div>
+                <span>Preparing usage export</span>
+                Exporting page {progress}
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex flex-row items-start space-x-2">
+                <AlertTriangle className="w-5 h-5 mt-0.5" />
+                <div>
+                    <span>Error exporting your usage data:</span>
+                    <pre className="mt-2 whitespace-normal text-sm">{error.message}</pre>
+                </div>
+            </div>
+        );
+    }
+
+    if (!data || !data.blob || data.count === 0) {
+        return <span>No usage data for the selected period.</span>;
+    }
+
+    const readableSize = prettyBytes(data.blob.size);
+    const formattedCount = Intl.NumberFormat().format(data.count);
+
+    return (
+        <div className="flex flex-row items-start justify-between space-x-2">
+            <div>
+                <span>Usage export complete.</span>
+                <p className="dark:text-gray-500">
+                    {readableSize} &middot; {formattedCount} {data.count !== 1 ? "entries" : "entry"} exported
+                </p>
+            </div>
+            <div>
+                <Button onClick={saveFile} className="text-left text-base">
+                    Download CSV
+                </Button>
+            </div>
+        </div>
+    );
+};