fix(ui): issues in activites page

TabbyML · Apr 26, 2024 · 8b424a4 · 8b424a4
1 parent abe6298
commit 8b424a4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 14 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/activities/components/activity.tsx b/ee/tabby-ui/app/(dashboard)/activities/components/activity.tsx
@@ -1,11 +1,12 @@
 'use client'
 
 import React from 'react'
+import dynamic from 'next/dynamic'
 import { capitalize } from 'lodash-es'
 import moment from 'moment'
+import momentTimezone from 'moment-timezone'
 import { useTheme } from 'next-themes'
 import { DateRange } from 'react-day-picker'
-import ReactJson from 'react-json-view'
 import { toast } from 'sonner'
 import { useQuery } from 'urql'
 
@@ -19,7 +20,9 @@ import { Card, CardContent } from '@/components/ui/card'
 import {
   IconChevronLeft,
   IconChevronRight,
-  IconFileSearch
+  IconFileSearch,
+  IconChevronsDownUp,
+  IconChevronUpDown
 } from '@/components/ui/icons'
 import {
   Select,
@@ -45,6 +48,8 @@ import {
 import DateRangePicker from '@/components/date-range-picker'
 import LoadingWrapper from '@/components/loading-wrapper'
 
+const ReactJson = dynamic(() => import('react-json-view'), { ssr: false });
+
 const DEFAULT_DATE_RANGE = '-24h'
 const KEY_SELECT_ALL = 'all'
 
@@ -136,7 +141,6 @@ export default function Activity() {
     setPage(1)
     setQueryVariables({ last: DEFAULT_PAGE_SIZE })
   }
-
   return (
     <>
       <div className="flex w-full flex-col">
@@ -145,7 +149,7 @@ export default function Activity() {
             <div className="flex flex-col gap-y-2 xl:flex-row xl:items-center xl:justify-between">
               <p className="text-sm text-muted-foreground">{`View raw events generated by team members' activities while interacting with Tabby.`}</p>
 
-              {!fetching && (
+              {members.length > 0 && (
                 <div className="flex flex-col items-center gap-2 md:flex-row xl:ml-auto">
                   <Select
                     defaultValue={KEY_SELECT_ALL}
@@ -210,13 +214,14 @@ export default function Activity() {
                           <Table>
                             <TableHeader>
                               <TableRow>
-                                <TableHead className="pl-4 md:w-[30%] md:pl-8">
+                                <TableHead></TableHead>
+                                <TableHead className="md:w-[30%]">
                                   Event
                                 </TableHead>
                                 <TableHead className="md:w-[40%]">
                                   User
                                 </TableHead>
-                                <TableHead className="pl-4 md:w-[30%] md:pr-8">
+                                <TableHead className="md:w-[30%] md:pr-8">
                                   Time
                                 </TableHead>
                               </TableRow>
@@ -340,7 +345,13 @@ function ActivityRow({
         className="cursor-pointer text-sm"
         onClick={() => setIsExpanded(!isExpanded)}
       >
-        <TableCell className="pl-4 font-medium md:pl-8">
+        <TableCell className="pl-4 pr-0">
+          <div className="flex h-8 w-8 items-center justify-center rounded hover:bg-muted">
+            {isExpanded && <IconChevronsDownUp />}
+            {!isExpanded && <IconChevronUpDown />}
+          </div>
+        </TableCell>
+        <TableCell className="font-medium">
           <Tooltip>
             <TooltipTrigger>{capitalize(activity.kind)}</TooltipTrigger>
             <TooltipContent>
@@ -352,16 +363,22 @@ function ActivityRow({
           {members.find(user => user.id === activity.userId)?.email ||
             activity.userId}
         </TableCell>
-        <TableCell className="pl-4 md:pr-8">
-          {moment(activity.createdAt).isBefore(moment().subtract(1, 'days'))
-            ? moment(activity.createdAt).format('YYYY-MM-DD HH:mm')
-            : moment(activity.createdAt).fromNow()}
+        <TableCell className="pr-4 md:pr-8">
+          <Tooltip>
+            <TooltipTrigger>{moment(activity.createdAt).isBefore(moment().subtract(1, 'days'))
+              ? moment(activity.createdAt).format('YYYY-MM-DD HH:mm')
+              : moment(activity.createdAt).fromNow()}</TooltipTrigger>
+            <TooltipContent>
+              <p className="py-0.5"><b className="mr-1 inline-block w-7">UTC:</b>{moment.utc(activity.createdAt).format('YYYY-MM-DD HH:mm:ss')}</p>
+              <p className="py-0.5"><b className="mr-1 inline-block w-7">{momentTimezone.tz(momentTimezone.tz.guess()).format('z')}:</b>{moment(activity.createdAt).format('YYYY-MM-DD HH:mm:ss')}</p>
+            </TooltipContent>
+          </Tooltip>
         </TableCell>
       </TableRow>
 
       {isExpanded && (
         <TableRow key={`${activity.id}-2`} className="w-full bg-muted/30">
-          <TableCell className="px-8 font-medium" colSpan={4}>
+          <TableCell className="px-6 font-medium" colSpan={4}>
             <ReactJson
               src={payloadJson}
               name={false}

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 // FIXME(wwayne): Review each icons and consider re-export from `lucide-react`.
-import { BookOpenText, Mail } from 'lucide-react'
+import { BookOpenText, Mail, ChevronsDownUp } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 
@@ -1352,6 +1352,25 @@ function IconMail({ className, ...props }: React.ComponentProps<typeof Mail>) {
   return <Mail className={cn('h4 w-4', className)} {...props} />
 }
 
+function IconChevronsDownUp({ className, ...props }: React.ComponentProps<typeof ChevronsDownUp>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('h-4 w-4', className)}
+      {...props}
+    >
+      <path d="m7 20 5-5 5 5"/>
+      <path d="m7 4 5 5 5-5"/>
+    </svg>
+  )
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1421,5 +1440,6 @@ export {
   IconBarChart,
   IconActivity,
   IconBookOpenText,
-  IconMail
+  IconMail,
+  IconChevronsDownUp
 }
diff --git a/ee/tabby-ui/package.json b/ee/tabby-ui/package.json
@@ -68,6 +68,7 @@
     "lucide-react": "^0.365.0",
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.5.45",
     "nanoid": "^4.0.2",
     "next": "^13.4.7",
     "next-themes": "^0.2.1",

diff --git a/ee/tabby-ui/yarn.lock b/ee/tabby-ui/yarn.lock
@@ -6424,6 +6424,13 @@ mitt@^3.0.1:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
+moment-timezone@^0.5.45:
+  version "0.5.45"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.45.tgz#cb685acd56bac10e69d93c536366eb65aa6bcf5c"
+  integrity sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==
+  dependencies:
+    moment "^2.29.4"
+
 moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"