Commit fa882a67 authored by Andrew Fontaine's avatar Andrew Fontaine

Sort Environments in Table by Last Updated

Ensure folders push to the top, if both have no last update, sort by
name.

The sorting algorithm should sort in the following priorities:

1. folders first,
2. last updated descending,
3. by name ascending,

the sorting algorithm must:

1. Sort by name ascending,
2. Reverse (sort by name descending),
3. Sort by last deployment ascending,
4. Reverse (last deployment descending, name ascending),
5. Put folders first.

It is done this way, as `underscore`'s sort API is very basic: simple
comparisons, sorting by ascending only.
parent 27ed9d95
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
* Render environments table. * Render environments table.
*/ */
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import _ from 'underscore';
import environmentItem from './environment_item.vue'; import environmentItem from './environment_item.vue';
export default { export default {
...@@ -24,6 +25,15 @@ export default { ...@@ -24,6 +25,15 @@ export default {
default: false, default: false,
}, },
}, },
computed: {
sortedEnvironments() {
return this.sortEnvironments(this.environments).map(env =>
this.shouldRenderFolderContent(env)
? { ...env, children: this.sortEnvironments(env.children) }
: env,
);
},
},
methods: { methods: {
folderUrl(model) { folderUrl(model) {
return `${window.location.pathname}/folders/${model.folderName}`; return `${window.location.pathname}/folders/${model.folderName}`;
...@@ -31,6 +41,30 @@ export default { ...@@ -31,6 +41,30 @@ export default {
shouldRenderFolderContent(env) { shouldRenderFolderContent(env) {
return env.isFolder && env.isOpen && env.children && env.children.length > 0; return env.isFolder && env.isOpen && env.children && env.children.length > 0;
}, },
sortEnvironments(environments) {
/*
* The sorting algorithm should sort in the following priorities:
*
* 1. folders first,
* 2. last updated descending,
* 3. by name ascending,
*
* the sorting algorithm must:
*
* 1. Sort by name ascending,
* 2. Reverse (sort by name descending),
* 3. Sort by last deployment ascending,
* 4. Reverse (last deployment descending, name ascending),
* 5. Put folders first.
*/
return _.chain(environments)
.sortBy(env => (env.isFolder ? env.folderName : env.name))
.reverse()
.sortBy(env => (env.last_deployment ? env.last_deployment.created_at : '0000'))
.reverse()
.sortBy(env => (env.isFolder ? -1 : 1))
.value();
},
}, },
}; };
</script> </script>
...@@ -53,7 +87,7 @@ export default { ...@@ -53,7 +87,7 @@ export default {
{{ s__('Environments|Updated') }} {{ s__('Environments|Updated') }}
</div> </div>
</div> </div>
<template v-for="(model, i) in environments" :model="model"> <template v-for="(model, i) in sortedEnvironments" :model="model">
<div <div
is="environment-item" is="environment-item"
:key="`environment-item-${i}`" :key="`environment-item-${i}`"
......
---
title: Sort Environments by Last Updated
merge_request: 25260
author:
type: added
...@@ -31,4 +31,224 @@ describe('Environment table', () => { ...@@ -31,4 +31,224 @@ describe('Environment table', () => {
expect(vm.$el.getAttribute('class')).toContain('ci-table'); expect(vm.$el.getAttribute('class')).toContain('ci-table');
}); });
describe('sortEnvironments', () => {
it('should sort environments by last updated', () => {
const mockItems = [
{
name: 'old',
size: 3,
isFolder: false,
last_deployment: {
created_at: new Date(2019, 0, 5).toISOString(),
},
},
{
name: 'new',
size: 3,
isFolder: false,
last_deployment: {
created_at: new Date(2019, 1, 5).toISOString(),
},
},
{
name: 'older',
size: 3,
isFolder: false,
last_deployment: {
created_at: new Date(2018, 0, 5).toISOString(),
},
},
{
name: 'an environment with no deployment',
},
];
vm = mountComponent(Component, {
environments: mockItems,
canReadEnvironment: true,
});
const [old, newer, older, noDeploy] = mockItems;
expect(vm.sortEnvironments(mockItems)).toEqual([newer, old, older, noDeploy]);
});
it('should push environments with no deployments to the bottom', () => {
const mockItems = [
{
name: 'production',
size: 1,
id: 2,
state: 'available',
external_url: 'https://google.com/production',
environment_type: null,
last_deployment: null,
has_stop_action: false,
environment_path: '/Commit451/lab-coat/environments/2',
stop_path: '/Commit451/lab-coat/environments/2/stop',
folder_path: '/Commit451/lab-coat/environments/folders/production',
created_at: '2019-01-17T16:26:10.064Z',
updated_at: '2019-01-17T16:27:37.717Z',
can_stop: true,
},
{
name: 'review/225addcibuildstatus',
size: 2,
isFolder: true,
isLoadingFolderContent: false,
folderName: 'review',
isOpen: false,
children: [],
id: 12,
state: 'available',
external_url: 'https://google.com/review/225addcibuildstatus',
environment_type: 'review',
last_deployment: null,
has_stop_action: false,
environment_path: '/Commit451/lab-coat/environments/12',
stop_path: '/Commit451/lab-coat/environments/12/stop',
folder_path: '/Commit451/lab-coat/environments/folders/review',
created_at: '2019-01-17T16:27:37.877Z',
updated_at: '2019-01-17T16:27:37.883Z',
can_stop: true,
},
{
name: 'staging',
size: 1,
id: 1,
state: 'available',
external_url: 'https://google.com/staging',
environment_type: null,
last_deployment: {
created_at: '2019-01-17T16:26:15.125Z',
scheduled_actions: [],
},
},
];
vm = mountComponent(Component, {
environments: mockItems,
canReadEnvironment: true,
});
const [prod, review, staging] = mockItems;
expect(vm.sortEnvironments(mockItems)).toEqual([review, staging, prod]);
});
it('should sort environments by folder first', () => {
const mockItems = [
{
name: 'old',
size: 3,
isFolder: false,
last_deployment: {
created_at: new Date(2019, 0, 5).toISOString(),
},
},
{
name: 'new',
size: 3,
isFolder: false,
last_deployment: {
created_at: new Date(2019, 1, 5).toISOString(),
},
},
{
name: 'older',
size: 3,
isFolder: true,
children: [],
},
];
vm = mountComponent(Component, {
environments: mockItems,
canReadEnvironment: true,
});
const [old, newer, older] = mockItems;
expect(vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
});
it('should break ties by name', () => {
const mockItems = [
{
name: 'old',
isFolder: false,
},
{
name: 'new',
isFolder: false,
},
{
folderName: 'older',
isFolder: true,
},
];
vm = mountComponent(Component, {
environments: mockItems,
canReadEnvironment: true,
});
const [old, newer, older] = mockItems;
expect(vm.sortEnvironments(mockItems)).toEqual([older, newer, old]);
});
});
describe('sortedEnvironments', () => {
it('it should sort children as well', () => {
const mockItems = [
{
name: 'production',
last_deployment: null,
},
{
name: 'review/225addcibuildstatus',
isFolder: true,
folderName: 'review',
isOpen: true,
children: [
{
name: 'review/225addcibuildstatus',
last_deployment: {
created_at: '2019-01-17T16:26:15.125Z',
},
},
{
name: 'review/master',
last_deployment: {
created_at: '2019-02-17T16:26:15.125Z',
},
},
],
},
{
name: 'staging',
last_deployment: {
created_at: '2019-01-17T16:26:15.125Z',
},
},
];
const [production, review, staging] = mockItems;
const [addcibuildstatus, master] = mockItems[1].children;
vm = mountComponent(Component, {
environments: mockItems,
canReadEnvironment: true,
});
expect(vm.sortedEnvironments.map(env => env.name)).toEqual([
review.name,
staging.name,
production.name,
]);
expect(vm.sortedEnvironments[0].children).toEqual([master, addcibuildstatus]);
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment