diff options
Diffstat (limited to 'app/assets/javascripts/environments')
15 files changed, 95 insertions, 82 deletions
diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index f0723e96ddf..b2a8571820b 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ /** * Render modal to confirm rollback/redeploy. */ diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index d2978422224..035b276bc3b 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -1,8 +1,7 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; import { formatTime } from '~/lib/utils/datetime_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -11,7 +10,8 @@ export default { tooltip, }, components: { - Icon, + GlButton, + GlIcon, GlLoadingIcon, }, props: { @@ -69,38 +69,37 @@ export default { </script> <template> <div class="btn-group" role="group"> - <button + <gl-button v-tooltip :title="title" :aria-label="title" :disabled="isLoading" - type="button" - class="dropdown btn btn-default dropdown-new js-environment-actions-dropdown" + class="dropdown dropdown-new js-environment-actions-dropdown" data-container="body" data-toggle="dropdown" > <span> - <icon name="play" /> - <icon name="chevron-down" /> + <gl-icon name="play" /> + <gl-icon name="chevron-down" /> <gl-loading-icon v-if="isLoading" /> </span> - </button> + </gl-button> <ul class="dropdown-menu dropdown-menu-right"> - <li v-for="(action, i) in actions" :key="i"> - <button + <li v-for="(action, i) in actions" :key="i" class="gl-display-flex"> + <gl-button :class="{ disabled: isActionDisabled(action) }" :disabled="isActionDisabled(action)" - type="button" - class="js-manual-action-link no-btn btn d-flex align-items-center" + variant="link" + class="js-manual-action-link gl-flex-fill-1" @click="onClickAction(action)" > - <span class="flex-fill">{{ action.name }}</span> - <span v-if="action.scheduledAt" class="text-secondary"> - <icon name="clock" /> + <span class="gl-flex-fill-1">{{ action.name }}</span> + <span v-if="action.scheduledAt" class="text-secondary float-right"> + <gl-icon name="clock" /> {{ remainingTime(action) }} </span> - </button> + </gl-button> </li> </ul> </div> diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue index b53c5fa6583..55aaa6d57bd 100644 --- a/app/assets/javascripts/environments/components/environment_delete.vue +++ b/app/assets/javascripts/environments/components/environment_delete.vue @@ -5,15 +5,14 @@ */ import $ from 'jquery'; -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; import LoadingButton from '../../vue_shared/components/loading_button.vue'; export default { components: { - Icon, + GlIcon, LoadingButton, }, directives: { @@ -65,6 +64,6 @@ export default { data-target="#delete-environment-modal" @click="onClick" > - <icon name="remove" /> + <gl-icon name="remove" /> </loading-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index fa3d217f148..8850ed19a4b 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,13 +1,12 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ import { isEmpty } from 'lodash'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import CommitComponent from '~/vue_shared/components/commit.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import eventHub from '../event_hub'; import ActionsComponent from './environment_actions.vue'; @@ -30,7 +29,7 @@ export default { ActionsComponent, CommitComponent, ExternalUrlComponent, - Icon, + GlIcon, MonitoringButtonComponent, PinComponent, DeleteComponent, @@ -535,7 +534,7 @@ export default { </div> <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard"> - <icon :name="deployIconName" /> + <gl-icon :name="deployIconName" /> </span> <span @@ -560,9 +559,9 @@ export default { role="button" @click="onClickFolder" > - <icon :name="folderIconName" class="folder-icon" /> + <gl-icon :name="folderIconName" class="folder-icon" /> - <icon name="folder" class="folder-icon" /> + <gl-icon name="folder" class="folder-icon" /> <span> {{ model.folderName }} </span> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index bd6feb14319..4dc2c0ec1bd 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -1,15 +1,12 @@ <script> -import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; /** * Renders the Monitoring (Metrics) link in environments table. */ -import Icon from '~/vue_shared/components/icon.vue'; - export default { components: { - Icon, - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -28,15 +25,14 @@ export default { }; </script> <template> - <gl-deprecated-button + <gl-button v-gl-tooltip :href="monitoringUrl" :title="title" :aria-label="title" - class="monitoring-url d-none d-sm-none d-md-block" + class="monitoring-url gl-display-none gl-display-sm-none gl-display-md-block" + icon="chart" rel="noopener noreferrer nofollow" variant="default" - > - <icon name="chart" /> - </gl-deprecated-button> + /> </template> diff --git a/app/assets/javascripts/environments/components/environment_pin.vue b/app/assets/javascripts/environments/components/environment_pin.vue index 3a219e98b08..52ac7725bde 100644 --- a/app/assets/javascripts/environments/components/environment_pin.vue +++ b/app/assets/javascripts/environments/components/environment_pin.vue @@ -3,15 +3,14 @@ * Renders a prevent auto-stop button. * Used in environments table. */ -import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import eventHub from '../event_hub'; export default { components: { - Icon, - GlDeprecatedButton, + GlIcon, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -31,12 +30,7 @@ export default { }; </script> <template> - <gl-deprecated-button - v-gl-tooltip - :title="$options.title" - :aria-label="$options.title" - @click="onPinClick" - > - <icon name="thumbtack" /> - </gl-deprecated-button> + <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick"> + <gl-icon name="thumbtack" /> + </gl-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 7a728961b37..32528e6c6ea 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -5,21 +5,13 @@ * * Makes a post request when the button is clicked. */ -import { - GlTooltipDirective, - GlLoadingIcon, - GlModalDirective, - GlDeprecatedButton, -} from '@gitlab/ui'; +import { GlTooltipDirective, GlModalDirective, GlButton } from '@gitlab/ui'; import { s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; export default { components: { - Icon, - GlLoadingIcon, - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -73,15 +65,13 @@ export default { }; </script> <template> - <gl-deprecated-button + <gl-button v-gl-tooltip v-gl-modal.confirm-rollback-modal - :disabled="isLoading" + class="gl-display-none gl-display-md-block text-secondary" + :loading="isLoading" :title="title" - class="d-none d-md-block text-secondary" + :icon="isLastDeployment ? 'repeat' : 'redo'" @click="onClick" - > - <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" /> - <gl-loading-icon v-if="isLoading" /> - </gl-deprecated-button> + /> </template> diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 37f94f9f5ab..b5a7be90204 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -3,13 +3,12 @@ * Renders a terminal button to open a web terminal. * Used in environments table. */ -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -42,6 +41,6 @@ export default { :class="{ disabled: disabled }" class="btn terminal-button d-none d-sm-none d-md-block text-secondary" > - <icon name="terminal" /> + <gl-icon name="terminal" /> </a> </template> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 1bf705dcda2..c06ab265915 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -14,6 +14,7 @@ export default { DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'), CanaryDeploymentCallout: () => import('ee_component/environments/components/canary_deployment_callout.vue'), + EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'), }, props: { environments: { @@ -111,6 +112,9 @@ export default { shouldShowCanaryCallout(env) { return env.showCanaryCallout && this.showCanaryDeploymentCallout; }, + shouldRenderAlert(env) { + return env?.has_opened_alert; + }, sortEnvironments(environments) { /* * The sorting algorithm should sort in the following priorities: @@ -185,6 +189,11 @@ export default { /> </div> </div> + <environment-alert + v-if="shouldRenderAlert(model)" + :key="`alert-row-${i}`" + :environment="model" + /> <template v-if="shouldRenderFolderContent(model)"> <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`"> diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue index 7448fd584c6..88612376b6e 100644 --- a/app/assets/javascripts/environments/components/stop_environment_modal.vue +++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue @@ -1,5 +1,5 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ +/* eslint-disable @gitlab/vue-require-i18n-strings, vue/no-v-html */ import { GlTooltipDirective } from '@gitlab/ui'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import { s__, sprintf } from '~/locale'; diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js index 56896ac4d43..6c547c3713a 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js @@ -1,20 +1,33 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import canaryCalloutMixin from '../mixins/canary_callout_mixin'; import environmentsFolderApp from './environments_folder_view.vue'; import { parseBoolean } from '../../lib/utils/common_utils'; import Translate from '../../vue_shared/translate'; +import createDefaultClient from '~/lib/graphql'; Vue.use(Translate); +Vue.use(VueApollo); -export default () => - new Vue({ - el: '#environments-folder-list-view', +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default () => { + const el = document.getElementById('environments-folder-list-view'); + + return new Vue({ + el, components: { environmentsFolderApp, }, mixins: [canaryCalloutMixin], + apolloProvider, + provide: { + projectPath: el.dataset.projectPath, + }, data() { - const environmentsData = document.querySelector(this.$options.el).dataset; + const environmentsData = el.dataset; return { endpoint: environmentsData.environmentsDataEndpoint, @@ -35,3 +48,4 @@ export default () => }); }, }); +}; diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index e1e356a977f..16d25615779 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -23,7 +23,8 @@ export default { }, cssContainerClass: { type: String, - required: true, + required: false, + default: '', }, canReadEnvironment: { type: Boolean, diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js index 4848cb0f13d..8e8af3f32f7 100644 --- a/app/assets/javascripts/environments/index.js +++ b/app/assets/javascripts/environments/index.js @@ -1,20 +1,32 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import canaryCalloutMixin from './mixins/canary_callout_mixin'; import environmentsComponent from './components/environments_app.vue'; import { parseBoolean } from '../lib/utils/common_utils'; import Translate from '../vue_shared/translate'; +import createDefaultClient from '~/lib/graphql'; Vue.use(Translate); +Vue.use(VueApollo); -export default () => - new Vue({ - el: '#environments-list-view', +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default () => { + const el = document.getElementById('environments-list-view'); + return new Vue({ + el, components: { environmentsComponent, }, mixins: [canaryCalloutMixin], + apolloProvider, + provide: { + projectPath: el.dataset.projectPath, + }, data() { - const environmentsData = document.querySelector(this.$options.el).dataset; + const environmentsData = el.dataset; return { endpoint: environmentsData.environmentsDataEndpoint, @@ -39,3 +51,4 @@ export default () => }); }, }); +}; diff --git a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js index 398576a31cb..e9f1a144cb3 100644 --- a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js +++ b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js @@ -2,7 +2,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; export default { data() { - const data = document.querySelector(this.$options.el).dataset; + const data = this.$options.el.dataset; return { canaryDeploymentFeatureId: data.environmentsDataCanaryDeploymentFeatureId, diff --git a/app/assets/javascripts/environments/stores/helpers.js b/app/assets/javascripts/environments/stores/helpers.js index 8eba6c00601..eb47ba29412 100644 --- a/app/assets/javascripts/environments/stores/helpers.js +++ b/app/assets/javascripts/environments/stores/helpers.js @@ -4,5 +4,4 @@ * @param {Object} environment * @returns {Object} */ -// eslint-disable-next-line import/prefer-default-export export const setDeployBoard = (oldEnvironmentState, environment) => environment; |