diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 14:59:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 14:59:07 +0300 |
commit | 8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca (patch) | |
tree | 544930fb309b30317ae9797a9683768705d664c4 /app/assets/javascripts/terraform/components/states_table.vue | |
parent | 4b1de649d0168371549608993deac953eb692019 (diff) |
Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/terraform/components/states_table.vue')
-rw-r--r-- | app/assets/javascripts/terraform/components/states_table.vue | 122 |
1 files changed, 107 insertions, 15 deletions
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue index 2e4c18c5a5b..d0d49233334 100644 --- a/app/assets/javascripts/terraform/components/states_table.vue +++ b/app/assets/javascripts/terraform/components/states_table.vue @@ -1,16 +1,22 @@ <script> -import { GlBadge, GlIcon, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui'; +import { GlBadge, GlIcon, GlLink, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui'; import { s__ } from '~/locale'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; +import StateActions from './states_table_actions.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; export default { components: { + CiBadge, GlBadge, GlIcon, + GlLink, GlSprintf, GlTable, GlTooltip, + StateActions, TimeAgoTooltip, }, mixins: [timeagoMixin], @@ -19,28 +25,73 @@ export default { required: true, type: Array, }, + terraformAdmin: { + required: false, + type: Boolean, + default: false, + }, }, computed: { fields() { - return [ + const columns = [ { key: 'name', - thClass: 'gl-display-none', + label: this.$options.i18n.name, + }, + { + key: 'pipeline', + label: this.$options.i18n.pipeline, }, { key: 'updated', - thClass: 'gl-display-none', - tdClass: 'gl-text-right', + label: this.$options.i18n.details, }, ]; + + if (this.terraformAdmin) { + columns.push({ + key: 'actions', + label: this.$options.i18n.actions, + thClass: 'gl-w-12', + tdClass: 'gl-text-right', + }); + } + + return columns; }, }, + 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}'), + name: s__('Terraform|Name'), + pipeline: s__('Terraform|Pipeline'), + unknownUser: s__('Terraform|Unknown User'), + updatedUser: s__('Terraform|%{user} updated %{timeAgo}'), + }, methods: { createdByUserName(item) { return item.latestVersion?.createdByUser?.name; }, lockedByUserName(item) { - return item.lockedByUser?.name || s__('Terraform|Unknown User'); + 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; }, updatedTime(item) { return item.latestVersion?.updatedAt || item.updatedAt; @@ -50,25 +101,34 @@ export default { </script> <template> - <gl-table :items="states" :fields="fields" data-testid="terraform-states-table"> + <gl-table + :items="states" + :fields="fields" + data-testid="terraform-states-table" + fixed + stacked="md" + > <template #cell(name)="{ item }"> - <div class="gl-display-flex align-items-center" data-testid="terraform-states-table-name"> + <div + class="gl-display-flex align-items-center gl-justify-content-end gl-justify-content-md-start" + data-testid="terraform-states-table-name" + > <p class="gl-font-weight-bold gl-m-0 gl-text-gray-900"> {{ item.name }} </p> - <div v-if="item.lockedAt" id="terraformLockedBadgeContainer" class="gl-mx-2"> - <gl-badge id="terraformLockedBadge"> + <div v-if="item.lockedAt" :id="`terraformLockedBadgeContainer${item.name}`" class="gl-mx-2"> + <gl-badge :id="`terraformLockedBadge${item.name}`"> <gl-icon name="lock" /> - {{ s__('Terraform|Locked') }} + {{ $options.i18n.locked }} </gl-badge> <gl-tooltip - container="terraformLockedBadgeContainer" + :container="`terraformLockedBadgeContainer${item.name}`" + :target="`terraformLockedBadge${item.name}`" placement="right" - target="terraformLockedBadge" > - <gl-sprintf :message="s__('Terraform|Locked by %{user} %{timeAgo}')"> + <gl-sprintf :message="$options.i18n.lockedByUser"> <template #user> {{ lockedByUserName(item) }} </template> @@ -82,9 +142,37 @@ export default { </div> </template> + <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> + <template #cell(updated)="{ item }"> <p class="gl-m-0" data-testid="terraform-states-table-updated"> - <gl-sprintf :message="s__('Terraform|%{user} updated %{timeAgo}')"> + <gl-sprintf :message="$options.i18n.updatedUser"> <template #user> <span v-if="item.latestVersion"> {{ createdByUserName(item) }} @@ -97,5 +185,9 @@ export default { </gl-sprintf> </p> </template> + + <template v-if="terraformAdmin" #cell(actions)="{ item }"> + <state-actions :state="item" /> + </template> </gl-table> </template> |