diff --git a/ui-v2/app/components/grid-collection/index.hbs b/ui-v2/app/components/grid-collection/index.hbs
deleted file mode 100644
index a7835ba1b0..0000000000
--- a/ui-v2/app/components/grid-collection/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{on-window 'resize' (action "resize") }}
-
-
- {{~#each _cells as |cell|~}}
- {{yield cell.item cell.index }}
- {{~/each~}}
-
\ No newline at end of file
diff --git a/ui-v2/app/components/grid-collection/index.js b/ui-v2/app/components/grid-collection/index.js
deleted file mode 100644
index 00970de1e1..0000000000
--- a/ui-v2/app/components/grid-collection/index.js
+++ /dev/null
@@ -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')
- );
- }
- },
- },
-});
diff --git a/ui-v2/app/components/healthcheck-info/index.hbs b/ui-v2/app/components/healthcheck-info/index.hbs
deleted file mode 100644
index 5661472fc3..0000000000
--- a/ui-v2/app/components/healthcheck-info/index.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{#if (and (lt passing 1) (lt warning 1) (lt critical 1) )}}
- 0
-{{else}}
-
-
-
-
-
-{{/if}}
diff --git a/ui-v2/app/components/healthcheck-info/index.js b/ui-v2/app/components/healthcheck-info/index.js
deleted file mode 100644
index abe1ccedb6..0000000000
--- a/ui-v2/app/components/healthcheck-info/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Component from '@ember/component';
-export default Component.extend({
- tagName: '',
-});
diff --git a/ui-v2/app/components/healthcheck-status/index.hbs b/ui-v2/app/components/healthcheck-status/index.hbs
deleted file mode 100644
index 383f67386c..0000000000
--- a/ui-v2/app/components/healthcheck-status/index.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{!-- we use concat here to avoid ember adding returns between words, which causes a layout issue--}}
-{{ concat 'Healthchecks ' (capitalize name) }}
-{{format-number count}}
\ No newline at end of file
diff --git a/ui-v2/app/components/healthcheck-status/index.js b/ui-v2/app/components/healthcheck-status/index.js
deleted file mode 100644
index e2485aee28..0000000000
--- a/ui-v2/app/components/healthcheck-status/index.js
+++ /dev/null
@@ -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;
- }),
-});
diff --git a/ui-v2/app/components/healthchecked-resource/index.hbs b/ui-v2/app/components/healthchecked-resource/index.hbs
deleted file mode 100644
index 19d7f49091..0000000000
--- a/ui-v2/app/components/healthchecked-resource/index.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-
- {{yield}}
-
- {{#if (eq checks.length 0)}}
- {{checks.length}}
- {{else if (eq checks.length healthy.length)}}
- {{healthy.length}}
- {{/if}}
-
-
-
- {{name}}
- {{address}}
-
-
-
- {{#if (not-eq checks.length healthy.length)}}
-
- {{/if}}
-
-
diff --git a/ui-v2/app/components/healthchecked-resource/index.js b/ui-v2/app/components/healthchecked-resource/index.js
deleted file mode 100644
index 73fe187152..0000000000
--- a/ui-v2/app/components/healthchecked-resource/index.js
+++ /dev/null
@@ -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)}`,
- };
- }),
-});
diff --git a/ui-v2/app/styles/base/components/index.scss b/ui-v2/app/styles/base/components/index.scss
index e4017d5ee0..da964526ce 100644
--- a/ui-v2/app/styles/base/components/index.scss
+++ b/ui-v2/app/styles/base/components/index.scss
@@ -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';
diff --git a/ui-v2/app/styles/base/components/stats-card/index.scss b/ui-v2/app/styles/base/components/stats-card/index.scss
deleted file mode 100644
index bc18252196..0000000000
--- a/ui-v2/app/styles/base/components/stats-card/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';
diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss
deleted file mode 100644
index 7068b26e79..0000000000
--- a/ui-v2/app/styles/base/components/stats-card/layout.scss
+++ /dev/null
@@ -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%;
-}
diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss
deleted file mode 100644
index 14f552fdb1..0000000000
--- a/ui-v2/app/styles/base/components/stats-card/skin.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ui-v2/app/styles/components.scss b/ui-v2/app/styles/components.scss
index 77337360c2..20100e9e75 100644
--- a/ui-v2/app/styles/components.scss
+++ b/ui-v2/app/styles/components.scss
@@ -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';
diff --git a/ui-v2/app/styles/components/grid-collection.scss b/ui-v2/app/styles/components/grid-collection.scss
deleted file mode 100644
index 108c3820aa..0000000000
--- a/ui-v2/app/styles/components/grid-collection.scss
+++ /dev/null
@@ -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%;
- }
-}
diff --git a/ui-v2/app/styles/components/healthcheck-info.scss b/ui-v2/app/styles/components/healthcheck-info.scss
deleted file mode 100644
index 5207349bb3..0000000000
--- a/ui-v2/app/styles/components/healthcheck-info.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ui-v2/app/styles/components/healthcheck-info/index.scss b/ui-v2/app/styles/components/healthcheck-info/index.scss
deleted file mode 100644
index bc18252196..0000000000
--- a/ui-v2/app/styles/components/healthcheck-info/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';
diff --git a/ui-v2/app/styles/components/healthcheck-info/layout.scss b/ui-v2/app/styles/components/healthcheck-info/layout.scss
deleted file mode 100644
index a9ec45a422..0000000000
--- a/ui-v2/app/styles/components/healthcheck-info/layout.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ui-v2/app/styles/components/healthcheck-info/skin.scss b/ui-v2/app/styles/components/healthcheck-info/skin.scss
deleted file mode 100644
index 5f268ab548..0000000000
--- a/ui-v2/app/styles/components/healthcheck-info/skin.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss
deleted file mode 100644
index b9037c1c38..0000000000
--- a/ui-v2/app/styles/components/healthchecked-resource.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ui-v2/app/styles/components/list-collection.scss b/ui-v2/app/styles/components/list-collection.scss
index 78505f9034..0e39f15707 100644
--- a/ui-v2/app/styles/components/list-collection.scss
+++ b/ui-v2/app/styles/components/list-collection.scss
@@ -1,5 +1,7 @@
.list-collection {
@extend %list-collection;
+}
+%list-collection {
height: 500px;
position: relative;
}
diff --git a/ui-v2/tests/integration/components/healthcheck-info-test.js b/ui-v2/tests/integration/components/healthcheck-info-test.js
deleted file mode 100644
index a4636bd51b..0000000000
--- a/ui-v2/tests/integration/components/healthcheck-info-test.js
+++ /dev/null
@@ -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 });
- });
-});
diff --git a/ui-v2/tests/integration/components/healthcheck-status-test.js b/ui-v2/tests/integration/components/healthcheck-status-test.js
deleted file mode 100644
index 81cdf81173..0000000000
--- a/ui-v2/tests/integration/components/healthcheck-status-test.js
+++ /dev/null
@@ -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 });
- });
-});
diff --git a/ui-v2/tests/integration/components/healthchecked-resource-test.js b/ui-v2/tests/integration/components/healthchecked-resource-test.js
deleted file mode 100644
index 37bc8716bf..0000000000
--- a/ui-v2/tests/integration/components/healthchecked-resource-test.js
+++ /dev/null
@@ -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
- );
- });
-});