Add triggerer info and extra links section to task instance details tab.

airflow/ui/src/pages/Run/Details.tsx

@@ -118,7 +118,7 @@ export const Details = () => {
             </Table.Row>
             {dagRun.external_trigger ? (
               <Table.Row>
-                <Table.Cell>Externally Trigger Source</Table.Cell>
+                <Table.Cell>External Trigger Source</Table.Cell>
                 <Table.Cell>{dagRun.triggered_by}</Table.Cell>
               </Table.Row>
             ) : undefined}

airflow/ui/src/pages/TaskInstance/Details.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, HStack, Table } from "@chakra-ui/react";
+import { Box, Flex, HStack, Table, Heading } from "@chakra-ui/react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 import {
@@ -29,6 +29,9 @@ import Time from "src/components/Time";
 import { ClipboardRoot, ClipboardIconButton } from "src/components/ui";
 import { getDuration, useAutoRefresh, isStatePending } from "src/utils";
 
+import { ExtraLinks } from "./ExtraLinks";
+import { TriggererInfo } from "./TriggererInfo";
+
 export const Details = () => {
   const { dagId = "", runId = "", taskId = "" } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -82,6 +85,13 @@ export const Details = () => {
           taskInstance={taskInstance}
         />
       )}
+      <ExtraLinks />
+      {taskInstance !== undefined && (taskInstance.trigger ?? taskInstance.triggerer_job) ? (
+        <TriggererInfo taskInstance={taskInstance} />
+      ) : undefined}
+      <Heading py={2} size="sm">
+        Task Instance Info
+      </Heading>
       <Table.Root striped>
         <Table.Body>
           <Table.Row>

airflow/ui/src/pages/TaskInstance/ExtraLinks.tsx

@@ -0,0 +1,53 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Button, Heading, HStack } from "@chakra-ui/react";
+import { useParams, useSearchParams } from "react-router-dom";
+
+import { useTaskInstanceServiceGetExtraLinks } from "openapi/queries";
+
+export const ExtraLinks = () => {
+  const { dagId = "", runId = "", taskId = "" } = useParams();
+  const [searchParams] = useSearchParams();
+  const mapIndexParam = searchParams.get("map_index");
+  const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
+
+  const { data } = useTaskInstanceServiceGetExtraLinks({
+    dagId,
+    dagRunId: runId,
+    mapIndex,
+    taskId,
+  });
+
+  return data && Object.keys(data).length > 0 ? (
+    <Box py={1}>
+      <Heading size="sm"> Extra Links </Heading>
+      <HStack gap={2} py={2}>
+        {Object.entries(data).map(([key, value], _) =>
+          value === null ? undefined : (
+            <Button asChild colorPalette="blue" key={key} variant="surface">
+              <a href={value} rel="noreferrer" target="_blank">
+                {key}
+              </a>
+            </Button>
+          ),
+        )}
+      </HStack>
+    </Box>
+  ) : undefined;
+};

airflow/ui/src/pages/TaskInstance/TriggererInfo.tsx

@@ -0,0 +1,58 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Table, Heading } from "@chakra-ui/react";
+
+import type { TaskInstanceResponse } from "openapi/requests/types.gen";
+import Time from "src/components/Time";
+
+export const TriggererInfo = ({ taskInstance }: { readonly taskInstance: TaskInstanceResponse }) => (
+  <Box py={1}>
+    <Heading py={1} size="sm">
+      Triggerer Info
+    </Heading>
+    <Table.Root striped>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Trigger class</Table.Cell>
+          <Table.Cell>{taskInstance.trigger?.classpath}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Trigger ID</Table.Cell>
+          <Table.Cell>{taskInstance.trigger?.id}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Trigger creation time</Table.Cell>
+          <Table.Cell>
+            <Time datetime={taskInstance.trigger?.created_date} />
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Assigned triggerer</Table.Cell>
+          <Table.Cell>{taskInstance.triggerer_job?.hostname}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Latest triggerer heartbeat</Table.Cell>
+          <Table.Cell>
+            <Time datetime={taskInstance.triggerer_job?.latest_heartbeat} />
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table.Root>
+  </Box>
+);