diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-06 00:09:40 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-06 00:09:40 +0300 |
commit | ad9eb72915f1be40da3ebe287274fe2bae62e46b (patch) | |
tree | e5a029b2edbce0e84a54b6ff4d18e8240680c4c4 /app/assets/javascripts/jobs/components | |
parent | f8d20b20be74c283fe8bfe81abfd2d132a500968 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jobs/components')
-rw-r--r-- | app/assets/javascripts/jobs/components/environments_block.vue | 255 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/components/stuck_block.vue | 71 |
2 files changed, 137 insertions, 189 deletions
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue index c78738221f1..9166c13a4fb 100644 --- a/app/assets/javascripts/jobs/components/environments_block.vue +++ b/app/assets/javascripts/jobs/components/environments_block.vue @@ -1,11 +1,15 @@ <script> -import { escape, isEmpty } from 'lodash'; +import { isEmpty } from 'lodash'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import { sprintf, __ } from '../../locale'; +import { __ } from '../../locale'; +import { GlSprintf, GlLink } from '@gitlab/ui'; export default { + creatingEnvironment: 'creating', components: { CiIcon, + GlSprintf, + GlLink, }, props: { deploymentStatus: { @@ -31,7 +35,7 @@ export default { return this.outOfDateEnvironmentMessage(); case 'failed': return this.failedEnvironmentMessage(); - case 'creating': + case this.$options.creatingEnvironment: return this.creatingEnvironmentMessage(); default: return ''; @@ -39,17 +43,12 @@ export default { }, environmentLink() { if (this.hasEnvironment) { - return sprintf( - '%{startLink}%{name}%{endLink}', - { - startLink: `<a href="${this.deploymentStatus.environment.environment_path}" class="js-environment-link">`, - name: escape(this.deploymentStatus.environment.name), - endLink: '</a>', - }, - false, - ); + return { + link: this.deploymentStatus.environment.environment_path, + name: this.deploymentStatus.environment.name, + }; } - return ''; + return {}; }, hasLastDeployment() { return this.hasEnvironment && this.deploymentStatus.environment.last_deployment; @@ -74,201 +73,107 @@ export default { } const { name, path } = this.deploymentCluster; - const escapedName = escape(name); - const escapedPath = escape(path); - - if (!escapedPath) { - return escapedName; - } - return sprintf( - '%{startLink}%{name}%{endLink}', - { - startLink: `<a href="${escapedPath}" class="js-job-cluster-link">`, - name: escapedName, - endLink: '</a>', - }, - false, - ); + return { + path, + name, + }; }, kubernetesNamespace() { return this.hasCluster ? this.deploymentCluster.kubernetes_namespace : null; }, + deploymentLink() { + return { + path: this.lastDeploymentPath, + name: + this.deploymentStatus.status === this.$options.creatingEnvironment + ? __('latest deployment') + : __('most recent deployment'), + }; + }, }, methods: { - deploymentLink(name) { - return sprintf( - '%{startLink}%{name}%{endLink}', - { - startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`, - name, - endLink: '</a>', - }, - false, - ); - }, failedEnvironmentMessage() { - const { environmentLink } = this; - - return sprintf( - __('The deployment of this job to %{environmentLink} did not succeed.'), - { environmentLink }, - false, - ); + return __('The deployment of this job to %{environmentLink} did not succeed.'); }, lastEnvironmentMessage() { - const { environmentLink, clusterNameOrLink, hasCluster, kubernetesNamespace } = this; - if (hasCluster) { - if (kubernetesNamespace) { - return sprintf( - __( - 'This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', - ), - { environmentLink, clusterNameOrLink, kubernetesNamespace }, - false, + if (this.hasCluster) { + if (this.kubernetesNamespace) { + return __( + 'This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', ); } // we know the cluster but not the namespace - return sprintf( - __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.'), - { environmentLink, clusterNameOrLink }, - false, - ); + return __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.'); } // not a cluster deployment - return sprintf(__('This job is deployed to %{environmentLink}.'), { environmentLink }, false); + return __('This job is deployed to %{environmentLink}.'); }, outOfDateEnvironmentMessage() { - const { - hasLastDeployment, - hasCluster, - environmentLink, - clusterNameOrLink, - kubernetesNamespace, - } = this; - - if (hasLastDeployment) { - const deploymentLink = this.deploymentLink(__('most recent deployment')); - if (hasCluster) { - if (kubernetesNamespace) { - return sprintf( - __( - 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. View the %{deploymentLink}.', - ), - { environmentLink, clusterNameOrLink, kubernetesNamespace, deploymentLink }, - false, + if (this.hasLastDeployment) { + if (this.hasCluster) { + if (this.kubernetesNamespace) { + return __( + 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. View the %{deploymentLink}.', ); } // we know the cluster but not the namespace - return sprintf( - __( - 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.', - ), - { environmentLink, clusterNameOrLink, deploymentLink }, - false, + return __( + 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.', ); } // not a cluster deployment - return sprintf( - __( - 'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.', - ), - { environmentLink, deploymentLink }, - false, + return __( + 'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.', ); } // no last deployment, i.e. this is the first deployment - if (hasCluster) { - if (kubernetesNamespace) { - return sprintf( - __( - 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', - ), - { environmentLink, clusterNameOrLink, kubernetesNamespace }, - false, + if (this.hasCluster) { + if (this.kubernetesNamespace) { + return __( + 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', ); } // we know the cluster but not the namespace - return sprintf( - __( - 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.', - ), - { environmentLink, clusterNameOrLink }, - false, + return __( + 'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.', ); } // not a cluster deployment - return sprintf( - __('This job is an out-of-date deployment to %{environmentLink}.'), - { environmentLink }, - false, - ); + return __('This job is an out-of-date deployment to %{environmentLink}.'); }, creatingEnvironmentMessage() { - const { - hasLastDeployment, - hasCluster, - environmentLink, - clusterNameOrLink, - kubernetesNamespace, - } = this; - - if (hasLastDeployment) { - const deploymentLink = this.deploymentLink(__('latest deployment')); - if (hasCluster) { - if (kubernetesNamespace) { - return sprintf( - __( - 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. This will overwrite the %{deploymentLink}.', - ), - { environmentLink, clusterNameOrLink, kubernetesNamespace, deploymentLink }, - false, + if (this.hasLastDeployment) { + if (this.hasCluster) { + if (this.kubernetesNamespace) { + return __( + 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. This will overwrite the %{deploymentLink}.', ); } // we know the cluster but not the namespace - return sprintf( - __( - 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.', - ), - { environmentLink, clusterNameOrLink, deploymentLink }, - false, + return __( + 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.', ); } // not a cluster deployment - return sprintf( - __( - 'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.', - ), - { environmentLink, deploymentLink }, - false, + return __( + 'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.', ); } // no last deployment, i.e. this is the first deployment - if (hasCluster) { - if (kubernetesNamespace) { - return sprintf( - __( - 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', - ), - { environmentLink, clusterNameOrLink, kubernetesNamespace }, - false, + if (this.hasCluster) { + if (this.kubernetesNamespace) { + return __( + 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.', ); } // we know the cluster but not the namespace - return sprintf( - __( - 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}.', - ), - { environmentLink, clusterNameOrLink }, - false, + return __( + 'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}.', ); } // not a cluster deployment - return sprintf( - __('This job is creating a deployment to %{environmentLink}.'), - { environmentLink }, - false, - ); + return __('This job is creating a deployment to %{environmentLink}.'); }, }, }; @@ -277,7 +182,37 @@ export default { <div class="gl-mt-3 gl-mb-3 js-environment-container"> <div class="environment-information"> <ci-icon :status="iconStatus" /> - <p class="inline gl-mb-0" v-html="environment"></p> + <p class="inline gl-mb-0"> + <gl-sprintf :message="environment"> + <template #environmentLink> + <gl-link + v-if="hasEnvironment" + :href="environmentLink.link" + data-testid="job-environment-link" + v-text="environmentLink.name" + /> + </template> + <template #clusterNameOrLink> + <gl-link + v-if="clusterNameOrLink.path" + :href="clusterNameOrLink.path" + data-testid="job-cluster-link" + v-text="clusterNameOrLink.name" + /> + <template v-else>{{ clusterNameOrLink.name }}</template> + </template> + <template #kubernetesNamespace> + <template>{{ kubernetesNamespace }}</template> + </template> + <template #deploymentLink> + <gl-link + :href="deploymentLink.path" + data-testid="job-deployment-link" + v-text="deploymentLink.name" + /> + </template> + </gl-sprintf> + </p> </div> </div> </template> diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index 9aa98525a4f..8e8202246a2 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -1,10 +1,13 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlAlert, GlBadge, GlLink } from '@gitlab/ui'; +import { s__ } from '../../locale'; /** * Renders Stuck Runners block for job's view. */ export default { components: { + GlAlert, + GlBadge, GlLink, }, props: { @@ -22,40 +25,50 @@ export default { required: true, }, }, + computed: { + hasNoRunnersWithCorrespondingTags() { + return this.tags.length > 0; + }, + stuckData() { + if (this.hasNoRunnersWithCorrespondingTags) { + return { + text: s__(`Job|This job is stuck because you don't have + any active runners online or available with any of these tags assigned to them:`), + dataTestId: 'job-stuck-with-tags', + showTags: true, + }; + } else if (this.hasNoRunnersForProject) { + return { + text: s__(`Job|This job is stuck because the project + doesn't have any runners online assigned to it.`), + dataTestId: 'job-stuck-no-runners', + showTags: false, + }; + } + + return { + text: s__(`Job|This job is stuck because you don't + have any active runners that can run this job.`), + dataTestId: 'job-stuck-no-active-runners', + showTags: false, + }; + }, + }, }; </script> <template> - <div class="bs-callout bs-callout-warning"> - <p v-if="tags.length" class="gl-mb-0" data-testid="job-stuck-with-tags"> - {{ - s__(`This job is stuck because you don't have - any active runners online or available with any of these tags assigned to them:`) - }} - <span - v-for="(tag, index) in tags" - :key="index" - class="badge badge-primary gl-mr-2" - data-testid="badge" - > - {{ tag }} - </span> + <gl-alert variant="warning" :dismissible="false"> + <p class="gl-mb-0" :data-testid="stuckData.dataTestId"> + {{ stuckData.text }} + <template v-if="stuckData.showTags"> + <gl-badge v-for="tag in tags" :key="tag" variant="info"> + {{ tag }} + </gl-badge> + </template> </p> - <p v-else-if="hasNoRunnersForProject" class="gl-mb-0" data-testid="job-stuck-no-runners"> - {{ - s__(`Job|This job is stuck because the project - doesn't have any runners online assigned to it.`) - }} - </p> - <p v-else class="gl-mb-0" data-testid="job-stuck-no-active-runners"> - {{ - s__(`This job is stuck because you don't - have any active runners that can run this job.`) - }} - </p> - {{ __('Go to project') }} <gl-link v-if="runnersPath" :href="runnersPath"> {{ __('CI settings') }} </gl-link> - </div> + </gl-alert> </template> |