[dashboard] Org Insights page

Author: filiptronicek

components/dashboard/package.json

@@ -10,6 +10,7 @@
     "@gitpod/gitpod-protocol": "0.1.5",
     "@gitpod/public-api": "0.1.5",
     "@gitpod/public-api-common": "0.1.5",
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",

components/dashboard/src/Insights.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 type { OrganizationMember } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { LoadingState } from "@podkit/loading/LoadingState";
+import { Heading2, Subheading } from "@podkit/typography/Headings";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { Accordion } from "./components/accordion/Accordion";
+import Alert from "./components/Alert";
+import Header from "./components/Header";
+import { Item, ItemField, ItemsList } from "./components/ItemsList";
+import { useWorkspaceSessions } from "./data/insights/list-workspace-sessions-query";
+import { useListOrganizationMembers } from "./data/organizations/members-query";
+import { WorkspaceSessionGroup } from "./insights/WorkspaceSessionGroup";
+import { gitpodHostUrl } from "./service/service";
+
+export const Insights = () => {
+    const { data, error: errorMessage, isLoading } = useWorkspaceSessions();
+    const membersQuery = useListOrganizationMembers();
+    const members: OrganizationMember[] = useMemo(() => membersQuery.data || [], [membersQuery.data]);
+
+    const sessions = data ?? [];
+    const grouped = Object.groupBy(sessions, (ws) => ws.workspace?.id ?? "unknown");
+
+    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 px-3",
+                        "md:flex-row md:items-center md:space-x-4 md:space-y-0",
+                    )}
+                ></div>
+
+                {errorMessage && (
+                    <Alert type="error" className="mt-4">
+                        {errorMessage}
+                    </Alert>
+                )}
+
+                <div className="flex flex-col w-full mb-8">
+                    <ItemsList className="mt-2 text-gray-400 dark:text-gray-500">
+                        <Item header={false} className="grid grid-cols-12 gap-x-3 bg-gray-100 dark:bg-gray-800">
+                            <ItemField className="col-span-2 my-auto">
+                                <span>Type</span>
+                            </ItemField>
+                            <ItemField className="col-span-5 my-auto">
+                                <span>ID</span>
+                            </ItemField>
+                            <ItemField className="col-span-3 my-auto">
+                                <span>User</span>
+                            </ItemField>
+                            <ItemField className="col-span-2 my-auto">
+                                <span>Sessions</span>
+                            </ItemField>
+                        </Item>
+
+                        {isLoading && (
+                            <div className="flex items-center justify-center w-full space-x-2 text-gray-400 text-sm pt-16 pb-40">
+                                <LoadingState />
+                                <span>Loading usage...</span>
+                            </div>
+                        )}
+
+                        {!isLoading && (
+                            <Accordion type="multiple" className="w-full">
+                                {Object.entries(grouped).map(([id, sessions]) => {
+                                    if (!sessions?.length) {
+                                        return null;
+                                    }
+                                    const member = members.find(
+                                        (m) => m.userId === sessions[0]?.workspace?.metadata?.ownerId,
+                                    );
+
+                                    return (
+                                        <WorkspaceSessionGroup key={id} id={id} sessions={sessions} member={member} />
+                                    );
+                                })}
+                            </Accordion>
+                        )}
+
+                        {/* No results */}
+                        {!isLoading && sessions.length === 0 && !errorMessage && (
+                            <div className="flex flex-col w-full mb-8">
+                                <Heading2 className="text-center mt-8">No sessions found.</Heading2>
+                                <Subheading className="text-center mt-1">
+                                    Have you started any
+                                    <a className="gp-link" href={gitpodHostUrl.asWorkspacePage().toString()}>
+                                        {" "}
+                                        workspaces
+                                    </a>{" "}
+                                    in the last 30 days or checked your other organizations?
+                                </Subheading>
+                            </div>
+                        )}
+                    </ItemsList>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Insights;

components/dashboard/src/app/AppRoutes.tsx

@@ -17,11 +17,9 @@ import {
     settingsPathPersonalAccessTokenCreate,
     settingsPathPersonalAccessTokenEdit,
     settingsPathPersonalAccessTokens,
-    settingsPathPlans,
     settingsPathPreferences,
     settingsPathSSHKeys,
     settingsPathVariables,
-    switchToPAYGPathMain,
     usagePathMain,
 } from "../user-settings/settings.routes";
 import { getURLHash, isGitpodIo } from "../utils";
@@ -69,6 +67,7 @@ const WorkspacesSearch = React.lazy(() => import(/* webpackPrefetch: true */ "..
 const ProjectsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/ProjectsSearch"));
 const TeamsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/TeamsSearch"));
 const Usage = React.lazy(() => import(/* webpackPrefetch: true */ "../Usage"));
+const Insights = React.lazy(() => import(/* webpackPrefetch: true */ "../Insights"));
 const ConfigurationListPage = React.lazy(
     () => import(/* webpackPrefetch: true */ "../repositories/list/RepositoryList"),
 );
@@ -125,24 +124,10 @@ export const AppRoutes = () => {
                             <Route path="/open">
                                 <Redirect to="/new" />
                             </Route>
-                            {/* TODO(gpl): Remove once we don't need the redirect anymore */}
-                            <Route
-                                path={[
-                                    switchToPAYGPathMain,
-                                    settingsPathPlans,
-                                    "/old-team-plans",
-                                    "/teams",
-                                    "/subscription",
-                                    "/upgrade-subscription",
-                                    "/plans",
-                                ]}
-                                exact
-                            >
-                                <Redirect to={"/billing"} />
-                            </Route>
                             <Route path={workspacesPathMain} exact component={Workspaces} />
                             <Route path={settingsPathAccount} exact component={Account} />
                             <Route path={usagePathMain} exact component={Usage} />
+                            <Route path={"/insights"} exact component={Insights} />
                             <Route path={settingsPathIntegrations} exact component={Integrations} />
                             <Route path={settingsPathNotifications} exact component={Notifications} />
                             <Route path={settingsPathVariables} exact component={EnvironmentVariables} />

components/dashboard/src/components/accordion/Accordion.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { cn } from "@podkit/lib/cn";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+        {...props}
+    >
+        <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { WorkspaceSession } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { useQuery } from "@tanstack/react-query";
+import { workspaceClient } from "../../service/public-api";
+import { useCurrentOrg } from "../organizations/orgs-query";
+
+export const useWorkspaceSessions = () => {
+    const { data: org } = useCurrentOrg();
+
+    const query = useQuery<WorkspaceSession[]>({
+        queryKey: getAuthProviderDescriptionsQueryKey(org?.id),
+        queryFn: async () => {
+            if (!org) {
+                throw new Error("No org specified");
+            }
+            const response = await workspaceClient.listWorkspaceSessions({
+                organizationId: org.id,
+            });
+            return response.workspaceSessions;
+        },
+        enabled: !!org,
+    });
+    return query;
+};
+
+export const getAuthProviderDescriptionsQueryKey = (orgId?: string) => ["workspace-sessions", { orgId }];

components/dashboard/src/insights/WorkspaceSession.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { WorkspacePhase_Phase, WorkspaceSession } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { displayTime } from "./WorkspaceSessionGroup";
+
+type Props = {
+    session: WorkspaceSession;
+    index: number;
+};
+export const WorkspaceSessionEntry = ({ session, index }: Props) => {
+    const isRunning = session?.workspace?.status?.phase?.name === WorkspacePhase_Phase.RUNNING;
+
+    return (
+        <li key={index} className="text-sm text-gray-600 dark:text-gray-300">
+            {session.creationTime ? displayTime(session.creationTime) : "n/a"} (
+            {session.workspace?.status?.instanceId.slice(0, 7) || "No instance ID"}){isRunning ? " - running" : ""}
+        </li>
+    );
+};

components/dashboard/src/insights/WorkspaceSessionGroup.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 { Timestamp } from "@bufbuild/protobuf";
+import { OrganizationMember } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { WorkspaceSpec_WorkspaceType } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "../components/accordion/Accordion";
+import { ReactComponent as UsageIcon } from "../images/usage-default.svg";
+import { toRemoteURL } from "../projects/render-utils";
+import { DisplayName } from "../usage/UsageEntry";
+import { WorkspaceSessionEntry } from "./WorkspaceSession";
+
+type Props = {
+    id: string;
+    sessions: any[];
+    member?: OrganizationMember;
+};
+export const WorkspaceSessionGroup = ({ id, sessions, member }: Props) => {
+    if (!sessions?.length) {
+        return null;
+    }
+    const workspace = sessions[0].workspace!;
+
+    return (
+        <AccordionItem key={id} value={id}>
+            <div className="w-full p-3 grid grid-cols-12 gap-x-3 justify-between transition ease-in-out rounded-xl">
+                <div className="flex flex-col col-span-2 my-auto">
+                    <span className="text-gray-600 dark:text-gray-100 text-md font-medium">
+                        {getType(workspace.spec?.type)}
+                    </span>
+                    <span className="text-sm text-gray-400 dark:text-gray-500">
+                        {workspace.spec?.class ? <DisplayName workspaceClass={workspace?.spec?.class} /> : "n/a"}
+                    </span>
+                </div>
+                <div className="flex flex-col col-span-5 my-auto">
+                    <div className="flex">
+                        <span className="truncate text-gray-600 dark:text-gray-100 text-md font-medium">
+                            {workspace.id}
+                        </span>
+                    </div>
+                    <span className="text-sm truncate text-gray-400 dark:text-gray-500">
+                        {workspace.metadata?.originalContextUrl && toRemoteURL(workspace.metadata?.originalContextUrl)}
+                    </span>
+                </div>
+                <div className="flex flex-col col-span-3 my-auto">
+                    <span className="text-right text-gray-500 dark:text-gray-400 font-medium">
+                        {workspace.spec?.type === WorkspaceSpec_WorkspaceType.PREBUILD ? (
+                            <>
+                                <UsageIcon className="my-auto w-4 h-4 mr-1" />
+                                <span className="text-sm text-gray-400 dark:text-gray-500">Gitpod</span>
+                            </>
+                        ) : (
+                            <div className="flex">
+                                <img
+                                    className="my-auto rounded-full w-4 h-4 inline-block align-text-bottom mr-1 overflow-hidden"
+                                    src={member?.avatarUrl ?? ""}
+                                    alt=""
+                                />
+                                <span className="text-sm text-gray-400 dark:text-gray-500">{member?.fullName}</span>
+                            </div>
+                        )}
+                    </span>
+                </div>
+                <AccordionTrigger className="w-full">
+                    <div className="flex flex-col col-span-2 my-auto">
+                        <span className="text-gray-400 dark:text-gray-500 truncate font-medium">{sessions.length}</span>
+                    </div>
+                </AccordionTrigger>
+            </div>
+            <AccordionContent>
+                <div className="px-3 py-2 space-y-2">
+                    <h4 className="text-sm font-medium text-gray-500 dark:text-gray-400">Workspace starts:</h4>
+                    <ul className="space-y-1">
+                        {sessions.map((session, index) => (
+                            <WorkspaceSessionEntry key={session.id || index} session={session} index={index} />
+                        ))}
+                    </ul>
+                </div>
+            </AccordionContent>
+        </AccordionItem>
+    );
+};
+
+const getType = (type?: WorkspaceSpec_WorkspaceType) => {
+    switch (type) {
+        case WorkspaceSpec_WorkspaceType.PREBUILD:
+            return "Prebuild";
+        case WorkspaceSpec_WorkspaceType.REGULAR:
+            return "Workspace";
+        default:
+            return "Unknown";
+    }
+};
+
+export const displayTime = (time: Timestamp) => {
+    const options: Intl.DateTimeFormatOptions = {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+    };
+
+    return time.toDate().toLocaleDateString(undefined, options).replace("at ", "");
+};