244157786a
This is the result of running the no-implicit-this-codemod, some manual fixes, and the addition of a linting rule to prevent future ambiguity.
89 lines
3.7 KiB
Handlebars
89 lines
3.7 KiB
Handlebars
{{title "CSI Volumes"}}
|
|
<div class="tabs is-subnav">
|
|
<ul>
|
|
<li data-test-tab="volumes"><LinkTo @route="csi.volumes.index" @activeClass="is-active">Volumes</LinkTo></li>
|
|
<li data-test-tab="plugins"><LinkTo @route="csi.plugins.index" @activeClass="is-active">Plugins</LinkTo></li>
|
|
</ul>
|
|
</div>
|
|
<section class="section">
|
|
{{#if this.isForbidden}}
|
|
<ForbiddenMessage />
|
|
{{else}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
{{#if this.model.length}}
|
|
<SearchBox
|
|
data-test-volumes-search
|
|
@searchTerm={{mut this.searchTerm}}
|
|
@onChange={{action this.resetPagination}}
|
|
@placeholder="Search volumes..." />
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{#if this.sortedVolumes}}
|
|
<ListPagination
|
|
@source={{this.sortedVolumes}}
|
|
@size={{this.pageSize}}
|
|
@page={{this.currentPage}} as |p|>
|
|
<ListTable
|
|
@source={{p.list}}
|
|
@sortProperty={{this.sortProperty}}
|
|
@sortDescending={{this.sortDescending}}
|
|
@class="with-foot" as |t|>
|
|
<t.head>
|
|
<t.sort-by @prop="name">Name</t.sort-by>
|
|
<t.sort-by @prop="schedulable">Volume Health</t.sort-by>
|
|
<t.sort-by @prop="controllersHealthyProportion">Controller Health</t.sort-by>
|
|
<t.sort-by @prop="nodesHealthyProportion">Node Health</t.sort-by>
|
|
<t.sort-by @prop="provider">Provider</t.sort-by>
|
|
<th># Allocs</th>
|
|
</t.head>
|
|
<t.body @key="model.name" as |row|>
|
|
<tr class="is-interactive" data-test-volume-row {{on "click" (action "gotoVolume" row.model)}}>
|
|
<td data-test-volume-name>
|
|
<LinkTo @route="csi.volumes.volume" @model={{row.model.plainId}} class="is-primary">{{row.model.name}}</LinkTo>
|
|
</td>
|
|
<td data-test-volume-schedulable>{{if row.model.schedulable "Schedulable" "Unschedulable"}}</td>
|
|
<td data-test-volume-controller-health>
|
|
{{if (gt row.model.controllersHealthy 0) "Healthy" "Unhealthy"}}
|
|
({{row.model.controllersHealthy}}/{{row.model.controllersExpected}})
|
|
</td>
|
|
<td data-test-volume-node-health>
|
|
{{if (gt row.model.nodesHealthy 0) "Healthy" "Unhealthy"}}
|
|
({{row.model.nodesHealthy}}/{{row.model.nodesExpected}})
|
|
</td>
|
|
<td data-test-volume-provider>{{row.model.provider}}</td>
|
|
<td data-test-volume-allocations>{{row.model.allocations.length}}</td>
|
|
</tr>
|
|
</t.body>
|
|
</ListTable>
|
|
<div class="table-foot">
|
|
<PageSizeSelect @onChange={{action this.resetPagination}} />
|
|
<nav class="pagination">
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{this.sortedVolumes.length}}
|
|
</div>
|
|
<p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
|
|
<p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
|
|
<ul class="pagination-list"></ul>
|
|
</nav>
|
|
</div>
|
|
</ListPagination>
|
|
{{else}}
|
|
<div data-test-empty-volumes-list class="empty-message">
|
|
{{#if (eq this.model.length 0)}}
|
|
<h3 data-test-empty-volumes-list-headline class="empty-message-headline">No Volumes</h3>
|
|
<p class="empty-message-body">
|
|
The cluster currently has no CSI Volumes.
|
|
</p>
|
|
{{else if this.searchTerm}}
|
|
<h3 data-test-empty-volumes-list-headline class="empty-message-headline">No Matches</h3>
|
|
<p class="empty-message-body">
|
|
No volumes match the term <strong>{{this.searchTerm}}</strong>
|
|
</p>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</section>
|