diff options
Diffstat (limited to 'app/assets/javascripts/terraform/components/states_table.vue')
-rw-r--r-- | app/assets/javascripts/terraform/components/states_table.vue | 62 |
1 files changed, 58 insertions, 4 deletions
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue index d0d49233334..2577664a5e8 100644 --- a/app/assets/javascripts/terraform/components/states_table.vue +++ b/app/assets/javascripts/terraform/components/states_table.vue @@ -1,18 +1,29 @@ <script> -import { GlBadge, GlIcon, GlLink, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { + GlAlert, + GlBadge, + GlIcon, + GlLink, + GlLoadingIcon, + GlSprintf, + GlTable, + GlTooltip, +} from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { s__ } from '~/locale'; 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'; +import StateActions from './states_table_actions.vue'; export default { components: { CiBadge, + GlAlert, GlBadge, GlIcon, GlLink, + GlLoadingIcon, GlSprintf, GlTable, GlTooltip, @@ -66,15 +77,21 @@ export default { jobStatus: s__('Terraform|Job status'), locked: s__('Terraform|Locked'), lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'), + lockingState: s__('Terraform|Locking state'), name: s__('Terraform|Name'), pipeline: s__('Terraform|Pipeline'), + removing: s__('Terraform|Removing'), unknownUser: s__('Terraform|Unknown User'), + unlockingState: s__('Terraform|Unlocking state'), updatedUser: s__('Terraform|%{user} updated %{timeAgo}'), }, methods: { createdByUserName(item) { return item.latestVersion?.createdByUser?.name; }, + loadingLockText(item) { + return item.lockedAt ? this.$options.i18n.unlockingState : this.$options.i18n.lockingState; + }, lockedByUserName(item) { return item.lockedByUser?.name || this.$options.i18n.unknownUser; }, @@ -105,6 +122,7 @@ export default { :items="states" :fields="fields" data-testid="terraform-states-table" + details-td-class="gl-p-0!" fixed stacked="md" > @@ -117,7 +135,27 @@ export default { {{ item.name }} </p> - <div v-if="item.lockedAt" :id="`terraformLockedBadgeContainer${item.name}`" class="gl-mx-2"> + <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" + > <gl-badge :id="`terraformLockedBadge${item.name}`"> <gl-icon name="lock" /> {{ $options.i18n.locked }} @@ -189,5 +227,21 @@ export default { <template v-if="terraformAdmin" #cell(actions)="{ item }"> <state-actions :state="item" /> </template> + + <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> </gl-table> </template> |