Add audit log extra to table and improve UX (#50100)

* Add Audit Log events extra

* Rearrange audit log columns for readability

* Add expand/collapse all button for extra json

Author: bbovenzi

airflow-core/src/airflow/ui/src/pages/Events/Events.tsx

@@ -16,22 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
+import { Box, ButtonGroup, Code, Flex, Heading, IconButton, useDisclosure } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
+import { MdCompress, MdExpand } from "react-icons/md";
 import { useParams } from "react-router-dom";
 
 import { useEventLogServiceGetEventLogs } from "openapi/queries";
 import type { EventLogResponse } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import RenderedJsonField from "src/components/RenderedJsonField";
 import Time from "src/components/Time";
 
-const eventsColumn = (
-  dagId?: string,
-  runId?: string,
-  taskId?: string,
-): Array<ColumnDef<EventLogResponse>> => [
+type EventsColumn = {
+  dagId?: string;
+  open?: boolean;
+  runId?: string;
+  taskId?: string;
+};
+
+const eventsColumn = ({ dagId, open, runId, taskId }: EventsColumn): Array<ColumnDef<EventLogResponse>> => [
   {
     accessorKey: "when",
     cell: ({ row: { original } }) => <Time datetime={original.when} />,
@@ -41,6 +46,43 @@ const eventsColumn = (
       skeletonWidth: 10,
     },
   },
+  {
+    accessorKey: "event",
+    enableSorting: true,
+    header: "Event",
+    meta: {
+      skeletonWidth: 10,
+    },
+  },
+  {
+    accessorKey: "owner",
+    enableSorting: true,
+    header: "User",
+    meta: {
+      skeletonWidth: 10,
+    },
+  },
+  {
+    accessorKey: "extra",
+    cell: ({ row: { original } }) => {
+      if (original.extra !== null) {
+        try {
+          const parsed = JSON.parse(original.extra) as Record<string, unknown>;
+
+          return <RenderedJsonField content={parsed} jsonProps={{ collapsed: !open }} />;
+        } catch {
+          return <Code>{original.extra}</Code>;
+        }
+      }
+
+      return undefined;
+    },
+    enableSorting: false,
+    header: "Extra",
+    meta: {
+      skeletonWidth: 200,
+    },
+  },
   ...(Boolean(dagId)
     ? []
     : [
@@ -93,38 +135,18 @@ const eventsColumn = (
       skeletonWidth: 10,
     },
   },
-  {
-    accessorKey: "event",
-    enableSorting: true,
-    header: "Event",
-    meta: {
-      skeletonWidth: 10,
-    },
-  },
-  {
-    accessorKey: "owner",
-    enableSorting: true,
-    header: "User",
-    meta: {
-      skeletonWidth: 10,
-    },
-  },
 ];
 
 export const Events = () => {
   const { dagId, runId, taskId } = useParams();
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
   const [sort] = sorting;
+  const { onClose, onOpen, open } = useDisclosure();
 
   const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-when";
 
-  const {
-    data,
-    error: EventsError,
-    isFetching,
-    isLoading,
-  } = useEventLogServiceGetEventLogs(
+  const { data, error, isFetching, isLoading } = useEventLogServiceGetEventLogs(
     {
       dagId,
       limit: pagination.pageSize,
@@ -139,9 +161,32 @@ export const Events = () => {
 
   return (
     <Box>
-      <ErrorAlert error={EventsError} />
+      <Flex alignItems="center" justifyContent="space-between">
+        <Heading>Audit Log Events</Heading>
+        <ButtonGroup attached size="sm" variant="surface">
+          <IconButton
+            aria-label="Expand all extra json"
+            onClick={onOpen}
+            size="sm"
+            title="Expand all extra json"
+            variant="surface"
+          >
+            <MdExpand />
+          </IconButton>
+          <IconButton
+            aria-label="Collapse all extra json"
+            onClick={onClose}
+            size="sm"
+            title="Collapse all extra json"
+            variant="surface"
+          >
+            <MdCompress />
+          </IconButton>
+        </ButtonGroup>
+      </Flex>
+      <ErrorAlert error={error} />
       <DataTable
-        columns={eventsColumn(dagId, runId, taskId)}
+        columns={eventsColumn({ dagId, open, runId, taskId })}
         data={data ? data.event_logs : []}
         displayMode="table"
         initialState={tableURLState}