feat: update alerts to Hds::Alert component (CC-4035) (#16412)

This commit is contained in:
Valeriia Ruban 2023-02-24 20:07:12 -08:00 committed by GitHub
parent 4c8c6a9ecb
commit b5b0693666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 231 additions and 340 deletions

3
.changelog/16412.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Update alerts to Hds::Alert component
```

View File

@ -34,14 +34,12 @@
</Notice>
{{/if}}
{{else if (eq @type 'kv')}}
<Notice
@type="warning"
data-test-session-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>
<Hds::Alert @type='inline' @color='warning' class='mb-3' data-test-session-warning as |A|>
<A.Title>Warning</A.Title>
<A.Description>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.</A.Description>
<A.Link::Standalone @text='Learn more'
@href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html"
@icon='docs-link'
@iconPosition='trailing' />
</Hds::Alert>
{{/if}}

View File

@ -13,14 +13,10 @@
<fsm.State @matches={{array "idle" "error"}}>
<fsm.State @matches={{"error"}}>
<Notice @type="error" role="alert" as |notice|>
<notice.Body>
<p>
<strong>Error</strong><br />
{{fsm.state.context.error.message}}
</p>
</notice.Body>
</Notice>
<Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
<A.Title>Error</A.Title>
<A.Description>{{fsm.state.context.error.message}}</A.Description>
</Hds::Alert>
</fsm.State>
{{yield
(hash

View File

@ -14,14 +14,10 @@
as |writer|
>
<BlockSlot @name="error" as |after error|>
<Notice @type="error" role="alert" as |notice|>
<notice.Body>
<p>
<strong>Error</strong><br />
{{error.message}}
</p>
</notice.Body>
</Notice>
<Hds::Alert @type='critical' class='mb-3 mt-2' as |A|>
<A.Title>Error</A.Title>
<A.Description>{{error.message}}</A.Description>
</Hds::Alert>
</BlockSlot>
<BlockSlot @name="content">
{{#let (unique-id) as |id|}}

View File

@ -37,40 +37,52 @@
{{/if}}
<State @matches='error'>
{{#if this.error.status}}
<Notice @type='error' role='alert' as |notice|>
<notice.Body>
<p>
<Hds::Alert @type='inline' @color='critical' class='mb-1 mt-2' as |A|>
<A.Title>
{{#if this.value.Name}}
{{#if (eq this.error.status '403')}}
Consul login failed
{{else if (eq this.error.status '401')}}
Could not log in to provider
{{else if (eq this.error.status '499')}}
SSO log in window closed
{{else}}
Error
{{/if}}
{{else}}
{{#if (eq this.error.status '403')}}
Invalid token
{{else if (eq this.error.status '404')}}
No providers
{{else}}
Error
{{/if}}
{{/if}}
</A.Title>
<A.Description>
{{#if this.value.Name}}
{{#if (eq this.error.status '403')}}
<strong>Consul login failed</strong><br />
We received a token from your OIDC provider but could not log in to Consul
with it.
{{else if (eq this.error.status '401')}}
<strong>Could not log in to provider</strong><br />
The OIDC provider has rejected this access token. Please have an
administrator check your auth method configuration.
{{else if (eq this.error.status '499')}}
<strong>SSO log in window closed</strong><br />
The OIDC provider window was closed. Please try again.
{{else}}
<strong>Error</strong><br />
{{this.error.detail}}
{{/if}}
{{else}}
{{#if (eq this.error.status '403')}}
<strong>Invalid token</strong><br />
The token entered does not exist. Please enter a valid token to log in.
{{else if (eq this.error.status '404')}}
<strong>No providers</strong><br />
No SSO providers are configured for that Partition.
{{else}}
<strong>Error</strong><br />
{{this.error.detail}}
{{/if}}
{{/if}}
</p>
</notice.Body>
</Notice>
</A.Description>
</Hds::Alert>
{{/if}}
</State>
<TabState @matches='token'>

View File

@ -133,20 +133,10 @@ as |item readonly|}}
{{#if api.isCreate}}
{{#if (and (can 'use partitions') (not (can 'choose partitions' dc=@dc)))}}
<Notice
@type="info"
as |notice|>
<notice.Header>
<h3>
Cross-partition communication not supported
</h3>
</notice.Header>
<notice.Body>
<p>
Cross-partition communication is not supported outside of the primary datacenter. You will only be able to select namespaces for source and destination services.
</p>
</notice.Body>
</Notice>
<Hds::Alert @type='inline' class='mb-3 mt-2' as |A|>
<A.Title>Cross-partition communication not supported</A.Title>
<A.Description>Cross-partition communication is not supported outside of the primary datacenter. You will only be able to select namespaces for source and destination services.</A.Description>
</Hds::Alert>
{{/if}}
{{#if this.isManagedByCRDs}}
<Consul::Intention::Notice::CustomResource @type="warning" />
@ -213,29 +203,14 @@ as |item readonly|}}
{{else}}
{{#if item.IsManagedByCRD}}
<Notice
class="crd"
@type="warning"
as |notice|>
<notice.Header>
<h3>
Intention Custom Resource
</h3>
</notice.Header>
<notice.Body>
<p>
This Intention is view only because it is managed through an Intention Custom Resource in your Kubernetes cluster.
</p>
</notice.Body>
<notice.Footer>
<Hds::Link::Standalone
@text='Learn more about CRDs'
<Hds::Alert @type="inline" class='mb-3 mt-2' as |A|>
<A.Title>Intention Custom Resource</A.Title>
<A.Description>This Intention is view only because it is managed through an Intention Custom Resource in your Kubernetes cluster.</A.Description>
<A.Link::Standalone @text='Learn more about CRDs'
@href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds"
@icon='docs-link'
@iconPosition='trailing'
/>
</notice.Footer>
</Notice>
@iconPosition='trailing' />
</Hds::Alert>
{{/if}}
<Consul::Intention::View

View File

@ -1,27 +1,9 @@
<Notice
class="consul-intention-notice-custom-resource crd"
...attributes
@type={{or @type "info"}}
as |notice|>
<notice.Header>
<h3>
Intention Custom Resource
</h3>
</notice.Header>
<notice.Body>
<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>
<Hds::Link::Standalone
@href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds"
<Hds::Alert @type='inline' @color={{or @type "neutral"}} class='mb-2 mt-2' as |A|>
<A.Title>Intention Custom Resource</A.Title>
<A.Description>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.</A.Description>
<A.Link::Standalone @href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds"
@text='Learn more about CRDs'
@icon="docs-link"
@iconPosition="trailing"
@size="small"
/>
</p>
</notice.Footer>
</Notice>
@size="small" />
</Hds::Alert>

View File

@ -1,21 +1,10 @@
<Notice
@type="info"
as |notice|>
<notice.Body>
<p>
{{t "components.consul.intention.notice.permissions.body"}}
</p>
</notice.Body>
<notice.Footer>
<p>
<Hds::Link::Standalone
<Hds::Alert @type="inline" class="mb-3 mt-2" as |A|>
<A.Description>{{t "components.consul.intention.notice.permissions.body"}}</A.Description>
<A.Link::Standalone
@text={{t "components.consul.intention.notice.permissions.footer"}}
@href="{{env 'CONSUL_DOCS_URL'}}/connect/intentions"
@icon="docs-link"
@iconPosition="trailing"
@size="small"
/>
</p>
</notice.Footer>
</Notice>
</Hds::Alert>

View File

@ -1,29 +1,20 @@
{{#if isVisible}}
<Notice data-test-node-agentless-notice @type='info' class='agentless-node-notice' as |notice|>
<notice.Header>
<h3>
{{t 'routes.dc.nodes.index.agentless.notice.header'}}
</h3>
<Hds::Alert @type="inline" class='mb-3 mt-2' class='agentless-node-notice' data-test-node-agentless-notice as |A|>
<A.Title>
<span>{{t 'routes.dc.nodes.index.agentless.notice.header'}}</span>
<Hds::Button
@color='secondary'
@text='Dismiss notice'
{{on 'click' this.dismissAgentlessNotice}}
@icon='x'
@size='small'
@isIconOnly={{true}}
/>
</notice.Header>
<notice.Body>
<p>
{{t 'routes.dc.nodes.index.agentless.notice.body'}}
</p>
</notice.Body>
<notice.Footer>
<Hds::Button
@color='tertiary'
@href='{{env "CONSUL_DOCS_DEVELOPER_URL"}}/connect/dataplane'
</A.Title>
<A.Description>{{t 'routes.dc.nodes.index.agentless.notice.body'}}</A.Description>
<A.Link::Standalone @href='{{env "CONSUL_DOCS_DEVELOPER_URL"}}/connect/dataplane'
@text={{t 'routes.dc.nodes.index.agentless.notice.footer'}}
@icon='docs-link'
/>
</notice.Footer>
</Notice>
@iconPosition='trailing' />
</Hds::Alert>
{{/if}}

View File

@ -1,4 +1,4 @@
.agentless-node-notice header {
.agentless-node-notice .hds-alert__title {
display: flex;
justify-content: space-between;
}

View File

@ -71,19 +71,14 @@ as |dc partition nspace id item create|}}
</div>
{{/if}}
{{#if (eq (policy/typeof item) 'policy-management')}}
<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>
<Hds::Alert @type="inline" @icon="star-fill" class="mb-3 mt-2" as |A|>
<A.Title>Management</A.Title>
<A.Description>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.</A.Description>
<A.Link::Standalone @text='Learn more'
@href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies"
@icon='docs-link'
@iconPosition='trailing' />
</Hds::Alert>
<div class="definition-table">
<dl>
<dt>Name</dt>

View File

@ -96,18 +96,14 @@ as |dc partition nspace item create|}}
</BlockSlot>
<BlockSlot @name="content">
{{#if (token/is-legacy item)}}
<Notice
@type="info"
as |notice|>
<notice.Header>
<h2>Update</h2>
</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>
<Hds::Alert @type='inline' class='mb-6' as |A|>
<A.Title>Update</A.Title>
<A.Description>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.</A.Description>
<A.Link::Standalone @text='Learn more'
@href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html"
@icon='docs-link'
@iconPosition='trailing' />
</Hds::Alert>
{{/if}}
{{#if (not create) }}
<div class="definition-table">

View File

@ -80,16 +80,14 @@ as |route|>
</BlockSlot>
<BlockSlot @name="content">
{{#if (token/is-legacy items)}}
<Notice
@type="info"
as |notice|>
<notice.Header>
<h2>Update</h2>
</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>
<Hds::Alert @type='inline' class='mb-3 mt-3' as |A|>
<A.Title>Update</A.Title>
<A.Description 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.</A.Description>
<A.Link::Standalone @text='Learn more'
@href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html"
@icon='docs-link'
@iconPosition='trailing' />
</Hds::Alert>
{{/if}}
<DataCollection
@type="token"

View File

@ -137,7 +137,7 @@ as |sort filters parent items|}}
</BlockSlot>
<BlockSlot @name="actions">
{{#if (can 'create kvs')}}
{{#if (not-eq parent.Key '/') }}
{{#if (and parent.Key (not-eq parent.Key '/')) }}
<Hds::Button
@text='Create'
@isHrefExternal={{false}}

View File

@ -49,22 +49,10 @@ as |route|>
{{/if}}
{{#let (find-by "Type" "serf" items) as |serf|}}
{{#if (and serf (eq serf.Status "critical"))}}
<Notice
data-test-critical-serf-notice
@type="warning"
as |notice|>
<notice.Header>
<h2>
{{t "routes.dc.nodes.show.healthchecks.critical-serf-notice.header"}}
</h2>
</notice.Header>
<notice.Body>
{{t
"routes.dc.nodes.show.healthchecks.critical-serf-notice.body"
htmlSafe=true
}}
</notice.Body>
</Notice>
<Hds::Alert @type="inline" @color="warning" class="mb-3 mt-2" data-test-critical-serf-notice as |A|>
<A.Title>{{t "routes.dc.nodes.show.healthchecks.critical-serf-notice.header"}}</A.Title>
<A.Description>{{t "routes.dc.nodes.show.healthchecks.critical-serf-notice.body"}}</A.Description>
</Hds::Alert>
{{/if}}
{{/let}}
<DataCollection

View File

@ -45,19 +45,13 @@
{{#let (find-by 'Type' 'serf' items) as |serf|}}
{{#if (and serf (eq serf.Status 'critical'))}}
<Notice data-test-critical-serf-notice @type='warning' as |notice|>
<notice.Header>
<h2>
{{t 'routes.dc.services.instance.healthchecks.critical-serf-notice.header'}}
</h2>
</notice.Header>
<notice.Body>
{{t
<Hds::Alert @type="inline" @color="warning" class="mb-3 mt-2" data-test-critical-serf-notice as |A|>
<A.Title>{{t 'routes.dc.services.instance.healthchecks.critical-serf-notice.header'}}</A.Title>
<A.Description>{{t
'routes.dc.services.instance.healthchecks.critical-serf-notice.body'
htmlSafe=true
}}
</notice.Body>
</Notice>
}}</A.Description>
</Hds::Alert>
{{/if}}
{{/let}}
<DataCollection

View File

@ -44,31 +44,19 @@ as |route|>
{{! TODO: Looks like we can get this straight from item.Proxy.Mode }}
{{! the less we need `proxy` and `meta` the better }}
{{#if (eq meta.ServiceProxy.Mode 'transparent')}}
<Notice
@type="warning"
as |notice|>
<notice.Header>
<h3>
{{t "routes.dc.services.instance.upstreams.tproxy-mode.header"}}
</h3>
</notice.Header>
<notice.Body>
{{t "routes.dc.services.instance.upstreams.tproxy-mode.body"
htmlSafe=true
}}
</notice.Body>
<notice.Footer>
<p>
<Hds::Link::Standalone
<Hds::Alert @type="inline" @color="warning" class="mb-3 mt-2" as |A|>
<A.Title>{{t "routes.dc.services.instance.upstreams.tproxy-mode.header"}}</A.Title>
<A.Description>
{{t "routes.dc.services.instance.upstreams.tproxy-mode.body"}}
</A.Description>
<A.Link::Standalone
@text={{t "routes.dc.services.instance.upstreams.tproxy-mode.footer.text"}}
@href='{{concat (env 'CONSUL_DOCS_URL') (t "routes.dc.services.instance.upstreams.tproxy-mode.footer.link")}}'
@icon="docs-link"
@iconPosition="trailing"
@size="small"
/>
</p>
</notice.Footer>
</Notice>
</Hds::Alert>
{{/if}}
<DataCollection
@type="upstream-instance"

View File

@ -59,51 +59,61 @@ as |nspace dc items topology|}}
<disclosure.Details
@auto={{false}}
as |details|>
<Notice
class="topology-metrics-notice"
id={{details.id}}
<Hds::Alert id={{details.id}}
@type='inline'
@color={{if (includes prop (array 'filtered-by-acls' 'no-dependencies'))
'neutral'
'warning'}}
class='mb-3 mt-2 topology-metrics-notice'
data-test-notice={{prop}}
@type={{if (includes prop (array 'filtered-by-acls' 'no-dependencies'))
'info'
'warning'
}}
as |notice|>
<notice.Header>
<h3>
as |A|>
<A.Title>
{{compute (fn route.t 'notice.${prop}.header'
(hash
prop=prop
)
)}}
</h3>
</notice.Header>
))
}}
</A.Title>
{{#if disclosure.expanded}}
<notice.Body>
<p>
<A.Description>
{{compute (fn route.t 'notice.${prop}.body'
(hash
prop=prop
)
)}}
</p>
</notice.Body>
{{/if}}
{{#let
(compute (fn route.t 'notice.${prop}.footer'
(hash
route_intentions=(href-to 'dc.services.show.intentions')
prop=prop
htmlSafe=true
)
))
as |footer|}}
{{#if (and disclosure.expanded (not-eq prop 'filtered-by-acls'))}}
<notice.Footer>
{{footer}}
</notice.Footer>
}}
</A.Description>
{{/if}}
{{/let}}
</Notice>
{{#if (and disclosure.expanded (not-eq prop 'filtered-by-acls'))}}
{{#if (includes prop (array 'wildcard-intention' 'default-allow' 'no-intentions'))}}
<A.Button
@color='secondary'
@size='small'
@route='dc.services.show.intentions'
@text={{compute (fn route.t 'notice.${prop}.footer.link-text'
(hash
prop=prop
))}}
@icon={{compute (fn route.t 'notice.${prop}.footer.icon'
(hash
prop=prop
))}}
/>
{{else}}
<A.Link::Standalone
@text={{compute (fn route.t 'notice.${prop}.footer.link-text'
(hash
prop=prop
))}}
@href={{compute (fn route.t 'notice.${prop}.footer.link'
(hash
prop=prop
))}}
@icon='docs-link'
@iconPosition='trailing'
/>
{{/if}}
{{/if}}
</Hds::Alert>
</disclosure.Details>
{{/if}}
{{/each-in}}

View File

@ -26,18 +26,10 @@ as |item|}}
</h1>
</BlockSlot>
<BlockSlot @name="content">
<Notice
@type="info"
as |notice|>
<notice.Header>
<h2>Local Storage</h2>
</notice.Header>
<notice.Body>
<p>
These settings are immediately saved to local storage and persisted through browser usage.
</p>
</notice.Body>
</Notice>
<Hds::Alert @type="inline" class='mb-3 mt-2' as |A|>
<A.Title>Local Storage</A.Title>
<A.Description>These settings are immediately saved to local storage and persisted through browser usage.</A.Description>
</Hds::Alert>
<form>
{{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
<Disclosure as |disclosure|>

View File

@ -245,17 +245,11 @@ dc:
</p>
critical-serf-notice:
header: Failing serf check
body: |
<p>
This instance has a failing serf node check. The health statuses shown on this page are the statuses as they were known before the node became unreachable.
</p>
body: This instance has a failing serf node check. The health statuses shown on this page are the statuses as they were known before the node became unreachable.
upstreams:
tproxy-mode:
header: Transparent proxy mode
body: |
<p>
The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
</p>
body: The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
footer:
link: "/connect/transparent-proxy"
text: Read the documentation
@ -278,45 +272,39 @@ dc:
default-allow:
header: Restrict which services can connect
body: Your current ACL settings allow all services to connect to each other. Either create a deny intention between all services, or set your default ACL policy to deny to improve your security posture and make this topology view reflect the actual upstreams and downstreams of this service.
footer: |
<p>
<a href="{route_intentions}">Create a wildcard deny Intention</a>
</p>
footer:
link-text: Create a wildcard deny Intention
icon: plus
wildcard-intention:
header: Restrict which services can connect
body: There is currently a wildcard Intention that allows all services to connect to each other. Change the action of that Intention to deny to improve your security posture and have this topology view reflect the actual upstreams and downstreams of this service.
footer: |
<p>
<a href="{route_intentions}">Edit wildcard intentions</a>
</p>
footer:
link-text: Edit wildcard intentions
icon: edit
not-defined-intention:
header: Add upstream to allow traffic
body: An Intention was defined that allows traffic between services, but those services are unable to communicate. Define an explicit upstream in the service definition or enable transparent proxy to fix this.
footer: |
<p>
<a href="{CONSUL_DOCS_URL}/connect/registration/service-registration#upstreams" target="_blank" rel="noopener noreferrer">Learn how to add upstreams</a>
</p>
footer:
link: '{CONSUL_DOCS_URL}/connect/registration/service-registration#upstreams'
link-text: Learn how to add upstreams
no-dependencies:
header: No dependencies
body: The service you are viewing currently has no dependencies. You will only see metrics for the current service until dependencies are added.
footer: |
<p>
<a href="{CONSUL_DOCS_URL}/connect/registration/service-registration#upstream-configuration-reference" target="_blank" rel="noopener noreferrer">Read the documentation</a>
</p>
footer:
link: '{CONSUL_DOCS_URL}/connect/registration/service-registration#upstream-configuration-reference'
link-text: Read the documentation
acls-disabled:
header: Restrict which services can connect
body: Your current ACL settings allow all services to connect to each other. Either create a deny intention between all services, or enable ACLs and set your default ACL policy to deny to improve your security posture and make this topology view reflect the actual upstreams and downstreams of this service.
footer: |
<p>
<a href="{CONSUL_DOCS_URL}/security/acl/acl-system#configuring-acls" target="_blank" rel="noopener noreferrer">Read the documentation</a>
</p>
footer:
link: '{ CONSUL_DOCS_URL }/security/acl/acl-system#configuring-acls'
link-text: Read the documentation
no-intentions:
header: Add Intention to allow traffic
body: There is an upstream registered for this service, but that upstream cannot receive traffic without creating an allow intention.
footer: |
<p>
<a href="{route_intentions}">Edit Intentions</a>
</p>
footer:
link-text: Edit Intentions
icon: edit
intentions:
index:
empty: