Show instance name instead of ID in execution task

Applies to the replica and migration details pages in the executions
panel.

src/components/modules/TransferModule/Executions/Executions.tsx

@@ -27,6 +27,7 @@ import type { Execution, ExecutionTasks } from '@src/@types/Execution'
 import { ThemePalette } from '@src/components/Theme'
 import DateUtils from '@src/utils/DateUtils'
 
+import { Instance } from '@src/@types/Instance'
 import executionImage from './images/execution.svg'
 
 const Wrapper = styled.div<any>``
@@ -88,6 +89,7 @@ type Props = {
   executionsTasks: ExecutionTasks[],
   loading: boolean,
   tasksLoading: boolean,
+  instancesDetails: Instance[],
   onChange: (executionId: string) => void,
   onCancelExecutionClick: (execution: Execution | null, force?: boolean) => void,
   onDeleteExecutionClick?: (execution: Execution | null) => void,
@@ -335,6 +337,7 @@ class Executions extends React.Component<Props, State> {
     return (
       <Tasks
         loading={this.props.tasksLoading}
+        instancesDetails={this.props.instancesDetails}
         items={this.props.executionsTasks
           .find(e => e.id === this.state.selectedExecution?.id)?.tasks || []}
       />

src/components/modules/TransferModule/MigrationDetailsContent/MigrationDetailsContent.tsx

@@ -119,6 +119,7 @@ class MigrationDetailsContent extends React.Component<Props> {
       <Tasks
         items={this.props.item.tasks}
         loading={this.props.detailsLoading}
+        instancesDetails={this.props.instancesDetails}
       />
     )
   }

src/components/modules/TransferModule/ReplicaDetailsContent/ReplicaDetailsContent.tsx

@@ -201,6 +201,7 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
         loading={this.props.executionsLoading || this.props.detailsLoading}
         onChange={this.props.onExecutionChange}
         tasksLoading={this.props.executionsTasksLoading}
+        instancesDetails={this.props.instancesDetails}
       />
     )
   }

src/components/modules/TransferModule/TaskItem/TaskItem.tsx

@@ -28,6 +28,7 @@ import notificationStore from '@src/stores/NotificationStore'
 import DomUtils from '@src/utils/DomUtils'
 import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import DateUtils from '@src/utils/DateUtils'
+import { Instance } from '@src/@types/Instance'
 
 const GlobalStyle = createGlobalStyle`
   .ReactCollapse--collapse {
@@ -153,6 +154,7 @@ type Props = {
   columnWidths: string[],
   item: Task,
   open: boolean,
+  instancesDetails: Instance[],
   onDependsOnClick: (id: string) => void,
   onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void
   onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void
@@ -202,6 +204,9 @@ class TaskItem extends React.Component<Props> {
     const date = this.props.item.updated_at
       ? this.props.item.updated_at : this.props.item.created_at
 
+    const instance = this.props.instancesDetails.find(i => i.id === this.props.item.instance)
+    const instanceLabel = instance?.instance_name || instance?.name || this.props.item.instance
+
     return (
       <Header>
         <HeaderData capitalize width={this.props.columnWidths[0]} black>
@@ -210,8 +215,8 @@ class TaskItem extends React.Component<Props> {
             <TitleText>{this.props.item.task_type.replace(/_/g, ' ').toLowerCase()}</TitleText>
           </Title>
         </HeaderData>
-        <HeaderData width={this.props.columnWidths[1]}>
-          {this.props.item.instance}
+        <HeaderData title={instanceLabel} width={this.props.columnWidths[1]}>
+          {instanceLabel}
         </HeaderData>
         <HeaderData width={this.props.columnWidths[2]}>
           {this.getLastMessage()}

src/components/modules/TransferModule/Tasks/Tasks.tsx

@@ -21,6 +21,7 @@ import TaskItem from '@src/components/modules/TransferModule/TaskItem'
 import type { Task } from '@src/@types/Task'
 import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import { Instance } from '@src/@types/Instance'
 
 const ColumnWidths = ['26%', '18%', '36%', '20%']
 
@@ -50,6 +51,7 @@ const Body = styled.div<any>``
 
 type Props = {
   items: Task[],
+  instancesDetails: Instance[],
   loading?: boolean,
 }
 type State = {
@@ -155,6 +157,7 @@ class Tasks extends React.Component<Props, State> {
             onMouseUp={e => this.handleItemMouseUp(e, item)}
             key={item.id}
             item={item}
+            instancesDetails={this.props.instancesDetails}
             columnWidths={ColumnWidths}
             open={Boolean(this.state.openedItems.find(i => i.id === item.id))}
             onDependsOnClick={id => { this.handleDependsOnClick(id) }}