luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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)
This commit is contained in:
John Cowen 2021-11-24 18:14:07 +00:00 committed by GitHub
parent f605689154
commit 124fa8f168
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 618 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/11577.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Update global notification styling
```

12
ui/packages/consul-ui/app/components/app-view/README.mdx
View File

@ -8,9 +8,7 @@ state: needs-love
the app chrome), every 'top level main section/template' should have one of
these.
It contains legacy authorization code (that can probably be removed now), and
our flash messages (that should be moved to the `<App />` or `<HashicorpConsul
/>` component and potentially be renamed to `Page` or `View` or similar now
This component will potentially be renamed to `Page` or `View` or similar now
that we don't need two words.
Other than that it provides the basic layout/slots for our main title, search
@ -86,20 +84,12 @@ breadcrumbs and back again.
</figure>
```
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `authorized` | `Boolean` | `true` | Whether the View is authorized or not |
| `enabled` | `Boolean` | `true` | Whether ACLs are enabled or not |
## Slots
| Name | Description |
| --- | --- |
| `header` | The main title of the page, you probably want to put a `<h1>` in here |
| `content` | The main content of the page, and potentially an `<Outlet />` somewhere |
| `notification` | Old style notifications, also see `<Notification />` |
| `breadcrumbs` | Any breadcrumbs, you probably want an `ol/li/a` in here |
| `actions` | Any actions relevant for the entire page, probably using `<Action />` |
| `nav` | Secondary navigation goes in here, also see `<TabNav />` |

83
ui/packages/consul-ui/app/components/app-view/index.hbs
View File

@ -4,74 +4,23 @@
>
{{yield}}
<header>
{{#each flashMessages.queue as |flash|}}
<FlashMessage @flash={{flash}} as |component flash|>
{{#if flash.dom}}
{{{flash.dom}}}
{{else}}
{{#let (lowercase component.flashType) (lowercase flash.action) as |status type|}}
{{! flashes automatically ucfirst the type }}
<p data-notification role="alert" class={{concat status ' notification-' type}}>
<strong>
{{capitalize status}}!
</strong>
{{#yield-slot name="notification" params=(block-params status type flash.item flash.error)}}
{{yield}}
{{#if (eq type 'logout')}}
{{#if (eq status 'success') }}
You are now logged out.
{{else}}
There was an error logging out.
{{/if}}
{{else if (eq type 'authorize')}}
{{#if (eq status 'success') }}
You are now logged in.
{{else}}
There was an error, please check your SecretID/Token
{{/if}}
{{/if}}
{{else}}
{{#if (eq type 'logout')}}
{{#if (eq status 'success') }}
You are now logged out.
{{else}}
There was an error logging out.
{{/if}}
{{else if (eq type 'authorize')}}
{{#if (eq status 'success') }}
You are now logged in.
{{else}}
There was an error, please check your SecretID/Token
{{/if}}
{{/if}}
{{/yield-slot}}
</p>
{{/let}}
{{/if}}
</FlashMessage>
{{/each}}
<div>
<div>
{{#if authorized}}
<nav aria-label="Breadcrumb" data-test-breadcrumbs>
<YieldSlot @name="breadcrumbs">
{{document-attrs class="with-breadcrumbs"}}
{{yield}}
</YieldSlot>
</nav>
{{/if}}
<div class="title">
<YieldSlot @name="header">
{{yield}}
</YieldSlot>
<div class="actions">
{{#if authorized}}
<YieldSlot @name="actions">
<PortalTarget @name="app-view-actions" />
{{yield}}
</YieldSlot>
{{/if}}
</div>
</div>
<YieldSlot @name="nav">
@ -79,42 +28,12 @@
</YieldSlot>
</div>
</div>
{{#if authorized}}
<YieldSlot @name="toolbar">
<input type="checkbox" id="toolbar-toggle" />
{{yield}}
</YieldSlot>
{{/if}}
</header>
<div>
{{#if (not enabled) }}
<EmptyState data-test-acls-disabled>
<BlockSlot @name="header">
<h2>Welcome to ACLs</h2>
</BlockSlot>
<BlockSlot @name="body">
<p>
ACLs are not enabled in this Consul cluster. We strongly encourage the use of ACLs in production environments for the best security practices.
</p>
</BlockSlot>
<BlockSlot @name="actions">
<li class="docs-link">
<a href="{{env 'CONSUL_DOCS_URL'}}/acl/index.html" rel="noopener noreferrer" target="_blank">Read the documentation</a>
</li>
<li class="learn-link">
<a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/security-networking/production-acls" rel="noopener noreferrer" target="_blank">Follow the guide</a>
</li>
</BlockSlot>
</EmptyState>
{{else if (not authorized)}}
<ErrorState
@error={{hash
status='403'
}}
@login={{login}}
/>
{{else}}
<YieldSlot @name="content">{{yield}}</YieldSlot>
{{/if}}
<YieldSlot @name="content">{{yield}}</YieldSlot>
</div>
</div>

2
ui/packages/consul-ui/app/components/app-view/index.js
View File

@ -2,6 +2,4 @@ import Component from '@ember/component';
import SlotsMixin from 'block-slots';
export default Component.extend(SlotsMixin, {
tagName: '',
authorized: true,
enabled: true,
});

12
ui/packages/consul-ui/app/components/app/index.hbs
View File

@ -1,5 +1,6 @@
{{#let (hash
main=(concat guid '-main')
Notification=(component 'app/notification')
) as |exported|}}
<div
@ -13,7 +14,7 @@
>
<PortalTarget
@name="app-before-skip-links"
@mutiple={{true}}
@multiple={{true}}
></PortalTarget>
<a href={{concat '#' exported.main}}>{{t 'components.app.skip_to_content'}}</a>
{{!--
@ -25,7 +26,7 @@
--}}
<PortalTarget
@name="app-after-skip-links"
@mutiple={{true}}
@multiple={{true}}
></PortalTarget>
</div>
@ -78,6 +79,13 @@
</div>
</header>
<main id={{concat guid '-main'}}>
<div class="notifications">
{{yield exported to="notifications"}}
<PortalTarget
@name="app-notifications"
@multiple={{true}}
></PortalTarget>
</div>
{{yield exported to="main"}}
</main>
<footer

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

@ -1,6 +1,33 @@
.app .skip-links {
@extend %skip-links;
}
.app .notifications {
@extend %app-notifications;
}
%app-notifications {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
z-index: 50;
top: -45px;
left: 0;
pointer-events: none;
}
%app-notifications .app-notification > * {
min-width: 400px;
}
%app-notifications .app-notification {
@extend %with-transition-500;
transition-property: opacity;
width: fit-content;
max-width: 80%;
pointer-events: auto;
}
[role='banner'] {
@extend %main-header-horizontal;
}
@ -32,6 +59,7 @@
@extend %main-nav-horizontal-action-active;
}
%main-nav-sidebar,
%main-notifications,
main {
@extend %transition-pushover;
}
@ -39,34 +67,50 @@ main {
transition-property: left;
z-index: 10;
}
%app-notifications,
main {
margin-top: var(--chrome-height, 64px);
transition-property: margin-left;
}
%app-notifications {
transition-property: margin-left, width;
}
@media #{$--sidebar-open} {
%main-nav-horizontal-toggle ~ main .notifications {
width: calc(100% - var(--chrome-width));
}
%main-nav-horizontal-toggle:checked ~ main .notifications {
width: 100%;
}
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
left: 0;
}
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
left: calc(var(--chrome-width, 300px) * -1);
}
%main-nav-horizontal-toggle ~ main .notifications,
%main-nav-horizontal-toggle ~ main,
%main-nav-horizontal-toggle ~ footer {
margin-left: var(--chrome-width, 300px);
}
%main-nav-horizontal-toggle:checked ~ main .notifications,
%main-nav-horizontal-toggle:checked ~ main,
%main-nav-horizontal-toggle:checked ~ footer {
margin-left: 0;
}
}
@media #{$--lt-sidebar-open} {
%main-nav-horizontal-toggle ~ main .notifications {
width: 100%;
}
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
left: 0;
}
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
left: calc(var(--chrome-width, 300px) * -1);
}
%main-nav-horizontal-toggle ~ main .notifications,
%main-nav-horizontal-toggle ~ main,
%main-nav-horizontal-toggle ~ footer {
margin-left: 0;

19
ui/packages/consul-ui/app/components/app/notification/index.hbs Normal file
View File

@ -0,0 +1,19 @@
<div
class="app-notification"
...attributes
{{style
(array
(array 'opacity' '1')
(array 'transition-delay' (concat @delay 'ms'))
)
}}
{{style
(array
(array 'opacity' (if @sticky '1' '0'))
)
delay=0
}}
>
{{yield}}
</div>

2
ui/packages/consul-ui/app/components/auth-dialog/index.hbs
View File

@ -47,7 +47,7 @@ as |State Guard Action dispatch state|>
</State>
<State @matches="unauthorized">
{{#yield-slot name="unauthorized"}}
{{#yield-slot name="unauthorized"}}
{{yield api components}}
{{/yield-slot}}
</State>

50
ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
View File

@ -14,21 +14,45 @@
@onsubmit={{action this.onsubmit}}
as |api|>
<BlockSlot @name="error" as |Notification|>
<Notification>
<p data-notification role="alert" class="error notification-update">
{{#if (string-starts-with api.error.detail 'duplicate intention found:')}}
<strong>Intention exists</strong>
An intention already exists for this Source-Destination pair. Please enter a different combination of Services, or search the intentions to edit an existing intention.
{{else}}
<BlockSlot @name="error" as |after|>
{{#if (string-starts-with api.error.detail 'duplicate intention found:')}}
<Notice
{{notification
after=(action after)
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Intention exists!</strong>
</notice.Header>
<notice.Body>
<p>
An intention already exists for this Source-Destination pair. Please enter a different combination of Services, or search the intentions to edit an existing intention.
</p>
</notice.Body>
</Notice>
{{else}}
<Notice
{{notification
after=(action after)
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
There was an error saving your intention.
{{#if (and api.error.status api.error.detail)}}
<br />{{api.error.status}}: {{api.error.detail}}
{{/if}}
</notice.Header>
<notice.Body>
<p>
There was an error saving your intention.
{{#if (and api.error.status api.error.detail)}}
<br />{{api.error.status}}: {{api.error.detail}}
{{/if}}
</p>
</notice.Body>
</Notice>
{{/if}}
</p>
</Notification>
</BlockSlot>
<BlockSlot @name="form">

22
ui/packages/consul-ui/app/components/data-loader/index.hbs
View File

@ -49,16 +49,26 @@
<State @matches={{array "idle" "disconnected"}}>
<State @matches="disconnected">
{{#yield-slot name="disconnected" params=(block-params (component 'notification' after=(action dispatch "RESET")))}}
{{#yield-slot name="disconnected" params=(block-params (action dispatch "RESET"))}}
{{yield api}}
{{else}}
{{#if (not eq error.status '401')}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
An error was returned whilst loading this data, refresh to try again.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
An error was returned whilst loading this data, refresh to try again.
</p>
</notice.Body>
</Notice>
{{/if}}
{{/yield-slot}}
</State>

85
ui/packages/consul-ui/app/components/data-writer/index.hbs
View File

@ -33,46 +33,89 @@
</State>
<State @matches="removed">
{{#yield-slot name="removed" params=(block-params (component 'notification' after=(queue (action dispatch "RESET") (action ondelete))))}}
{{#let
(queue (action dispatch "RESET") (action ondelete))
as |after|}}
{{#yield-slot name="removed" params=(block-params after)}}
{{yield api}}
{{else}}
<Notification @after={{queue (action dispatch "RESET") (action ondelete)}}>
<p data-notification role="alert" class="success notification-delete">
<strong>Success!</strong>
<Notice
{{notification
after=(action after)
}}
class="notification-delete"
@type="success"
as |notice|>
<notice.Header>
<strong>Success!</strong>
</notice.Header>
<notice.Body>
<p>
Your {{or label type}} has been deleted.
</p>
</Notification>
</notice.Body>
</Notice>
{{/yield-slot}}
{{/let}}
</State>
<State @matches="persisted">
<Notification @after={{action onchange}}>
{{#yield-slot name="persisted"}}
{{yield api}}
{{else}}
<p data-notification role="alert" class="success notification-update">
{{#let
(action onchange)
as |after|}}
{{#yield-slot name="persisted" params=(block-params after)}}
{{yield api}}
{{else}}
<Notice
{{notification
after=(action after)
}}
class="notification-update"
@type="success"
as |notice|>
<notice.Header>
<strong>Success!</strong>
Your {{or label type}} has been saved.
</p>
{{/yield-slot}}
</Notification>
</notice.Header>
<notice.Body>
<p>
Your {{or label type}} has been saved.
</p>
</notice.Body>
</Notice>
{{/yield-slot}}
{{/let}}
</State>
<State @matches="error">
{{#yield-slot name="error" params=(block-params (component 'notification' after=(action dispatch "RESET")))}}
{{#let
(action dispatch "RESET")
as |after|}}
{{#yield-slot name="error" params=(block-params after)}}
{{yield api}}
{{else}}
<Notification @after={{action dispatch "RESET"}}>
<p data-notification role="alert" class="error notification-update">
<strong>Error!</strong>
<Notice
{{notification
after=(action after)
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
</notice.Header>
<notice.Body>
<p>
There was an error saving your {{or label type}}.
{{#if (and api.error.status api.error.detail)}}
{{#if (and api.error.status api.error.detail)}}
<br />{{api.error.status}}: {{api.error.detail}}
{{/if}}
{{/if}}
</p>
</Notification>
</notice.Body>
</Notice>
{{/yield-slot}}
{{/let}}
</State>
<YieldSlot @name="content">
{{yield api}}
</YieldSlot>

35
ui/packages/consul-ui/app/components/flash-message/README.mdx
View File

@ -1,35 +0,0 @@
---
class: css
state: needs-love
---
# flash-message
CSS component for styling our flash messages
```hbs preview-template
<div class="flash-message">
<p
role="alert"
class={{or this.type 'success'}}
>
<strong>
{{capitalize (or this.type 'success')}}!
</strong>
</p>
</div>
<figure>
<figcaption>Provide a widget to change the <code>class</code></figcaption>
<select
onchange={{action (mut this.type) value="target.value"}}
>
<option>success</option>
<option>warning</option>
<option>error</option>
<option>exists</option>
</select>
</figure>
```

19
ui/packages/consul-ui/app/components/flash-message/index.scss
View File

@ -1,19 +0,0 @@
@import './skin';
@import './layout';
.flash-message {
@extend %flash-message;
}
%flash-message.exiting {
@extend %blink-in-fade-out;
}
/* This is for the flash message that appears */
/* when you save an intention that already exists */
/* once we have refactored app-view with data-source with nicer */
/* flash message usage we should be able to remove this */
%flash-message p.exists strong::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
}
%flash-message p.exists {
@extend %frame-red-500;
}

12
ui/packages/consul-ui/app/components/flash-message/layout.scss
View File

@ -1,12 +0,0 @@
%flash-message {
display: flex;
position: relative;
z-index: 6;
justify-content: center;
margin: 0 15%;
}
%flash-message p {
top: -46px;
position: absolute;
padding: 9px 15px;
}

28
ui/packages/consul-ui/app/components/flash-message/skin.scss
View File

@ -1,28 +0,0 @@
%flash-message p {
border-width: 1px;
border-radius: var(--decor-radius-100);
}
%flash-message p strong::before {
@extend %as-pseudo;
}
%flash-message p.success strong::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));
}
%flash-message p.warning strong::before {
@extend %with-alert-triangle-mask;
color: rgb(var(--tone-orange-500));
}
%flash-message p.error strong::before {
@extend %with-cancel-square-fill-mask;
color: rgb(var(--tone-red-500));
}
%flash-message p.success {
@extend %frame-green-500;
}
%flash-message p.warning {
@extend %frame-yellow-500;
}
%flash-message p.error {
@extend %frame-red-500;
}

74
ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
View File

@ -3,7 +3,81 @@
class="hashicorp-consul"
...attributes
>
<:notifications as |app|>
{{#each flashMessages.queue as |flash|}}
<app.Notification
@delay={{sub flash.timeout flash.extendedTimeout}}
@sticky={{flash.sticky}}
>
{{#if flash.dom}}
{{{flash.dom}}}
{{else}}
{{#let (lowercase flash.type) (lowercase flash.action) as |status type|}}
<Notice
role="alert"
class={{concat status ' notification-' type}}
data-notification
@type={{status}}
as |notice|>
<notice.Header>
<strong>
{{capitalize status}}!
</strong>
</notice.Header>
<notice.Body>
<p>
{{#if (eq type 'logout')}}
{{#if (eq status 'success') }}
You are now logged out.
{{else}}
There was an error logging out.
{{/if}}
{{else if (eq type 'authorize')}}
{{#if (eq status 'success') }}
You are now logged in.
{{else}}
There was an error, please check your SecretID/Token
{{/if}}
{{else}}
{{#if (eq flash.model 'token')}}
<Consul::Token::Notifications
@type={{type}}
@status={{status}}
@item={{flash.item}}
@error={{flash.error}}
/>
{{else if (eq flash.model 'role')}}
<Consul::Role::Notifications
@type={{type}}
@status={{status}}
@item={{flash.item}}
@error={{flash.error}}
/>
{{else if (eq flash.model 'policy')}}
<Consul::Policy::Notifications
@type={{type}}
@status={{status}}
@item={{flash.item}}
@error={{flash.error}}
/>
{{else if (eq flash.model 'nspace')}}
<Consul::Nspace::Notifications
@type={{type}}
@status={{status}}
@item={{flash.item}}
@error={{flash.error}}
/>
{{/if}}
{{/if}}
</p>
</notice.Body>
</Notice>
{{/let}}
{{/if}}
</app.Notification>
{{/each}}
</:notifications>
<:home-nav>
<a
href={{href-to 'index'}}

3
ui/packages/consul-ui/app/components/hashicorp-consul/index.js
View File

@ -1,7 +1,10 @@
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class HashiCorpConsul extends Component {
@service('flashMessages') flashMessages;
@action
open() {
this.authForm.focus();

10
ui/packages/consul-ui/app/components/notice/skin.scss
View File

@ -24,9 +24,12 @@
background-color: rgb(var(--tone-green-050));
border-color: rgb(var(--tone-green-500));
}
%notice-success header * {
color: rgb(var(--tone-green-800));
}
%notice-info {
border-color: rgb(var(--tone-blue-100));
background-color: rgb(var(--tone-gray-010));
background-color: rgb(var(--tone-blue-010));
}
%notice-info header * {
color: rgb(var(--tone-blue-700));
@ -36,7 +39,7 @@
border-color: rgb(var(--tone-gray-300));
}
%notice-info header * {
color: rgb(var(--tone-gray-700));
color: rgb(var(--tone-blue-700));
}
%notice-warning {
border-color: rgb(var(--tone-yellow-100));
@ -49,6 +52,9 @@
background-color: rgb(var(--tone-red-050));
border-color: rgb(var(--tone-red-500));
}
%notice-error header * {
color: rgb(var(--tone-red-500));
}
%notice-success::before {
@extend %with-check-circle-fill-mask;
color: rgb(var(--tone-green-500));

3
ui/packages/consul-ui/app/components/notification/index.hbs
View File

@ -1,3 +0,0 @@
<div id={{guid}}>
{{yield}}
</div>

40
ui/packages/consul-ui/app/components/notification/index.js
View File

@ -1,40 +0,0 @@
import Component from '@ember/component';
import { inject as service } from '@ember/service';
export default Component.extend({
tagName: '',
notify: service('flashMessages'),
dom: service('dom'),
oncomplete: function() {},
init: function() {
this._super(...arguments);
this.guid = this.dom.guid(this);
},
didInsertElement: function() {
const $el = this.dom.element(`#${this.guid}`);
const options = {
timeout: 6000,
extendedTimeout: 300,
dom: $el.innerHTML,
};
if (this.sticky) {
options.sticky = true;
}
$el.remove();
this.notify.clearMessages();
if (typeof this.after === 'function') {
Promise.resolve(this.after())
.catch(e => {
if (e.name !== 'TransitionAborted') {
throw e;
}
})
.then(res => {
this.notify.add(options);
});
} else {
this.notify.add(options);
}
},
});

8
ui/packages/consul-ui/app/mixins/with-blocking-actions.js
View File

@ -1,6 +1,8 @@
import Mixin from '@ember/object/mixin';
import { inject as service } from '@ember/service';
import { set, get } from '@ember/object';
import { singularize } from 'ember-inflector';
/** With Blocking Actions
* This mixin contains common write actions (Create Update Delete) for routes.
* It could also be an Route to extend but decoration seems to be more sense right now.
@ -25,7 +27,11 @@ export default Mixin.create({
const route = this;
set(this, 'feedback', {
execute: function(cb, type, error) {
return feedback.execute(cb, type, error, route.controller);
const temp = route.routeName.split('.');
temp.pop();
const routeName = singularize(temp.pop());
return feedback.execute(cb, type, error, routeName);
},
});
},

37
ui/packages/consul-ui/app/modifiers/notification.js Normal file
View File

@ -0,0 +1,37 @@
import Modifier from 'ember-modifier';
import { inject as service } from '@ember/service';
export default class NotificationModifier extends Modifier {
@service('flashMessages') notify;
didInstall() {
this.element.setAttribute('role', 'alert');
this.element.dataset['notification'] = null;
const options = {
timeout: 6000,
extendedTimeout: 300,
...this.args.named,
};
options.dom = this.element.outerHTML;
this.element.remove();
this.notify.clearMessages();
if (typeof options.after === 'function') {
Promise.resolve().then(_ => options.after())
.catch(e => {
if (e.name !== 'TransitionAborted') {
throw e;
}
})
.then(res => {
this.notify.add(options);
});
} else {
this.notify.add(options);
}
}
willDestroy() {
if(this.args.named.sticky) {
this.notify.clearMessages();
}
}
}

34
ui/packages/consul-ui/app/modifiers/notification.mdx Normal file
View File

@ -0,0 +1,34 @@
# notification
Consul UIs notification modifier is used to 'hoist' DOM elements into the
global notification area for the UI. The most common usage will be something
like the below:
```hbs preview-template
<figure>
<figcaption>Attach a Warning notice to the top of the app ^^^</figcaption>
<Notice
class="notification-update"
@type="warning"
{{notification
sticky=true
}}
as |notice|>
<notice.Header>
<strong>Warning!</strong>
</notice.Header>
<notice.Body>
<p>
This service has been deregistered and no longer exists in the catalog.
</p>
</notice.Body>
</Notice>
</figure>
```
Currently this is backed by `ember-cli-flash` and the named options are
currently options that can be accepted by `ember-cli-flash`. Be aware that this
is likely to change in the future.

52
ui/packages/consul-ui/app/modifiers/style.js Normal file
View File

@ -0,0 +1,52 @@
import Modifier from 'ember-modifier';
import { assert } from '@ember/debug';
export default class StyleModifier extends Modifier {
setStyles(newStyles = []) {
const rulesToRemove = this._oldStyles || new Set();
if(!Array.isArray(newStyles)) {
newStyles = Object.entries(newStyles)
}
newStyles.forEach(([property, value]) => {
assert(
`Your given value for property '${property}' is ${value} (${typeof value}). Accepted types are string and undefined. Please change accordingly.`,
typeof value === 'undefined' || typeof value === 'string'
);
// priority must be specified as separate argument
// value must not contain "!important"
let priority = '';
if (value.length > 0 && value.includes('!important')) {
priority = 'important';
value = value.replace('!important', '');
}
// update CSSOM
this.element.style.setProperty(property, value, priority);
// should not remove rules that have been updated in this cycle
rulesToRemove.delete(property);
});
// remove rules that were present in last cycle but aren't present in this one
rulesToRemove.forEach((rule) => this.element.style.removeProperty(rule));
// cache styles that in this rendering cycle for the next one
this._oldStyles = new Set(newStyles.map((e) => e[0]));
}
didReceiveArguments() {
if(typeof this.args.named.delay !== 'undefined') {
setTimeout(
_ => {
if(typeof this !== this.args.positional[0]) {
this.setStyles(this.args.positional[0]);
}
},
this.args.named.delay
)
} else {
this.setStyles(this.args.positional[0]);
}
}
}

14
ui/packages/consul-ui/app/services/feedback.js
View File

@ -10,6 +10,7 @@ const notificationDefaults = function() {
return {
timeout: 6000,
extendedTimeout: 300,
destroyOnClick: true
};
};
export default class FeedbackService extends Service {
@ -23,7 +24,7 @@ export default class FeedbackService extends Service {
};
}
success(item, action, status = defaultStatus) {
success(item, action, status = defaultStatus, model) {
const getAction = callableType(action);
const getStatus = callableType(status);
// returning exactly `false` for a feedback action means even though
@ -38,11 +39,12 @@ export default class FeedbackService extends Service {
// here..
action: getAction(),
item: item,
model: model
});
}
}
error(e, action, status = defaultStatus) {
error(e, action, status = defaultStatus, model) {
const getAction = callableType(action);
const getStatus = callableType(status);
this.notify.clearMessages();
@ -53,6 +55,7 @@ export default class FeedbackService extends Service {
type: getStatus(TYPE_SUCCESS),
// and here
action: getAction(),
model: model
});
} else {
this.notify.add({
@ -60,17 +63,18 @@ export default class FeedbackService extends Service {
type: getStatus(TYPE_ERROR, e),
action: getAction(),
error: e,
model: model
});
}
}
async execute(handle, action, status) {
async execute(handle, action, status, routeName) {
let result;
try {
result = await handle();
this.success(result, action, status);
this.success(result, action, status, routeName);
} catch (e) {
this.error(e, action, status);
this.error(e, action, status, routeName);
}
}
}

1
ui/packages/consul-ui/app/styles/components.scss
View File

@ -17,7 +17,6 @@
@import 'consul-ui/components/empty-state';
@import 'consul-ui/components/expanded-single-select';
@import 'consul-ui/components/form-elements';
@import 'consul-ui/components/flash-message';
@import 'consul-ui/components/icon-definition';
@import 'consul-ui/components/list-row';
@import 'consul-ui/components/inline-alert';

8
ui/packages/consul-ui/app/templates/dc/acls/policies/edit.hbs
View File

@ -38,14 +38,6 @@ as |dc partition nspace id item create|}}
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Policy::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.acls.policies'}}>All Policies</a></li>

8
ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs
View File

@ -55,14 +55,6 @@ as |route|>
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Policy::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="header">
<h1>
<route.Title @title="Policies" />

8
ui/packages/consul-ui/app/templates/dc/acls/roles/edit.hbs
View File

@ -36,14 +36,6 @@ as |dc partition nspace item create|}}
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Role::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.acls.roles'}}>All Roles</a></li>

8
ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs
View File

@ -49,14 +49,6 @@ as |route|>
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Role::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="header">
<h1>
<route.Title @title="Roles" />

8
ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs
View File

@ -36,14 +36,6 @@ as |dc partition nspace item create|}}
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Token::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.acls.tokens'}}>All Tokens</a></li>

8
ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs
View File

@ -52,14 +52,6 @@ as |route|>
<AppView
@login={{route.model.app.login.open}}
>
<BlockSlot @name="notification" as |status type item error|>
<Consul::Token::Notifications
@type={{type}}
@status={{status}}
@item={{item}}
@error={{error}}
/>
</BlockSlot>
<BlockSlot @name="header">
<h1>
<route.Title @title="Tokens" />

62
ui/packages/consul-ui/app/templates/dc/kv/index.hbs
View File

@ -28,28 +28,58 @@ as |route|>
@login={{route.model.app.login.open}}
/>
</BlockSlot>
<BlockSlot @name="disconnected" as |Notification|>
<BlockSlot @name="disconnected" as |after|>
{{#if (eq loader.error.status "404")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
This KV or parent of this KV was deleted.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
This KV or parent of this KV was deleted.
</p>
</notice.Body>
</Notice>
{{else if (eq loader.error.status "403")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="error notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
You no longer have access to this KV.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
You no longer have access to this KV.
</p>
</notice.Body>
</Notice>
{{else}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
An error was returned whilst loading this data, refresh to try again.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
An error was returned whilst loading this data, refresh to try again.
</p>
</notice.Body>
</Notice>
{{/if}}
</BlockSlot>

62
ui/packages/consul-ui/app/templates/dc/nodes/show.hbs
View File

@ -26,28 +26,58 @@ as |route|>
/>
</BlockSlot>
<BlockSlot @name="disconnected" as |Notification|>
<BlockSlot @name="disconnected" as |after|>
{{#if (eq loader.error.status "404")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
This node no longer exists in the catalog.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
This node no longer exists in the catalog.
</p>
</notice.Body>
</Notice>
{{else if (eq loader.error.status "403")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="error notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
You no longer have access to this node
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
You no longer have access to this node
</p>
</notice.Body>
</Notice>
{{else}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
An error was returned whilst loading this data, refresh to try again.
</p>
</Notification>
</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">

62
ui/packages/consul-ui/app/templates/dc/services/instance.hbs
View File

@ -21,28 +21,58 @@ as |route|>
/>
</BlockSlot>
<BlockSlot @name="disconnected" as |Notification|>
<BlockSlot @name="disconnected" as |after|>
{{#if (eq loader.error.status "404")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
This service has been deregistered and no longer exists in the catalog.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
This service has been deregistered and no longer exists in the catalog.
</p>
</notice.Body>
</Notice>
{{else if (eq loader.error.status "403")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="error notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
You no longer have access to this service
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
You no longer have access to this service
</p>
</notice.Body>
</Notice>
{{else}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
An error was returned whilst loading this data, refresh to try again.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
An error was returned whilst loading this data, refresh to try again.
</p>
</notice.Body>
</Notice>
{{/if}}
</BlockSlot>

62
ui/packages/consul-ui/app/templates/dc/services/show.hbs
View File

@ -19,28 +19,58 @@ as |route|>
/>
</BlockSlot>
<BlockSlot @name="disconnected" as |Notification|>
<BlockSlot @name="disconnected" as |after|>
{{#if (eq loader.error.status "404")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
This service has been deregistered and no longer exists in the catalog.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
This service has been deregistered and no longer exists in the catalog.
</p>
</notice.Body>
</Notice>
{{else if (eq loader.error.status "403")}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="error notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="error"
as |notice|>
<notice.Header>
<strong>Error!</strong>
You no longer have access to this service
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
You no longer have access to this service
</p>
</notice.Body>
</Notice>
{{else}}
<Notification @sticky={{true}}>
<p data-notification role="alert" class="warning notification-update">
<Notice
{{notification
sticky=true
}}
class="notification-update"
@type="warning"
as |notice|>
<notice.Header>
<strong>Warning!</strong>
An error was returned whilst loading this data, refresh to try again.
</p>
</Notification>
</notice.Header>
<notice.Body>
<p>
An error was returned whilst loading this data, refresh to try again.
</p>
</notice.Body>
</Notice>
{{/if}}
</BlockSlot>

14
ui/packages/consul-ui/app/templates/debug.hbs
View File

@ -2,6 +2,20 @@
{{document-attrs class="is-debug"}}
<App class="docs" id="wrapper">
<:notifications as |app|>
{{#each flashMessages.queue as |flash|}}
{{#if flash.dom}}
<app.Notification
@delay={{sub flash.timeout flash.extendedTimeout}}
@sticky={{flash.sticky}}
>
{{{flash.dom}}}
</app.Notification>
{{/if}}
{{/each}}
</:notifications>
<:main-nav>
<DocfyOutput as |node|>