Utilize a unique ID for activity logs to improve rendering perf

Author: DaneEveritt

app/Transformers/Api/Client/ActivityLogTransformer.php

@@ -18,6 +18,10 @@ public function getResourceName(): string
     public function transform(ActivityLog $model): array
     {
         return [
+            // This is not for security, it is only to provide a unique identifier to
+            // the front-end for each entry to improve rendering performance since there
+            // is nothing else sufficiently unique to key off at this point.
+            'id' => sha1($model->id),
             'batch' => $model->batch,
             'event' => $model->event,
             'is_api' => !is_null($model->api_key_id),

resources/scripts/api/definitions/user/models.d.ts

@@ -20,6 +20,7 @@ interface SSHKey extends Model {
 }
 
 interface ActivityLog extends Model<'actor'> {
+    id: string;
     batch: UUID | null;
     event: string;
     ip: string | null;

resources/scripts/api/definitions/user/transformers.ts

@@ -31,6 +31,7 @@ export default class Transformers {
         const { actor } = attributes.relationships || {};
 
         return {
+            id: attributes.id,
             batch: attributes.batch,
             event: attributes.event,
             ip: attributes.ip,

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -49,7 +49,7 @@ export default () => {
             ) : (
                 <div className={'bg-gray-700'}>
                     {data?.items.map((activity) => (
-                        <ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}>
+                        <ActivityLogEntry key={activity.id} activity={activity}>
                             {typeof activity.properties.useragent === 'string' && (
                                 <Tooltip content={activity.properties.useragent} placement={'top'}>
                                     <span>

resources/scripts/components/server/ServerActivityLogContainer.tsx

@@ -52,7 +52,7 @@ export default () => {
             ) : (
                 <div className={'bg-gray-700'}>
                     {data?.items.map((activity) => (
-                        <ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}>
+                        <ActivityLogEntry key={activity.id} activity={activity}>
                             <span />
                         </ActivityLogEntry>
                     ))}