From 0368c4e93749502fa43a3f0e3d1a71c01de814aa Mon Sep 17 00:00:00 2001
From: Johann Schmitz <ercpe@users.noreply.github.com>
Date: Mon, 16 Jul 2018 09:06:41 +0200
Subject: [PATCH] feat(ux): make Images and Volumes datatable more readable
 (#2047)

Raise cutoff level and provide tooltips for links in images and volumes datatables to avoid having to open the detail view to see the full name.
---
 .../components/datatables/images-datatable/imagesDatatable.html | 2 +-
 .../datatables/volumes-datatable/volumesDatatable.html          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html
index 408e184f6..b21df01c1 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@@ -104,7 +104,7 @@
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-change="$ctrl.selectItem(item)"/>
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced">{{ item.Id | truncate:20 }}</a>
+                <a ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
                 <span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
               </td>
               <td>
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index 0d8fc11d3..2ffc21be5 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -102,7 +102,7 @@
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-change="$ctrl.selectItem(item)"/>
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced">{{ item.Id | truncate:25 }}</a>
+                <a ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
                 <span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="item.dangling">Unused</span>
               </td>
               <td>{{ item.StackName ? item.StackName : '-' }}</td>