Merge branch '27835-refactor-layout-charts-panel' into 'master'

Remove layout classes from charts and add them to their wrappers

See merge request gitlab-org/gitlab!16497

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>

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>

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>

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,11 +267,7 @@ 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">
     <div class="prometheus-graph-header">
       <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
       <gl-button
@@ -338,5 +329,4 @@ export default {
       </template>
     </component>
   </div>
-  </div>
 </template>

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)"

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"