Adds single metric prop and some styles

4 files changed, 14 insertions, 7 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index edf9423c74c..aeaf88eca99 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -45,6 +45,11 @@ export default {
       required: false,
       default: () => false,
     },
+    singleMetric: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
     thresholds: {
       type: Array,
       required: false,
@@ -240,8 +245,8 @@ export default {
 </script>
 
 <template>
-  <div class="col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']">
-    <div class="prometheus-graph" :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
+  <div class="col-12" :class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6' : !singleMetric } ]">
+    <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
       <div class="prometheus-graph-header">
         <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
         <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div>
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index 4c90309af64..e9a5d22607c 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -87,7 +87,7 @@ export default {
 </script>
 <template>
   <div class="metrics-embed">
-    <div v-if="groupData" :class="[ singleChart ? 'metric' : 'row w-100 m-n2 pb-4' ]">
+    <div v-if="groupData" :class="[ singleChart ? 'test' : 'row w-100 m-n2 pb-4' ]">
       <monitor-area-chart
         v-for="graphData in chartsWithData(groupData.metrics)"
         :key="graphData.title"
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 0bf911eec0a..f7495151a71 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -118,6 +118,10 @@
   min-height: 167px;
   padding: 10px 0;
   overflow-x: auto;
+
+  p {
+    clear: both;
+  }
 }
 
 .markdown-area {
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index ceccf398678..d4e7a17dae6 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -1,7 +1,4 @@
-.metrics-embed p {
-  clear: both;
-}
-.metric {
+.test {
   border: 1px solid red;
   width: 50%;
   float: left;
@@ -9,6 +6,7 @@
     border: 1px solid blue;
   }
 }
+
 .prometheus-graphs {
   .dropdowns {
     .dropdown-menu-toggle {