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>