diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-04-21 18:16:22 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-04-21 18:16:22 +0300 |
commit | 76dac550f33b3a8fec0db36cba15f6dd28d0753a (patch) | |
tree | c220aac97f3bfe196ff0d7af62dd2e2d819224f0 /app/assets/javascripts | |
parent | 3e40d38d51f268f1ccee754914bb1c85a6ab909f (diff) |
Refactor environments components into vue files - part 3
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/environments/components/environment.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environment_actions.js | 100 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environment_actions.vue | 103 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environment_item.vue (renamed from app/assets/javascripts/environments/components/environment_item.js) | 240 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environments_table.js | 97 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environments_table.vue | 117 | ||||
-rw-r--r-- | app/assets/javascripts/environments/folder/environments_folder_view.js | 2 |
7 files changed, 354 insertions, 307 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js index 0518422e475..f7175e412da 100644 --- a/app/assets/javascripts/environments/components/environment.js +++ b/app/assets/javascripts/environments/components/environment.js @@ -2,7 +2,7 @@ /* global Flash */ import Vue from 'vue'; import EnvironmentsService from '../services/environments_service'; -import EnvironmentTable from './environments_table'; +import EnvironmentTable from './environments_table.vue'; import EnvironmentsStore from '../stores/environments_store'; import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import '../../lib/utils/common_utils'; diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js deleted file mode 100644 index 313e78e573a..00000000000 --- a/app/assets/javascripts/environments/components/environment_actions.js +++ /dev/null @@ -1,100 +0,0 @@ -/* global Flash */ -/* eslint-disable no-new */ - -import playIconSvg from 'icons/_icon_play.svg'; -import eventHub from '../event_hub'; - -export default { - props: { - actions: { - type: Array, - required: false, - default: () => [], - }, - - service: { - type: Object, - required: true, - }, - }, - - data() { - return { - playIconSvg, - isLoading: false, - }; - }, - - computed: { - title() { - return 'Deploy to...'; - }, - }, - - methods: { - onClickAction(endpoint) { - this.isLoading = true; - - $(this.$refs.tooltip).tooltip('destroy'); - - this.service.postAction(endpoint) - .then(() => { - this.isLoading = false; - eventHub.$emit('refreshEnvironments'); - }) - .catch(() => { - this.isLoading = false; - new Flash('An error occured while making the request.'); - }); - }, - - isActionDisabled(action) { - if (action.playable === undefined) { - return false; - } - - return !action.playable; - }, - }, - - template: ` - <div class="btn-group" role="group"> - <button - type="button" - class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip" - data-container="body" - data-toggle="dropdown" - ref="tooltip" - :title="title" - :aria-label="title" - :disabled="isLoading"> - <span> - <span v-html="playIconSvg"></span> - <i - class="fa fa-caret-down" - aria-hidden="true"/> - <i - v-if="isLoading" - class="fa fa-spinner fa-spin" - aria-hidden="true"/> - </span> - </button> - - <ul class="dropdown-menu dropdown-menu-align-right"> - <li v-for="action in actions"> - <button - type="button" - class="js-manual-action-link no-btn btn" - @click="onClickAction(action.play_path)" - :class="{ 'disabled': isActionDisabled(action) }" - :disabled="isActionDisabled(action)"> - ${playIconSvg} - <span> - {{action.name}} - </span> - </button> - </li> - </ul> - </div> - `, -}; diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue new file mode 100644 index 00000000000..e81c97260d7 --- /dev/null +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -0,0 +1,103 @@ +<script> +/* global Flash */ +/* eslint-disable no-new */ + +import playIconSvg from 'icons/_icon_play.svg'; +import eventHub from '../event_hub'; + +export default { + props: { + actions: { + type: Array, + required: false, + default: () => [], + }, + + service: { + type: Object, + required: true, + }, + }, + + data() { + return { + playIconSvg, + isLoading: false, + }; + }, + + computed: { + title() { + return 'Deploy to...'; + }, + }, + + methods: { + onClickAction(endpoint) { + this.isLoading = true; + + $(this.$refs.tooltip).tooltip('destroy'); + + this.service.postAction(endpoint) + .then(() => { + this.isLoading = false; + eventHub.$emit('refreshEnvironments'); + }) + .catch(() => { + this.isLoading = false; + new Flash('An error occured while making the request.'); + }); + }, + + isActionDisabled(action) { + if (action.playable === undefined) { + return false; + } + + return !action.playable; + }, + }, +}; +</script> +<template> + <div + class="btn-group" + role="group"> + <button + type="button" + class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip" + data-container="body" + data-toggle="dropdown" + ref="tooltip" + :title="title" + :aria-label="title" + :disabled="isLoading"> + <span> + <span v-html="playIconSvg"></span> + <i + class="fa fa-caret-down" + aria-hidden="true"/> + <i + v-if="isLoading" + class="fa fa-spinner fa-spin" + aria-hidden="true"/> + </span> + </button> + + <ul class="dropdown-menu dropdown-menu-align-right"> + <li v-for="action in actions"> + <button + type="button" + class="js-manual-action-link no-btn btn" + @click="onClickAction(action.play_path)" + :class="{ disabled: isActionDisabled(action) }" + :disabled="isActionDisabled(action)"> + <span v-html="playIconSvg"></span> + <span> + {{action.name}} + </span> + </button> + </li> + </ul> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.vue index 0b174cf97da..73679de6039 100644 --- a/app/assets/javascripts/environments/components/environment_item.js +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,6 +1,7 @@ +<script> import Timeago from 'timeago.js'; import '../../lib/utils/text_utility'; -import ActionsComponent from './environment_actions'; +import ActionsComponent from './environment_actions.vue'; import ExternalUrlComponent from './environment_external_url.vue'; import StopComponent from './environment_stop.vue'; import RollbackComponent from './environment_rollback.vue'; @@ -434,117 +435,140 @@ export default { eventHub.$emit('toggleFolder', this.model, this.folderUrl); }, }, - - template: ` - <tr :class="{ 'js-child-row': model.isChildren }"> - <td> - <a v-if="!model.isFolder" - class="environment-name" - :class="{ 'prepend-left-default': model.isChildren }" - :href="environmentPath"> - {{model.name}} - </a> - <span v-else - class="folder-name" - @click="onClickFolder" - role="button"> - - <span class="folder-icon"> - <i - v-show="model.isOpen" - class="fa fa-caret-down" - aria-hidden="true" /> - <i - v-show="!model.isOpen" - class="fa fa-caret-right" - aria-hidden="true"/> - </span> - - <span class="folder-icon"> - <i class="fa fa-folder" aria-hidden="true"></i> - </span> - - <span> - {{model.folderName}} - </span> - - <span class="badge"> - {{model.size}} - </span> +}; +</script> +<template> + <tr :class="{ 'js-child-row': model.isChildren }"> + <td> + <a + v-if="!model.isFolder" + class="environment-name" + :class="{ 'prepend-left-default': model.isChildren }" + :href="environmentPath"> + {{model.name}} + </a> + <span + v-else + class="folder-name" + @click="onClickFolder" + role="button"> + + <span class="folder-icon"> + <i + v-show="model.isOpen" + class="fa fa-caret-down" + aria-hidden="true" /> + <i + v-show="!model.isOpen" + class="fa fa-caret-right" + aria-hidden="true"/> </span> - </td> - <td class="deployment-column"> - <span v-if="shouldRenderDeploymentID"> - {{deploymentInternalId}} + <span class="folder-icon"> + <i + class="fa fa-folder" + aria-hidden="true" /> </span> - <span v-if="!model.isFolder && deploymentHasUser"> - by - <a :href="deploymentUser.web_url" class="js-deploy-user-container"> - <img class="avatar has-tooltip s20" - :src="deploymentUser.avatar_url" - :alt="userImageAltDescription" - :title="deploymentUser.username" /> - </a> + <span> + {{model.folderName}} </span> - </td> - <td class="environments-build-cell"> - <a v-if="shouldRenderBuildName" - class="build-link" - :href="buildPath"> - {{buildName}} - </a> - </td> - - <td> - <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component"> - <commit-component - :tag="commitTag" - :commit-ref="commitRef" - :commit-url="commitUrl" - :short-sha="commitShortSha" - :title="commitTitle" - :author="commitAuthor"/> - </div> - <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> - No deployments yet - </p> - </td> - - <td> - <span v-if="!model.isFolder && canShowDate" - class="environment-created-date-timeago"> - {{createdDate}} + <span class="badge"> + {{model.size}} </span> - </td> - - <td class="environments-actions"> - <div v-if="!model.isFolder" class="btn-group pull-right" role="group"> - <actions-component v-if="hasManualActions && canCreateDeployment" - :service="service" - :actions="manualActions"/> - - <external-url-component v-if="externalURL && canReadEnvironment" - :external-url="externalURL"/> - - <monitoring-button-component v-if="monitoringUrl && canReadEnvironment" - :monitoring-url="monitoringUrl"/> - - <terminal-button-component v-if="model && model.terminal_path" - :terminal-path="model.terminal_path"/> - - <stop-component v-if="hasStopAction && canCreateDeployment" - :stop-url="model.stop_path" - :service="service"/> - - <rollback-component v-if="canRetry && canCreateDeployment" - :is-last-deployment="isLastDeployment" - :retry-url="retryUrl" - :service="service"/> - </div> - </td> - </tr> - `, -}; + </span> + </td> + + <td class="deployment-column"> + <span v-if="shouldRenderDeploymentID"> + {{deploymentInternalId}} + </span> + + <span v-if="!model.isFolder && deploymentHasUser"> + by + <a + :href="deploymentUser.web_url" + class="js-deploy-user-container"> + <img + class="avatar has-tooltip s20" + :src="deploymentUser.avatar_url" + :alt="userImageAltDescription" + :title="deploymentUser.username" /> + </a> + </span> + </td> + + <td class="environments-build-cell"> + <a + v-if="shouldRenderBuildName" + class="build-link" + :href="buildPath"> + {{buildName}} + </a> + </td> + + <td> + <div + v-if="!model.isFolder && hasLastDeploymentKey" + class="js-commit-component"> + <commit-component + :tag="commitTag" + :commit-ref="commitRef" + :commit-url="commitUrl" + :short-sha="commitShortSha" + :title="commitTitle" + :author="commitAuthor"/> + </div> + <p + v-if="!model.isFolder && !hasLastDeploymentKey" + class="commit-title"> + No deployments yet + </p> + </td> + + <td> + <span + v-if="!model.isFolder && canShowDate" + class="environment-created-date-timeago"> + {{createdDate}} + </span> + </td> + + <td class="environments-actions"> + <div + v-if="!model.isFolder" + class="btn-group pull-right" + role="group"> + + <actions-component + v-if="hasManualActions && canCreateDeployment" + :service="service" + :actions="manualActions"/> + + <external-url-component + v-if="externalURL && canReadEnvironment" + :external-url="externalURL"/> + + <monitoring-button-component + v-if="monitoringUrl && canReadEnvironment" + :monitoring-url="monitoringUrl"/> + + <terminal-button-component + v-if="model && model.terminal_path" + :terminal-path="model.terminal_path"/> + + <stop-component + v-if="hasStopAction && canCreateDeployment" + :stop-url="model.stop_path" + :service="service"/> + + <rollback-component + v-if="canRetry && canCreateDeployment" + :is-last-deployment="isLastDeployment" + :retry-url="retryUrl" + :service="service"/> + </div> + </td> + </tr> +</template> diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js deleted file mode 100644 index 5e6af3a1d45..00000000000 --- a/app/assets/javascripts/environments/components/environments_table.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Render environments table. - */ -import EnvironmentTableRowComponent from './environment_item'; - -export default { - components: { - 'environment-item': EnvironmentTableRowComponent, - }, - - props: { - environments: { - type: Array, - required: true, - default: () => ([]), - }, - - canReadEnvironment: { - type: Boolean, - required: false, - default: false, - }, - - canCreateDeployment: { - type: Boolean, - required: false, - default: false, - }, - - service: { - type: Object, - required: true, - }, - - isLoadingFolderContent: { - type: Boolean, - required: false, - default: false, - }, - }, - - methods: { - folderUrl(model) { - return `${window.location.pathname}/folders/${model.folderName}`; - }, - }, - - 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" - :service="service"></tr> - - <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> - <tr v-if="isLoadingFolderContent"> - <td colspan="6" class="text-center"> - <i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/> - </td> - </tr> - - <template v-else> - <tr is="environment-item" - v-for="children in model.children" - :model="children" - :can-create-deployment="canCreateDeployment" - :can-read-environment="canReadEnvironment" - :service="service"></tr> - - <tr> - <td colspan="6" class="text-center"> - <a :href="folderUrl(model)" class="btn btn-default"> - Show all - </a> - </td> - </tr> - </template> - </template> - </template> - </tbody> - </table> - `, -}; diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue new file mode 100644 index 00000000000..87f7cb4a536 --- /dev/null +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -0,0 +1,117 @@ +<script> +/** + * Render environments table. + */ +import EnvironmentTableRowComponent from './environment_item.vue'; + +export default { + components: { + 'environment-item': EnvironmentTableRowComponent, + }, + + props: { + environments: { + type: Array, + required: true, + default: () => ([]), + }, + + canReadEnvironment: { + type: Boolean, + required: false, + default: false, + }, + + canCreateDeployment: { + type: Boolean, + required: false, + default: false, + }, + + service: { + type: Object, + required: true, + }, + + isLoadingFolderContent: { + type: Boolean, + required: false, + default: false, + }, + }, + + methods: { + folderUrl(model) { + return `${window.location.pathname}/folders/${model.folderName}`; + }, + }, +}; +</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" + :service="service" /> + + <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> + <tr v-if="isLoadingFolderContent"> + <td colspan="6" class="text-center"> + <i + class="fa fa-spin fa-spinner fa-2x" + aria-hidden="true" /> + </td> + </tr> + + <template v-else> + <tr + is="environment-item" + v-for="children in model.children" + :model="children" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + :service="service" /> + + <tr> + <td + colspan="6" + class="text-center"> + <a + :href="folderUrl(model)" + class="btn btn-default"> + Show all + </a> + </td> + </tr> + </template> + </template> + </template> + </tbody> + </table> +</template> diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js index d2514593e3a..05d44f77d1d 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.js +++ b/app/assets/javascripts/environments/folder/environments_folder_view.js @@ -2,7 +2,7 @@ /* global Flash */ import Vue from 'vue'; import EnvironmentsService from '../services/environments_service'; -import EnvironmentTable from '../components/environments_table'; +import EnvironmentTable from '../components/environments_table.vue'; import EnvironmentsStore from '../stores/environments_store'; import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import '../../lib/utils/common_utils'; |