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

226 lines
6.9 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';
2020-04-22 19:07:51 +05:30
import { flow, reverse, sortBy } from 'lodash/fp';
2020-01-01 13:55:28 +05:30
import { s__ } from '~/locale';
2021-03-08 18:12:59 +05:30
import CanaryUpdateModal from './canary_update_modal.vue';
2021-03-11 19:13:27 +05:30
import DeployBoard from './deploy_board.vue';
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,
2021-03-08 18:12:59 +05:30
DeployBoard,
2020-11-24 15:15:51 +05:30
EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'),
2021-03-08 18:12:59 +05:30
CanaryUpdateModal,
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
},
},
2021-02-22 17:27:13 +05:30
data() {
return {
canaryWeight: 0,
environmentToChange: null,
};
},
2019-07-07 11:18:12 +05:30
computed: {
sortedEnvironments() {
2021-03-08 18:12:59 +05:30
return this.sortEnvironments(this.environments).map((env) =>
2019-07-07 11:18:12 +05:30
this.shouldRenderFolderContent(env)
? { ...env, children: this.sortEnvironments(env.children) }
: env,
);
},
2020-01-01 13:55:28 +05:30
tableData() {
return {
// percent spacing for cols, should add up to 100
name: {
title: s__('Environments|Environment'),
2021-02-22 17:27:13 +05:30
spacing: 'section-10',
2020-01-01 13:55:28 +05:30
},
deploy: {
title: s__('Environments|Deployment'),
spacing: 'section-10',
},
build: {
title: s__('Environments|Job'),
spacing: 'section-15',
},
commit: {
title: s__('Environments|Commit'),
2021-02-22 17:27:13 +05:30
spacing: 'section-15',
2020-01-01 13:55:28 +05:30
},
date: {
title: s__('Environments|Updated'),
spacing: 'section-10',
},
2021-02-22 17:27:13 +05:30
upcoming: {
title: s__('Environments|Upcoming'),
mobileTitle: s__('Environments|Upcoming deployment'),
spacing: 'section-10',
},
2020-03-13 15:44:24 +05:30
autoStop: {
2021-11-18 22:05:49 +05:30
title: s__('Environments|Auto stop'),
2021-02-22 17:27:13 +05:30
spacing: 'section-10',
2020-03-13 15:44:24 +05:30
},
2020-01-01 13:55:28 +05:30
actions: {
2021-02-22 17:27:13 +05:30
spacing: 'section-20',
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}`;
},
2020-05-24 23:13:21 +05:30
shouldRenderDeployBoard(model) {
return model.hasDeployBoard && model.isDeployBoardVisible;
},
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
},
2020-11-24 15:15:51 +05:30
shouldRenderAlert(env) {
return env?.has_opened_alert;
},
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.
*/
2020-04-22 19:07:51 +05:30
return flow(
2021-03-08 18:12:59 +05:30
sortBy((env) => (env.isFolder ? env.folderName : env.name)),
2020-04-22 19:07:51 +05:30
reverse,
2021-03-08 18:12:59 +05:30
sortBy((env) => (env.last_deployment ? env.last_deployment.created_at : '0000')),
2020-04-22 19:07:51 +05:30
reverse,
2021-03-08 18:12:59 +05:30
sortBy((env) => (env.isFolder ? -1 : 1)),
2020-04-22 19:07:51 +05:30
)(environments);
2019-07-07 11:18:12 +05:30
},
2021-02-22 17:27:13 +05:30
changeCanaryWeight(model, weight) {
this.environmentToChange = model;
this.canaryWeight = weight;
},
2017-08-17 22:00:37 +05:30
},
};
</script>
<template>
2019-02-15 15:39:39 +05:30
<div class="ci-table" role="grid">
2021-02-22 17:27:13 +05:30
<canary-update-modal :environment="environmentToChange" :weight="canaryWeight" />
2019-02-15 15:39:39 +05:30
<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>
2021-02-22 17:27:13 +05:30
<div class="table-section" :class="tableData.upcoming.spacing" role="columnheader">
{{ tableData.upcoming.title }}
</div>
2020-04-22 19:07:51 +05:30
<div class="table-section" :class="tableData.autoStop.spacing" role="columnheader">
2020-03-13 15:44:24 +05:30
{{ 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">
2021-09-30 23:02:18 +05:30
<environment-item
2018-12-05 23:21:45 +05:30
:key="`environment-item-${i}`"
2017-09-10 17:25:29 +05:30
:model="model"
2020-01-01 13:55:28 +05:30
:table-data="tableData"
2021-02-22 17:27:13 +05:30
data-qa-selector="environment_item"
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"
:is-loading="model.isLoadingDeployBoard"
:is-empty="model.isEmptyDeployBoard"
2020-03-13 15:44:24 +05:30
:logs-path="model.logs_path"
2021-02-22 17:27:13 +05:30
@changeCanaryWeight="changeCanaryWeight(model, $event)"
2019-07-07 11:18:12 +05:30
/>
</div>
</div>
2020-11-24 15:15:51 +05:30
<environment-alert
v-if="shouldRenderAlert(model)"
:key="`alert-row-${i}`"
:environment="model"
/>
2019-07-07 11:18:12 +05:30
2019-02-15 15:39:39 +05:30
<template v-if="shouldRenderFolderContent(model)">
<div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
2020-07-28 23:09:34 +05:30
<gl-loading-icon size="md" class="gl-mt-5" />
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>
2021-06-08 01:23:25 +05:30
<template v-for="(child, index) in model.children">
2021-09-30 23:02:18 +05:30
<environment-item
2021-06-08 01:23:25 +05:30
:key="`environment-row-${i}-${index}`"
:model="child"
:table-data="tableData"
data-qa-selector="environment_item"
/>
<div
v-if="shouldRenderDeployBoard(child)"
:key="`deploy-board-row-${i}-${index}`"
class="js-deploy-board-row"
>
<div class="deploy-board-container">
<deploy-board
:deploy-board-data="child.deployBoardData"
:is-loading="child.isLoadingDeployBoard"
:is-empty="child.isEmptyDeployBoard"
:logs-path="child.logs_path"
@changeCanaryWeight="changeCanaryWeight(child, $event)"
/>
</div>
</div>
<environment-alert
v-if="shouldRenderAlert(model)"
:key="`alert-row-${i}-${index}`"
:environment="child"
/>
</template>
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
<div :key="`sub-div-${i}`">
2020-10-24 23:57:45 +05:30
<div class="text-center gl-mt-3">
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>
2017-09-10 17:25:29 +05:30
</template>
</div>
2017-08-17 22:00:37 +05:30
</template>