1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph_row.vue b/app/assets/javascripts/monitoring/components/graph_row.vue
new file mode 100644
index 00000000000..bdb9149c3b4
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph_row.vue
@@ -0,0 +1,41 @@
+<script>
+  import Graph from './graph.vue';
+
+  export default {
+    props: {
+      rowData: {
+        type: Array,
+        required: true,
+      },
+      updateAspectRatio: {
+        type: Boolean,
+        required: true,
+      },
+      deploymentData: {
+        type: Array,
+        required: true,
+      },
+    },
+    components: {
+      Graph,
+    },
+    computed: {
+      bootstrapClass() {
+        return this.rowData.length >= 2 ? 'col-md-6' : 'col-md-12';
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="prometheus-row row">
+    <graph
+      v-for="(graphData, index) in rowData"
+      :graph-data="graphData"
+      :class-type="bootstrapClass"
+      :key="index"
+      :update-aspect-ratio="updateAspectRatio"
+      :deployment-data="deploymentData"
+    />
+  </div>
+</template>