UI improvements

Author: filiptronicek

components/dashboard/src/Insights.tsx

@@ -96,8 +96,8 @@ export const Insights = () => {
                 )}
 
                 <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">
+                    <ItemsList className="mt-2 text-pk-content-secondary">
+                        <Item header={false} className="grid grid-cols-12 gap-x-3 bg-pk-surface-tertiary">
                             <ItemField className="col-span-2 my-auto">
                                 <span>Type</span>
                             </ItemField>
@@ -113,7 +113,7 @@ export const Insights = () => {
                         </Item>
 
                         {isLoading && (
-                            <div className="flex items-center justify-center w-full space-x-2 text-gray-400 text-sm pt-16 pb-40">
+                            <div className="flex items-center justify-center w-full space-x-2 text-pk-content-primary text-sm pt-16 pb-40">
                                 <LoadingState />
                                 <span>Loading usage...</span>
                             </div>

components/dashboard/src/insights/WorkspaceSessionGroup.tsx

@@ -28,51 +28,47 @@ export const WorkspaceSessionGroup = ({ id, sessions, member }: Props) => {
         <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">
+                    <span className="text-pk-content-primary text-md font-medium">{getType(workspace.spec?.type)}</span>
+                    <span className="text-sm text-pk-content-tertiary">
                         {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>
+                        <span className="truncate text-pk-content-primary text-md font-medium">{workspace.id}</span>
                     </div>
-                    <span className="text-sm truncate text-gray-400 dark:text-gray-500">
+                    <span className="text-sm truncate text-pk-content-secondary">
                         {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">
+                    <span className="text-right text-pk-content-secondary font-medium">
                         {workspace.spec?.type === WorkspaceSpec_WorkspaceType.PREBUILD ? (
-                            <>
+                            <div className="flex">
                                 <UsageIcon className="my-auto w-4 h-4 mr-1" />
-                                <span className="text-sm text-gray-400 dark:text-gray-500">Gitpod</span>
-                            </>
+                                <span className="text-sm">Gitpod</span>
+                            </div>
                         ) : (
                             <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>
+                                <span className="text-sm">{member?.fullName}</span>
                             </div>
                         )}
                     </span>
                 </div>
                 <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>
+                        <span className="text-pk-content-primary truncate font-medium">{sessions.length}</span>
                     </AccordionTrigger>
                 </div>
             </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>
+                    <h4 className="text-sm font-medium text-pk-content-primary">Workspace starts:</h4>
                     <ul className="space-y-1">
                         {sessions.map((session, index) => (
                             <WorkspaceSessionEntry key={session.id || index} session={session} index={index} />

components/dashboard/src/insights/download/download-sessions.ts

@@ -9,12 +9,13 @@ import {
     WorkspaceSession,
     WorkspaceSpec_WorkspaceType,
 } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
-import { workspaceClient } from "../../service/public-api";
+import { organizationClient, workspaceClient } from "../../service/public-api";
 import dayjs from "dayjs";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { noPersistence } from "../../data/setup";
 import { Timestamp } from "@bufbuild/protobuf";
+import type { OrganizationMember } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 
 const pageSize = 100;
 const maxPages = 100; // safety limit if something goes wrong with pagination
@@ -100,7 +101,19 @@ const downloadUsageCSV = async ({
         };
     }
 
-    const rows = records.map(transformSessionRecord).filter((r) => !!r);
+    const orgMembers = await organizationClient.listOrganizationMembers({
+        organizationId,
+    });
+
+    const rows = records
+        .map((record) => {
+            const member = orgMembers.members.find((m) => m.userId === record.workspace?.metadata?.ownerId);
+            if (!member) {
+                return null;
+            }
+            return transformSessionRecord(record, member);
+        })
+        .filter((r) => !!r);
     const fields = Object.keys(rows[0]) as (keyof ReturnType<typeof transformSessionRecord>)[];
 
     // TODO: look into a lib to handle this more robustly
@@ -123,6 +136,8 @@ const downloadUsageCSV = async ({
     // Prepend Header
     csvRows.unshift(fields.join(","));
 
+    console.log(csvRows);
+
     const blob = new Blob([`\ufeff${csvRows.join("\n")}`], {
         type: "text/csv;charset=utf-8",
     });
@@ -157,7 +172,7 @@ const displayTime = (timestamp?: Timestamp) => {
     return timestamp.toDate().toISOString();
 };
 
-export const transformSessionRecord = (session: WorkspaceSession) => {
+export const transformSessionRecord = (session: WorkspaceSession, member: OrganizationMember) => {
     const row = {
         // id: session.id, // although it's defined in the proto, it doesn't actually ever get applied
 
@@ -171,8 +186,8 @@ export const transformSessionRecord = (session: WorkspaceSession) => {
         workspaceId: session?.workspace?.id,
         instanceId: session.workspace?.status?.instanceId,
         configurationId: session.workspace?.metadata?.configurationId,
-        userId: session.workspace?.metadata?.ownerId,
-        userName: session.workspace?.metadata?.ownerId, // todo(ft): add actual name somehow
+        userId: member.userId,
+        userName: member.fullName, // todo(ft): add actual name somehow
         // userAvatarURL: metadata.userAvatarURL, // maybe?, probably not
 
         contextURL: session.workspace?.metadata?.originalContextUrl,