Make Watcher table width 100% of the view (#21803)

* Show more of the name column in the Watcher watch table by making the table 100% width of the page, and by increasing the column width to 25%. * Convert all title attributes to kbnTooltip. * Add title attributes for columns which have tooltip content different from cell content.
elastic · Aug 9, 2018 · e78113c · e78113c
1 parent 4cd9699
commit e78113c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.html b/x-pack/plugins/watcher/public/sections/watch_list/components/watch_list/watch_list.html
@@ -1,5 +1,5 @@
 <kbn-management-app section="elasticsearch/watcher">
-  <div class="kuiViewContent kuiViewContent--constrainedWidth">
+  <div class="kuiViewContent">
     <forbidden-message ng-if="watchList.forbidden">
       You do not have permission to manage watches.
     </forbidden-message>

diff --git a/x-pack/plugins/watcher/public/sections/watch_list/components/watch_table/watch_table.html b/x-pack/plugins/watcher/public/sections/watch_list/components/watch_table/watch_table.html
@@ -19,7 +19,7 @@
           ID
         </sortable-column>
       </th>
-      <th scope="col" class="kuiTableHeaderCell">
+      <th scope="col" class="kuiTableHeaderCell" width="25%">
         <sortable-column
           field="name"
           on-sort-change="watchTable.onSortChange"
@@ -92,57 +92,62 @@
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <a
-            class="kuiLink"
-            ng-href="#/management/elasticsearch/watcher/watches/watch/{{item.watch.id}}/status"
-            title="{{item.watch.id}}"
-            ng-if="watchTable.isEditable(item)"
-
-          >
-            {{item.watch.id}}
-          </a>
-          <span
-            title="{{item.watch.id}}"
-            ng-if="!watchTable.isEditable(item)"
-          >
-            {{item.watch.id}}
-          </span>
+          <kbn-tooltip text="{{item.watch.id}}">
+            <a
+              class="kuiLink"
+              ng-href="#/management/elasticsearch/watcher/watches/watch/{{item.watch.id}}/status"
+              title="{{item.watch.id}}"
+              ng-if="watchTable.isEditable(item)"
+            >
+              {{item.watch.id}}
+            </a>
+            <span
+              title="{{item.watch.id}}"
+              ng-if="!watchTable.isEditable(item)"
+            >
+              {{item.watch.id}}
+            </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <span title="{{item.watch.name}}">
+          <kbn-tooltip text="{{item.watch.name}}">
             {{item.watch.name}}
-          </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <span title="{{item.watch.watchStatus.state}}">
+          <kbn-tooltip text="{{item.watch.watchStatus.state}}">
             <watch-state-icon watch-status="item.watch.watchStatus"></watch-state-icon>
             {{ item.watch.watchStatus.state }}
-          </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <span title="{{item.watch.watchStatus.comment}}">
+          <kbn-tooltip text="{{item.watch.watchStatus.comment}}">
             {{item.watch.watchStatus.comment}}
-          </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <span title="{{item.watch.watchStatus.lastFired | moment}}">
-            {{item.watch.watchStatus.lastFiredHumanized}}
-          </span>
+          <kbn-tooltip text="{{item.watch.watchStatus.lastFired | moment}}">
+            <span title="{{item.watch.watchStatus.lastFired | moment}}">
+              {{item.watch.watchStatus.lastFiredHumanized}}
+            </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <span title="{{item.watch.watchStatus.lastChecked | moment}}">
-            {{item.watch.watchStatus.lastCheckedHumanized}}
-          </span>
+          <kbn-tooltip text="{{item.watch.watchStatus.lastChecked | moment}}">
+            <span title="{{item.watch.watchStatus.lastChecked | moment}}">
+              {{item.watch.watchStatus.lastCheckedHumanized}}
+            </span>
+          </kbn-tooltip>
         </div>
       </td>
       <td class="kuiTableRowCell">