Remove layout from charts and add them to their wrappersce-27835-refactor-layout-charts-panel

- Remove col- classes in our monitor chart components
- Layout classes are added to their wrappers
- Fixes small layout issues

6 files changed, 61 insertions, 68 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index 83136d43479..ee6aaeb7dde 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -100,7 +100,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graph col-12 col-lg-6">
+  <div class="prometheus-graph">
     <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/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
index 73682adc4ee..eedc5162e0c 100644
--- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
+++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
@@ -27,7 +27,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graph col-12 col-lg-6 d-flex flex-column justify-content-center">
+  <div class="prometheus-graph d-flex flex-column justify-content-center">
     <div class="prometheus-graph-header">
       <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index 7428b27a9c3..076682820e6 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -29,7 +29,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graph col-12 col-lg-6">
+  <div class="prometheus-graph">
     <div class="prometheus-graph-header">
       <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 02e7a7ba0a6..5f1d742d952 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -43,11 +43,6 @@ export default {
       required: false,
       default: '',
     },
-    showBorder: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     singleEmbed: {
       type: Boolean,
       required: false,
@@ -272,71 +267,66 @@ export default {
 </script>
 
 <template>
-  <div
-    class="prometheus-graph col-12"
-    :class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6': !singleEmbed }]"
-  >
-    <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
-      <div class="prometheus-graph-header">
-        <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
-        <gl-button
-          v-if="exportMetricsToCsvEnabled"
-          :href="downloadLink"
-          :title="__('Download CSV')"
-          :aria-label="__('Download CSV')"
-          style="margin-left: 200px;"
-          download="chart_metrics.csv"
-        >
-          {{ __('Download CSV') }}
-        </gl-button>
-        <div class="prometheus-graph-widgets js-graph-widgets">
-          <slot></slot>
-        </div>
+  <div class="prometheus-graph">
+    <div class="prometheus-graph-header">
+      <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
+      <gl-button
+        v-if="exportMetricsToCsvEnabled"
+        :href="downloadLink"
+        :title="__('Download CSV')"
+        :aria-label="__('Download CSV')"
+        style="margin-left: 200px;"
+        download="chart_metrics.csv"
+      >
+        {{ __('Download CSV') }}
+      </gl-button>
+      <div class="prometheus-graph-widgets js-graph-widgets">
+        <slot></slot>
       </div>
+    </div>
 
-      <component
-        :is="glChartComponent"
-        ref="chart"
-        v-bind="$attrs"
-        :data="chartData"
-        :option="chartOptions"
-        :format-tooltip-text="formatTooltipText"
-        :thresholds="thresholds"
-        :width="width"
-        :height="height"
-        @updated="onChartUpdated"
-      >
-        <template v-if="tooltip.isDeployment">
-          <template slot="tooltipTitle">
-            {{ __('Deployed') }}
-          </template>
-          <div slot="tooltipContent" class="d-flex align-items-center">
-            <icon name="commit" class="mr-2" />
-            <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
+    <component
+      :is="glChartComponent"
+      ref="chart"
+      v-bind="$attrs"
+      :data="chartData"
+      :option="chartOptions"
+      :format-tooltip-text="formatTooltipText"
+      :thresholds="thresholds"
+      :width="width"
+      :height="height"
+      @updated="onChartUpdated"
+    >
+      <template v-if="tooltip.isDeployment">
+        <template slot="tooltipTitle">
+          {{ __('Deployed') }}
+        </template>
+        <div slot="tooltipContent" class="d-flex align-items-center">
+          <icon name="commit" class="mr-2" />
+          <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
+        </div>
+      </template>
+      <template v-else>
+        <template slot="tooltipTitle">
+          <div class="text-nowrap">
+            {{ tooltip.title }}
           </div>
         </template>
-        <template v-else>
-          <template slot="tooltipTitle">
-            <div class="text-nowrap">
-              {{ tooltip.title }}
+        <template slot="tooltipContent">
+          <div
+            v-for="(content, key) in tooltip.content"
+            :key="key"
+            class="d-flex justify-content-between"
+          >
+            <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+              {{ content.name }}
+            </gl-chart-series-label>
+            <div class="prepend-left-32">
+              {{ content.value }}
             </div>
-          </template>
-          <template slot="tooltipContent">
-            <div
-              v-for="(content, key) in tooltip.content"
-              :key="key"
-              class="d-flex justify-content-between"
-            >
-              <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
-                {{ content.name }}
-              </gl-chart-series-label>
-              <div class="prepend-left-32">
-                {{ content.value }}
-              </div>
-            </div>
-          </template>
+          </div>
         </template>
-      </component>
-    </div>
+      </template>
+    </component>
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index d330ceb836c..7a5a3789bd6 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -456,6 +456,7 @@ export default {
           <panel-type
             v-for="(graphData, graphIndex) in groupData.metrics"
             :key="`panel-type-${graphIndex}`"
+            class="col-12 col-lg-6 pb-3"
             :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
             :graph-data="graphData"
             :dashboard-width="elWidth"
@@ -468,6 +469,7 @@ export default {
           <monitor-time-series-chart
             v-for="(graphData, graphIndex) in chartsWithData(groupData.metrics)"
             :key="graphIndex"
+            class="col-12 col-lg-6 pb-3"
             :graph-data="graphData"
             :deployment-data="deploymentData"
             :thresholds="getGraphAlertValues(graphData.queries)"
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index b516a82c170..da1e88071ab 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -95,6 +95,7 @@ export default {
       <monitor-time-series-chart
         v-for="graphData in charts"
         :key="graphData.title"
+        class="w-100"
         :graph-data="graphData"
         :container-width="elWidth"
         group-id="monitor-area-chart"