ui: Add information regarding Host header for ingress gateways (#10050)
* Add inline-code CSS component * Add %inline-code to all the places where we need it * Inject selected env variables into the translations file * Add ingress gateway upstream 'host header' intro text * Make sure we can use actual correct component casing for titles but still have nice consistent menu item casing in the side nav
This commit is contained in:
John Cowen
GitHub
parent
a2ba9ae746
commit
363cc8211f
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
class: css
|
||||
---
|
||||
# inline-code
|
||||
|
||||
All `p code` within `main` and any `ModalLayer`s default to use the following
|
||||
inline code CSS component.
|
||||
|
||||
```hbs preview-template
|
||||
<p>
|
||||
This is so we can highlight code <code>inline</code> in paragraphs and such-like.
|
||||
</p>
|
||||
```
|
||||
|
||||
It can also be added to any additional elements using the following
|
||||
placeholder.
|
||||
|
||||
```css
|
||||
p code {
|
||||
@extend %inline-code;
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
%inline-code {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
%inline-code {
|
||||
border: 1px solid;
|
||||
color: var(--brand-600, inherit);
|
||||
background-color: var(--gray-050);
|
||||
border-color: var(--gray-200);
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import IntlService from 'ember-intl/services/intl';
|
||||
import { inject as service } from '@ember/service';
|
||||
|
||||
class I18nService extends IntlService {
|
||||
@service('env') env;
|
||||
/**
|
||||
* Additionally injects selected project level environment variables into the
|
||||
* message formatting context for usage within translated texts
|
||||
*/
|
||||
formatMessage(value, formatOptions) {
|
||||
const env = [
|
||||
'CONSUL_HOME_URL',
|
||||
'CONSUL_REPO_ISSUES_URL',
|
||||
'CONSUL_DOCS_URL',
|
||||
'CONSUL_DOCS_LEARN_URL',
|
||||
'CONSUL_DOCS_API_URL',
|
||||
'CONSUL_COPYRIGHT_URL',
|
||||
].reduce((prev, key) => {
|
||||
prev[key] = this.env.var(key);
|
||||
return prev;
|
||||
}, {});
|
||||
|
||||
formatOptions = {
|
||||
...formatOptions,
|
||||
...env,
|
||||
};
|
||||
return super.formatMessage(value, formatOptions);
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'i18n',
|
||||
initialize: function(container) {
|
||||
container.register('service:intl', I18nService);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
%form h2 {
|
||||
@extend %h200;
|
||||
}
|
||||
/* TODO: This is positioning the element */
|
||||
/* probably should be in a special %form class*/
|
||||
%form-element {
|
||||
|
|
@ -12,6 +15,9 @@
|
|||
%form-element > em {
|
||||
@extend %form-element-note;
|
||||
}
|
||||
%form-element-note > code {
|
||||
@extend %inline-code;
|
||||
}
|
||||
%form-element-error > strong {
|
||||
@extend %inline-alert-error;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,6 @@
|
|||
%form-element a {
|
||||
display: inline;
|
||||
}
|
||||
%form-element-note > code {
|
||||
display: inline-block;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
display: inline-flex;
|
||||
|
|
@ -51,6 +48,3 @@
|
|||
margin-top: -0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
%form-element-note > code {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,17 +11,11 @@ textarea:disabled + .CodeMirror,
|
|||
%form-element-text-input:read-only {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
%form h2 {
|
||||
@extend %h200;
|
||||
}
|
||||
%form fieldset > p,
|
||||
%form-element-note,
|
||||
%form-element-text-input::placeholder {
|
||||
color: $gray-400;
|
||||
}
|
||||
%form-element-note > code {
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%form-element-error > input,
|
||||
%form-element-error > textarea {
|
||||
border-color: var(--decor-error-500, $red-500) !important;
|
||||
|
|
@ -39,7 +33,3 @@ textarea:disabled + .CodeMirror,
|
|||
%form-element-label {
|
||||
color: var(--typo-contrast-999, inherit);
|
||||
}
|
||||
%form-element-note > code {
|
||||
background-color: $gray-200;
|
||||
color: var(--typo-brand-600, inherit);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
/**/
|
||||
@import 'consul-ui/components/menu-panel';
|
||||
|
||||
@import 'consul-ui/components/inline-code';
|
||||
@import 'consul-ui/components/overlay';
|
||||
@import 'consul-ui/components/tooltip';
|
||||
@import 'consul-ui/components/notice';
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ pre code,
|
|||
%form-element-error > strong {
|
||||
@extend %p3;
|
||||
}
|
||||
%main-content p code {
|
||||
@extend %inline-code;
|
||||
}
|
||||
|
||||
%radio-group label {
|
||||
line-height: $typo-lead-200;
|
||||
|
|
|
|||
|
|
@ -38,10 +38,11 @@ as |route|>
|
|||
|
||||
@filter={{filters}}
|
||||
/>
|
||||
{{/if}}
|
||||
<p>
|
||||
Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
|
||||
</p>
|
||||
{{/if}}
|
||||
{{t
|
||||
"routes.dc.services.show.upstreams.intro"
|
||||
htmlSafe=true
|
||||
}}
|
||||
<DataCollection
|
||||
@type="service"
|
||||
@sort={{sort.value}}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
class={{if (is-href (to-route child.url)) 'is-active'}}
|
||||
>
|
||||
<DocfyLink @to={{child.url}}>
|
||||
{{child.title}}
|
||||
{{classify child.title}}
|
||||
</DocfyLink>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}}
|
||||
>
|
||||
<DocfyLink @to={{child.url}}>
|
||||
{{child.title}}
|
||||
{{classify child.title}}
|
||||
</DocfyLink>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ module.exports = function(defaults) {
|
|||
includePolyfill: true,
|
||||
},
|
||||
'ember-cli-string-helpers': {
|
||||
only: ['capitalize', 'lowercase', 'truncate', 'uppercase', 'humanize', 'titleize'],
|
||||
only: ['capitalize', 'lowercase', 'truncate', 'uppercase', 'humanize', 'titleize', 'classify'],
|
||||
},
|
||||
'ember-cli-math-helpers': {
|
||||
only: ['div'],
|
||||
|
|
|
|||
|
|
@ -63,6 +63,16 @@ common:
|
|||
asc: Unhealthy to Healthy
|
||||
desc: Healthy to Unhealthy
|
||||
|
||||
routes:
|
||||
dc:
|
||||
services:
|
||||
show:
|
||||
upstreams:
|
||||
intro: |
|
||||
<p>
|
||||
Upstreams are services that may receive traffic from this gateway. If you are not using Consul DNS, please make sure your <code>Host:</code> header uses the correct domain name for the gateway to correctly proxy to its upstreams. Learn more about configuring gateways in our <a href="{CONSUL_DOCS_URL}/connect/ingress-gateways" target="_blank" rel="noopener noreferrer">documentation</a>.
|
||||
</p>
|
||||
|
||||
components:
|
||||
app:
|
||||
skip_to_content: Skip to Content
|
||||
|
|
|
|||
Loading…
Reference in New Issue