diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/deployment')
5 files changed, 109 insertions, 85 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js index a7ab11290eb..66de4f8b682 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js @@ -11,3 +11,9 @@ export const CANCELED = 'canceled'; export const STOPPING = 'stopping'; export const DEPLOYING = 'deploying'; export const REDEPLOYING = 'redeploying'; + +export const ACT_BUTTON_ICONS = { + play: 'play', + repeat: 'repeat', + stop: 'stop', +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue index 7d74d5531b4..cc3efae565a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue @@ -1,12 +1,12 @@ <script> -import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import { RUNNING } from './constants'; export default { name: 'DeploymentActionButton', components: { - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -35,6 +35,10 @@ export default { required: false, default: '', }, + icon: { + type: String, + required: true, + }, }, computed: { isActionInProgress() { @@ -58,18 +62,19 @@ export default { </script> <template> - <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0"> - <gl-deprecated-button + <span v-gl-tooltip :title="actionInProgressTooltip" class="gl-display-inline-block" tabindex="0"> + <gl-button v-gl-tooltip + category="primary" + size="small" :title="buttonTitle" :loading="isLoading" :disabled="isActionInProgress" - :class="`btn btn-default btn-sm inline gl-ml-2 ${containerClasses}`" + :class="`inline gl-ml-2 ${containerClasses}`" + :icon="icon" @click="$emit('click')" > - <span class="d-inline-flex align-items-baseline"> - <slot> </slot> - </span> - </gl-deprecated-button> + <slot> </slot> + </gl-button> </span> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue index af0b4087d46..208df03b6a4 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue @@ -1,5 +1,4 @@ <script> -import { GlIcon } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { visitUrl } from '~/lib/utils/url_utility'; @@ -7,14 +6,22 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MRWidgetService from '../../services/mr_widget_service'; import DeploymentActionButton from './deployment_action_button.vue'; import DeploymentViewButton from './deployment_view_button.vue'; -import { MANUAL_DEPLOY, FAILED, SUCCESS, STOPPING, DEPLOYING, REDEPLOYING } from './constants'; +import { + MANUAL_DEPLOY, + FAILED, + SUCCESS, + STOPPING, + DEPLOYING, + REDEPLOYING, + ACT_BUTTON_ICONS, +} from './constants'; export default { name: 'DeploymentActions', + btnIcons: ACT_BUTTON_ICONS, components: { DeploymentActionButton, DeploymentViewButton, - GlIcon, }, mixins: [glFeatureFlagsMixin()], props: { @@ -151,10 +158,10 @@ export default { :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]" :computed-deployment-status="computedDeploymentStatus" + :icon="$options.btnIcons.play" container-classes="js-manual-deploy-action" @click="deployManually" > - <gl-icon name="play" /> <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span> </deployment-action-button> <deployment-action-button @@ -162,10 +169,10 @@ export default { :action-in-progress="actionInProgress" :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]" :computed-deployment-status="computedDeploymentStatus" + :icon="$options.btnIcons.repeat" container-classes="js-manual-redeploy-action" @click="redeploy" > - <gl-icon name="repeat" /> <span>{{ $options.actionsConfiguration[constants.REDEPLOYING].buttonText }}</span> </deployment-action-button> <deployment-view-button @@ -181,10 +188,9 @@ export default { :computed-deployment-status="computedDeploymentStatus" :actions-configuration="$options.actionsConfiguration[constants.STOPPING]" :button-title="$options.actionsConfiguration[constants.STOPPING].buttonText" + :icon="$options.btnIcons.stop" container-classes="js-stop-env" @click="stopEnvironment" - > - <gl-icon name="stop" /> - </deployment-action-button> + /> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue index b12250d1d1c..157d6d60290 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue @@ -1,17 +1,23 @@ <script> -import { GlLink } from '@gitlab/ui'; -import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue'; +import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui'; +import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import ReviewAppLink from '../review_app_link.vue'; export default { name: 'DeploymentViewButton', components: { - FilteredSearchDropdown, + GlButtonGroup, + GlDropdown, + GlDropdownItem, GlLink, + GlSearchBoxByType, ReviewAppLink, VisualReviewAppLink: () => import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'), }, + directives: { + autofocusonshow, + }, props: { appButtonText: { type: Object, @@ -37,6 +43,9 @@ export default { }), }, }, + data() { + return { searchTerm: '' }; + }, computed: { deploymentExternalUrl() { if (this.deployment.changes && this.deployment.changes.length === 1) { @@ -47,44 +56,52 @@ export default { shouldRenderDropdown() { return this.deployment.changes && this.deployment.changes.length > 1; }, + filteredChanges() { + return this.deployment?.changes?.filter(change => change.path.includes(this.searchTerm)); + }, }, }; </script> - <template> <span> - <filtered-search-dropdown - v-if="shouldRenderDropdown" - class="js-mr-wigdet-deployment-dropdown inline" - :items="deployment.changes" - :main-action-link="deploymentExternalUrl" - filter-key="path" - > - <template #mainAction="{ className }"> - <review-app-link - :display="appButtonText" - :link="deploymentExternalUrl" - :css-class="`deploy-link js-deploy-url inline ${className}`" + <gl-button-group v-if="shouldRenderDropdown" size="small"> + <review-app-link + :display="appButtonText" + :link="deploymentExternalUrl" + size="small" + css-class="deploy-link js-deploy-url inline" + /> + <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown"> + <gl-search-box-by-type + v-model.trim="searchTerm" + v-autofocusonshow + autofocus + class="gl-m-3" /> - </template> - - <template #result="{ result }"> - <gl-link - :href="result.external_url" - target="_blank" - rel="noopener noreferrer nofollow" - class="js-deploy-url-menu-item menu-item" + <gl-dropdown-item + v-for="change in filteredChanges" + :key="change.path" + class="js-filtered-dropdown-result" > - <strong class="str-truncated-100 gl-mb-0 d-block">{{ result.path }}</strong> - - <p class="text-secondary str-truncated-100 gl-mb-0 d-block">{{ result.external_url }}</p> - </gl-link> - </template> - </filtered-search-dropdown> + <gl-link + :href="change.external_url" + target="_blank" + rel="noopener noreferrer nofollow" + class="js-deploy-url-menu-item menu-item" + > + <strong class="str-truncated-100 gl-mb-0 gl-display-block">{{ change.path }}</strong> + <p class="text-secondary str-truncated-100 gl-mb-0 d-block"> + {{ change.external_url }} + </p> + </gl-link> + </gl-dropdown-item> + </gl-dropdown> + </gl-button-group> <review-app-link v-else :display="appButtonText" :link="deploymentExternalUrl" + size="small" css-class="js-deploy-url deploy-link btn btn-default btn-sm inline" /> <visual-review-app-link diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue index fe41a15979e..9b2cd41092e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue @@ -1,5 +1,6 @@ <script> -import { sprintf, s__ } from '~/locale'; +import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; import statusCodes from '~/lib/utils/http_status'; import { bytesToMiB } from '~/lib/utils/number_utils'; import { backOff } from '~/lib/utils/common_utils'; @@ -10,6 +11,9 @@ export default { name: 'MemoryUsage', components: { MemoryGraph, + GlLoadingIcon, + GlSprintf, + GlLink, }, props: { metricsUrl: { @@ -47,45 +51,22 @@ export default { return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed; }, memoryChangeMessage() { - const messageProps = { - memoryFrom: this.memoryFrom, - memoryTo: this.memoryTo, - metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`, - metricsLinkEnd: '</a>', - emphasisStart: '<b>', - emphasisEnd: '</b>', - }; const memoryTo = Number(this.memoryTo); const memoryFrom = Number(this.memoryFrom); - let memoryUsageMsg = ''; if (memoryTo > memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } else if (memoryTo < memoryFrom) { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', - ), - messageProps, - false, - ); - } else { - memoryUsageMsg = sprintf( - s__( - 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', - ), - messageProps, - false, + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB', ); } - return memoryUsageMsg; + return s__( + 'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB', + ); }, }, mounted() { @@ -155,14 +136,23 @@ export default { <template> <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage"> <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading"> - <i class="fa fa-spinner fa-spin usage-info-load-spinner" aria-hidden="true"> </i - >{{ s__('mrWidget|Loading deployment statistics') }} + <gl-loading-icon class="usage-info-load-spinner" />{{ + s__('mrWidget|Loading deployment statistics') + }} + </p> + <p v-if="shouldShowMemoryGraph" class="usage-info js-usage-info"> + <gl-sprintf :message="memoryChangeMessage"> + <template #metricsLink="{ content }"> + <gl-link :href="metricsMonitoringUrl">{{ content }}</gl-link> + </template> + <template #emphasis="{content}"> + <strong>{{ content }}</strong> + </template> + <template #memoryFrom>{{ memoryFrom }}</template> + <template #memoryTo>{{ memoryTo }}</template> + </gl-sprintf> </p> - <p - v-if="shouldShowMemoryGraph" - class="usage-info js-usage-info" - v-html="memoryChangeMessage" - ></p> + <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed"> {{ s__('mrWidget|Failed to load deployment statistics') }} </p> |