Skip to content

G
gitlab-ce
Commit 34b4b9a2 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes
Browse files
Options

Port of environments-vue-3 to EE

parent 0997a5ae
Hide whitespace changes
Inline Side-by-side
Showing with 398 additions and 132 deletions
app/assets/javascripts/environments/components/environment.js
View file @ 34b4b9a2
...@@ -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';
......
app/assets/javascripts/environments/components/environment_actions.js → app/assets/javascripts/environments/components/environment_actions.vue
View file @ 34b4b9a2
<script>
/* global Flash */ /* global Flash */
/* eslint-disable no-new */ /* eslint-disable no-new */
...@@ -15,7 +16,6 @@ export default { ...@@ -15,7 +16,6 @@ export default {
service: { service: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}),
}, },
}, },
...@@ -57,45 +57,47 @@ export default { ...@@ -57,45 +57,47 @@ export default {
return !action.playable; 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>
template: ` <ul class="dropdown-menu dropdown-menu-align-right">
<div class="btn-group" role="group"> <li v-for="action in actions">
<button <button
type="button" type="button"
class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip" class="js-manual-action-link no-btn btn"
data-container="body" @click="onClickAction(action.play_path)"
data-toggle="dropdown" :class="{ disabled: isActionDisabled(action) }"
ref="tooltip" :disabled="isActionDisabled(action)">
:title="title"
:aria-label="title"
:disabled="isLoading">
<span>
<span v-html="playIconSvg"></span> <span v-html="playIconSvg"></span>
<i <span>
class="fa fa-caret-down" {{action.name}}
aria-hidden="true"/> </span>
<i </button>
v-if="isLoading" </li>
class="fa fa-spinner fa-spin" </ul>
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> </div>
`, </template>
};
app/assets/javascripts/environments/components/environment_item.js → app/assets/javascripts/environments/components/environment_item.vue
View file @ 34b4b9a2
/** <script>
* Environment Item Component
*
* Renders a table row for each environment.
*/
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'; import RollbackComponent from './environment_rollback';
...@@ -441,133 +436,156 @@ export default { ...@@ -441,133 +436,156 @@ export default {
eventHub.$emit('toggleFolder', this.model, this.folderUrl); eventHub.$emit('toggleFolder', this.model, this.folderUrl);
}, },
}, },
};
template: ` </script>
<tr :class="{ 'js-child-row': model.isChildren }"> <template>
<td> <tr :class="{ 'js-child-row': model.isChildren }">
<span class="deploy-board-icon" <td>
v-if="model.hasDeployBoard" <span
@click="toggleDeployBoard(model)"> class="deploy-board-icon"
v-if="model.hasDeployBoard"
<i v-show="!model.isDeployBoardVisible" @click="toggleDeployBoard(model)">
class="fa fa-caret-right"
aria-hidden="true" /> <i
v-show="!model.isDeployBoardVisible"
class="fa fa-caret-right"
<i v-show="model.isDeployBoardVisible" aria-hidden="true" />
<i
v-show="model.isDeployBoardVisible"
class="fa fa-caret-down"
aria-hidden="true" />
</span>
<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" class="fa fa-caret-down"
aria-hidden="true" /> aria-hidden="true" />
<i
v-show="!model.isOpen"
class="fa fa-caret-right"
aria-hidden="true"/>
</span> </span>
<a v-if="!model.isFolder" <span class="folder-icon">
class="environment-name" <i
:class="{ 'prepend-left-default': model.isChildren }" class="fa fa-folder"
:href="environmentPath"> aria-hidden="true" />
{{model.name}}
</a>
<span v-if="model.isFolder"
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> </span>
</td>
<td class="deployment-column"> <span>
<span v-if="shouldRenderDeploymentID"> {{model.folderName}}
{{deploymentInternalId}}
</span> </span>
<span v-if="!model.isFolder && deploymentHasUser"> <span class="badge">
by {{model.size}}
<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> </span>
</td> </span>
</td>
<td class="environments-build-cell">
<a v-if="shouldRenderBuildName" <td class="deployment-column">
class="build-link" <span v-if="shouldRenderDeploymentID">
:href="buildPath"> {{deploymentInternalId}}
{{buildName}} </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> </a>
</td> </span>
</td>
<td>
<div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component"> <td class="environments-build-cell">
<commit-component <a
:tag="commitTag" v-if="shouldRenderBuildName"
:commit-ref="commitRef" class="build-link"
:commit-url="commitUrl" :href="buildPath">
:short-sha="commitShortSha" {{buildName}}
:title="commitTitle" </a>
:author="commitAuthor"/> </td>
</div>
<p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> <td>
No deployments yet <div
</p> v-if="!model.isFolder && hasLastDeploymentKey"
</td> class="js-commit-component">
<commit-component
<td> :tag="commitTag"
<span v-if="!model.isFolder && canShowDate" :commit-ref="commitRef"
class="environment-created-date-timeago"> :commit-url="commitUrl"
{{createdDate}} :short-sha="commitShortSha"
</span> :title="commitTitle"
</td> :author="commitAuthor"/>
</div>
<td class="environments-actions"> <p
<div v-if="!model.isFolder" class="btn-group pull-right" role="group"> v-if="!model.isFolder && !hasLastDeploymentKey"
<actions-component v-if="hasManualActions && canCreateDeployment" class="commit-title">
:service="service" No deployments yet
:actions="manualActions"/> </p>
</td>
<external-url-component v-if="externalURL && canReadEnvironment"
:external-url="externalURL"/> <td>
<span
<monitoring-button-component v-if="monitoringUrl && canReadEnvironment" v-if="!model.isFolder && canShowDate"
:monitoring-url="monitoringUrl"/> class="environment-created-date-timeago">
{{createdDate}}
<terminal-button-component v-if="model && model.terminal_path" </span>
:terminal-path="model.terminal_path"/> </td>
<stop-component v-if="hasStopAction && canCreateDeployment" <td class="environments-actions">
:stop-url="model.stop_path" <div
:service="service"/> v-if="!model.isFolder"
class="btn-group pull-right"
<rollback-component v-if="canRetry && canCreateDeployment" role="group">
:is-last-deployment="isLastDeployment"
:retry-url="retryUrl" <actions-component
:service="service"/> v-if="hasManualActions && canCreateDeployment"
</div> :service="service"
</td> :actions="manualActions"/>
</tr>
`, <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>
app/assets/javascripts/environments/components/environments_table.js → app/assets/javascripts/environments/components/environments_table.vue
View file @ 34b4b9a2
<script>
/** /**
* Render environments table. * Render environments table.
*
* Dumb component used to render top level environments and
* the folder view.
*/ */
import EnvironmentTableRowComponent from './environment_item'; import EnvironmentTableRowComponent from './environment_item.vue';
import DeployBoard from './deploy_board_component'; import DeployBoard from './deploy_board_component';
export default { export default {
...@@ -32,6 +30,17 @@ export default { ...@@ -32,6 +30,17 @@ export default {
default: false, default: false,
}, },
service: {
type: Object,
required: true,
},
isLoadingFolderContent: {
type: Boolean,
required: false,
default: false,
},
toggleDeployBoard: { toggleDeployBoard: {
type: Function, type: Function,
required: false, required: false,
...@@ -43,18 +52,6 @@ export default { ...@@ -43,18 +52,6 @@ export default {
required: false, required: false,
default: () => ({}), default: () => ({}),
}, },
service: {
type: Object,
required: true,
default: () => ({}),
},
isLoadingFolderContent: {
type: Boolean,
required: false,
default: false,
},
}, },
methods: { methods: {
...@@ -62,68 +59,87 @@ export default { ...@@ -62,68 +59,87 @@ export default {
return `${window.location.pathname}/folders/${model.folderName}`; 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"
:toggleDeployBoard="toggleDeployBoard"
/>
template: ` <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
<table class="table ci-table"> <td colspan="6" class="deploy-board-container">
<thead> <deploy-board
<tr> :store="store"
<th class="environments-name">Environment</th> :service="service"
<th class="environments-deploy">Last deployment</th> :environmentID="model.id"
<th class="environments-build">Job</th> :deployBoardData="model.deployBoardData"
<th class="environments-commit">Commit</th> :endpoint="model.rollout_status_path"
<th class="environments-date">Updated</th> />
<th class="environments-actions"></th> </td>
</tr> </tr>
</thead>
<tbody>
<template v-for="model in environments"
v-bind:model="model">
<tr is="environment-item" <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
:model="model" <tr v-if="isLoadingFolderContent">
:can-create-deployment="canCreateDeployment" <td colspan="6" class="text-center">
:can-read-environment="canReadEnvironment" <i
:toggleDeployBoard="toggleDeployBoard" class="fa fa-spin fa-spinner fa-2x"
:service="service"></tr> aria-hidden="true" />
<tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
<td colspan="6" class="deploy-board-container">
<deploy-board
:store="store"
:service="service"
:environmentID="model.id"
:deployBoardData="model.deployBoardData"
:endpoint="model.rollout_status_path">
</deploy-board>
</td> </td>
</tr> </tr>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <template v-else>
<tr v-if="isLoadingFolderContent"> <tr
<td colspan="6" class="text-center"> is="environment-item"
<i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/> 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> </td>
</tr> </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>
</template> </template>
</tbody> </template>
</table> </tbody>
`, </table>
}; </template>
app/assets/javascripts/environments/folder/environments_folder_view.js
View file @ 34b4b9a2
...@@ -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';
......
spec/javascripts/environments/environment_actions_spec.js
View file @ 34b4b9a2
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;
......
spec/javascripts/environments/environment_item_spec.js
View file @ 34b4b9a2
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;
......
spec/javascripts/environments/environment_table_spec.js
View file @ 34b4b9a2
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', () => {
let EnvironmentTable; let EnvironmentTable;
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7