diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs
index c408fca70e..6db169a64d 100644
--- a/ui-v2/app/templates/dc/kv/index.hbs
+++ b/ui-v2/app/templates/dc/kv/index.hbs
@@ -35,7 +35,7 @@
{{#block-slot 'content'}}
{{#if (gt filtered.length 0)}}
{{#tabular-collection
- items=(sort-by 'isFolder:desc' filtered) as |item index|
+ items=(sort-by 'isFolder:desc' 'Key:asc' filtered) as |item index|
}}
{{#block-slot 'header'}}
Name |
diff --git a/ui-v2/tests/acceptance/dc/kvs/list-order.feature b/ui-v2/tests/acceptance/dc/kvs/list-order.feature
new file mode 100644
index 0000000000..072f28ab27
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/kvs/list-order.feature
@@ -0,0 +1,56 @@
+@setupApplicationTest
+Feature: dc / kvs / list-order
+ In order to be able to find key values easier
+ As a user
+ I want to see the Key/Values listed alphabetically
+
+ Scenario: I have 19 folders
+ Given 1 datacenter model with the value "datacenter"
+ And 19 kv models from yaml
+ ---
+ - __secretzzz/
+ - a-thing-service/
+ - a-thing-y-again-service/
+ - a-thing-y-againzz-service/
+ - a-z-search-service/
+ - blood-pressure-service/
+ - callToAction-items/
+ - configuration/
+ - content-service/
+ - currentRepository-jobs/
+ - currentRepository-service/
+ - first-service/
+ - logs-service/
+ - rabmq-svc/
+ - rabmqUtilities/
+ - schedule-service/
+ - vanApp-service/
+ - vanCat-service/
+ - vanTaxi-service/
+ ---
+ When I visit the kvs page for yaml
+ ---
+ dc: datacenter
+ ---
+ Then I see name on the kvs like yaml
+ ---
+ - __secretzzz/
+ - a-thing-service/
+ - a-thing-y-again-service/
+ - a-thing-y-againzz-service/
+ - a-z-search-service/
+ - blood-pressure-service/
+ - callToAction-items/
+ - configuration/
+ - content-service/
+ - currentRepository-jobs/
+ - currentRepository-service/
+ - first-service/
+ - logs-service/
+ - rabmq-svc/
+ - rabmqUtilities/
+ - schedule-service/
+ - vanApp-service/
+ - vanCat-service/
+ - vanTaxi-service/
+ ---
diff --git a/ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js b/ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/kvs/list-order-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/steps.js b/ui-v2/tests/steps.js
index 766de7802c..48b68ae999 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -205,6 +205,25 @@ export default function(assert) {
`Expected ${num} ${model}s with ${property} set to "${value}", saw ${len}`
);
})
+ .then('I see $property on the $component like yaml\n$yaml', function(
+ property,
+ component,
+ yaml
+ ) {
+ const _component = currentPage[component];
+ const iterator = new Array(_component.length).fill(true);
+ iterator.forEach(function(item, i, arr) {
+ const actual = _component.objectAt(i)[property];
+ const expected = yaml[i];
+ assert.deepEqual(
+ actual,
+ expected,
+ `Expected to see ${property} on ${component}[${i}] as ${JSON.stringify(
+ expected
+ )}, was ${JSON.stringify(actual)}`
+ );
+ });
+ })
.then(['I see $property on the $component'], function(property, component) {
assert.ok(currentPage[component][property], `Expected to see ${property} on ${component}`);
})