Improve display of the instance name in tasks

If the instance name is a path (contains `/`), the last part of the path
is displayed as the instance name label in replica execution tasks.

Also, an HTML tooltip is displayed on label hover.

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

@@ -241,9 +241,15 @@ class TaskItem extends React.Component<Props> {
     const instance = this.props.instancesDetails.find(
       i => i.id === this.props.item.instance
     );
-    const instanceLabel =
+    const instanceName =
       instance?.instance_name || instance?.name || this.props.item.instance;
 
+    // get the last '/' path from instance name
+    const instanceLabel =
+      instanceName.indexOf("/") > -1
+        ? `.../${instanceName.substring(instanceName.lastIndexOf("/") + 1)}`
+        : instanceName;
+
     return (
       <Header>
         <HeaderData capitalize width={this.props.columnWidths[0]} black>
@@ -257,7 +263,7 @@ class TaskItem extends React.Component<Props> {
             </TitleText>
           </Title>
         </HeaderData>
-        <HeaderData title={instanceLabel} width={this.props.columnWidths[1]}>
+        <HeaderData title={instanceName} width={this.props.columnWidths[1]}>
           {instanceLabel}
         </HeaderData>
         <HeaderData width={this.props.columnWidths[2]}>