open-consul/ui/packages/consul-ui/app/templates/dc/nodes/show.hbs
John Cowen 124fa8f168
ui: Notifications re-organization/re-style (#11577)
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
2021-11-24 18:14:07 +00:00

140 lines
4.2 KiB
Handlebars

<Route
@name={{routeName}}
as |route|>
<DataSource @src={{uri '/${partition}/${nspace}/${dc}/coordinates/for-node/${name}'
(hash
partition=route.params.partition
nspace=route.params.nspace
dc=route.params.dc
name=route.params.name
)
}} as |tomography|>
<DataLoader
@src={{uri '/${partition}/${nspace}/${dc}/node/${name}'
(hash
partition=route.params.partition
nspace=route.params.nspace
dc=route.params.dc
name=route.params.name
)
}}
as |loader|>
<BlockSlot @name="error">
<AppError
@error={{loader.error}}
@login={{route.model.app.login.open}}
/>
</BlockSlot>
<BlockSlot @name="disconnected" as |after|>
{{#if (eq loader.error.status "404")}}
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
</notice.Header>
<notice.Body>
<p>
This node no longer exists in the catalog.
</p>
</notice.Body>
</Notice>
{{else if (eq loader.error.status "403")}}
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
</notice.Header>
<notice.Body>
<p>
You no longer have access to this node
</p>
</notice.Body>
</Notice>
{{else}}
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
</notice.Header>
<notice.Body>
<p>
An error was returned whilst loading this data, refresh to try again.
</p>
</notice.Body>
</Notice>
{{/if}}
</BlockSlot>
<BlockSlot @name="loaded">
{{#let
loader.data
tomography.data
as |item tomography|}}
<AppView>
<BlockSlot @name="notification" as |status type|>
<Consul::LockSession::Notifications
@type={{type}}
@status={{status}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.nodes'}}>All Nodes</a></li>
</ol>
</BlockSlot>
<BlockSlot @name="header">
<h1>
<route.Title @title={{item.Node}} />
</h1>
<label for="toolbar-toggle"></label>
</BlockSlot>
<BlockSlot @name="nav">
<TabNav @items={{
compact
(array
(hash label="Health Checks" href=(href-to "dc.nodes.show.healthchecks") selected=(is-href "dc.nodes.show.healthchecks"))
(hash label="Service Instances" href=(href-to "dc.nodes.show.services") selected=(is-href "dc.nodes.show.services"))
(if tomography.distances (hash label="Round Trip Time" href=(href-to "dc.nodes.show.rtt") selected=(is-href "dc.nodes.show.rtt")) '')
(hash label="Lock Sessions" href=(href-to "dc.nodes.show.sessions") selected=(is-href "dc.nodes.show.sessions"))
(hash label="Metadata" href=(href-to "dc.nodes.show.metadata") selected=(is-href "dc.nodes.show.metadata"))
)
}}/>
</BlockSlot>
<BlockSlot @name="actions">
<CopyButton @value={{item.Address}} @name="Address">{{item.Address}}</CopyButton>
</BlockSlot>
<BlockSlot @name="content">
<Outlet
@name={{routeName}}
@model={{assign
(hash
item=item
tomography=tomography
) route.model
}}
as |o|>
{{outlet}}
</Outlet>
</BlockSlot>
</AppView>
{{/let}}
</BlockSlot>
</DataLoader>
</DataSource>
</Route>