Refactor environments components into vue files - part 3
This commit is contained in:
Filipa Lacerda
Phil Hughes
parent
3e40d38d51
commit
76dac550f3
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`,
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
</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>
|
||||
`,
|
||||
};
|
||||
</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>
|
||||
|
||||
<span class="folder-icon">
|
||||
<i
|
||||
class="fa fa-folder"
|
||||
aria-hidden="true" />
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{{model.folderName}}
|
||||
</span>
|
||||
|
||||
<span class="badge">
|
||||
{{model.size}}
|
||||
</span>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
`,
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import actionsComp from '~/environments/components/environment_actions';
|
||||
import actionsComp from '~/environments/components/environment_actions.vue';
|
||||
|
||||
describe('Actions Component', () => {
|
||||
let ActionsComponent;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import 'timeago.js';
|
||||
import Vue from 'vue';
|
||||
import environmentItemComp from '~/environments/components/environment_item';
|
||||
import environmentItemComp from '~/environments/components/environment_item.vue';
|
||||
|
||||
describe('Environment item', () => {
|
||||
let EnvironmentItem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import environmentTableComp from '~/environments/components/environments_table';
|
||||
import environmentTableComp from '~/environments/components/environments_table.vue';
|
||||
|
||||
describe('Environment item', () => {
|
||||
preloadFixtures('static/environments/element.html.raw');
|
||||
|
|
|
|||
Loading…
Reference in New Issue