forked from hashicorp/consul
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: Redesigns for the token/policy/roles listings pages (hashicorp#8144)
- Loading branch information
Showing
45 changed files
with
664 additions
and
469 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <li class="dangerous"> | ||
| <button tabindex="-1" type="button" onclick={{action onclick}}>{{yield}}</button> | ||
| </li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import Component from '@ember/component'; | ||
|
|
||
| export default Component.extend({ | ||
| tagName: '', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| {{yield}} | ||
| <div class="confirmation-alert" ...attributes> | ||
| <div> | ||
| <header> | ||
| <YieldSlot @name="header">{{yield}}</YieldSlot> | ||
| </header> | ||
| <YieldSlot @name="body">{{yield}}</YieldSlot> | ||
| </div> | ||
| <ul> | ||
| <YieldSlot @name="confirm" @params={{ | ||
| block-params (component 'confirmation-alert/action' | ||
| onclick=(action onclick) | ||
| ) | ||
| }} | ||
| > | ||
| {{yield}} | ||
| </YieldSlot> | ||
| <li> | ||
| <label for={{name}}>Cancel</label> | ||
| </li> | ||
| </ul> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import Component from '@ember/component'; | ||
|
|
||
| export default Component.extend({ | ||
| tagName: '', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| ## ConsulPolicyList | ||
|
|
||
| ``` | ||
| <ConsulPolicyList | ||
| @items={{items}} | ||
| @ondelete={{action 'delete'}} | ||
| /> | ||
| ``` | ||
|
|
||
| A presentational component for rendering Consul ACL policies | ||
|
|
||
| ### Arguments | ||
|
|
||
| | Argument/Attribute | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `items` | `array` | | An array of ACL policies | | ||
| | `ondelete` | `function` | | An action to execute when the `Delete` action is clicked | | ||
|
|
||
| ### See | ||
|
|
||
| - [Component Source Code](./index.js) | ||
| - [TemplateSource Code](./index.hbs) | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| {{#if (gt items.length 0)}} | ||
| <ListCollection @items={{items}} class="consul-policy-list" as |item|> | ||
| <BlockSlot @name="header"> | ||
| {{#if (eq (policy/typeof item) 'policy-management')}} | ||
| <dl class="policy-management"> | ||
| <dd> | ||
| <Tooltip @position="top-start"> | ||
| Global Management Policy | ||
| </Tooltip> | ||
| </dd> | ||
| </dl> | ||
| {{/if}} | ||
| <a data-test-policy={{item.Name}} href={{href-to 'dc.acls.policies.edit' item.ID}} class={{if (eq (policy/typeof item) 'policy-management') 'is-management'}}>{{item.Name}}</a> | ||
| </BlockSlot> | ||
| <BlockSlot @name="details"> | ||
| <dl class="datacenter"> | ||
| <dt> | ||
| <Tooltip @position="top-start">Datacenters</Tooltip> | ||
| </dt> | ||
| <dd> | ||
| {{join ', ' (policy/datacenters item)}} | ||
| </dd> | ||
| </dl> | ||
| <dl class="description"> | ||
| <dt>Description</dt> | ||
| <dd data-test-description> | ||
| {{item.Description}} | ||
| </dd> | ||
| </dl> | ||
| </BlockSlot> | ||
| <BlockSlot @name="actions" as |Actions|> | ||
| <Actions as |Action|> | ||
| <Action data-test-edit-action @href={{href-to 'dc.acls.policies.edit' item.ID}}> | ||
| <BlockSlot @name="label"> | ||
| {{#if (eq (policy/typeof item) 'policy-management')}} | ||
| View | ||
| {{else}} | ||
| Edit | ||
| {{/if}} | ||
| </BlockSlot> | ||
| </Action> | ||
| {{#if (not-eq (policy/typeof item) 'policy-management')}} | ||
| <Action data-test-delete-action @onclick={{action ondelete item}} class="dangerous"> | ||
| <BlockSlot @name="label"> | ||
| Delete | ||
| </BlockSlot> | ||
| <BlockSlot @name="confirmation" as |Confirmation|> | ||
| <Confirmation class="warning"> | ||
| <BlockSlot @name="header"> | ||
| Confirm delete | ||
| </BlockSlot> | ||
| <BlockSlot @name="body"> | ||
| <p> | ||
| Are you sure you want to delete this policy? | ||
| </p> | ||
| </BlockSlot> | ||
| <BlockSlot @name="confirm" as |Confirm|> | ||
| <Confirm>Delete</Confirm> | ||
| </BlockSlot> | ||
| </Confirmation> | ||
| </BlockSlot> | ||
| </Action> | ||
| {{/if}} | ||
| </Actions> | ||
| </BlockSlot> | ||
| </ListCollection> | ||
| {{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import Component from '@ember/component'; | ||
|
|
||
| export default Component.extend({ | ||
| tagName: '', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export default (collection, clickable, attribute, text, actions) => () => { | ||
| return collection('.consul-policy-list li:not(:first-child)', { | ||
| name: attribute('data-test-policy', '[data-test-policy]'), | ||
| description: text('[data-test-description]'), | ||
| policy: clickable('a'), | ||
| ...actions(['edit', 'delete']), | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| ## ConsulRoleList | ||
|
|
||
| ``` | ||
| <ConsulRoleList | ||
| @items={{items}} | ||
| @ondelete={{action 'delete'}} | ||
| /> | ||
| ``` | ||
|
|
||
| A presentational component for rendering Consul ACL roles | ||
|
|
||
| ### Arguments | ||
|
|
||
| | Argument/Attribute | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `items` | `array` | | An array of ACL roles | | ||
| | `ondelete` | `function` | | An action to execute when the `Delete` action is clicked | | ||
|
|
||
| ### See | ||
|
|
||
| - [Component Source Code](./index.js) | ||
| - [TemplateSource Code](./index.hbs) | ||
|
|
||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| {{#if (gt items.length 0)}} | ||
| <ListCollection @items={{items}} class="consul-role-list" as |item|> | ||
| <BlockSlot @name="header"> | ||
| <a data-test-role={{item.Name}} href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a> | ||
| </BlockSlot> | ||
| <BlockSlot @name="details"> | ||
| <ConsulTokenRulesetList @item={{item}} /> | ||
| <dl> | ||
| <dt>Description</dt> | ||
| <dd data-test-description> | ||
| {{item.Description}} | ||
| </dd> | ||
| </dl> | ||
| </BlockSlot> | ||
| <BlockSlot @name="actions" as |Actions|> | ||
| <Actions as |Action|> | ||
| <Action data-test-edit-action @href={{href-to 'dc.acls.roles.edit' item.ID}}> | ||
| <BlockSlot @name="label"> | ||
| Edit | ||
| </BlockSlot> | ||
| </Action> | ||
| <Action data-test-delete-action @onclick={{action ondelete item}} class="dangerous"> | ||
| <BlockSlot @name="label"> | ||
| Delete | ||
| </BlockSlot> | ||
| <BlockSlot @name="confirmation" as |Confirmation|> | ||
| <Confirmation class="warning"> | ||
| <BlockSlot @name="header"> | ||
| Confirm delete | ||
| </BlockSlot> | ||
| <BlockSlot @name="body"> | ||
| <p> | ||
| Are you sure you want to delete this role? | ||
| </p> | ||
| </BlockSlot> | ||
| <BlockSlot @name="confirm" as |Confirm|> | ||
| <Confirm>Delete</Confirm> | ||
| </BlockSlot> | ||
| </Confirmation> | ||
| </BlockSlot> | ||
| </Action> | ||
| </Actions> | ||
| </BlockSlot> | ||
| </ListCollection> | ||
| {{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import Component from '@ember/component'; | ||
|
|
||
| export default Component.extend({ | ||
| tagName: '', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export default (collection, clickable, attribute, text, actions) => () => { | ||
| return collection('.consul-role-list li:not(:first-child)', { | ||
| name: attribute('data-test-role', '[data-test-role]'), | ||
| description: text('[data-test-description]'), | ||
| policy: text('[data-test-policy].policy', { multiple: true }), | ||
| serviceIdentity: text('[data-test-policy].policy-service-identity', { multiple: true }), | ||
| ...actions(['edit', 'delete']), | ||
| }); | ||
| }; |
Oops, something went wrong.