Commit 725b1654 authored by Filipa Lacerda's avatar Filipa Lacerda

Filter environments visibility in store instead of the view in order to not...

Filter environments visibility in store instead of the view in order to not get a infinite update loop in vue.js
parent 463fddea
...@@ -11,41 +11,6 @@ ...@@ -11,41 +11,6 @@
(() => { (() => {
window.gl = window.gl || {}; window.gl = window.gl || {};
/**
* 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 `filterEnvironmentsByState`
* 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.
*/
const filterState = state => environment => environment.state === state && environment;
/**
* Given the filter function and the array of environments will return only
* the environments that match the state provided to the filter function.
*
* @param {Function} fn
* @param {Array} array
* @return {Array}
*/
const filterEnvironmentsByState = (fn, arr) => arr.map((item) => {
if (item.children) {
const filteredChildren = filterEnvironmentsByState(fn, item.children).filter(Boolean);
if (filteredChildren.length) {
item.children = filteredChildren;
return item;
}
}
return fn(item);
}).filter(Boolean);
gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', { gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
props: { props: {
store: { store: {
...@@ -82,10 +47,6 @@ ...@@ -82,10 +47,6 @@
}, },
computed: { computed: {
filteredEnvironments() {
return filterEnvironmentsByState(filterState(this.visibility), this.state.environments);
},
scope() { scope() {
return this.$options.getQueryParameter('scope'); return this.$options.getQueryParameter('scope');
}, },
...@@ -112,7 +73,7 @@ ...@@ -112,7 +73,7 @@
const scope = this.$options.getQueryParameter('scope'); const scope = this.$options.getQueryParameter('scope');
if (scope) { if (scope) {
this.visibility = scope; this.store.storeVisibility(scope);
} }
this.isLoading = true; this.isLoading = true;
...@@ -213,7 +174,7 @@ ...@@ -213,7 +174,7 @@
</div> </div>
<div class="table-holder" <div class="table-holder"
v-if="!isLoading && state.environments.length > 0"> v-if="!isLoading && state.filteredEnvironments.length > 0">
<table class="table ci-table environments"> <table class="table ci-table environments">
<thead> <thead>
<tr> <tr>
...@@ -226,7 +187,7 @@ ...@@ -226,7 +187,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template v-for="model in filteredEnvironments" <template v-for="model in state.filteredEnvironments"
v-bind:model="model"> v-bind:model="model">
<tr <tr
......
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
this.state.environments = []; this.state.environments = [];
this.state.stoppedCounter = 0; this.state.stoppedCounter = 0;
this.state.availableCounter = 0; this.state.availableCounter = 0;
this.state.visibility = 'available';
this.state.filteredEnvironments = [];
return this; return this;
}, },
...@@ -77,9 +79,66 @@ ...@@ -77,9 +79,66 @@
this.state.environments = environmentsTree; this.state.environments = environmentsTree;
this.filterEnvironmentsByVisibility(this.state.environments);
return environmentsTree; 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. * Toggles folder open property given the environment type.
* *
......
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