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.
This commit is contained in:
CJ Cenizal 2018-08-09 05:57:38 -07:00 committed by GitHub
parent 4cd9699108
commit e78113c2c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 29 deletions

View file

@ -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>

View file

@ -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">