[server, dashboard] Review comments

Author: geropl

components/dashboard/src/images/usage-default.svg

@@ -219,19 +219,19 @@ function TeamUsage() {
                             <div className="flex flex-col w-full mb-8">
                                 <ItemsList className="mt-2 text-gray-500">
                                     <Item header={false} className="grid grid-cols-12 gap-x-3 bg-gray-100 mb-5">
-                                        <ItemField className="col-span-2 my-auto">
-                                            <span>Type</span>
+                                        <ItemField className="col-span-2 my-auto ">
+                                            <span className="font-medium">Type</span>
                                         </ItemField>
                                         <ItemField className="col-span-5 my-auto">
-                                            <span>ID</span>
+                                            <span className="font-medium">ID</span>
                                         </ItemField>
                                         <ItemField className="my-auto">
-                                            <span>Credits</span>
+                                            <span className="font-medium">Credits</span>
                                         </ItemField>
                                         <ItemField className="my-auto" />
                                         <ItemField className="col-span-3 my-auto cursor-pointer">
                                             <span
-                                                className="flex my-auto"
+                                                className="flex my-auto font-medium"
                                                 onClick={() => setIsStartedTimeDescending(!isStartedTimeDescending)}
                                             >
                                                 Timestamp
@@ -251,23 +251,23 @@ function TeamUsage() {
                                                     className="flex p-3 grid grid-cols-12 gap-x-3 justify-between transition ease-in-out rounded-xl focus:bg-gitpod-kumquat-light"
                                                 >
                                                     <div className="flex flex-col col-span-2 my-auto">
-                                                        <span className="text-gray-700 dark:text-gray-400">
+                                                        <span className="text-gray-600 dark:text-gray-100 text-md font-medium">
                                                             {getType(usage.workspaceType)}
                                                         </span>
                                                         <span className="text-sm text-gray-400 dark:text-gray-600">
                                                             {usage.workspaceClass}
                                                         </span>
                                                     </div>
                                                     <div className="flex flex-col col-span-5 my-auto">
-                                                        <span className="truncate text-gray-700 dark:text-gray-400">
+                                                        <span className="truncate text-gray-600 dark:text-gray-100 text-md font-medium">
                                                             {usage.workspaceId}
                                                         </span>
                                                         <span className="text-sm truncate text-gray-400 dark:text-gray-600">
                                                             {usage.contextURL && toRemoteURL(usage.contextURL)}
                                                         </span>
                                                     </div>
                                                     <div className="flex flex-col my-auto">
-                                                        <span className="text-right text-gray-700 dark:text-gray-400">
+                                                        <span className="text-right text-gray-700 dark:text-gray-400 font-semibold">
                                                             {usage.credits.toFixed(1)}
                                                         </span>
                                                         <span className="text-right truncate text-sm text-gray-400 dark:text-gray-600">
@@ -276,12 +276,12 @@ function TeamUsage() {
                                                     </div>
                                                     <div className="my-auto" />
                                                     <div className="flex flex-col col-span-3 my-auto">
-                                                        <span className="text-gray-400 truncate">
+                                                        <span className="text-gray-400 truncate font-medium">
                                                             {displayTime(usage.startTime)}
                                                         </span>
                                                         <div className="flex">
                                                             {usage.workspaceType === "prebuild" ? (
-                                                                <UsageIcon className="my-auto" />
+                                                                <UsageIcon className="my-auto w-4 h-4 mr-2" />
                                                             ) : (
                                                                 ""
                                                             )}

components/dashboard/src/teams/TeamUsage.tsx

@@ -37,7 +37,7 @@ export interface BillableSession {
 
 export interface ExtendedBillableSession extends BillableSession {
     contextURL?: string;
-    user?: User;
+    user?: Pick<User, "name" | "avatarUrl">;
 }
 
 export interface BillableSessionRequest {

components/gitpod-protocol/src/usage.ts

@@ -2175,13 +2175,19 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         const sessions = response.getSessionsList().map((s) => UsageService.mapBilledSession(s));
         const extendedSessions = await Promise.all(
             sessions.map(async (session) => {
-                let user;
                 const ws = await this.workspaceDb.trace(ctx).findWorkspaceAndInstance(session.workspaceId);
+                let profile: User.Profile | undefined = undefined;
                 if (session.workspaceType === "regular" && session.userId) {
-                    user = await this.userDB.findUserById(session.userId);
-                    return Object.assign(session, { contextURL: ws?.contextURL, user: user });
+                    const user = await this.userDB.findUserById(session.userId);
+                    if (user) {
+                        profile = User.getProfile(user);
+                    }
                 }
-                return Object.assign(session, { contextURL: ws?.contextURL });
+                return {
+                    ...session,
+                    contextURL: ws?.contextURL,
+                    user: profile ? { name: profile.name, avatarURL: profile.avatarURL } : undefined,
+                };
             }),
         );
         return extendedSessions;