Resolve "Show `failure_reason` in jobs view content section"

1 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue
new file mode 100644
index 00000000000..ccf802c456c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/callout.vue
@@ -0,0 +1,27 @@
+<script>
+const calloutVariants = ['danger', 'success', 'info', 'warning'];
+
+export default {
+  props: {
+    category: {
+      type: String,
+      required: false,
+      default: calloutVariants[0],
+      validator: value => calloutVariants.includes(value),
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div
+    :class="`bs-callout bs-callout-${category}`"
+    role="alert"
+    aria-live="assertive"
+  >
+    {{ message }}
+  </div>
+</template>