e0326c3b0a
This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators. Various smaller changes: 1. Move healthcheck-status component to healthcheck-output 2. Create a new healthcheck-status component for showing the number of checks plus its icon 3. Create a new healthcheck-info component to group multiple statuses plus a different view if there are no checks 4. Componentize tag-list
88 lines
3 KiB
JavaScript
88 lines
3 KiB
JavaScript
import Service from '@ember/service';
|
|
import { getOwner } from '@ember/application';
|
|
import { get } from '@ember/object';
|
|
|
|
// selecting
|
|
import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
|
|
// TODO: sibling and closest seem to have 'PHP-like' guess the order arguments
|
|
// ie. one `string, element` and the other has `element, string`
|
|
// see if its possible to standardize
|
|
import sibling from 'consul-ui/utils/dom/sibling';
|
|
import closest from 'consul-ui/utils/dom/closest';
|
|
import getComponentFactory from 'consul-ui/utils/dom/get-component-factory';
|
|
|
|
// events
|
|
import normalizeEvent from 'consul-ui/utils/dom/normalize-event';
|
|
import createListeners from 'consul-ui/utils/dom/create-listeners';
|
|
import clickFirstAnchorFactory from 'consul-ui/utils/dom/click-first-anchor';
|
|
|
|
// ember-eslint doesn't like you using a single $ so use double
|
|
// use $_ for components
|
|
const $$ = qsaFactory();
|
|
let $_;
|
|
const clickFirstAnchor = clickFirstAnchorFactory(closest);
|
|
export default Service.extend({
|
|
doc: document,
|
|
win: window,
|
|
init: function() {
|
|
this._super(...arguments);
|
|
$_ = getComponentFactory(getOwner(this));
|
|
},
|
|
document: function() {
|
|
return get(this, 'doc');
|
|
},
|
|
viewport: function() {
|
|
return get(this, 'win');
|
|
},
|
|
// TODO: should this be here? Needs a better name at least
|
|
clickFirstAnchor: clickFirstAnchor,
|
|
closest: closest,
|
|
sibling: sibling,
|
|
normalizeEvent: normalizeEvent,
|
|
listeners: createListeners,
|
|
root: function() {
|
|
return get(this, 'doc').documentElement;
|
|
},
|
|
// TODO: Should I change these to use the standard names
|
|
// even though they don't have a standard signature (querySelector*)
|
|
elementById: function(id) {
|
|
return get(this, 'doc').getElementById(id);
|
|
},
|
|
elementsByTagName: function(name, context) {
|
|
context = typeof context === 'undefined' ? get(this, 'doc') : context;
|
|
return context.getElementsByTagName(name);
|
|
},
|
|
elements: function(selector, context) {
|
|
// don't ever be tempted to [...$$()] here
|
|
// it should return a NodeList
|
|
return $$(selector, context);
|
|
},
|
|
element: function(selector, context) {
|
|
if (selector.substr(0, 1) === '#') {
|
|
return this.elementById(selector.substr(1));
|
|
}
|
|
// TODO: This can just use querySelector
|
|
return [...$$(selector, context)][0];
|
|
},
|
|
// ember components aren't strictly 'dom-like'
|
|
// but if you think of them as a web component 'shim'
|
|
// then it makes more sense to think of them as part of the dom
|
|
// with traditional/standard web components you wouldn't actually need this
|
|
// method as you could just get to their methods from the dom element
|
|
component: function(selector, context) {
|
|
if (typeof selector !== 'string') {
|
|
return $_(selector);
|
|
}
|
|
return $_(this.element(selector, context));
|
|
},
|
|
components: function(selector, context) {
|
|
return [...this.elements(selector, context)]
|
|
.map(function(item) {
|
|
return $_(item);
|
|
})
|
|
.filter(function(item) {
|
|
return item != null;
|
|
});
|
|
},
|
|
});
|