fix(audit-logs): condition organization max limit reached (#1782)

Qovery · Dec 11, 2024 · cdf03b9 · cdf03b9
1 parent 151d991
commit cdf03b9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 31 deletions.
diff --git a/libs/pages/events/src/lib/feature/page-general-feature/page-general-feature.tsx b/libs/pages/events/src/lib/feature/page-general-feature/page-general-feature.tsx
@@ -126,6 +126,7 @@ export function PageGeneralFeature() {
   return (
     <PageGeneral
       events={eventsData?.events || eventsFactoryMock(30)}
+      organizationMaxLimitReached={eventsData?.organization_max_limit_reached ?? false}
       isLoading={isLoading}
       onNext={onNext}
       onPrevious={onPrevious}

diff --git a/libs/pages/events/src/lib/ui/page-general/page-general.tsx b/libs/pages/events/src/lib/ui/page-general/page-general.tsx
@@ -6,6 +6,7 @@ import {
 } from 'qovery-typescript-axios'
 import { type Dispatch, type SetStateAction } from 'react'
 import {
+  Button,
   Icon,
   Pagination,
   Section,
@@ -21,6 +22,7 @@ export interface PageGeneralProps {
   isLoading: boolean
   showIntercom: () => void
   handleClearFilter: () => void
+  organizationMaxLimitReached: boolean
   events?: OrganizationEventResponse[]
   placeholderEvents?: OrganizationEventResponse[]
   onNext: () => void
@@ -82,7 +84,7 @@ const dataHead: TableHeadProps<OrganizationEventResponse>[] = [
   },
 ]
 
-const columnsWidth = '14% 14% 12% 15% 10% 22% 11%'
+const columnsWidth = '18% 11% 10% 15% 10% 20% 16%'
 
 export function PageGeneral({
   isLoading,
@@ -99,18 +101,9 @@ export function PageGeneral({
   handleClearFilter,
   organization,
   showIntercom,
+  organizationMaxLimitReached,
 }: PageGeneralProps) {
   const auditLogsRetentionInDays = organization?.organization_plan?.audit_logs_retention_in_days ?? 30
-  const currentDate = new Date().getTime()
-  const retentionLimitDate = currentDate - auditLogsRetentionInDays * 24 * 60 * 60 * 1000
-
-  const filteredEvents =
-    events?.filter((event) => {
-      if (!event.timestamp) return null
-      return new Date(event.timestamp).getTime() >= retentionLimitDate
-    }) || []
-
-  const checkIfEventsAreFiltered = filteredEvents.length !== events?.length
 
   return (
     <Section className="grow p-8">
@@ -132,7 +125,7 @@ export function PageGeneral({
             placeholderEvents?.map((event) => (
               <RowEventFeature key={event.timestamp} event={event} columnsWidth={columnsWidth} isPlaceholder />
             ))
-          ) : !checkIfEventsAreFiltered && events.length === 0 ? (
+          ) : !organizationMaxLimitReached && events?.length === 0 ? (
             <div className="flex h-[30vh] items-center justify-center px-5 py-4 text-center">
               <div>
                 <Icon iconName="wave-pulse" className="text-neutral-350" />
@@ -142,21 +135,18 @@ export function PageGeneral({
                 </p>
               </div>
             </div>
-          ) : checkIfEventsAreFiltered ? (
+          ) : organizationMaxLimitReached ? (
             <div>
-              {filteredEvents?.map((event) => (
+              {events?.map((event) => (
                 <RowEventFeature key={event.timestamp} event={event} columnsWidth={columnsWidth} />
               ))}
               <div className="flex h-14 items-center justify-center border-b border-neutral-200">
-                <p className="flex gap-1 text-sm text-neutral-400">
+                <p className="flex items-center gap-3 text-sm text-neutral-400">
                   {auditLogsRetentionInDays} days limit reached.
-                  {/* TODO: add a real button */}
-                  <span
-                    className="cursor-pointer font-medium text-sky-500 transition-colors hover:text-sky-600"
-                    onClick={() => showIntercom()}
-                  >
-                    Upgrade your plan to see more
-                  </span>
+                  <Button type="button" variant="outline" className="gap-1.5" onClick={() => showIntercom()}>
+                    <span>Upgrade plan</span>
+                    <Icon iconName="arrow-up-right-from-square" className="text-neutral-400" />
+                  </Button>
                 </p>
               </div>
               {[...Array(3)].map((_, index) => (
@@ -166,17 +156,17 @@ export function PageGeneral({
                 >
                   {[...Array(6)].map((_, index) => (
                     <div key={index} className="flex items-center gap-4">
-                      {index === 0 ? <Icon iconName="lock-keyhole" className="text-sm text-neutral-350" /> : null}
+                      {index === 0 ? (
+                        <Icon iconName="lock-keyhole" iconStyle="regular" className="text-sm text-neutral-350" />
+                      ) : null}
                       <Skeleton key={index} height={10} width={116} />
                     </div>
                   ))}
                 </div>
               ))}
             </div>
           ) : (
-            filteredEvents?.map((event) => (
-              <RowEventFeature key={event.timestamp} event={event} columnsWidth={columnsWidth} />
-            ))
+            events?.map((event) => <RowEventFeature key={event.timestamp} event={event} columnsWidth={columnsWidth} />)
           )}
         </div>
       </Table>

diff --git a/libs/pages/events/src/lib/ui/row-event/row-event.tsx b/libs/pages/events/src/lib/ui/row-event/row-event.tsx
@@ -23,7 +23,7 @@ import {
   SETTINGS_URL,
   SETTINGS_WEBHOOKS,
 } from '@qovery/shared/routes'
-import { Badge, Icon, IconAwesomeEnum, Skeleton, Tooltip } from '@qovery/shared/ui'
+import { Badge, Icon, IconAwesomeEnum, Skeleton, Tooltip, Truncate } from '@qovery/shared/ui'
 import { dateFullFormat, dateUTCString } from '@qovery/shared/util-dates'
 import { upperCaseFirstLetter } from '@qovery/shared/util-js'
 import CopyButton from '../copy-button/copy-button'
@@ -240,10 +240,8 @@ export function RowEvent(props: RowEventProps) {
           </Skeleton>
         </div>
         <div className="px-4">
-          <Skeleton height={10} width={80} show={isPlaceholder}>
-            <Tooltip content={event.triggered_by || ''}>
-              <span className="truncate">{event.triggered_by}</span>
-            </Tooltip>
+          <Skeleton height={10} width={80} show={isPlaceholder} className="truncate">
+            <Truncate truncateLimit={30} text={event.triggered_by ?? ''} />
           </Skeleton>
         </div>
         <div className="px-4">