rename and organize vue components

app/assets/javascripts/monitoring/components/monitoring.vue → app/assets/javascripts/monitoring/components/dashboard.vue

@@ -3,8 +3,8 @@
   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 GraphRow from './graph_row.vue';
+  import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
 
@@ -31,8 +31,8 @@
     },
 
     components: {
-      monitoringRow,
-      monitoringState,
+      GraphRow,
+      EmptyState,
     },
 
     methods: {
@@ -94,7 +94,6 @@
           this.updatedAspectRatios = 0;
         }
       },
-
     },
 
     created() {
@@ -132,7 +131,7 @@
             <h4>{{groupData.group}}</h4>
           </div>
           <div class="panel-body">
-            <monitoring-row
+            <graph-row
               v-for="(row, index) in groupData.metrics"
               :key="index"
               :row-data="row"
@@ -144,7 +143,7 @@
       </div>
     </div>
   </div>
-  <monitoring-state
+  <empty-state
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"

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_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() {
@@ -29,9 +29,9 @@
 
 <template>
   <div class="prometheus-row row">
-    <monitoring-column
-      v-for="(column, index) in rowData"
-      :column-data="column"
+    <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'),
 }));