gitlab-org--gitlab-foss/app/assets/javascripts/environments/components/environments_table.vue

226 lines
6.9 KiB
Vue
Raw Normal View History

<script>
/**
* Render environments table.
*/
2018-11-16 14:29:11 -05:00
import { GlLoadingIcon } from '@gitlab/ui';
import { flow, reverse, sortBy } from 'lodash/fp';
import { s__ } from '~/locale';
import CanaryUpdateModal from './canary_update_modal.vue';
import DeployBoard from './deploy_board.vue';
import EnvironmentItem from './environment_item.vue';
export default {
components: {
EnvironmentItem,
GlLoadingIcon,
DeployBoard,
EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'),
CanaryUpdateModal,
},
props: {
environments: {
type: Array,
required: true,
default: () => [],
},
},
data() {
return {
canaryWeight: 0,
environmentToChange: null,
};
},
computed: {
sortedEnvironments() {
return this.sortEnvironments(this.environments).map((env) =>
this.shouldRenderFolderContent(env)
? { ...env, children: this.sortEnvironments(env.children) }
: env,
);
},
tableData() {
return {
// percent spacing for cols, should add up to 100
name: {
title: s__('Environments|Environment'),
spacing: 'section-10',
},
deploy: {
title: s__('Environments|Deployment'),
spacing: 'section-10',
},
build: {
title: s__('Environments|Job'),
spacing: 'section-15',
},
commit: {
title: s__('Environments|Commit'),
spacing: 'section-15',
},
date: {
title: s__('Environments|Updated'),
spacing: 'section-10',
},
upcoming: {
title: s__('Environments|Upcoming'),
mobileTitle: s__('Environments|Upcoming deployment'),
spacing: 'section-10',
},
autoStop: {
title: s__('Environments|Auto stop'),
spacing: 'section-10',
},
actions: {
spacing: 'section-20',
},
};
},
},
methods: {
folderUrl(model) {
return `${window.location.pathname}/folders/${model.folderName}`;
},
shouldRenderDeployBoard(model) {
return model.hasDeployBoard && model.isDeployBoardVisible;
},
2018-01-08 15:01:49 -05:00
shouldRenderFolderContent(env) {
return env.isFolder && env.isOpen && env.children && env.children.length > 0;
2018-01-08 15:01:49 -05:00
},
shouldRenderAlert(env) {
return env?.has_opened_alert;
},
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 flow(
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)),
)(environments);
},
changeCanaryWeight(model, weight) {
this.environmentToChange = model;
this.canaryWeight = weight;
},
},
};
</script>
<template>
2018-11-16 15:07:38 -05:00
<div class="ci-table" role="grid">
<canary-update-modal :environment="environmentToChange" :weight="canaryWeight" />
2018-11-16 15:07:38 -05:00
<div class="gl-responsive-table-row table-row-header" role="row">
<div class="table-section" :class="tableData.name.spacing" role="columnheader">
{{ tableData.name.title }}
2017-06-06 08:58:29 -04:00
</div>
<div class="table-section" :class="tableData.deploy.spacing" role="columnheader">
{{ tableData.deploy.title }}
2017-06-06 08:58:29 -04:00
</div>
<div class="table-section" :class="tableData.build.spacing" role="columnheader">
{{ tableData.build.title }}
2017-06-06 08:58:29 -04:00
</div>
<div class="table-section" :class="tableData.commit.spacing" role="columnheader">
{{ tableData.commit.title }}
2017-06-06 08:58:29 -04:00
</div>
<div class="table-section" :class="tableData.date.spacing" role="columnheader">
{{ tableData.date.title }}
2017-06-06 08:58:29 -04:00
</div>
<div class="table-section" :class="tableData.upcoming.spacing" role="columnheader">
{{ tableData.upcoming.title }}
</div>
<div class="table-section" :class="tableData.autoStop.spacing" role="columnheader">
{{ tableData.autoStop.title }}
</div>
2017-06-06 08:58:29 -04:00
</div>
<template v-for="(model, i) in sortedEnvironments" :model="model">
<environment-item
:key="`environment-item-${i}`"
2017-06-06 08:58:29 -04:00
:model="model"
:table-data="tableData"
data-qa-selector="environment_item"
2018-01-06 13:59:49 -05:00
/>
<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"
:logs-path="model.logs_path"
@changeCanaryWeight="changeCanaryWeight(model, $event)"
/>
</div>
</div>
<environment-alert
v-if="shouldRenderAlert(model)"
:key="`alert-row-${i}`"
:environment="model"
/>
2018-11-16 15:07:38 -05:00
<template v-if="shouldRenderFolderContent(model)">
<div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
<gl-loading-icon size="md" class="gl-mt-5" />
2017-06-06 08:58:29 -04:00
</div>
2017-06-06 08:58:29 -04:00
<template v-else>
<template v-for="(child, index) in model.children">
<environment-item
: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>
2018-01-23 04:37:07 -05:00
<div :key="`sub-div-${i}`">
<div class="text-center gl-mt-3">
<a :href="folderUrl(model)" class="btn btn-default">
{{ s__('Environments|Show all') }}
</a>
2017-06-06 08:58:29 -04:00
</div>
</div>
</template>
</template>
2017-06-06 08:58:29 -04:00
</template>
</div>
</template>