debian-mirror-gitlab/app/assets/javascripts/terraform/components/states_table.vue

248 lines
6.5 KiB
Vue
Raw Normal View History

2021-01-29 00:20:46 +05:30
<script>
2021-03-11 19:13:27 +05:30
import {
GlAlert,
GlBadge,
GlIcon,
GlLink,
GlLoadingIcon,
GlSprintf,
GlTable,
GlTooltip,
} from '@gitlab/ui';
2021-02-22 17:27:13 +05:30
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
2021-03-11 19:13:27 +05:30
import { s__ } from '~/locale';
2021-02-22 17:27:13 +05:30
import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
2021-01-29 00:20:46 +05:30
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
2021-03-11 19:13:27 +05:30
import StateActions from './states_table_actions.vue';
2021-01-29 00:20:46 +05:30
export default {
components: {
2021-02-22 17:27:13 +05:30
CiBadge,
2021-03-11 19:13:27 +05:30
GlAlert,
2021-01-29 00:20:46 +05:30
GlBadge,
GlIcon,
2021-02-22 17:27:13 +05:30
GlLink,
2021-03-11 19:13:27 +05:30
GlLoadingIcon,
2021-01-29 00:20:46 +05:30
GlSprintf,
GlTable,
GlTooltip,
2021-02-22 17:27:13 +05:30
StateActions,
2021-01-29 00:20:46 +05:30
TimeAgoTooltip,
},
mixins: [timeagoMixin],
props: {
states: {
required: true,
type: Array,
},
2021-02-22 17:27:13 +05:30
terraformAdmin: {
required: false,
type: Boolean,
default: false,
},
2021-01-29 00:20:46 +05:30
},
computed: {
fields() {
2021-02-22 17:27:13 +05:30
const columns = [
2021-01-29 00:20:46 +05:30
{
key: 'name',
2021-02-22 17:27:13 +05:30
label: this.$options.i18n.name,
},
{
key: 'pipeline',
label: this.$options.i18n.pipeline,
2021-01-29 00:20:46 +05:30
},
{
key: 'updated',
2021-02-22 17:27:13 +05:30
label: this.$options.i18n.details,
2021-01-29 00:20:46 +05:30
},
];
2021-02-22 17:27:13 +05:30
if (this.terraformAdmin) {
columns.push({
key: 'actions',
label: this.$options.i18n.actions,
thClass: 'gl-w-12',
tdClass: 'gl-text-right',
});
}
return columns;
2021-01-29 00:20:46 +05:30
},
},
2021-02-22 17:27:13 +05:30
i18n: {
actions: s__('Terraform|Actions'),
details: s__('Terraform|Details'),
jobStatus: s__('Terraform|Job status'),
locked: s__('Terraform|Locked'),
lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'),
2021-03-11 19:13:27 +05:30
lockingState: s__('Terraform|Locking state'),
2021-02-22 17:27:13 +05:30
name: s__('Terraform|Name'),
pipeline: s__('Terraform|Pipeline'),
2021-03-11 19:13:27 +05:30
removing: s__('Terraform|Removing'),
2021-02-22 17:27:13 +05:30
unknownUser: s__('Terraform|Unknown User'),
2021-03-11 19:13:27 +05:30
unlockingState: s__('Terraform|Unlocking state'),
2021-02-22 17:27:13 +05:30
updatedUser: s__('Terraform|%{user} updated %{timeAgo}'),
},
2021-01-29 00:20:46 +05:30
methods: {
createdByUserName(item) {
return item.latestVersion?.createdByUser?.name;
},
2021-03-11 19:13:27 +05:30
loadingLockText(item) {
return item.lockedAt ? this.$options.i18n.unlockingState : this.$options.i18n.lockingState;
},
2021-01-29 00:20:46 +05:30
lockedByUserName(item) {
2021-02-22 17:27:13 +05:30
return item.lockedByUser?.name || this.$options.i18n.unknownUser;
},
pipelineDetailedStatus(item) {
return item.latestVersion?.job?.detailedStatus;
},
pipelineID(item) {
let id = item.latestVersion?.job?.pipeline?.id;
if (id) {
id = getIdFromGraphQLId(id);
}
return id;
},
pipelinePath(item) {
return item.latestVersion?.job?.pipeline?.path;
2021-01-29 00:20:46 +05:30
},
updatedTime(item) {
return item.latestVersion?.updatedAt || item.updatedAt;
},
},
};
</script>
<template>
2021-02-22 17:27:13 +05:30
<gl-table
:items="states"
:fields="fields"
data-testid="terraform-states-table"
2021-03-11 19:13:27 +05:30
details-td-class="gl-p-0!"
2021-02-22 17:27:13 +05:30
fixed
stacked="md"
>
2021-01-29 00:20:46 +05:30
<template #cell(name)="{ item }">
2021-02-22 17:27:13 +05:30
<div
class="gl-display-flex align-items-center gl-justify-content-end gl-justify-content-md-start"
data-testid="terraform-states-table-name"
>
2021-01-29 00:20:46 +05:30
<p class="gl-font-weight-bold gl-m-0 gl-text-gray-900">
{{ item.name }}
</p>
2021-03-11 19:13:27 +05:30
<div v-if="item.loadingLock" class="gl-mx-3">
<p class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0">
<gl-loading-icon class="gl-pr-1" />
{{ loadingLockText(item) }}
</p>
</div>
<div v-else-if="item.loadingRemove" class="gl-mx-3">
<p
class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0 gl-text-red-500"
>
<gl-loading-icon class="gl-pr-1" />
{{ $options.i18n.removing }}
</p>
</div>
<div
v-else-if="item.lockedAt"
:id="`terraformLockedBadgeContainer${item.name}`"
class="gl-mx-3"
>
2021-02-22 17:27:13 +05:30
<gl-badge :id="`terraformLockedBadge${item.name}`">
2021-01-29 00:20:46 +05:30
<gl-icon name="lock" />
2021-02-22 17:27:13 +05:30
{{ $options.i18n.locked }}
2021-01-29 00:20:46 +05:30
</gl-badge>
<gl-tooltip
2021-02-22 17:27:13 +05:30
:container="`terraformLockedBadgeContainer${item.name}`"
:target="`terraformLockedBadge${item.name}`"
2021-01-29 00:20:46 +05:30
placement="right"
>
2021-02-22 17:27:13 +05:30
<gl-sprintf :message="$options.i18n.lockedByUser">
2021-01-29 00:20:46 +05:30
<template #user>
{{ lockedByUserName(item) }}
</template>
<template #timeAgo>
{{ timeFormatted(item.lockedAt) }}
</template>
</gl-sprintf>
</gl-tooltip>
</div>
</div>
</template>
2021-02-22 17:27:13 +05:30
<template #cell(pipeline)="{ item }">
<div data-testid="terraform-states-table-pipeline" class="gl-min-h-7">
<gl-link v-if="pipelineID(item)" :href="pipelinePath(item)">
#{{ pipelineID(item) }}
</gl-link>
<div
v-if="pipelineDetailedStatus(item)"
:id="`terraformJobStatusContainer${item.name}`"
class="gl-my-2"
>
<ci-badge
:id="`terraformJobStatus${item.name}`"
:status="pipelineDetailedStatus(item)"
class="gl-py-1"
/>
<gl-tooltip
:container="`terraformJobStatusContainer${item.name}`"
:target="`terraformJobStatus${item.name}`"
placement="right"
>
{{ $options.i18n.jobStatus }}
</gl-tooltip>
</div>
</div>
</template>
2021-01-29 00:20:46 +05:30
<template #cell(updated)="{ item }">
<p class="gl-m-0" data-testid="terraform-states-table-updated">
2021-02-22 17:27:13 +05:30
<gl-sprintf :message="$options.i18n.updatedUser">
2021-01-29 00:20:46 +05:30
<template #user>
<span v-if="item.latestVersion">
{{ createdByUserName(item) }}
</span>
</template>
<template #timeAgo>
<time-ago-tooltip :time="updatedTime(item)" />
</template>
</gl-sprintf>
</p>
</template>
2021-02-22 17:27:13 +05:30
<template v-if="terraformAdmin" #cell(actions)="{ item }">
<state-actions :state="item" />
</template>
2021-03-11 19:13:27 +05:30
<template #row-details="row">
<gl-alert
data-testid="terraform-states-table-error"
variant="danger"
@dismiss="row.toggleDetails"
>
<span
v-for="errorMessage in row.item.errorMessages"
:key="errorMessage"
class="gl-display-flex gl-justify-content-start"
>
{{ errorMessage }}
</span>
</gl-alert>
</template>
2021-01-29 00:20:46 +05:30
</gl-table>
</template>