refactor template formatting according to guidelines

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

@@ -118,26 +118,22 @@
     },
   };
 </script>
+
 <template>
-  <div 
-    class="prometheus-graphs" 
-    v-if="!showEmptyState">
-    <div 
+  <div v-if="!showEmptyState" class="prometheus-graphs">
+    <div
       class="row"
       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">
+      :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">
+          <div class="panel-body">
             <monitoring-row
-              v-for="(row, index) in groupData.metrics" 
+              v-for="(row, index) in groupData.metrics"
               :key="index"
               :row-data="row"
               :update-aspect-ratio="updateAspectRatio"
@@ -148,7 +144,7 @@
       </div>
     </div>
   </div>
-  <monitoring-state 
+  <monitoring-state
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"

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

@@ -26,11 +26,11 @@
     },
   };
 </script>
+
 <template>
-  <div 
-    class="prometheus-row row">
+  <div class="prometheus-row row">
     <monitoring-column
-      v-for="(column, index) in rowData" 
+      v-for="(column, index) in rowData"
       :column-data="column"
       :class-type="bootstrapClass"
       :key="index"

app/assets/javascripts/monitoring/components/monitoring_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>