ui: Upgrade the rest of the UI to use the new Notice component (#9035)
This commit is contained in:
John Cowen
GitHub
parent
730426c6bd
commit
cf3e353573
|
|
@ -9,7 +9,12 @@
|
|||
<div class="auth-form" ...attributes>
|
||||
<State @matches="error">
|
||||
{{#if error.status}}
|
||||
<p role="alert" class="notice error">
|
||||
<Notice
|
||||
@type="error"
|
||||
role="alert"
|
||||
as |notice|>
|
||||
<notice.Body>
|
||||
<p>
|
||||
{{#if value.Name}}
|
||||
{{#if (eq error.status '403')}}
|
||||
<strong>Consul login failed</strong><br />
|
||||
|
|
@ -34,6 +39,8 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
</p>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
{{/if}}
|
||||
</State>
|
||||
<form onsubmit={{action dispatch "SUBMIT"}}>
|
||||
|
|
|
|||
|
|
@ -153,14 +153,7 @@
|
|||
</button>
|
||||
<h2>Permissions</h2>
|
||||
{{#if (gt item.Permissions.length 0) }}
|
||||
<div class="notice info">
|
||||
<p>
|
||||
Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>
|
||||
</p>
|
||||
</div>
|
||||
<Consul::Intention::Notice::Permissions />
|
||||
<Consul::Intention::Permission::List
|
||||
@items={{item.Permissions}}
|
||||
@onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
|
||||
|
|
|
|||
|
|
@ -111,10 +111,12 @@ as |api|>
|
|||
<p>
|
||||
This Intention is view only because it is managed through an Intention Custom Resource in your Kubernetes cluster.
|
||||
</p>
|
||||
</notice.Body>
|
||||
<notice.Footer>
|
||||
<p>
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds" target="_blank" rel="noopener noreferrer">Learn more about CRDs</a>
|
||||
</p>
|
||||
</notice.Body>
|
||||
</notice.Footer>
|
||||
</Notice>
|
||||
{{/if}}
|
||||
<Consul::Intention::View
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@ as |notice|>
|
|||
<p>
|
||||
Some of your intentions are being managed through an Intention Custom Resource in your Kubernetes cluster. Those managed intentions will be view only in the UI. Any intentions created in the UI will work but will not be synced to the Custom Resource Definition (CRD) datastore.
|
||||
</p>
|
||||
</notice.Body>
|
||||
<notice.Footer>
|
||||
<p>
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds" target="_blank" rel="noopener noreferrer">Learn more about CRDs</a>
|
||||
</p>
|
||||
</notice.Body>
|
||||
</notice.Footer>
|
||||
</Notice>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<Notice
|
||||
@type="info"
|
||||
as |notice|>
|
||||
<notice.Body>
|
||||
<p>
|
||||
Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
|
||||
</p>
|
||||
</notice.Body>
|
||||
<notice.Footer>
|
||||
<p>
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/connect/intentions" target="_blank" rel="noopener noreferrer">Learn more about permissions</a>
|
||||
</p>
|
||||
</notice.Footer>
|
||||
</Notice>
|
||||
|
||||
|
|
@ -25,15 +25,7 @@
|
|||
|
||||
{{#if (gt item.Permissions.length 0) }}
|
||||
<h2>Permissions</h2>
|
||||
<div class="notice info">
|
||||
<p>
|
||||
Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">Learn more about permissions</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Consul::Intention::Notice::Permissions />
|
||||
<Consul::Intention::Permission::List
|
||||
@items={{item.Permissions}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,5 +5,6 @@
|
|||
{{yield (hash
|
||||
Header=(component 'anonymous' tagName="header")
|
||||
Body=(component 'anonymous')
|
||||
Footer=(component 'anonymous' tagName="footer")
|
||||
)}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
%notice {
|
||||
margin: 1em 0;
|
||||
}
|
||||
/**/
|
||||
.notice.success {
|
||||
@extend %notice-success;
|
||||
}
|
||||
.notice.warning {
|
||||
@extend %notice-warning;
|
||||
}
|
||||
.notice.error {
|
||||
@extend %notice-error;
|
||||
}
|
||||
.notice.info {
|
||||
@extend %notice-info;
|
||||
}
|
||||
.notice.highlight {
|
||||
@extend %notice-highlight;
|
||||
}
|
||||
.notice.policy-management {
|
||||
@extend %notice-highlight;
|
||||
}
|
||||
.notice.crd::before {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
background-color: transparent;
|
||||
@extend %with-logo-kubernetes-color-icon;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
%notice {
|
||||
border-radius: $decor-radius-100;
|
||||
border: $decor-border-100;
|
||||
color: $black;
|
||||
}
|
||||
%notice::before {
|
||||
@extend %as-pseudo;
|
||||
}
|
||||
%notice footer * {
|
||||
@extend %p3;
|
||||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
%notice-success,
|
||||
%notice-info,
|
||||
%notice-highlight,
|
||||
%notice-error,
|
||||
%notice-warning {
|
||||
@extend %notice;
|
||||
}
|
||||
%notice-success {
|
||||
background-color: $green-050;
|
||||
border-color: $green-500;
|
||||
}
|
||||
%notice-info {
|
||||
border-color: $blue-100;
|
||||
background-color: $gray-010;
|
||||
}
|
||||
%notice-info header * {
|
||||
color: $blue-700;
|
||||
}
|
||||
%notice-highlight {
|
||||
background-color: $gray-050;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
%notice-info header * {
|
||||
color: $gray-700;
|
||||
}
|
||||
%notice-warning {
|
||||
border-color: $yellow-100;
|
||||
background-color: $yellow-050;
|
||||
}
|
||||
%notice-warning header * {
|
||||
color: $yellow-800;
|
||||
}
|
||||
%notice-error {
|
||||
background-color: $red-050;
|
||||
border-color: $red-500;
|
||||
}
|
||||
%notice-success::before {
|
||||
@extend %with-check-circle-fill-color-mask;
|
||||
color: $green-500;
|
||||
}
|
||||
%notice-info::before {
|
||||
@extend %with-info-circle-fill-color-mask;
|
||||
color: $blue-500;
|
||||
}
|
||||
%notice-highlight::before {
|
||||
@extend %with-star-fill-mask;
|
||||
color: $yellow-500;
|
||||
}
|
||||
%notice-warning::before {
|
||||
@extend %with-alert-triangle-color-mask;
|
||||
color: $orange-500;
|
||||
}
|
||||
%notice-error::before {
|
||||
@extend %with-cancel-square-fill-color-mask;
|
||||
color: $red-500;
|
||||
}
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
@import './inline-alert/index';
|
||||
@import './menu-panel/index';
|
||||
@import './modal-dialog/index';
|
||||
@import './notice/index';
|
||||
@import './pill/index';
|
||||
@import './popover-menu/index';
|
||||
@import './radio-group/index';
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
%notice {
|
||||
border-radius: $decor-radius-100;
|
||||
border: 1px solid;
|
||||
color: $black;
|
||||
}
|
||||
%notice p:last-child a:only-child {
|
||||
@extend %p3;
|
||||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
%notice-success,
|
||||
%notice-info,
|
||||
%notice-highlight,
|
||||
%notice-error,
|
||||
%notice-warning {
|
||||
@extend %notice;
|
||||
}
|
||||
%notice::before {
|
||||
@extend %as-pseudo;
|
||||
}
|
||||
%notice-success {
|
||||
@extend %frame-green-500;
|
||||
}
|
||||
%notice-info {
|
||||
border-color: $blue-100;
|
||||
background-color: $gray-010;
|
||||
}
|
||||
%notice-info header * {
|
||||
color: $blue-700;
|
||||
}
|
||||
%notice-highlight {
|
||||
@extend %frame-gray-800;
|
||||
}
|
||||
%notice-warning {
|
||||
border-color: $yellow-100;
|
||||
background-color: $yellow-050;
|
||||
}
|
||||
%notice-warning header * {
|
||||
color: $yellow-800;
|
||||
}
|
||||
%notice-error {
|
||||
@extend %frame-red-500;
|
||||
}
|
||||
|
|
@ -29,7 +29,6 @@
|
|||
@import './components/modal-dialog';
|
||||
@import './components/auth-form';
|
||||
@import './components/auth-modal';
|
||||
@import './components/notice';
|
||||
@import './components/oidc-select';
|
||||
@import './components/discovery-chain';
|
||||
@import './components/empty-state';
|
||||
|
|
@ -55,11 +54,7 @@
|
|||
|
||||
/**/
|
||||
|
||||
/**
|
||||
* Migration: We are migrating our consul-* styles to use colocated styles
|
||||
* consul-* component styles should be moved or added under here
|
||||
* when convienient
|
||||
**/
|
||||
@import 'consul-ui/components/notice';
|
||||
|
||||
@import 'consul-ui/components/consul/exposed-path/list';
|
||||
@import 'consul-ui/components/consul/external-source';
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
%notice {
|
||||
margin: 1em 0;
|
||||
}
|
||||
%notice-success::before {
|
||||
@extend %with-check-circle-fill-color-icon;
|
||||
}
|
||||
%notice-info::before {
|
||||
@extend %with-info-circle-fill-color-icon;
|
||||
}
|
||||
%notice-highlight::before {
|
||||
@extend %with-star-icon;
|
||||
}
|
||||
%notice-warning::before {
|
||||
@extend %with-alert-triangle-color-icon;
|
||||
}
|
||||
%notice-error::before {
|
||||
@extend %with-cancel-square-fill-color-icon;
|
||||
}
|
||||
/**/
|
||||
.notice.success {
|
||||
@extend %notice-success;
|
||||
}
|
||||
.notice.warning {
|
||||
@extend %notice-warning;
|
||||
}
|
||||
.notice.error {
|
||||
@extend %notice-error;
|
||||
}
|
||||
.notice.info {
|
||||
@extend %notice-info;
|
||||
}
|
||||
.notice.policy-management {
|
||||
@extend %notice-highlight;
|
||||
}
|
||||
.notice.crd::before {
|
||||
@extend %with-logo-kubernetes-color-icon;
|
||||
}
|
||||
|
|
@ -1,4 +1,16 @@
|
|||
<p class="notice policy-management"><strong>Management</strong> This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
|
||||
<Notice
|
||||
class="policy-management"
|
||||
@type="none"
|
||||
as |notice|>
|
||||
<notice.Header>
|
||||
<h3>Management</h3>
|
||||
</notice.Header>
|
||||
<notice.Body>
|
||||
<p>
|
||||
This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies" target="_blank" rel="noopener noreferrer">documentation</a>.
|
||||
</p>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
<div class="definition-table">
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,18 @@
|
|||
</BlockSlot>
|
||||
<BlockSlot @name="content">
|
||||
{{#if (token/is-legacy item)}}
|
||||
<p class="notice info"><strong>Update.</strong> We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
|
||||
<Notice
|
||||
@type="info"
|
||||
as |notice|>
|
||||
<notice.Header>
|
||||
<h3>Update</h3>
|
||||
</notice.Header>
|
||||
<notice.Body>
|
||||
<p>
|
||||
We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.
|
||||
</p>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
{{/if}}
|
||||
{{#if (not create) }}
|
||||
<div class="definition-table">
|
||||
|
|
|
|||
|
|
@ -51,7 +51,16 @@
|
|||
</BlockSlot>
|
||||
<BlockSlot @name="content">
|
||||
{{#if (token/is-legacy items)}}
|
||||
<p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
|
||||
<Notice
|
||||
@type="info"
|
||||
as |notice|>
|
||||
<notice.Header>
|
||||
<h3>Update</h3>
|
||||
</notice.Header>
|
||||
<notice.Body>
|
||||
<p data-test-notification-update>We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
{{/if}}
|
||||
{{#let (filter (filter-predicate 'token' filters) items) as |filtered|}}
|
||||
{{#let (sort-by (comparator 'token' sort) filtered) as |sorted|}}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,15 @@
|
|||
</BlockSlot>
|
||||
<BlockSlot @name="content">
|
||||
{{#if session}}
|
||||
<p class="notice warning">
|
||||
<Notice
|
||||
@type="warning"
|
||||
as |notice|>
|
||||
<notice.Body>
|
||||
<p>
|
||||
<strong>Warning.</strong> This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html" target="_blank" rel="noopener noreferrer">our documentation</a> for more information.
|
||||
</p>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
{{/if}}
|
||||
<Consul::Kv::Form
|
||||
@item={{item}}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,18 @@
|
|||
</h1>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="content">
|
||||
<div class="notice info">
|
||||
<Notice
|
||||
@type="info"
|
||||
as |notice|>
|
||||
<notice.Header>
|
||||
<h3>Local Storage</h3>
|
||||
</notice.Header>
|
||||
<notice.Body>
|
||||
<p>
|
||||
These settings are immediately saved to local storage and persisted through browser usage.
|
||||
</p>
|
||||
</div>
|
||||
</notice.Body>
|
||||
</Notice>
|
||||
<form>
|
||||
{{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
|
||||
<fieldset data-test-blocking-queries>
|
||||
|
|
|
|||
Loading…
Reference in New Issue