debian-mirror-gitlab/app/assets/javascripts/environments/components/environments_table.vue

208 lines
6.4 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
/**
* Render environments table.
*/
2019-02-15 15:39:39 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2019-07-07 11:18:12 +05:30
import _ from 'underscore';
import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
2020-01-01 13:55:28 +05:30
import { s__ } from '~/locale';
2020-03-09 13:42:32 +05:30
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2019-07-07 11:18:12 +05:30
import EnvironmentItem from './environment_item.vue';
2017-08-17 22:00:37 +05:30
export default {
components: {
2019-07-07 11:18:12 +05:30
EnvironmentItem,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2019-07-07 11:18:12 +05:30
DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'),
CanaryDeploymentCallout: () =>
import('ee_component/environments/components/canary_deployment_callout.vue'),
2017-08-17 22:00:37 +05:30
},
2020-03-09 13:42:32 +05:30
mixins: [environmentTableMixin, glFeatureFlagsMixin()],
2017-08-17 22:00:37 +05:30
props: {
environments: {
type: Array,
required: true,
2018-11-18 11:00:15 +05:30
default: () => [],
2017-08-17 22:00:37 +05:30
},
2019-09-30 21:07:59 +05:30
deployBoardsHelpPath: {
type: String,
required: false,
default: '',
},
2017-08-17 22:00:37 +05:30
canReadEnvironment: {
type: Boolean,
required: false,
default: false,
},
},
2019-07-07 11:18:12 +05:30
computed: {
sortedEnvironments() {
return this.sortEnvironments(this.environments).map(env =>
this.shouldRenderFolderContent(env)
? { ...env, children: this.sortEnvironments(env.children) }
: env,
);
},
2020-03-09 13:42:32 +05:30
shouldShowAutoStopDate() {
return this.glFeatures.autoStopEnvironments;
},
2020-01-01 13:55:28 +05:30
tableData() {
return {
// percent spacing for cols, should add up to 100
name: {
title: s__('Environments|Environment'),
spacing: 'section-15',
},
deploy: {
title: s__('Environments|Deployment'),
spacing: 'section-10',
},
build: {
title: s__('Environments|Job'),
spacing: 'section-15',
},
commit: {
title: s__('Environments|Commit'),
spacing: 'section-20',
},
date: {
title: s__('Environments|Updated'),
spacing: 'section-10',
},
2020-03-09 13:42:32 +05:30
autoStop: {
title: s__('Environments|Auto stop in'),
spacing: 'section-5',
},
2020-01-01 13:55:28 +05:30
actions: {
2020-03-09 13:42:32 +05:30
spacing: this.shouldShowAutoStopDate ? 'section-25' : 'section-30',
2020-01-01 13:55:28 +05:30
},
};
},
2019-07-07 11:18:12 +05:30
},
2017-08-17 22:00:37 +05:30
methods: {
folderUrl(model) {
return `${window.location.pathname}/folders/${model.folderName}`;
},
2018-03-17 18:26:18 +05:30
shouldRenderFolderContent(env) {
2018-11-18 11:00:15 +05:30
return env.isFolder && env.isOpen && env.children && env.children.length > 0;
2018-03-17 18:26:18 +05:30
},
2019-07-07 11:18:12 +05:30
sortEnvironments(environments) {
/*
* The sorting algorithm should sort in the following priorities:
*
* 1. folders first,
* 2. last updated descending,
* 3. by name ascending,
*
* the sorting algorithm must:
*
* 1. Sort by name ascending,
* 2. Reverse (sort by name descending),
* 3. Sort by last deployment ascending,
* 4. Reverse (last deployment descending, name ascending),
* 5. Put folders first.
*/
return _.chain(environments)
.sortBy(env => (env.isFolder ? env.folderName : env.name))
.reverse()
.sortBy(env => (env.last_deployment ? env.last_deployment.created_at : '0000'))
.reverse()
.sortBy(env => (env.isFolder ? -1 : 1))
.value();
},
2017-08-17 22:00:37 +05:30
},
};
</script>
<template>
2019-02-15 15:39:39 +05:30
<div class="ci-table" role="grid">
<div class="gl-responsive-table-row table-row-header" role="row">
2020-01-01 13:55:28 +05:30
<div class="table-section" :class="tableData.name.spacing" role="columnheader">
{{ tableData.name.title }}
2017-09-10 17:25:29 +05:30
</div>
2020-01-01 13:55:28 +05:30
<div class="table-section" :class="tableData.deploy.spacing" role="columnheader">
{{ tableData.deploy.title }}
2017-09-10 17:25:29 +05:30
</div>
2020-01-01 13:55:28 +05:30
<div class="table-section" :class="tableData.build.spacing" role="columnheader">
{{ tableData.build.title }}
2017-09-10 17:25:29 +05:30
</div>
2020-01-01 13:55:28 +05:30
<div class="table-section" :class="tableData.commit.spacing" role="columnheader">
{{ tableData.commit.title }}
2017-09-10 17:25:29 +05:30
</div>
2020-01-01 13:55:28 +05:30
<div class="table-section" :class="tableData.date.spacing" role="columnheader">
{{ tableData.date.title }}
2017-09-10 17:25:29 +05:30
</div>
2020-03-09 13:42:32 +05:30
<div
v-if="shouldShowAutoStopDate"
class="table-section"
:class="tableData.autoStop.spacing"
role="columnheader"
>
{{ tableData.autoStop.title }}
</div>
2017-09-10 17:25:29 +05:30
</div>
2019-07-07 11:18:12 +05:30
<template v-for="(model, i) in sortedEnvironments" :model="model">
2017-09-10 17:25:29 +05:30
<div
is="environment-item"
2018-12-05 23:21:45 +05:30
:key="`environment-item-${i}`"
2017-09-10 17:25:29 +05:30
:model="model"
:can-read-environment="canReadEnvironment"
2020-03-09 13:42:32 +05:30
:should-show-auto-stop-date="shouldShowAutoStopDate"
2020-01-01 13:55:28 +05:30
:table-data="tableData"
2018-03-17 18:26:18 +05:30
/>
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
<div
v-if="shouldRenderDeployBoard(model)"
:key="`deploy-board-row-${i}`"
class="js-deploy-board-row"
>
<div class="deploy-board-container">
<deploy-board
:deploy-board-data="model.deployBoardData"
2019-09-30 21:07:59 +05:30
:deploy-boards-help-path="deployBoardsHelpPath"
2019-07-07 11:18:12 +05:30
:is-loading="model.isLoadingDeployBoard"
:is-empty="model.isEmptyDeployBoard"
2019-09-30 21:07:59 +05:30
:has-legacy-app-label="model.hasLegacyAppLabel"
2020-03-09 13:42:32 +05:30
:logs-path="model.logs_path"
2019-07-07 11:18:12 +05:30
/>
</div>
</div>
2019-02-15 15:39:39 +05:30
<template v-if="shouldRenderFolderContent(model)">
<div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
2020-03-09 13:42:32 +05:30
<gl-loading-icon size="md" class="prepend-top-16" />
2017-09-10 17:25:29 +05:30
</div>
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
<template v-else>
<div
is="environment-item"
2018-03-17 18:26:18 +05:30
v-for="(children, index) in model.children"
2018-12-05 23:21:45 +05:30
:key="`env-item-${i}-${index}`"
2017-09-10 17:25:29 +05:30
:model="children"
:can-read-environment="canReadEnvironment"
2020-01-01 13:55:28 +05:30
:table-data="tableData"
2018-03-17 18:26:18 +05:30
/>
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
<div :key="`sub-div-${i}`">
2017-09-10 17:25:29 +05:30
<div class="text-center prepend-top-10">
2019-07-07 11:18:12 +05:30
<a :href="folderUrl(model)" class="btn btn-default">
{{ s__('Environments|Show all') }}
</a>
2017-09-10 17:25:29 +05:30
</div>
</div>
2017-08-17 22:00:37 +05:30
</template>
</template>
2019-07-07 11:18:12 +05:30
<template v-if="shouldShowCanaryCallout(model)">
<canary-deployment-callout
:key="`canary-promo-${i}`"
:canary-deployment-feature-id="canaryDeploymentFeatureId"
:user-callouts-path="userCalloutsPath"
:lock-promotion-svg-path="lockPromotionSvgPath"
:help-canary-deployments-path="helpCanaryDeploymentsPath"
:data-js-canary-promo-key="i"
/>
</template>
2017-09-10 17:25:29 +05:30
</template>
</div>
2017-08-17 22:00:37 +05:30
</template>