github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Add peering establishment to the peer listing page (#13813) 

* ui: Add peering establishment to the peer listing page

* Remove this.form.reset
pull/13903/head
John Cowen 2022-07-26 15:36:49 +01:00 committed by GitHub
parent a6a79d6811
commit e3f05adf3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 156 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs
View File

@ -42,6 +42,24 @@ as |item index|>
{{#if (can 'delete peer' item=item)}} {{#if (can 'delete peer' item=item)}}
<Actions as |Action|> <Actions as |Action|>
<Action
data-test-edit-action
@href={{href-to 'dc.peers.edit' item.Name}}
>
<BlockSlot @name="label">
View
</BlockSlot>
</Action>
{{#if (can "write peer" item=item)}}
<Action
data-test-edit-action
{{on 'click' (fn @onedit item)}}
>
<BlockSlot @name="label">
Regenerate token
</BlockSlot>
</Action>
{{/if}}
<Action <Action
data-test-delete-action data-test-delete-action
@onclick={{fn @ondelete item}} @onclick={{fn @ondelete item}}

181
ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
View File

@ -1,4 +1,6 @@
<Route @name={{routeName}} as |route|> <Route
@name={{routeName}}
as |route|>
<DataLoader <DataLoader
@src={{ @src={{
uri '/${partition}/${nspace}/${dc}/peers' uri '/${partition}/${nspace}/${dc}/peers'
@ -45,10 +47,13 @@ as |sort filters items|}}
<AppView> <AppView>
<BlockSlot @name="header"> <BlockSlot @name="header">
<h1> <h1>
<route.Title @title="Peers" /> <route.Title
@title="Peers"
/>
</h1> </h1>
</BlockSlot> </BlockSlot>
<BlockSlot @name="toolbar"> <BlockSlot @name="toolbar">
{{#if (gt items.length 0)}} {{#if (gt items.length 0)}}
<Consul::Peer::SearchBar <Consul::Peer::SearchBar
@search={{search}} @search={{search}}
@ -60,8 +65,55 @@ as |sort filters items|}}
/> />
{{/if}} {{/if}}
</BlockSlot>
<BlockSlot @name="actions">
<ModalDialog
@aria={{hash
label="Add peer connection"
}}
as |modal|>
<BlockSlot @name="header">
{{did-insert (set this 'create' modal)}}
<h2>
Add peer connection
</h2>
</BlockSlot>
<BlockSlot @name="body">
{{#if modal.opened}}
<Consul::Peer::Form
@params={{route.params}}
as |form|>
<form.Form
@onchange={{loader.invalidate}}
@onsubmit={{modal.close}}
as |form|>
{{did-insert (set this 'form' form)}}
<form.Fieldsets />
</form.Form>
</Consul::Peer::Form>
{{/if}}
</BlockSlot>
<BlockSlot @name="actions">
<this.form.Actions
@onclose={{this.create.close}}
/>
</BlockSlot>
</ModalDialog>
<Action
data-test-create
class="type-create"
{{on "click" (optional this.create.open)}}
>
Add peer connection
</Action>
</BlockSlot> </BlockSlot>
<BlockSlot @name="content"> <BlockSlot @name="content">
<DataWriter <DataWriter
@sink={{uri '/${partition}/${dc}/${nspace}/peer/' @sink={{uri '/${partition}/${dc}/${nspace}/peer/'
(hash (hash
@ -72,8 +124,8 @@ as |sort filters items|}}
}} }}
@type="peer" @type="peer"
@label="Peer" @label="Peer"
@ondelete={{refresh-route}}
as |writer|> as |writer|>
<BlockSlot @name="removed" as |after|> <BlockSlot @name="removed" as |after|>
<Consul::Peer::Notifications <Consul::Peer::Notifications
{{notification {{notification
@ -83,61 +135,96 @@ as |sort filters items|}}
/> />
</BlockSlot> </BlockSlot>
<BlockSlot @name="content"> <BlockSlot @name="content">
<DataCollection
@type="peer" <ModalDialog
@sort={{sort.value}} @aria={{hash
@filters={{filters}} label="Regenerate token"
@search={{search}} }}
@items={{items}} @onclose={{set this 'item' undefined}}
as |collection|> as |modal|>
<collection.Collection> <BlockSlot @name="header">
{{did-insert (set this 'regenerate' modal)}}
<h2>
Regenerate token
</h2>
</BlockSlot>
<BlockSlot @name="body">
{{#if this.item}}
<Consul::Peer::Form::Generate
@item={{this.item}}
@onchange={{loader.invalidate}}
@regenerate={{true}}
as |form|>
{{did-insert (set this 'regenerateForm' form)}}
<form.Fieldsets />
</Consul::Peer::Form::Generate>
{{/if}}
</BlockSlot>
<BlockSlot @name="actions">
<this.regenerateForm.Actions
@onclose={{this.regenerate.close}}
/>
</BlockSlot>
</ModalDialog>
<DataCollection
@type="peer"
@sort={{sort.value}}
@filters={{filters}}
@search={{search}}
@items={{items}}
as |collection|>
<collection.Collection>
<Consul::Peer::List <Consul::Peer::List
@items={{collection.items}} @items={{collection.items}}
@onedit={{this.edit.open}} @onedit={{queue
(set this 'item')
this.regenerate.open
}}
@ondelete={{writer.delete}} @ondelete={{writer.delete}}
/> />
</collection.Collection> </collection.Collection>
<collection.Empty> <collection.Empty>
{{!-- TODO: do we need to check permissions here or will we receive an error automatically? --}} {{!-- TODO: do we need to check permissions here or will we receive an error automatically? --}}
<EmptyState <EmptyState
@login={{route.model.app.login.open}} @login={{route.model.app.login.open}}
> >
<BlockSlot @name="header"> <BlockSlot @name="header">
<h2> <h2>
{{#if (gt items.length 0)}}
No peers found
{{else}}
Welcome to Peers
{{/if}}
</h2>
</BlockSlot>
<BlockSlot @name="body">
{{#if (gt items.length 0)}} {{#if (gt items.length 0)}}
No peers found <p>No peers where found matching that search, or you may not have access to view the peers you are searching for.</p>
{{else}} {{else}}
Welcome to Peers <p>
Cluster peering is the recommended way to connect services across or within Consul datacenters. Peering is a one-to-one relationship in which each peer is either a open-source Consul datacenter or a Consul enterprise admin partition. There don't seem to be any peers for this {{if (can "use partitions") "admin partition" "datacenter"}}, or you may not have the <code>peering:read</code> permissions to access this view.
</p>
{{/if}} {{/if}}
</h2> </BlockSlot>
</BlockSlot> <BlockSlot @name="actions">
<BlockSlot @name="body"> <li class="docs-link">
{{#if (gt items.length 0)}} {{!-- what's the docs for peering?--}}
<p>No peers where found matching that search, or you may not have access to view the peers you are searching for.</p> <a href="https://www.consul.io/docs/agent/kv" rel="noopener noreferrer" target="_blank">
{{else}} Documentation on Peers
<p> </a>
Cluster peering is the recommended way to connect services across or within Consul datacenters. Peering is a one-to-one relationship in which each peer is either a open-source Consul datacenter or a Consul enterprise admin partition. There don't seem to be any peers for this {{if (can "use partitions") "admin partition" "datacenter"}}, or you may not have the <code>peering:read</code> permissions to access this view. </li>
</p> <li class="learn-link">
{{/if}} <a href="https://learn.hashicorp.com/consul/getting-started/kv" rel="noopener noreferrer" target="_blank">
</BlockSlot> Take the tutorial
<BlockSlot @name="actions"> </a>
<li class="docs-link"> </li>
{{!-- what's the docs for peering?--}} </BlockSlot>
<a href="https://www.consul.io/docs/agent/kv" rel="noopener noreferrer" target="_blank"> </EmptyState>
Documentation on Peers </collection.Empty>
</a> </DataCollection>
</li>
<li class="learn-link">
<a href="https://learn.hashicorp.com/consul/getting-started/kv" rel="noopener noreferrer" target="_blank">
Take the tutorial
</a>
</li>
</BlockSlot>
</EmptyState>
</collection.Empty>
</DataCollection>
</BlockSlot> </BlockSlot>
</DataWriter> </DataWriter>
</BlockSlot> </BlockSlot>

2
ui/packages/consul-ui/app/components/buttons/index.scss
View File

@ -2,13 +2,13 @@
@import './layout'; @import './layout';
button[type='submit'], button[type='submit'],
button.type-submit, button.type-submit,
button.type-create,
a.type-create { a.type-create {
@extend %primary-button; @extend %primary-button;
} }
// TODO: Once we move action-groups to use aria menu we can get rid of // TODO: Once we move action-groups to use aria menu we can get rid of
// some of this and just use not(aria-haspopup) // some of this and just use not(aria-haspopup)
button[type='reset'], button[type='reset'],
header .actions button[type='button']:not(.copy-btn),
button.type-cancel { button.type-cancel {
@extend %secondary-button; @extend %secondary-button;
} }

3
ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss
View File

@ -8,6 +8,9 @@ html[data-route^='dc.acls.index'] .filter-bar {
html[data-route^='dc.acls.index'] .filter-bar [role='radiogroup'] { html[data-route^='dc.acls.index'] .filter-bar [role='radiogroup'] {
@extend %expanded-single-select; @extend %expanded-single-select;
} }
html[data-route^='dc.acls.tokens.edit'] header .actions button {
@extend %secondary-button;
}
@media #{$--lt-wide-form} { @media #{$--lt-wide-form} {
html[data-route^='dc.acls.create'] main header .actions, html[data-route^='dc.acls.create'] main header .actions,