Merge branch 'refactor-prometheus-graph-layout' into 'master'

Rename prometheus Vue components

See merge request !13938

9 files changed, 88 insertions, 95 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index a6a2d3119e3..74244faa5d9 100644
--- a/app/assets/javascripts/monitoring/components/monitoring.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -3,8 +3,9 @@
   import _ from 'underscore';
   import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
-  import monitoringRow from './monitoring_row.vue';
-  import monitoringState from './monitoring_state.vue';
+  import GraphGroup from './graph_group.vue';
+  import GraphRow from './graph_row.vue';
+  import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
 
@@ -31,8 +32,9 @@
     },
 
     components: {
-      monitoringRow,
-      monitoringState,
+      GraphGroup,
+      GraphRow,
+      EmptyState,
     },
 
     methods: {
@@ -94,7 +96,6 @@
           this.updatedAspectRatios = 0;
         }
       },
-
     },
 
     created() {
@@ -118,40 +119,27 @@
     },
   };
 </script>
+
 <template>
-  <div 
-    class="prometheus-graphs" 
-    v-if="!showEmptyState">
-    <div 
-      class="row"
+  <div v-if="!showEmptyState" class="prometheus-graphs">
+    <graph-group
       v-for="(groupData, index) in store.groups"
-      :key="index">
-      <div 
-        class="col-md-12">
-        <div 
-          class="panel panel-default prometheus-panel">
-          <div 
-            class="panel-heading">
-            <h4>{{groupData.group}}</h4>
-          </div>
-          <div 
-            class="panel-body">
-            <monitoring-row
-              v-for="(row, index) in groupData.metrics" 
-              :key="index"
-              :row-data="row"
-              :update-aspect-ratio="updateAspectRatio"
-              :deployment-data="store.deploymentData"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+      :key="index"
+      :name="groupData.group"
+    >
+      <graph-row
+        v-for="(row, index) in groupData.metrics"
+        :key="index"
+        :row-data="row"
+        :update-aspect-ratio="updateAspectRatio"
+        :deployment-data="store.deploymentData"
+      />
+    </graph-group>
   </div>
-  <monitoring-state 
+  <empty-state
+    v-else
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
-    v-else
   />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/monitoring_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 598021aa4df..a8708be76de 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -62,49 +62,33 @@
     },
   };
 </script>
+
 <template>
-  <div 
-    class="prometheus-state">
-    <div 
-      class="row">
-      <div 
-        class="col-md-4 col-md-offset-4 state-svg" 
-        v-html="currentState.svg">
-      </div>
+  <div class="prometheus-state">
+    <div class="row">
+      <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
     </div>
-    <div 
-      class="row">
-      <div 
-        class="col-md-6 col-md-offset-3">
-        <h4 
-          class="text-center state-title">
+    <div class="row">
+      <div class="col-md-6 col-md-offset-3">
+        <h4 class="text-center state-title">
           {{currentState.title}}
         </h4>
       </div>
     </div>
-    <div 
-      class="row">
-      <div 
-        class="col-md-6 col-md-offset-3">
-        <div 
-          class="description-text text-center state-description">
-            {{currentState.description}}
-            <a 
-              :href="settingsPath"
-              v-if="showButtonDescription">
-              Prometheus server
-            </a>
+    <div class="row">
+      <div class="col-md-6 col-md-offset-3">
+        <div class="description-text text-center state-description">
+          {{currentState.description}}
+          <a v-if="showButtonDescription" :href="settingsPath">
+            Prometheus server
+          </a>
         </div>
       </div>
     </div>
-    <div 
-      class="row state-button-section">
-      <div 
-        class="col-md-4 col-md-offset-4 text-center state-button">
-        <a 
-          class="btn btn-success" 
-          :href="buttonPath">
-            {{currentState.buttonText}}
+    <div class="row state-button-section">
+      <div class="col-md-4 col-md-offset-4 text-center state-button">
+        <a class="btn btn-success" :href="buttonPath">
+          {{currentState.buttonText}}
         </a>
       </div>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/graph.vue
index a31c26fb4fc..6f6da9e1463 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -1,8 +1,8 @@
 <script>
   import d3 from 'd3';
-  import monitoringLegends from './monitoring_legends.vue';
-  import monitoringFlag from './monitoring_flag.vue';
-  import monitoringDeployment from './monitoring_deployment.vue';
+  import GraphLegend from './graph/legend.vue';
+  import GraphFlag from './graph/flag.vue';
+  import GraphDeployment from './graph/deployment.vue';
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
@@ -14,7 +14,7 @@
 
   export default {
     props: {
-      columnData: {
+      graphData: {
         type: Object,
         required: true,
       },
@@ -66,9 +66,9 @@
     },
 
     components: {
-      monitoringLegends,
-      monitoringFlag,
-      monitoringDeployment,
+      GraphLegend,
+      GraphFlag,
+      GraphDeployment,
     },
 
     computed: {
@@ -97,7 +97,7 @@
     methods: {
       draw() {
         const breakpointSize = bp.getBreakpointSize();
-        const query = this.columnData.queries[0];
+        const query = this.graphData.queries[0];
         this.margin = measurements.large.margin;
         if (breakpointSize === 'xs' || breakpointSize === 'sm') {
           this.graphHeight = 300;
@@ -106,7 +106,7 @@
         }
         this.data = query.result[0].values;
         this.unitOfDisplay = query.unit || '';
-        this.yAxisLabel = this.columnData.y_label || 'Values';
+        this.yAxisLabel = this.graphData.y_label || 'Values';
         this.legendTitle = query.label || 'Average';
         this.graphWidth = this.$refs.baseSvg.clientWidth -
                      this.margin.left - this.margin.right;
@@ -224,7 +224,7 @@
     :class="classType">
     <h5
       class="text-center graph-title">
-        {{columnData.title}}
+        {{graphData.title}}
     </h5>
     <div
       class="prometheus-svg-container"
@@ -240,7 +240,7 @@
           class="y-axis"
           transform="translate(70, 20)">
         </g>
-        <monitoring-legends
+        <graph-legend
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
@@ -268,13 +268,13 @@
               stroke-width="2"
               transform="translate(-5, 20)">
             </path>
-            <monitoring-deployment
+            <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
-            <monitoring-flag
+            <graph-flag
               v-if="showFlag"
               :current-x-coordinate="currentXCoordinate"
               :current-y-coordinate="currentYCoordinate"
diff --git a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index dadbcd1aaa6..3623d2ed946 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -1,5 +1,5 @@
 <script>
-  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
+  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
 
   export default {
     props: {
diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 61cbeeebb17..c4d4647d240 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -1,5 +1,5 @@
 <script>
-  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
+  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
 
   export default {
     props: {
diff --git a/app/assets/javascripts/monitoring/components/monitoring_legends.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 922a5e1bf0e..d08f9cbffd4 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_legends.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -74,7 +74,7 @@
   };
 </script>
 <template>
-  <g 
+  <g
     class="axis-label-container">
     <line
       class="label-x-axis-line"
@@ -100,7 +100,7 @@
       :width="yLabelWidth"
       :height="yLabelHeight">
     </rect>
-    <text 
+    <text
       class="label-axis-text y-label-text"
       text-anchor="middle"
       :transform="textTransform"
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
new file mode 100644
index 00000000000..32c90fda8cc
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -0,0 +1,21 @@
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="panel panel-default prometheus-panel">
+    <div class="panel-heading">
+      <h4>{{name}}</h4>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/monitoring_row.vue b/app/assets/javascripts/monitoring/components/graph_row.vue
index e5528f17880..bdb9149c3b4 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_row.vue
+++ b/app/assets/javascripts/monitoring/components/graph_row.vue
@@ -1,5 +1,5 @@
 <script>
-  import monitoringColumn from './monitoring_column.vue';
+  import Graph from './graph.vue';
 
   export default {
     props: {
@@ -17,7 +17,7 @@
       },
     },
     components: {
-      monitoringColumn,
+      Graph,
     },
     computed: {
       bootstrapClass() {
@@ -26,12 +26,12 @@
     },
   };
 </script>
+
 <template>
-  <div 
-    class="prometheus-row row">
-    <monitoring-column
-      v-for="(column, index) in rowData" 
-      :column-data="column"
+  <div class="prometheus-row row">
+    <graph
+      v-for="(graphData, index) in rowData"
+      :graph-data="graphData"
       :class-type="bootstrapClass"
       :key="index"
       :update-aspect-ratio="updateAspectRatio"
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index 5d5cb56af72..ef280e02092 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,10 +1,10 @@
 import Vue from 'vue';
-import Monitoring from './components/monitoring.vue';
+import Dashboard from './components/dashboard.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#prometheus-graphs',
   components: {
-    'monitoring-dashboard': Monitoring,
+    Dashboard,
   },
-  render: createElement => createElement('monitoring-dashboard'),
+  render: createElement => createElement('dashboard'),
 }));