From 7f7325e05ef3f67d30df00a436e1bbc2a18200a8 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 13 Jun 2018 14:15:08 +0100 Subject: [PATCH 1/4] Ensure startup/load image is removed if you hit an error on first load --- ui-v2/app/routes/application.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ui-v2/app/routes/application.js b/ui-v2/app/routes/application.js index 0fd78fb06..d37941247 100644 --- a/ui-v2/app/routes/application.js +++ b/ui-v2/app/routes/application.js @@ -4,6 +4,9 @@ import { hash } from 'rsvp'; import { get } from '@ember/object'; import { next } from '@ember/runloop'; const $html = document.documentElement; +const removeLoading = function() { + return $html.classList.remove('ember-loading'); +}; export default Route.extend({ init: function() { this._super(...arguments); @@ -24,7 +27,7 @@ export default Route.extend({ const controller = this.controllerFor('application'); controller.setProperties(model); transition.promise.finally(function() { - $html.classList.remove('ember-loading'); + removeLoading(); controller.setProperties({ loading: false, dc: model.dc, @@ -51,11 +54,13 @@ export default Route.extend({ dc: error.status.toString().indexOf('5') !== 0 ? get(this, 'repo').getActive() : null, }) .then(model => { + removeLoading(); next(() => { this.controllerFor('error').setProperties(model); }); }) .catch(e => { + removeLoading(); next(() => { this.controllerFor('error').setProperties({ error: error }); }); From 3ef05bd71901a283e9a1e9f885c21df9dfcd06a0 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 13 Jun 2018 14:20:39 +0100 Subject: [PATCH 2/4] Move healthcheck text down by 1px --- ui-v2/app/styles/components/healthchecked-resource.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index 14e7b1c14..3bc9fff99 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -90,7 +90,7 @@ } %healthchecked-resource li a { padding: 3px 15px; - padding-top: 4px; + padding-top: 5px; padding-left: 39px; height: 31px; } From 3d1f4e59a83b4c2950d121bc02d0a034003c90a0 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 15 Jun 2018 13:56:45 +0100 Subject: [PATCH 3/4] Find a way to test pre-ember load 1. Also add index.html things to test/index.html 2. Use content-for to hedge against keeping content in sync (requires an addon) 3. Test passes but only when run on its own, as we need to rely on content in the QUnit runner, theoretically it is not running our test in isolation. Skipping the test for the moment so we don't have a filaing test when all run together --- ui-v2/app/index.html | 3 +-- ui-v2/lib/.eslintrc.js | 6 ++++++ ui-v2/lib/startup/index.js | 17 +++++++++++++++++ ui-v2/lib/startup/package.json | 6 ++++++ ui-v2/package.json | 5 +++++ ui-v2/tests/acceptance/startup.feature | 18 ++++++++++++++++++ ui-v2/tests/acceptance/steps/startup-steps.js | 10 ++++++++++ ui-v2/tests/index.html | 2 +- ui-v2/tests/steps.js | 15 ++++++++++++++- 9 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 ui-v2/lib/.eslintrc.js create mode 100644 ui-v2/lib/startup/index.js create mode 100644 ui-v2/lib/startup/package.json create mode 100644 ui-v2/tests/acceptance/startup.feature create mode 100644 ui-v2/tests/acceptance/steps/startup-steps.js diff --git a/ui-v2/app/index.html b/ui-v2/app/index.html index 5029c9906..1cc468375 100644 --- a/ui-v2/app/index.html +++ b/ui-v2/app/index.html @@ -1,5 +1,5 @@ - + @@ -24,7 +24,6 @@ {{content-for "body"}} - diff --git a/ui-v2/lib/.eslintrc.js b/ui-v2/lib/.eslintrc.js new file mode 100644 index 000000000..548ea343c --- /dev/null +++ b/ui-v2/lib/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + env: { + node: true, + browser: false, + }, +}; diff --git a/ui-v2/lib/startup/index.js b/ui-v2/lib/startup/index.js new file mode 100644 index 000000000..64280e1a5 --- /dev/null +++ b/ui-v2/lib/startup/index.js @@ -0,0 +1,17 @@ +/* eslint-env node */ +'use strict'; + +module.exports = { + name: 'startup', + isDevelopingAddon: function() { + return true; + }, + contentFor: function(type, config) { + switch (type) { + case 'body': + return ``; + case 'root-class': + return 'ember-loading'; + } + }, +}; diff --git a/ui-v2/lib/startup/package.json b/ui-v2/lib/startup/package.json new file mode 100644 index 000000000..b6b50fef9 --- /dev/null +++ b/ui-v2/lib/startup/package.json @@ -0,0 +1,6 @@ +{ + "name": "startup", + "keywords": [ + "ember-addon" + ] +} diff --git a/ui-v2/package.json b/ui-v2/package.json index 13642f549..210c0c8a1 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -89,5 +89,10 @@ }, "engines": { "node": "^4.5 || 6.* || >= 7.*" + }, + "ember-addon": { + "paths": [ + "lib/startup" + ] } } diff --git a/ui-v2/tests/acceptance/startup.feature b/ui-v2/tests/acceptance/startup.feature new file mode 100644 index 000000000..70e54705c --- /dev/null +++ b/ui-v2/tests/acceptance/startup.feature @@ -0,0 +1,18 @@ +@setupApplicationTest +Feature: startup + In order to give users an indication as early as possible that they are at the right place + As a user + I should be able to see a startup logo +@ignore + Scenario: When loading the index.html file into a browser + Given 1 datacenter model with the value "dc-1" + Then the url should be '' + Then "html" has the "ember-loading" class + When I visit the services page for yaml + --- + dc: dc-1 + --- + Then the url should be /dc-1/services + Then "html" doesn't have the "ember-loading" class + + diff --git a/ui-v2/tests/acceptance/steps/startup-steps.js b/ui-v2/tests/acceptance/steps/startup-steps.js new file mode 100644 index 000000000..c5f07c804 --- /dev/null +++ b/ui-v2/tests/acceptance/steps/startup-steps.js @@ -0,0 +1,10 @@ +import steps from './steps'; + +// step definitions that are shared between features should be moved to the +// tests/acceptance/steps/steps.js file + +export default function(assert) { + return steps(assert).then('I should find a file', function() { + assert.ok(true, this.step); + }); +} diff --git a/ui-v2/tests/index.html b/ui-v2/tests/index.html index 1a85be183..bb4c9e254 100644 --- a/ui-v2/tests/index.html +++ b/ui-v2/tests/index.html @@ -1,5 +1,5 @@ - + diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js index 4a429f6bb..c12af6878 100644 --- a/ui-v2/tests/steps.js +++ b/ui-v2/tests/steps.js @@ -179,7 +179,11 @@ export default function(assert) { assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`); }) .then('the url should be $url', function(url) { - const current = currentURL(); + // TODO: nice! $url should be wrapped in "" + if (url === "''") { + url = ''; + } + const current = currentURL() || ''; assert.equal(current, url, `Expected the url to be ${url} was ${current}`); }) .then(['I see $num $model', 'I see $num $model model', 'I see $num $model models'], function( @@ -273,6 +277,15 @@ export default function(assert) { .then(['I see $property'], function(property, component) { assert.ok(currentPage[property], `Expected to see ${property}`); }) + // TODO: Think of better language + // TODO: These should be mergeable + .then(['"$selector" has the "$class" class'], function(selector, cls) { + // because `find` doesn't work, guessing its sandboxed to ember's container + assert.ok(document.querySelector(selector).classList.contains(cls)); + }) + .then(['"$selector" doesn\'t have the "$class" class'], function(selector, cls) { + assert.ok(!document.querySelector(selector).classList.contains(cls)); + }) .then('ok', function() { assert.ok(true); }) From 6bae5e431c92e3f40d706b892ac8c31030ea00c2 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 19 Jun 2018 10:25:41 +0100 Subject: [PATCH 4/4] Make sure the body background is white --- ui-v2/app/styles/core/reset.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui-v2/app/styles/core/reset.css b/ui-v2/app/styles/core/reset.css index 24f405788..5e37b0d81 100644 --- a/ui-v2/app/styles/core/reset.css +++ b/ui-v2/app/styles/core/reset.css @@ -1,3 +1,6 @@ +body { + background-color: $white; +} fieldset { border: 0; width: 100%;