diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-10 00:11:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-10 00:11:06 +0300 |
commit | 85e524e496ae52652c541e98d5837b7c04bd2607 (patch) | |
tree | e67091bc91cac62f2fb49725f084ea55fab2c3fb /app/assets/javascripts/environments | |
parent | f6115a0f2ce347bab74ff5951cf828196d715b66 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
3 files changed, 48 insertions, 15 deletions
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue index fb86076b83c..b4759e4fb5a 100644 --- a/app/assets/javascripts/environments/components/new_environments_app.vue +++ b/app/assets/javascripts/environments/components/new_environments_app.vue @@ -1,6 +1,6 @@ <script> import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { __, s__ } from '~/locale'; import environmentAppQuery from '../graphql/queries/environment_app.query.graphql'; import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql'; import EnvironmentFolder from './new_environment_folder.vue'; @@ -17,6 +17,11 @@ export default { apollo: { environmentApp: { query: environmentAppQuery, + variables() { + return { + scope: this.scope, + }; + }, pollInterval() { return this.interval; }, @@ -29,10 +34,13 @@ export default { i18n: { newEnvironmentButtonLabel: s__('Environments|New environment'), reviewAppButtonLabel: s__('Environments|Enable review app'), + available: __('Available'), + stopped: __('Stopped'), }, modalId: 'enable-review-app-info', data() { - return { interval: undefined, isReviewAppModalVisible: false }; + const scope = new URLSearchParams(window.location.search).get('scope') || 'available'; + return { interval: undefined, scope, isReviewAppModalVisible: false }; }, computed: { canSetupReviewApp() { @@ -71,11 +79,25 @@ export default { }, }; }, + stoppedCount() { + return this.environmentApp?.stoppedCount; + }, }, methods: { showReviewAppModal() { this.isReviewAppModalVisible = true; }, + setScope(scope) { + this.scope = scope; + this.$apollo.queries.environmentApp.stopPolling(); + this.$nextTick(() => { + if (this.interval) { + this.$apollo.queries.environmentApp.startPolling(this.interval); + } else { + this.$apollo.queries.environmentApp.refetch({ scope }); + } + }); + }, }, }; </script> @@ -90,22 +112,32 @@ export default { <gl-tabs :action-secondary="addEnvironment" :action-primary="openReviewAppModal" + sync-active-tab-with-query-params + query-param-name="scope" @primary="showReviewAppModal" > - <gl-tab> + <gl-tab query-param-value="available" @click="setScope('available')"> <template #title> - <span>{{ __('Available') }}</span> + <span>{{ $options.i18n.available }}</span> <gl-badge size="sm" class="gl-tab-counter-badge"> {{ availableCount }} </gl-badge> </template> - <environment-folder - v-for="folder in folders" - :key="folder.name" - class="gl-mb-3" - :nested-environment="folder" - /> + </gl-tab> + <gl-tab query-param-value="stopped" @click="setScope('stopped')"> + <template #title> + <span>{{ $options.i18n.stopped }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge"> + {{ stoppedCount }} + </gl-badge> + </template> </gl-tab> </gl-tabs> + <environment-folder + v-for="folder in folders" + :key="folder.name" + class="gl-mb-3" + :nested-environment="folder" + /> </div> </template> diff --git a/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql index faa76c0a42c..ec0f39345db 100644 --- a/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql +++ b/app/assets/javascripts/environments/graphql/queries/environment_app.query.graphql @@ -1,6 +1,7 @@ -query getEnvironmentApp { - environmentApp @client { +query getEnvironmentApp($scope: String) { + environmentApp(scope: $scope) @client { availableCount + stoppedCount environments reviewApp stoppedCount diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js index 9bb00f92ac4..56e552fe461 100644 --- a/app/assets/javascripts/environments/graphql/resolvers.js +++ b/app/assets/javascripts/environments/graphql/resolvers.js @@ -19,12 +19,12 @@ const mapEnvironment = (env) => ({ export const resolvers = (endpoint) => ({ Query: { - environmentApp(_context, _variables, { cache }) { - return axios.get(endpoint, { params: { nested: true } }).then((res) => { + environmentApp(_context, { scope }, { cache }) { + return axios.get(endpoint, { params: { nested: true, scope } }).then((res) => { const interval = res.headers['poll-interval']; if (interval) { - cache.writeQuery({ query: pollIntervalQuery, data: { interval } }); + cache.writeQuery({ query: pollIntervalQuery, data: { interval: parseFloat(interval) } }); } else { cache.writeQuery({ query: pollIntervalQuery, data: { interval: undefined } }); } |