Commit 76dac550 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Refactor environments components into vue files - part 3

parent 3e40d38d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/* global Flash */ /* global Flash */
import Vue from 'vue'; import Vue from 'vue';
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import EnvironmentTable from './environments_table'; import EnvironmentTable from './environments_table.vue';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import TablePaginationComponent from '../../vue_shared/components/table_pagination';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
......
<script>
/* global Flash */ /* global Flash */
/* eslint-disable no-new */ /* eslint-disable no-new */
...@@ -56,9 +57,12 @@ export default { ...@@ -56,9 +57,12 @@ export default {
return !action.playable; return !action.playable;
}, },
}, },
};
template: ` </script>
<div class="btn-group" role="group"> <template>
<div
class="btn-group"
role="group">
<button <button
type="button" type="button"
class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip" class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
...@@ -86,9 +90,9 @@ export default { ...@@ -86,9 +90,9 @@ export default {
type="button" type="button"
class="js-manual-action-link no-btn btn" class="js-manual-action-link no-btn btn"
@click="onClickAction(action.play_path)" @click="onClickAction(action.play_path)"
:class="{ 'disabled': isActionDisabled(action) }" :class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)"> :disabled="isActionDisabled(action)">
${playIconSvg} <span v-html="playIconSvg"></span>
<span> <span>
{{action.name}} {{action.name}}
</span> </span>
...@@ -96,5 +100,4 @@ export default { ...@@ -96,5 +100,4 @@ export default {
</li> </li>
</ul> </ul>
</div> </div>
`, </template>
};
<script>
import Timeago from 'timeago.js'; import Timeago from 'timeago.js';
import '../../lib/utils/text_utility'; import '../../lib/utils/text_utility';
import ActionsComponent from './environment_actions'; import ActionsComponent from './environment_actions.vue';
import ExternalUrlComponent from './environment_external_url.vue'; import ExternalUrlComponent from './environment_external_url.vue';
import StopComponent from './environment_stop.vue'; import StopComponent from './environment_stop.vue';
import RollbackComponent from './environment_rollback.vue'; import RollbackComponent from './environment_rollback.vue';
...@@ -434,17 +435,20 @@ export default { ...@@ -434,17 +435,20 @@ export default {
eventHub.$emit('toggleFolder', this.model, this.folderUrl); eventHub.$emit('toggleFolder', this.model, this.folderUrl);
}, },
}, },
};
template: ` </script>
<template>
<tr :class="{ 'js-child-row': model.isChildren }"> <tr :class="{ 'js-child-row': model.isChildren }">
<td> <td>
<a v-if="!model.isFolder" <a
v-if="!model.isFolder"
class="environment-name" class="environment-name"
:class="{ 'prepend-left-default': model.isChildren }" :class="{ 'prepend-left-default': model.isChildren }"
:href="environmentPath"> :href="environmentPath">
{{model.name}} {{model.name}}
</a> </a>
<span v-else <span
v-else
class="folder-name" class="folder-name"
@click="onClickFolder" @click="onClickFolder"
role="button"> role="button">
...@@ -461,7 +465,9 @@ export default { ...@@ -461,7 +465,9 @@ export default {
</span> </span>
<span class="folder-icon"> <span class="folder-icon">
<i class="fa fa-folder" aria-hidden="true"></i> <i
class="fa fa-folder"
aria-hidden="true" />
</span> </span>
<span> <span>
...@@ -481,8 +487,11 @@ export default { ...@@ -481,8 +487,11 @@ export default {
<span v-if="!model.isFolder && deploymentHasUser"> <span v-if="!model.isFolder && deploymentHasUser">
by by
<a :href="deploymentUser.web_url" class="js-deploy-user-container"> <a
<img class="avatar has-tooltip s20" :href="deploymentUser.web_url"
class="js-deploy-user-container">
<img
class="avatar has-tooltip s20"
:src="deploymentUser.avatar_url" :src="deploymentUser.avatar_url"
:alt="userImageAltDescription" :alt="userImageAltDescription"
:title="deploymentUser.username" /> :title="deploymentUser.username" />
...@@ -491,7 +500,8 @@ export default { ...@@ -491,7 +500,8 @@ export default {
</td> </td>
<td class="environments-build-cell"> <td class="environments-build-cell">
<a v-if="shouldRenderBuildName" <a
v-if="shouldRenderBuildName"
class="build-link" class="build-link"
:href="buildPath"> :href="buildPath">
{{buildName}} {{buildName}}
...@@ -499,7 +509,9 @@ export default { ...@@ -499,7 +509,9 @@ export default {
</td> </td>
<td> <td>
<div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component"> <div
v-if="!model.isFolder && hasLastDeploymentKey"
class="js-commit-component">
<commit-component <commit-component
:tag="commitTag" :tag="commitTag"
:commit-ref="commitRef" :commit-ref="commitRef"
...@@ -508,43 +520,55 @@ export default { ...@@ -508,43 +520,55 @@ export default {
:title="commitTitle" :title="commitTitle"
:author="commitAuthor"/> :author="commitAuthor"/>
</div> </div>
<p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> <p
v-if="!model.isFolder && !hasLastDeploymentKey"
class="commit-title">
No deployments yet No deployments yet
</p> </p>
</td> </td>
<td> <td>
<span v-if="!model.isFolder && canShowDate" <span
v-if="!model.isFolder && canShowDate"
class="environment-created-date-timeago"> class="environment-created-date-timeago">
{{createdDate}} {{createdDate}}
</span> </span>
</td> </td>
<td class="environments-actions"> <td class="environments-actions">
<div v-if="!model.isFolder" class="btn-group pull-right" role="group"> <div
<actions-component v-if="hasManualActions && canCreateDeployment" v-if="!model.isFolder"
class="btn-group pull-right"
role="group">
<actions-component
v-if="hasManualActions && canCreateDeployment"
:service="service" :service="service"
:actions="manualActions"/> :actions="manualActions"/>
<external-url-component v-if="externalURL && canReadEnvironment" <external-url-component
v-if="externalURL && canReadEnvironment"
:external-url="externalURL"/> :external-url="externalURL"/>
<monitoring-button-component v-if="monitoringUrl && canReadEnvironment" <monitoring-button-component
v-if="monitoringUrl && canReadEnvironment"
:monitoring-url="monitoringUrl"/> :monitoring-url="monitoringUrl"/>
<terminal-button-component v-if="model && model.terminal_path" <terminal-button-component
v-if="model && model.terminal_path"
:terminal-path="model.terminal_path"/> :terminal-path="model.terminal_path"/>
<stop-component v-if="hasStopAction && canCreateDeployment" <stop-component
v-if="hasStopAction && canCreateDeployment"
:stop-url="model.stop_path" :stop-url="model.stop_path"
:service="service"/> :service="service"/>
<rollback-component v-if="canRetry && canCreateDeployment" <rollback-component
v-if="canRetry && canCreateDeployment"
:is-last-deployment="isLastDeployment" :is-last-deployment="isLastDeployment"
:retry-url="retryUrl" :retry-url="retryUrl"
:service="service"/> :service="service"/>
</div> </div>
</td> </td>
</tr> </tr>
`, </template>
};
<script>
/** /**
* Render environments table. * Render environments table.
*/ */
import EnvironmentTableRowComponent from './environment_item'; import EnvironmentTableRowComponent from './environment_item.vue';
export default { export default {
components: { components: {
...@@ -44,46 +45,66 @@ export default { ...@@ -44,46 +45,66 @@ export default {
return `${window.location.pathname}/folders/${model.folderName}`; return `${window.location.pathname}/folders/${model.folderName}`;
}, },
}, },
};
template: ` </script>
<template>
<table class="table ci-table"> <table class="table ci-table">
<thead> <thead>
<tr> <tr>
<th class="environments-name">Environment</th> <th class="environments-name">
<th class="environments-deploy">Last deployment</th> Environment
<th class="environments-build">Job</th> </th>
<th class="environments-commit">Commit</th> <th class="environments-deploy">
<th class="environments-date">Updated</th> 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> <th class="environments-actions"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template v-for="model in environments" <template
v-for="model in environments"
v-bind:model="model"> v-bind:model="model">
<tr is="environment-item" <tr
is="environment-item"
:model="model" :model="model"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
:service="service"></tr> :service="service" />
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<tr v-if="isLoadingFolderContent"> <tr v-if="isLoadingFolderContent">
<td colspan="6" class="text-center"> <td colspan="6" class="text-center">
<i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/> <i
class="fa fa-spin fa-spinner fa-2x"
aria-hidden="true" />
</td> </td>
</tr> </tr>
<template v-else> <template v-else>
<tr is="environment-item" <tr
is="environment-item"
v-for="children in model.children" v-for="children in model.children"
:model="children" :model="children"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
:service="service"></tr> :service="service" />
<tr> <tr>
<td colspan="6" class="text-center"> <td
<a :href="folderUrl(model)" class="btn btn-default"> colspan="6"
class="text-center">
<a
:href="folderUrl(model)"
class="btn btn-default">
Show all Show all
</a> </a>
</td> </td>
...@@ -93,5 +114,4 @@ export default { ...@@ -93,5 +114,4 @@ export default {
</template> </template>
</tbody> </tbody>
</table> </table>
`, </template>
};
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/* global Flash */ /* global Flash */
import Vue from 'vue'; import Vue from 'vue';
import EnvironmentsService from '../services/environments_service'; 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 EnvironmentsStore from '../stores/environments_store';
import TablePaginationComponent from '../../vue_shared/components/table_pagination'; import TablePaginationComponent from '../../vue_shared/components/table_pagination';
import '../../lib/utils/common_utils'; import '../../lib/utils/common_utils';
......
import Vue from 'vue'; import Vue from 'vue';
import actionsComp from '~/environments/components/environment_actions'; import actionsComp from '~/environments/components/environment_actions.vue';
describe('Actions Component', () => { describe('Actions Component', () => {
let ActionsComponent; let ActionsComponent;
......
import 'timeago.js'; import 'timeago.js';
import Vue from 'vue'; import Vue from 'vue';
import environmentItemComp from '~/environments/components/environment_item'; import environmentItemComp from '~/environments/components/environment_item.vue';
describe('Environment item', () => { describe('Environment item', () => {
let EnvironmentItem; let EnvironmentItem;
......
import Vue from 'vue'; import Vue from 'vue';
import environmentTableComp from '~/environments/components/environments_table'; import environmentTableComp from '~/environments/components/environments_table.vue';
describe('Environment item', () => { describe('Environment item', () => {
preloadFixtures('static/environments/element.html.raw'); preloadFixtures('static/environments/element.html.raw');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment