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

139 lines
3.3 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}}
<p class="menu-label">
Workload
</p>
<ul class="menu-list">
<li>
<LinkTo
@route="jobs"
@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"
@activeClass="is-active"
data-test-gutter-link="storage"
>
Storage
</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>
<p class="menu-label">
Debugging
</p>
<ul class="menu-list">
<li>
<LinkTo
@route="evaluations"
@activeClass="is-active"
data-test-gutter-link="evaluations"
>
Evaluations
</LinkTo>
</li>
</ul>
</aside>
{{#if this.system.agent.version}}
<footer class="gutter-footer">
<span class="is-faded">
v
{{this.system.agent.version}}
</span>
</footer>
{{/if}}
</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>