1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/alert_details_table.vue b/app/assets/javascripts/vue_shared/components/alert_details_table.vue
new file mode 100644
index 00000000000..c94e784c01e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/alert_details_table.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import {
+  capitalizeFirstCharacter,
+  convertToSentenceCase,
+  splitCamelCase,
+} from '~/lib/utils/text_utility';
+
+const thClass = 'gl-bg-transparent! gl-border-1! gl-border-b-solid! gl-border-gray-200!';
+const tdClass = 'gl-border-gray-100! gl-p-5!';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    GlTable,
+  },
+  props: {
+    alert: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  fields: [
+    {
+      key: 'fieldName',
+      label: s__('AlertManagement|Key'),
+      thClass,
+      tdClass,
+      formatter: string => capitalizeFirstCharacter(convertToSentenceCase(splitCamelCase(string))),
+    },
+    {
+      key: 'value',
+      thClass: `${thClass} w-60p`,
+      tdClass,
+      label: s__('AlertManagement|Value'),
+    },
+  ],
+  computed: {
+    items() {
+      if (!this.alert) {
+        return [];
+      }
+      return Object.entries(this.alert).map(([fieldName, value]) => ({
+        fieldName,
+        value,
+      }));
+    },
+  },
+};
+</script>
+<template>
+  <gl-table
+    class="alert-management-details-table"
+    :busy="loading"
+    :empty-text="s__('AlertManagement|No alert data to display.')"
+    :items="items"
+    :fields="$options.fields"
+    show-empty
+  >
+    <template #table-busy>
+      <gl-loading-icon size="lg" color="dark" class="gl-mt-5" />
+    </template>
+  </gl-table>
+</template>