ui: Delete unused javascript/CSS components (#8597)
This commit is contained in:
John Cowen
GitHub
parent
e3fbebda01
commit
6ae3e3ffc7
|
|
@ -1,7 +0,0 @@
|
|||
{{on-window 'resize' (action "resize") }}
|
||||
<EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
|
||||
<li></li>
|
||||
{{~#each _cells as |cell|~}}
|
||||
<li style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
|
||||
{{~/each~}}
|
||||
</EmberNativeScrollable>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { inject as service } from '@ember/service';
|
||||
import { computed, get, set } from '@ember/object';
|
||||
import Component from 'ember-collection/components/ember-collection';
|
||||
import PercentageColumns from 'ember-collection/layouts/percentage-columns';
|
||||
import style from 'ember-computed-style';
|
||||
|
||||
export default Component.extend({
|
||||
dom: service('dom'),
|
||||
tagName: 'div',
|
||||
attributeBindings: ['style'],
|
||||
height: 500,
|
||||
cellHeight: 113,
|
||||
style: style('getStyle'),
|
||||
classNames: ['grid-collection'],
|
||||
init: function() {
|
||||
this._super(...arguments);
|
||||
this.columns = [25, 25, 25, 25];
|
||||
},
|
||||
didInsertElement: function() {
|
||||
this._super(...arguments);
|
||||
this.actions.resize.apply(this, [{ target: this.dom.viewport() }]);
|
||||
},
|
||||
didReceiveAttrs: function() {
|
||||
this._super(...arguments);
|
||||
this._cellLayout = this['cell-layout'] = new PercentageColumns(
|
||||
get(this, 'items.length'),
|
||||
get(this, 'columns'),
|
||||
get(this, 'cellHeight')
|
||||
);
|
||||
},
|
||||
getStyle: computed('height', function() {
|
||||
return {
|
||||
height: get(this, 'height'),
|
||||
};
|
||||
}),
|
||||
actions: {
|
||||
resize: function(e) {
|
||||
// TODO: This top part is very similar to resize in tabular-collection
|
||||
// see if it make sense to DRY out
|
||||
const dom = get(this, 'dom');
|
||||
const $appContent = dom.element('main > div');
|
||||
if ($appContent) {
|
||||
const rect = this.element.getBoundingClientRect();
|
||||
const $footer = dom.element('footer[role="contentinfo"]');
|
||||
const space = rect.top + $footer.clientHeight;
|
||||
const height = e.target.innerHeight - space;
|
||||
this.set('height', Math.max(0, height));
|
||||
this.updateItems();
|
||||
this.updateScrollPosition();
|
||||
}
|
||||
const width = e.target.innerWidth;
|
||||
const len = get(this, 'columns.length');
|
||||
switch (true) {
|
||||
case width > 1013:
|
||||
if (len != 4) {
|
||||
set(this, 'columns', [25, 25, 25, 25]);
|
||||
}
|
||||
break;
|
||||
case width > 744:
|
||||
if (len != 3) {
|
||||
set(this, 'columns', [33, 33, 34]);
|
||||
}
|
||||
break;
|
||||
case width > 487:
|
||||
if (len != 2) {
|
||||
set(this, 'columns', [50, 50]);
|
||||
}
|
||||
break;
|
||||
case width < 488:
|
||||
if (len != 1) {
|
||||
set(this, 'columns', [100]);
|
||||
}
|
||||
}
|
||||
if (len !== get(this, 'columns.length')) {
|
||||
this._cellLayout = this['cell-layout'] = new PercentageColumns(
|
||||
get(this, 'items.length'),
|
||||
get(this, 'columns'),
|
||||
get(this, 'cellHeight')
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{{#if (and (lt passing 1) (lt warning 1) (lt critical 1) )}}
|
||||
<span title="No Healthchecks" class="zero">0</span>
|
||||
{{else}}
|
||||
<dl class="healthcheck-info">
|
||||
<HealthcheckStatus @width={{passingWidth}} @name="passing" @value={{passing}} />
|
||||
<HealthcheckStatus @width={{warningWidth}} @name="warning" @value={{warning}} />
|
||||
<HealthcheckStatus @width={{criticalWidth}} @name="critical" @value={{critical}} />
|
||||
</dl>
|
||||
{{/if}}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import Component from '@ember/component';
|
||||
export default Component.extend({
|
||||
tagName: '',
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{{!-- we use concat here to avoid ember adding returns between words, which causes a layout issue--}}
|
||||
<dt title="{{capitalize name}}" class="{{name}}{{if (lt count 1) ' zero'}}">{{ concat 'Healthchecks ' (capitalize name) }}</dt>
|
||||
<dd title="{{capitalize name}}" class={{if (lt count 1) 'zero'}} style={{width}}>{{format-number count}}</dd>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
export default Component.extend({
|
||||
tagName: '',
|
||||
count: computed('value', function() {
|
||||
const value = this.value;
|
||||
if (Array.isArray(value)) {
|
||||
return value.length;
|
||||
}
|
||||
return value;
|
||||
}),
|
||||
});
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<StatsCard>
|
||||
<BlockSlot @name="icon">{{yield}}</BlockSlot>
|
||||
<BlockSlot @name="mini-stat">
|
||||
{{#if (eq checks.length 0)}}
|
||||
<span class="zero" data-tooltip="This node has no registered healthchecks">{{checks.length}}</span>
|
||||
{{else if (eq checks.length healthy.length)}}
|
||||
<span class="non-zero" data-tooltip={{concat 'All ' healthy.length ' ' (pluralize healthy.length 'check' without-count=true) ' passing'}}>{{healthy.length}}</span>
|
||||
{{/if}}
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="header">
|
||||
<a href={{href}}>
|
||||
<strong>{{name}}</strong>
|
||||
<span>{{address}}</span>
|
||||
</a>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="body">
|
||||
{{#if (not-eq checks.length healthy.length)}}
|
||||
<ul>
|
||||
{{#each unhealthy as |item|}}
|
||||
<li>
|
||||
<a href={{href}} class={{item.Status}}>
|
||||
<strong data-tooltip={{capitalize item.Status}}>{{capitalize item.Status}}</strong>
|
||||
<span>{{item.Name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#if (gt healthy.length 0)}}
|
||||
<li>
|
||||
<a href={{href}} class="passing">
|
||||
<strong data-tooltip={{concat healthy.length ' other passing ' (pluralize healthy.length 'check' without-count=true)}}></strong>
|
||||
<span>{{healthy.length}} other passing {{pluralize healthy.length 'check' without-count=true}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</BlockSlot>
|
||||
</StatsCard>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { filter } from '@ember/object/computed';
|
||||
import Component from '@ember/component';
|
||||
import { computed, get } from '@ember/object';
|
||||
import style from 'ember-computed-style';
|
||||
export default Component.extend({
|
||||
classNames: ['healthchecked-resource'],
|
||||
attributeBindings: ['style'],
|
||||
style: style('gridRowEnd'),
|
||||
unhealthy: filter(`checks.@each.Status`, function(item) {
|
||||
const status = get(item, 'Status');
|
||||
return status === 'critical' || status === 'warning';
|
||||
}),
|
||||
healthy: filter(`checks.@each.Status`, function(item) {
|
||||
const status = get(item, 'Status');
|
||||
return status === 'passing';
|
||||
}),
|
||||
gridRowEnd: computed('UnhealthyChecks', function() {
|
||||
let spans = 3;
|
||||
if (get(this, 'service')) {
|
||||
spans++;
|
||||
}
|
||||
if (get(this, 'healthy.length') > 0) {
|
||||
spans++;
|
||||
}
|
||||
return {
|
||||
gridRow: `auto / span ${spans + (get(this, 'unhealthy.length') || 0)}`,
|
||||
};
|
||||
}),
|
||||
});
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
@import './popover-menu/index';
|
||||
@import './radio-group/index';
|
||||
@import './sliding-toggle/index';
|
||||
@import './stats-card/index';
|
||||
@import './table/index';
|
||||
@import './tabs/index';
|
||||
@import './toggle-button/index';
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
%stats-card {
|
||||
position: relative;
|
||||
}
|
||||
%stats-card header a,
|
||||
%stats-card header a > * {
|
||||
display: block;
|
||||
}
|
||||
%stats-card header a > *,
|
||||
%stats-card li a > :last-child {
|
||||
/* TODO: %truncate */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
%stats-card header a {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
%stats-card header > :not(a) {
|
||||
@extend %stats-card-icon;
|
||||
}
|
||||
%stats-card-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
%stats-card-icon:last-child {
|
||||
position: absolute;
|
||||
background-size: 16px;
|
||||
background-position: 5px 5px;
|
||||
font-size: 1.5em;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
top: calc(-28px / 2);
|
||||
left: 15px;
|
||||
font-size: 0;
|
||||
}
|
||||
%stats-card-icon:first-child {
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
height: 16px;
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
%stats-card li {
|
||||
height: 33px;
|
||||
}
|
||||
%stats-card li a {
|
||||
display: flex;
|
||||
vertical-align: text-top;
|
||||
align-items: center;
|
||||
padding: 0 15px 0 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
%stats-card {
|
||||
border: $decor-border-100;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%stats-card li {
|
||||
border-top: $decor-border-100;
|
||||
}
|
||||
%stats-card,
|
||||
%stats-card li {
|
||||
border-color: $gray-200;
|
||||
}
|
||||
%stats-card a {
|
||||
color: $gray-900;
|
||||
}
|
||||
%stats-card,
|
||||
%stats-card header::before {
|
||||
box-shadow: $decor-elevation-300;
|
||||
}
|
||||
%stats-card:hover,
|
||||
%stats-card:focus {
|
||||
box-shadow: $decor-elevation-400;
|
||||
}
|
||||
%stats-card header > :not(a):last-child {
|
||||
border: $decor-border-100;
|
||||
border-radius: 100%;
|
||||
border-color: $gray-200;
|
||||
background-color: $white;
|
||||
}
|
||||
%stats-card ul {
|
||||
/*TODO: %list-style-none?*/
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -16,8 +16,6 @@
|
|||
@import './components/tooltip';
|
||||
@import './components/tag-list';
|
||||
@import './components/healthcheck-output';
|
||||
@import './components/healthcheck-info';
|
||||
@import './components/healthchecked-resource';
|
||||
@import './components/freetext-filter';
|
||||
@import './components/filter-bar';
|
||||
@import './components/tomography-graph';
|
||||
|
|
@ -34,7 +32,6 @@
|
|||
@import './components/tabular-details';
|
||||
@import './components/tabular-collection';
|
||||
@import './components/list-collection';
|
||||
@import './components/grid-collection';
|
||||
@import './components/popover-select';
|
||||
@import './components/tooltip-panel';
|
||||
@import './components/menu-panel';
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
.unhealthy > div,
|
||||
.healthy > div {
|
||||
@extend %card-grid;
|
||||
}
|
||||
.grid-collection {
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
.healthy > div {
|
||||
width: calc(100% + 23px);
|
||||
min-height: 500px;
|
||||
}
|
||||
.unhealthy > div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.healthy > div > ul > li {
|
||||
padding-right: 23px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
%card-grid > ul,
|
||||
%card-grid > ol {
|
||||
list-style-type: none;
|
||||
display: grid;
|
||||
grid-auto-rows: 12px;
|
||||
}
|
||||
%card-grid li.empty {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@media #{$--fixed-grid} {
|
||||
%card-grid > ul,
|
||||
%card-grid > ol {
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-columns: repeat(4, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
@media #{$--lt-fixed-grid} {
|
||||
%card-grid > ul,
|
||||
%card-grid > ol {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
grid-gap: 20px 2%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@import './healthcheck-info/index';
|
||||
%table tr .healthcheck-info {
|
||||
@extend %healthcheck-info;
|
||||
}
|
||||
// TODO: Look at why we can't have the zeros in the healthcheck-info
|
||||
%table td span.zero {
|
||||
@extend %with-minus-square-fill-color-icon;
|
||||
background-position: left center;
|
||||
display: block;
|
||||
text-indent: 20px;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
%healthcheck-info {
|
||||
display: inline-flex;
|
||||
}
|
||||
%healthcheck-info > * {
|
||||
display: block;
|
||||
}
|
||||
%healthcheck-info dt.zero {
|
||||
display: none;
|
||||
}
|
||||
%healthcheck-info dd.zero {
|
||||
visibility: hidden;
|
||||
}
|
||||
%healthcheck-info dd {
|
||||
box-sizing: content-box;
|
||||
margin-left: 22px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
%healthcheck-info dt {
|
||||
font-size: 0;
|
||||
}
|
||||
%healthcheck-info dt::before {
|
||||
@extend %as-pseudo;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
%healthcheck-info dt.passing::before {
|
||||
@extend %with-check-circle-fill-color-icon;
|
||||
}
|
||||
%healthcheck-info dt.warning::before {
|
||||
@extend %with-alert-triangle-color-icon;
|
||||
}
|
||||
%healthcheck-info dt.critical::before {
|
||||
@extend %with-cancel-square-fill-color-icon;
|
||||
}
|
||||
%healthcheck-info dt.passing,
|
||||
%healthcheck-info dt.passing + dd {
|
||||
color: $color-success;
|
||||
}
|
||||
%healthcheck-info dt.warning,
|
||||
%healthcheck-info dt.warning + dd {
|
||||
color: $color-alert;
|
||||
}
|
||||
%healthcheck-info dt.critical,
|
||||
%healthcheck-info dt.critical + dd {
|
||||
color: $color-failure;
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.healthchecked-resource > div {
|
||||
@extend %stats-card;
|
||||
}
|
||||
%stats-card-icon {
|
||||
@extend %tooltip-below;
|
||||
}
|
||||
%stats-card-icon:first-child::before {
|
||||
@extend %tooltip-left;
|
||||
}
|
||||
%stats-card-icon:last-child::before {
|
||||
@extend %tooltip-right;
|
||||
}
|
||||
|
||||
%stats-card-icon:last-child {
|
||||
/* TODO: In order to get rid of our colored star */
|
||||
/* this needs to use a %mask, and we are already using */
|
||||
/* our before/after psuedo elements for the tooltip */
|
||||
/* so this will need reworking slighly before we can */
|
||||
/* get rid of our hardcoded magenta star icon */
|
||||
@extend %with-star-icon;
|
||||
}
|
||||
%stats-card header > .zero {
|
||||
@extend %with-minus-square-fill-color-icon;
|
||||
color: $gray-400;
|
||||
}
|
||||
%stats-card header > .non-zero {
|
||||
@extend %with-check-circle-fill-color-icon;
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
%stats-card li a > :first-child {
|
||||
font-size: 0;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
[data-tooltip] {
|
||||
@extend %with-pseudo-tooltip;
|
||||
}
|
||||
%stats-card li a > :last-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
%stats-card a > :first-child::before {
|
||||
left: -10px;
|
||||
}
|
||||
%stats-card a.passing > :first-child {
|
||||
@extend %with-check-circle-fill-color-icon;
|
||||
}
|
||||
%stats-card a.warning > :first-child {
|
||||
@extend %with-alert-triangle-color-icon;
|
||||
}
|
||||
%stats-card a.critical > :first-child {
|
||||
@extend %with-cancel-square-fill-color-icon;
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
.list-collection {
|
||||
@extend %list-collection;
|
||||
}
|
||||
%list-collection {
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | healthcheck info', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`{{healthcheck-info}}`);
|
||||
|
||||
assert.dom('dl').exists({ count: 1 });
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
{{#healthcheck-info}}
|
||||
{{/healthcheck-info}}
|
||||
`);
|
||||
assert.dom('dl').exists({ count: 1 });
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | healthcheck status', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`{{healthcheck-status}}`);
|
||||
assert.dom('dt').exists({ count: 1 });
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
{{#healthcheck-status}}{{/healthcheck-status}}
|
||||
`);
|
||||
assert.dom('dt').exists({ count: 1 });
|
||||
});
|
||||
});
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { module, skip } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { find } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | healthchecked resource', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
skip('it renders', function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
||||
|
||||
this.render(hbs`{{healthchecked-resource}}`);
|
||||
|
||||
assert.ok(
|
||||
find('*')
|
||||
.textContent.trim()
|
||||
.indexOf('other passing checks') !== -1
|
||||
);
|
||||
|
||||
// Template block usage:
|
||||
this.render(hbs`
|
||||
{{#healthchecked-resource}}{{/healthchecked-resource}}
|
||||
`);
|
||||
|
||||
assert.ok(
|
||||
find('*')
|
||||
.textContent.trim()
|
||||
.indexOf('other passing checks') !== -1
|
||||
);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue