diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-01-16 11:59:21 -0500 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-01-16 11:59:21 -0500 |
commit | 725b16543d75b82fbcd858ce9d2c88fbe92cc450 (patch) | |
tree | 9c10f9be78ed72c91c53ae787de299c0e0373cec /app/assets/javascripts/environments/stores | |
parent | 463fddeafc945e4be249ba74ed510190ff9cedb6 (diff) | |
download | gitlab-ce-725b16543d75b82fbcd858ce9d2c88fbe92cc450.tar.gz |
Filter environments visibility in store instead of the view in order to not get a infinite update loop in vue.js25507-handle-errors-environment-list
Diffstat (limited to 'app/assets/javascripts/environments/stores')
-rw-r--r-- | app/assets/javascripts/environments/stores/environments_store.js.es6 | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index 46e39a15ac9..9b4090100da 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -10,6 +10,8 @@ this.state.environments = []; this.state.stoppedCounter = 0; this.state.availableCounter = 0; + this.state.visibility = 'available'; + this.state.filteredEnvironments = []; return this; }, @@ -77,9 +79,66 @@ this.state.environments = environmentsTree; + this.filterEnvironmentsByVisibility(this.state.environments); + return environmentsTree; }, + storeVisibility(visibility) { + this.state.visibility = visibility; + }, + /** + * Given the visibility prop provided by the url query parameter and which + * changes according to the active tab we need to filter which environments + * should be visible. + * + * The environments array is a recursive tree structure and we need to filter + * both root level environments and children environments. + * + * In order to acomplish that, both `filterState` and `filterEnvironmentsByVisibility` + * functions work together. + * The first one works as the filter that verifies if the given environment matches + * the given state. + * The second guarantees both root level and children elements are filtered as well. + * + * Given array of environments will return only + * the environments that match the state stored. + * + * @param {Array} array + * @return {Array} + */ + filterEnvironmentsByVisibility(arr) { + const filteredEnvironments = arr.map((item) => { + if (item.children) { + const filteredChildren = this.filterEnvironmentsByVisibility( + item.children, + ).filter(Boolean); + + if (filteredChildren.length) { + item.children = filteredChildren; + return item; + } + } + + return this.filterState(this.state.visibility, item); + }).filter(Boolean); + + this.state.filteredEnvironments = filteredEnvironments; + return filteredEnvironments; + }, + + /** + * Given the state and the environment, + * returns only if the environment state matches the one provided. + * + * @param {String} state + * @param {Object} environment + * @return {Object} + */ + filterState(state, environment) { + return environment.state === state && environment; + }, + /** * Toggles folder open property given the environment type. * |