AIP-38 | Add Task Instance Details

[bbovenzi]

After #44656 is merged. We should fill in the Task Instance "advanced" Details tab. This should list all task instance details which we don't already display in the page header.

We can show these details in a simple key/value table.

TI Details can change from try to try so it should also use a Try number selector like #44663.

[bbovenzi]

Example from the old UI:

[dauinh]

hi @bbovenzi! Can I try this issue?

[bbovenzi]

Yeah, once #44656 is merged you should be good to go.

[dauinh]

hi @bbovenzi, I'm having trouble implementing components like Status or Time into the data table. The code below is my current implementation. I have also tried modifying columns definition, but stuck at how to implement different components for one column. Please let me know if you have any suggestion or insight. Thank you!

Code:

const formattedData = [
    {key: "Status", value: task?.state && <Status state={task.state}>{task.state}</Status>},
    ...
]

Expected:

Current:

Also, how do I remove header title without causing error?

[bbovenzi]

@dauinh We don't need the full DataTable component, just a simple Table is fine. Check out the chakra docs for examples. I believe we can simply not define Table.Header and just write each detail row as jsx instead of creating a formattedData array.

[dauinh]

got it, thank you!