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

Rename prometheus Vue components

See merge request !13938

app/assets/javascripts/monitoring/components/monitoring.vue → 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>

app/assets/javascripts/monitoring/components/monitoring_state.vue → 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>

app/assets/javascripts/monitoring/components/monitoring_column.vue → app/assets/javascripts/monitoring/components/graph.vue

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

app/assets/javascripts/monitoring/components/monitoring_deployment.vue → app/assets/javascripts/monitoring/components/graph/deployment.vue

 <script>
-  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
+  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
 
   export default {
     props: {

app/assets/javascripts/monitoring/components/monitoring_flag.vue → app/assets/javascripts/monitoring/components/graph/flag.vue

 <script>
-  import { dateFormat, timeFormat } from '../utils/date_time_formatters';
+  import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
 
   export default {
     props: {

app/assets/javascripts/monitoring/components/monitoring_legends.vue → 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"

app/assets/javascripts/monitoring/components/graph_group.vue

+<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>

app/assets/javascripts/monitoring/components/monitoring_row.vue → app/assets/javascripts/monitoring/components/graph_row.vue

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

app/assets/javascripts/monitoring/monitoring_bundle.js

 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'),
 }));

spec/javascripts/monitoring/monitoring_spec.js → spec/javascripts/monitoring/dashboard_spec.js

 import Vue from 'vue';
-import Monitoring from '~/monitoring/components/monitoring.vue';
+import Dashboard from '~/monitoring/components/dashboard.vue';
 import { MonitorMockInterceptor } from './mock_data';
 
-describe('Monitoring', () => {
+describe('Dashboard', () => {
   const fixtureName = 'environments/metrics/metrics.html.raw';
-  let MonitoringComponent;
+  let DashboardComponent;
   let component;
   preloadFixtures(fixtureName);
 
   beforeEach(() => {
     loadFixtures(fixtureName);
-    MonitoringComponent = Vue.extend(Monitoring);
+    DashboardComponent = Vue.extend(Dashboard);
   });
 
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
-      component = new MonitoringComponent({
+      component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
       });
 
@@ -36,7 +36,7 @@ describe('Monitoring', () => {
     });
 
     it('shows up a loading state', (done) => {
-      component = new MonitoringComponent({
+      component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
       });
       component.$mount();

spec/javascripts/monitoring/monitoring_state_spec.js → spec/javascripts/monitoring/dashboard_state_spec.js

 import Vue from 'vue';
-import MonitoringState from '~/monitoring/components/monitoring_state.vue';
+import EmptyState from '~/monitoring/components/empty_state.vue';
 import { statePaths } from './mock_data';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringState);
+  const Component = Vue.extend(EmptyState);
 
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
   return component.$el.querySelector(selector).firstChild.nodeValue.trim();
 }
 
-describe('MonitoringState', () => {
+describe('EmptyState', () => {
   describe('Computed props', () => {
     it('currentState', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_deployment_spec.js → spec/javascripts/monitoring/graph/deployment_spec.js

 import Vue from 'vue';
-import MonitoringState from '~/monitoring/components/monitoring_deployment.vue';
-import { deploymentData } from './mock_data';
+import GraphDeployment from '~/monitoring/components/graph/deployment.vue';
+import { deploymentData } from '../mock_data';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringState);
+  const Component = Vue.extend(GraphDeployment);
 
   return new Component({
     propsData,

spec/javascripts/monitoring/monitoring_flag_spec.js → spec/javascripts/monitoring/graph/flag_spec.js

 import Vue from 'vue';
-import MonitoringFlag from '~/monitoring/components/monitoring_flag.vue';
+import GraphFlag from '~/monitoring/components/graph/flag.vue';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringFlag);
+  const Component = Vue.extend(GraphFlag);
 
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getCoordinate(component, selector, coordinate) {
   return parseInt(coordinateVal, 10);
 }
 
-describe('MonitoringFlag', () => {
+describe('GraphFlag', () => {
   it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
     const component = createComponent({
       currentXCoordinate: 200,

spec/javascripts/monitoring/monitoring_legends_spec.js → spec/javascripts/monitoring/graph/legend_spec.js

 import Vue from 'vue';
-import MonitoringLegends from '~/monitoring/components/monitoring_legends.vue';
+import GraphLegend from '~/monitoring/components/graph/legend.vue';
 import measurements from '~/monitoring/utils/measurements';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringLegends);
+  const Component = Vue.extend(GraphLegend);
 
   return new Component({
     propsData,
@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
   return component.$el.querySelector(selector).firstChild.nodeValue.trim();
 }
 
-describe('MonitoringLegends', () => {
+describe('GraphLegend', () => {
   describe('Computed props', () => {
     it('textTransform', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_row_spec.js → spec/javascripts/monitoring/graph_row_spec.js

 import Vue from 'vue';
-import MonitoringRow from '~/monitoring/components/monitoring_row.vue';
+import GraphRow from '~/monitoring/components/graph_row.vue';
+import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import { deploymentData, singleRowMetrics } from './mock_data';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringRow);
+  const Component = Vue.extend(GraphRow);
 
   return new Component({
     propsData,
   }).$mount();
 };
 
-describe('MonitoringRow', () => {
+describe('GraphRow', () => {
+  beforeEach(() => {
+    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
+  });
+
   describe('Computed props', () => {
     it('bootstrapClass is set to col-md-6 when rowData is higher/equal to 2', () => {
       const component = createComponent({

spec/javascripts/monitoring/monitoring_column_spec.js → spec/javascripts/monitoring/graph_spec.js

 import Vue from 'vue';
 import _ from 'underscore';
-import MonitoringColumn from '~/monitoring/components/monitoring_column.vue';
+import Graph from '~/monitoring/components/graph.vue';
 import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
 import eventHub from '~/monitoring/event_hub';
 import { deploymentData, singleRowMetrics } from './mock_data';
 
 const createComponent = (propsData) => {
-  const Component = Vue.extend(MonitoringColumn);
+  const Component = Vue.extend(Graph);
 
   return new Component({
     propsData,
   }).$mount();
 };
 
-describe('MonitoringColumn', () => {
+describe('Graph', () => {
   beforeEach(() => {
-    spyOn(MonitoringMixins.methods, 'formatDeployments').and.callFake(function fakeFormat() {
-      return {};
-    });
+    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
   });
 
   it('has a title', () => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
     });
 
-    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.columnData.title);
+    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
   });
 
   it('creates a path for the line and area of the graph', (done) => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -53,7 +51,7 @@ describe('MonitoringColumn', () => {
   describe('Computed props', () => {
     it('axisTransform translates an element Y position depending of its height', () => {
       const component = createComponent({
-        columnData: singleRowMetrics[0],
+        graphData: singleRowMetrics[0],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -66,7 +64,7 @@ describe('MonitoringColumn', () => {
 
     it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
       const component = createComponent({
-        columnData: singleRowMetrics[0],
+        graphData: singleRowMetrics[0],
         classType: 'col-md-6',
         updateAspectRatio: false,
         deploymentData,
@@ -81,7 +79,7 @@ describe('MonitoringColumn', () => {
 
   it('sends an event to the eventhub when it has finished resizing', (done) => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
@@ -97,13 +95,13 @@ describe('MonitoringColumn', () => {
 
   it('has a title for the y-axis and the chart legend that comes from the backend', () => {
     const component = createComponent({
-      columnData: singleRowMetrics[0],
+      graphData: singleRowMetrics[0],
       classType: 'col-md-6',
       updateAspectRatio: false,
       deploymentData,
     });
 
-    expect(component.yAxisLabel).toEqual(component.columnData.y_label);
-    expect(component.legendTitle).toEqual(component.columnData.queries[0].label);
+    expect(component.yAxisLabel).toEqual(component.graphData.y_label);
+    expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
   });
 });