3b0f876ae5
This builds on filtering to allow the optimize page to show recommendations for the active namespace vs all namespaces. If turning off the toggle causes the summary from the active card to become excluded from the filtered list, the active summary changes, as with the facets. It also includes a fix for this bug: https://github.com/hashicorp/nomad/pull/9294#pullrequestreview-527748994
106 lines
3.9 KiB
Handlebars
106 lines
3.9 KiB
Handlebars
<PageLayout>
|
|
<section class="section">
|
|
{{#if @model}}
|
|
<div class="toolbar collapse">
|
|
<div class="toolbar-item">
|
|
{{#if @model}}
|
|
<SearchBox
|
|
data-test-recommendation-summaries-search
|
|
@onChange={{this.syncActiveSummary}}
|
|
@searchTerm={{mut this.searchTerm}}
|
|
@placeholder="Search {{this.model.length}} {{pluralize "recommendation" this.model.length}}..." />
|
|
{{/if}}
|
|
</div>
|
|
<div class="toolbar-item is-right-aligned is-mobile-full-width">
|
|
<div class="button-bar">
|
|
<MultiSelectDropdown
|
|
data-test-type-facet
|
|
@label="Type"
|
|
@options={{this.optionsType}}
|
|
@selection={{this.selectionType}}
|
|
@onSelect={{action this.setFacetQueryParam "qpType"}} />
|
|
<MultiSelectDropdown
|
|
data-test-status-facet
|
|
@label="Status"
|
|
@options={{this.optionsStatus}}
|
|
@selection={{this.selectionStatus}}
|
|
@onSelect={{action this.setFacetQueryParam "qpStatus"}} />
|
|
<MultiSelectDropdown
|
|
data-test-datacenter-facet
|
|
@label="Datacenter"
|
|
@options={{this.optionsDatacenter}}
|
|
@selection={{this.selectionDatacenter}}
|
|
@onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
|
|
<MultiSelectDropdown
|
|
data-test-prefix-facet
|
|
@label="Prefix"
|
|
@options={{this.optionsPrefix}}
|
|
@selection={{this.selectionPrefix}}
|
|
@onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if this.system.shouldShowNamespaces}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item is-right-aligned is-mobile-full-width">
|
|
<Toggle
|
|
data-test-all-namespaces-toggle
|
|
@class="is-flex"
|
|
@isActive={{this.includeAllNamespaces}}
|
|
@onToggle={{this.toggleIncludeAllNamespaces}}
|
|
>
|
|
<div class="is-size-7 label">Include all namespaces</div>
|
|
</Toggle>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if this.filteredSummaries}}
|
|
{{outlet}}
|
|
|
|
<ListTable
|
|
@source={{this.filteredSummaries}} as |t|>
|
|
<t.head>
|
|
<th>Job</th>
|
|
<th>Recommended At</th>
|
|
<th># Allocs</th>
|
|
<th>CPU</th>
|
|
<th>Mem</th>
|
|
<th>Agg. CPU</th>
|
|
<th>Agg. Mem</th>
|
|
</t.head>
|
|
<t.body as |row|>
|
|
{{#if row.model.isProcessed}}
|
|
<Das::RecommendationRow
|
|
class="is-disabled"
|
|
@summary={{row.model}}
|
|
/>
|
|
{{else}}
|
|
<Das::RecommendationRow
|
|
class="is-interactive {{if (eq row.model this.activeRecommendationSummary) 'is-active'}}"
|
|
@summary={{row.model}}
|
|
{{on "click" (fn this.transitionToSummary row.model)}}
|
|
/>
|
|
{{/if}}
|
|
|
|
</t.body>
|
|
</ListTable>
|
|
{{else}}
|
|
<div class="empty-message" data-test-empty-recommendations>
|
|
<h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Matches</h3>
|
|
<p class="empty-message-body">
|
|
No recommendations match your current filter selection.
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
{{else}}
|
|
<div class="empty-message" data-test-empty-recommendations>
|
|
<h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Recommendations</h3>
|
|
<p class="empty-message-body">
|
|
All recommendations have been accepted or dismissed. Nomad will continuously monitor applications so expect more recommendations in the future.
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
</section>
|
|
</PageLayout>
|