From 6934b461d04f58cf10cb4b7a8f98087677bedf36 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent@astronomer.io>
Date: Mon, 18 Mar 2024 22:38:36 -0700
Subject: [PATCH] Add refetch button to audit log, format extra (#38276)

---
 .../static/js/components/NewTable/NewCells.tsx    |  3 ++-
 airflow/www/static/js/dag/details/AuditLog.tsx    | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/airflow/www/static/js/components/NewTable/NewCells.tsx b/airflow/www/static/js/components/NewTable/NewCells.tsx
index 40cf40a53cfea..e3b097ff31ba9 100644
--- a/airflow/www/static/js/components/NewTable/NewCells.tsx
+++ b/airflow/www/static/js/components/NewTable/NewCells.tsx
@@ -29,5 +29,6 @@ export const TimeCell = ({ getValue }: any) => {
 
 export const CodeCell = ({ getValue }: any) => {
   const value = getValue();
-  return value ? <Code>{JSON.stringify(value)}</Code> : null;
+  const code = typeof value === "string" ? JSON.parse(value) : value;
+  return code ? <Code>{JSON.stringify(code)}</Code> : null;
 };
diff --git a/airflow/www/static/js/dag/details/AuditLog.tsx b/airflow/www/static/js/dag/details/AuditLog.tsx
index 15f0900741a3a..11f5447a98ad6 100644
--- a/airflow/www/static/js/dag/details/AuditLog.tsx
+++ b/airflow/www/static/js/dag/details/AuditLog.tsx
@@ -28,6 +28,7 @@ import {
   FormLabel,
   Input,
   HStack,
+  Button,
 } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { snakeCase } from "lodash";
@@ -40,6 +41,7 @@ import type { EventLog } from "src/types/api-generated";
 import { NewTable } from "src/components/NewTable/NewTable";
 import { useTableURLState } from "src/components/NewTable/useTableUrlState";
 import { CodeCell, TimeCell } from "src/components/NewTable/NewCells";
+import { MdRefresh } from "react-icons/md";
 
 interface Props {
   taskId?: string;
@@ -60,7 +62,7 @@ const AuditLog = ({ taskId, run }: Props) => {
   const sort = tableURLState.sorting[0];
   const orderBy = sort ? `${sort.desc ? "-" : ""}${snakeCase(sort.id)}` : "";
 
-  const { data, isLoading, isFetching } = useEventLogs({
+  const { data, isLoading, isFetching, refetch } = useEventLogs({
     dagId,
     taskId,
     runId: run?.runId || undefined,
@@ -121,7 +123,16 @@ const AuditLog = ({ taskId, run }: Props) => {
       ref={logRef}
       overflowY="auto"
     >
-      <Flex justifyContent="right">
+      <Flex justifyContent="right" mb={2}>
+        <Button
+          leftIcon={<MdRefresh />}
+          onClick={() => refetch()}
+          variant="outline"
+          colorScheme="blue"
+          mr={2}
+        >
+          Refresh
+        </Button>
         <LinkButton href={getMetaValue("audit_log_url")}>
           View full cluster Audit Log
         </LinkButton>