open-nomad/ui/app/templates/components/gutter-menu.hbs

103 lines
3.5 KiB
Handlebars

<div data-test-gutter-menu class="page-column is-left {{if this.isOpen "is-open"}}">
<div class="gutter {{if this.isOpen "is-open"}}">
<header class="collapsed-menu {{if this.isOpen "is-open"}}">
<span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action this.onHamburgerClick}}>
<HamburgerMenu />
</span>
<span class="logo-container">
<NomadLogo />
</span>
</header>
<aside class="menu">
{{#if this.system.shouldShowRegions}}
<div class="collapsed-only">
<p class="menu-label">
Region {{if this.system.shouldShowNamespaces "& Namespace"}}
</p>
<ul class="menu-list">
<li>
<div class="menu-item is-wide">
<RegionSwitcher />
</div>
</li>
</ul>
</div>
{{/if}}
{{#if this.system.shouldShowNamespaces}}
<ul class="menu-list">
<li>
<div class="menu-item is-wide">
<PowerSelect
data-test-namespace-switcher
@options={{this.sortedNamespaces}}
@selected={{this.system.activeNamespace}}
@searchField="name"
@searchEnabled={{gt this.sortedNamespaces.length 10}}
@onChange={{action this.gotoJobsForNamespace}}
@tagName="div"
@class="namespace-switcher"
title={{this.system.activeNamespace.name}}
as |namespace|>
<span class="ember-power-select-prefix">Namespace: </span>{{namespace.name}}
</PowerSelect>
</div>
</li>
</ul>
{{/if}}
<p class="menu-label">
Workload
</p>
<ul class="menu-list">
<li>
<LinkTo
@route="jobs"
@query={{hash jobNamespace=this.system.activeNamespace.id}}
@activeClass="is-active"
data-test-gutter-link="jobs">
Jobs
</LinkTo>
</li>
{{#if (can "accept recommendation")}}
<li>
<LinkTo
@route="optimize"
@activeClass="is-active"
data-test-gutter-link="optimize">
Optimize
</LinkTo>
</li>
{{/if}}
</ul>
<p class="menu-label is-minor">
Integrations
</p>
<ul class="menu-list">
<li>
<LinkTo
@route="csi"
@query={{hash volumeNamespace=this.system.activeNamespace.id}}
@activeClass="is-active"
data-test-gutter-link="storage">
Storage <span class="tag is-small">Beta</span>
</LinkTo>
</li>
</ul>
<p class="menu-label">
Cluster
</p>
<ul class="menu-list">
<li><LinkTo @route="clients" @activeClass="is-active" data-test-gutter-link="clients">Clients</LinkTo></li>
<li><LinkTo @route="servers" @activeClass="is-active" data-test-gutter-link="servers">Servers</LinkTo></li>
<li><LinkTo @route="topology" @activeClass="is-active" data-test-gutter-link="topology">Topology</LinkTo></li>
</ul>
</aside>
<footer class="gutter-footer">
<span class="is-faded">v{{this.system.agent.version}}</span>
</footer>
</div>
</div>
<div data-test-page-content class="page-column is-right">
{{yield}}
</div>
<div data-test-gutter-backdrop class="gutter-backdrop {{if this.isOpen "is-open"}}" onclick={{action this.onHamburgerClick}}></div>