Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

1 files changed, 55 insertions, 0 deletions

diff --git a/app/assets/javascripts/environments/environment_details/deployments_table.vue b/app/assets/javascripts/environments/environment_details/deployments_table.vue
new file mode 100644
index 00000000000..41570ee44c0
--- /dev/null
+++ b/app/assets/javascripts/environments/environment_details/deployments_table.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlTableLite } from '@gitlab/ui';
+import Commit from '~/vue_shared/components/commit.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import DeploymentStatusLink from './components/deployment_status_link.vue';
+import DeploymentJob from './components/deployment_job.vue';
+import DeploymentTriggerer from './components/deployment_triggerer.vue';
+import { ENVIRONMENT_DETAILS_TABLE_FIELDS } from './constants';
+
+export default {
+  components: {
+    DeploymentTriggerer,
+    DeploymentJob,
+    Commit,
+    TimeAgoTooltip,
+    DeploymentStatusLink,
+    GlTableLite,
+  },
+  props: {
+    deployments: {
+      type: Array,
+      required: true,
+    },
+  },
+  tableFields: ENVIRONMENT_DETAILS_TABLE_FIELDS,
+};
+</script>
+<template>
+  <gl-table-lite :items="deployments" :fields="$options.tableFields" fixed stacked="lg">
+    <template #table-colgroup="{ fields }">
+      <col v-for="field in fields" :key="field.key" :class="field.columnClass" />
+    </template>
+    <template #cell(status)="{ item }">
+      <deployment-status-link :deployment-job="item.job" :status="item.status" />
+    </template>
+    <template #cell(id)="{ item }">
+      <strong>{{ item.id }}</strong>
+    </template>
+    <template #cell(triggerer)="{ item }">
+      <deployment-triggerer :triggerer="item.triggerer" />
+    </template>
+    <template #cell(commit)="{ item }">
+      <commit v-bind="item.commit" />
+    </template>
+    <template #cell(job)="{ item }">
+      <deployment-job :job="item.job" />
+    </template>
+    <template #cell(created)="{ item }">
+      <time-ago-tooltip :time="item.created" />
+    </template>
+    <template #cell(deployed)="{ item }">
+      <time-ago-tooltip :time="item.deployed" />
+    </template>
+  </gl-table-lite>
+</template>