diff options
Diffstat (limited to 'app/assets/javascripts/environments/components')
8 files changed, 163 insertions, 114 deletions
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue index d4e13f3c84a..28597c799df 100644 --- a/app/assets/javascripts/environments/components/environment.vue +++ b/app/assets/javascripts/environments/components/environment.vue @@ -1,5 +1,6 @@ <script> /* global Flash */ +import Visibility from 'visibilityjs'; import EnvironmentsService from '../services/environments_service'; import environmentTable from './environments_table.vue'; import EnvironmentsStore from '../stores/environments_store'; @@ -7,6 +8,8 @@ import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue'; import '../../lib/utils/common_utils'; import eventHub from '../event_hub'; +import Poll from '../../lib/utils/poll'; +import environmentsMixin from '../mixins/environments_mixin'; export default { @@ -16,6 +19,10 @@ export default { loadingIcon, }, + mixins: [ + environmentsMixin, + ], + data() { const environmentsData = document.querySelector('#environments-list-view').dataset; const store = new EnvironmentsStore(); @@ -35,6 +42,7 @@ export default { projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath, newEnvironmentPath: environmentsData.newEnvironmentPath, helpPagePath: environmentsData.helpPagePath, + isMakingRequest: false, // Pagination Properties, paginationInformation: {}, @@ -65,17 +73,43 @@ export default { * Toggles loading property. */ created() { + const scope = gl.utils.getParameterByName('scope') || this.visibility; + const page = gl.utils.getParameterByName('page') || this.pageNumber; + this.service = new EnvironmentsService(this.endpoint); - this.fetchEnvironments(); + const poll = new Poll({ + resource: this.service, + method: 'get', + data: { scope, page }, + successCallback: this.successCallback, + errorCallback: this.errorCallback, + notificationCallback: (isMakingRequest) => { + this.isMakingRequest = isMakingRequest; + + // We need to verify if any folder is open to also fecth it + this.openFolders = this.store.getOpenFolders(); + }, + }); + + if (!Visibility.hidden()) { + this.isLoading = true; + poll.makeRequest(); + } + + Visibility.change(() => { + if (!Visibility.hidden()) { + poll.restart(); + } else { + poll.stop(); + } + }); - eventHub.$on('refreshEnvironments', this.fetchEnvironments); eventHub.$on('toggleFolder', this.toggleFolder); eventHub.$on('postAction', this.postAction); }, - beforeDestroyed() { - eventHub.$off('refreshEnvironments'); + beforeDestroy() { eventHub.$off('toggleFolder'); eventHub.$off('postAction'); }, @@ -104,29 +138,13 @@ export default { fetchEnvironments() { const scope = gl.utils.getParameterByName('scope') || this.visibility; - const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber; + const page = gl.utils.getParameterByName('page') || this.pageNumber; this.isLoading = true; - return this.service.get(scope, pageNumber) - .then(resp => ({ - headers: resp.headers, - body: resp.json(), - })) - .then((response) => { - this.store.storeAvailableCount(response.body.available_count); - this.store.storeStoppedCount(response.body.stopped_count); - this.store.storeEnvironments(response.body.environments); - this.store.setPagination(response.headers); - }) - .then(() => { - this.isLoading = false; - }) - .catch(() => { - this.isLoading = false; - // eslint-disable-next-line no-new - new Flash('An error occurred while fetching the environments.'); - }); + return this.service.get({ scope, page }) + .then(this.successCallback) + .catch(this.errorCallback); }, fetchChildEnvironments(folder, folderUrl) { @@ -146,9 +164,34 @@ export default { }, postAction(endpoint) { - this.service.postAction(endpoint) - .then(() => this.fetchEnvironments()) - .catch(() => new Flash('An error occured while making the request.')); + if (!this.isMakingRequest) { + this.isLoading = true; + + this.service.postAction(endpoint) + .then(() => this.fetchEnvironments()) + .catch(() => new Flash('An error occured while making the request.')); + } + }, + + successCallback(resp) { + this.saveData(resp); + + // If folders are open while polling we need to open them again + if (this.openFolders.length) { + this.openFolders.map((folder) => { + // TODO - Move this to the backend + const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`; + + this.store.updateFolder(folder, 'isOpen', true); + return this.fetchChildEnvironments(folder, folderUrl); + }); + } + }, + + errorCallback() { + this.isLoading = false; + // eslint-disable-next-line no-new + new Flash('An error occurred while fetching the environments.'); }, }, }; @@ -212,7 +255,7 @@ export default { v-if="canCreateEnvironmentParsed" :href="newEnvironmentPath" class="btn btn-create js-new-environment-button"> - New Environment + New environment </a> </div> diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index a2448520a5f..41d5453f1b2 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -70,7 +70,7 @@ export default { </span> </button> - <ul class="dropdown-menu dropdown-menu-align-right"> + <ul class="dropdown-menu"> <li v-for="action in actions"> <button type="button" diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 012ff1f975b..03eb51ba1b2 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -421,14 +421,19 @@ export default { }; </script> <template> - <tr :class="{ 'js-child-row': model.isChildren }"> - <td> + <div + :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"> + <div class="table-section section-10" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Environment + </div> <a v-if="!model.isFolder" - class="environment-name" - :class="{ 'prepend-left-default': model.isChildren }" + class="environment-name flex-truncate-parent table-mobile-content" :href="environmentPath"> - {{model.name}} + <span class="flex-truncate-child">{{model.name}}</span> </a> <span v-else @@ -461,9 +466,9 @@ export default { {{model.size}} </span> </span> - </td> + </div> - <td class="deployment-column"> + <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell"> <span v-if="shouldRenderDeploymentID"> {{deploymentInternalId}} </span> @@ -478,21 +483,26 @@ export default { :tooltip-text="deploymentUser.username" /> </span> - </td> + </div> - <td class="environments-build-cell"> + <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell"> <a v-if="shouldRenderBuildName" class="build-link" :href="buildPath"> {{buildName}} </a> - </td> + </div> - <td> + <div class="table-section section-25" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Commit + </div> <div v-if="!model.isFolder && hasLastDeploymentKey" - class="js-commit-component"> + class="js-commit-component table-mobile-content"> <commit-component :tag="commitTag" :commit-ref="commitRef" @@ -501,25 +511,30 @@ export default { :title="commitTitle" :author="commitAuthor"/> </div> - <p + <div v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> No deployments yet - </p> - </td> + </div> + </div> - <td> + <div class="table-section section-10" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Updated + </div> <span v-if="!model.isFolder && canShowDate" - class="environment-created-date-timeago"> + class="environment-created-date-timeago table-mobile-content"> {{createdDate}} </span> - </td> + </div> - <td class="environments-actions"> + <div class="table-section section-30 environments-actions table-button-footer" role="gridcell"> <div v-if="!model.isFolder" - class="btn-group pull-right" + class="btn-group environment-action-buttons" role="group"> <actions-component @@ -553,6 +568,6 @@ export default { :retry-url="retryUrl" /> </div> - </td> - </tr> + </div> + </div> </template> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 79c019b3491..07cf92281a0 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -19,7 +19,7 @@ export default { </script> <template> <a - class="btn monitoring-url has-tooltip" + class="btn monitoring-url has-tooltip hidden-xs hidden-sm" data-container="body" rel="noopener noreferrer nofollow" :href="monitoringUrl" diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 2ba985bfe3e..49dba38edfb 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -43,7 +43,7 @@ export default { <template> <button type="button" - class="btn" + class="btn hidden-xs hidden-sm" @click="onClick" :disabled="isLoading"> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index a904453ffa9..091c543860b 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -47,7 +47,7 @@ export default { <template> <button type="button" - class="btn stop-env-link has-tooltip" + class="btn stop-env-link has-tooltip hidden-xs hidden-sm" data-container="body" @click="onClick" :disabled="isLoading" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index c8c1f17d4d8..1ca65a79951 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -29,7 +29,7 @@ export default { </script> <template> <a - class="btn terminal-button has-tooltip" + class="btn terminal-button has-tooltip hidden-xs hidden-sm" data-container="body" :title="title" :aria-label="title" diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 5148a2ae79b..f9262ab85c5 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -45,68 +45,59 @@ export default { }; </script> <template> - <table class="table ci-table"> - <thead> - <tr> - <th class="environments-name"> - Environment - </th> - <th class="environments-deploy"> - Last deployment - </th> - <th class="environments-build"> - Job - </th> - <th class="environments-commit"> - Commit - </th> - <th class="environments-date"> - Updated - </th> - <th class="environments-actions"></th> - </tr> - </thead> - <tbody> - <template - v-for="model in environments" - v-bind:model="model"> - <tr - is="environment-item" - :model="model" - :can-create-deployment="canCreateDeployment" - :can-read-environment="canReadEnvironment" - /> + <div class="ci-table" role="grid"> + <div class="gl-responsive-table-row table-row-header" role="row"> + <div class="table-section section-10 environments-name" role="rowheader"> + Environment + </div> + <div class="table-section section-10 environments-deploy" role="rowheader"> + Deployment + </div> + <div class="table-section section-15 environments-build" role="rowheader"> + Job + </div> + <div class="table-section section-25 environments-commit" role="rowheader"> + Commit + </div> + <div class="table-section section-10 environments-date" role="rowheader"> + Updated + </div> + </div> + <template + v-for="model in environments" + v-bind:model="model"> + <div + is="environment-item" + :model="model" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + /> - <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> - <tr v-if="isLoadingFolderContent"> - <td colspan="6"> - <loading-icon size="2" /> - </td> - </tr> + <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> + <div v-if="isLoadingFolderContent"> + <loading-icon size="2" /> + </div> - <template v-else> - <tr - is="environment-item" - v-for="children in model.children" - :model="children" - :can-create-deployment="canCreateDeployment" - :can-read-environment="canReadEnvironment" - /> + <template v-else> + <div + is="environment-item" + v-for="children in model.children" + :model="children" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + /> - <tr> - <td - colspan="6" - class="text-center"> - <a - :href="folderUrl(model)" - class="btn btn-default"> - Show all - </a> - </td> - </tr> - </template> + <div> + <div class="text-center prepend-top-10"> + <a + :href="folderUrl(model)" + class="btn btn-default"> + Show all + </a> + </div> + </div> </template> </template> - </tbody> - </table> + </template> + </div> </template> |