From 5b9495c5db851ec8d1ca2cc6da0da12d6b161130 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Fri, 16 Nov 2018 14:07:38 -0600
Subject: Prettify all the things

---
 .../monitoring/components/dashboard.vue            | 28 +++--------
 .../monitoring/components/empty_state.vue          | 21 ++------
 .../javascripts/monitoring/components/graph.vue    | 55 ++++++---------------
 .../monitoring/components/graph/axis.vue           | 15 +-----
 .../monitoring/components/graph/deployment.vue     | 41 ++++------------
 .../monitoring/components/graph/flag.vue           | 56 +++++-----------------
 .../monitoring/components/graph/legend.vue         | 20 ++------
 .../monitoring/components/graph/path.vue           |  6 +--
 .../monitoring/components/graph/track_line.vue     |  4 +-
 .../monitoring/components/graph_group.vue          | 16 ++-----
 10 files changed, 57 insertions(+), 205 deletions(-)

(limited to 'app/assets/javascripts/monitoring')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 98182d92c2f..218c508a608 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -176,35 +176,19 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="!showEmptyState"
-    :key="forceRedraw"
-    class="prometheus-graphs prepend-top-default"
-  >
+  <div v-if="!showEmptyState" :key="forceRedraw" class="prometheus-graphs prepend-top-default">
     <div class="environments d-flex align-items-center">
       {{ s__('Metrics|Environment') }}
       <div class="dropdown prepend-left-10">
-        <button
-          class="dropdown-menu-toggle"
-          data-toggle="dropdown"
-          type="button"
-        >
-          <span>
-            {{ currentEnvironmentName }}
-          </span>
-          <icon
-            name="chevron-down"
-          />
+        <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
+          <span> {{ currentEnvironmentName }} </span> <icon name="chevron-down" />
         </button>
-        <div 
-          v-if="store.environmentsData.length > 0"  
+        <div
+          v-if="store.environmentsData.length > 0"
           class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
         >
           <ul>
-            <li
-              v-for="environment in store.environmentsData"
-              :key="environment.latest.id"
-            >
+            <li v-for="environment in store.environmentsData" :key="environment.latest.id">
               <a
                 :href="environment.latest.metrics_path"
                 :class="{ 'is-active': environment.latest.name == currentEnvironmentName }"
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 82b9a4b1adb..23e1e734b37 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -89,27 +89,14 @@ export default {
 
 <template>
   <div class="prometheus-state">
-    <div class="state-svg svg-content">
-      <img :src="currentState.svgUrl" />
-    </div>
-    <h4 class="state-title">
-      {{ currentState.title }}
-    </h4>
+    <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
+    <h4 class="state-title">{{ currentState.title }}</h4>
     <p class="state-description">
       {{ currentState.description }}
-      <a
-        v-if="showButtonDescription"
-        :href="settingsPath"
-      >
-        Prometheus server
-      </a>
+      <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
     </p>
     <div class="state-button">
-      <a
-        v-if="currentState.buttonPath"
-        :href="currentState.buttonPath"
-        class="btn btn-success"
-      >
+      <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
         {{ currentState.buttonText }}
       </a>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 5c6e2e09e46..815063237fc 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -247,33 +247,17 @@ export default {
 <template>
   <div
     class="prometheus-graph"
-    @mouseover="showFlagContent = true"
-    @mouseleave="showFlagContent = false"
+    @mouseover="showFlagContent = true;"
+    @mouseleave="showFlagContent = false;"
   >
     <div class="prometheus-graph-header">
-      <h5 class="prometheus-graph-title">
-        {{ graphData.title }}
-      </h5>
-      <div class="prometheus-graph-widgets">
-        <slot></slot>
-      </div>
+      <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
+      <div class="prometheus-graph-widgets"><slot></slot></div>
     </div>
-    <div
-      :style="paddingBottomRootSvg"
-      class="prometheus-svg-container"
-    >
-      <svg
-        ref="baseSvg"
-        :viewBox="outerViewBox"
-      >
-        <g
-          :transform="axisTransform"
-          class="x-axis"
-        />
-        <g
-          class="y-axis"
-          transform="translate(70, 20)"
-        />
+    <div :style="paddingBottomRootSvg" class="prometheus-svg-container">
+      <svg ref="baseSvg" :viewBox="outerViewBox">
+        <g :transform="axisTransform" class="x-axis" />
+        <g class="y-axis" transform="translate(70, 20)" />
         <graph-axis
           :graph-width="graphWidth"
           :graph-height="graphHeight"
@@ -282,15 +266,8 @@ export default {
           :y-axis-label="yAxisLabel"
           :unit-of-display="unitOfDisplay"
         />
-        <svg
-          ref="graphData"
-          :viewBox="innerViewBox"
-          class="graph-data"
-        >
-          <slot
-            name="additionalSvgContent"
-            :graphDrawData="graphDrawData"
-          />
+        <svg ref="graphData" :viewBox="innerViewBox" class="graph-data">
+          <slot name="additionalSvgContent" :graphDrawData="graphDrawData" />
           <graph-path
             v-for="(path, index) in timeSeries"
             :key="index"
@@ -309,11 +286,11 @@ export default {
           />
           <rect
             ref="graphOverlay"
-            :width="(graphWidth - 70)"
-            :height="(graphHeight - 100)"
+            :width="graphWidth - 70"
+            :height="graphHeight - 100"
             class="prometheus-graph-overlay"
             transform="translate(-5, 20)"
-            @mousemove="handleMouseOverGraph($event)"
+            @mousemove="handleMouseOverGraph($event);"
           />
         </svg>
       </svg>
@@ -331,10 +308,6 @@ export default {
         :current-coordinates="currentCoordinates"
       />
     </div>
-    <graph-legend
-      v-if="showLegend"
-      :legend-title="legendTitle"
-      :time-series="timeSeries"
-    />
+    <graph-legend v-if="showLegend" :legend-title="legendTitle" :time-series="timeSeries" />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index 616410ec34f..8f046857a20 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -110,19 +110,8 @@ export default {
     >
       {{ yAxisLabelSentenceCase }}
     </text>
-    <rect
-      :x="xPosition + 60"
-      :y="graphHeight - 80"
-      class="rect-axis-text"
-      width="35"
-      height="50"
-    />
-    <text
-      :x="xPosition + 60"
-      :y="yPosition"
-      class="label-axis-text x-label-text"
-      dy=".35em"
-    >
+    <rect :x="xPosition + 60" :y="graphHeight - 80" class="rect-axis-text" width="35" height="50" />
+    <text :x="xPosition + 60" :y="yPosition" class="label-axis-text x-label-text" dy=".35em">
       {{ timeString }}
     </text>
   </g>
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index a7289ed53e8..bee9784692c 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -31,41 +31,16 @@ export default {
     <g
       v-for="(deployment, index) in deploymentData"
       :key="index"
-      :transform="transformDeploymentGroup(deployment)">
-      <rect
-        :height="calculatedHeight"
-        x="0"
-        y="0"
-        width="3"
-        fill="url(#shadow-gradient)"
-      />
-      <line
-        :y2="calculatedHeight"
-        class="deployment-line"
-        x1="0"
-        y1="0"
-        x2="0"
-        stroke="#000"
-      />
-    </g>
-    <svg
-      height="0"
-      width="0"
+      :transform="transformDeploymentGroup(deployment)"
     >
+      <rect :height="calculatedHeight" x="0" y="0" width="3" fill="url(#shadow-gradient)" />
+      <line :y2="calculatedHeight" class="deployment-line" x1="0" y1="0" x2="0" stroke="#000" />
+    </g>
+    <svg height="0" width="0">
       <defs>
-        <linearGradient
-          id="shadow-gradient"
-        >
-          <stop
-            offset="0%"
-            stop-color="#000"
-            stop-opacity="0.4"
-          />
-          <stop
-            offset="100%"
-            stop-color="#000"
-            stop-opacity="0"
-          />
+        <linearGradient id="shadow-gradient">
+          <stop offset="0%" stop-color="#000" stop-opacity="0.4" />
+          <stop offset="100%" stop-color="#000" stop-opacity="0" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 1720476480e..9d6d1caef80 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -117,59 +117,29 @@ export default {
 </script>
 
 <template>
-  <div
-    :style="cursorStyle"
-    class="prometheus-graph-cursor"
-  >
-    <div
-      v-if="showFlagContent"
-      :class="flagOrientation"
-      class="prometheus-graph-flag popover"
-    >
+  <div :style="cursorStyle" class="prometheus-graph-cursor">
+    <div v-if="showFlagContent" :class="flagOrientation" class="prometheus-graph-flag popover">
       <div class="arrow-shadow"></div>
       <div class="arrow"></div>
       <div class="popover-title">
-        <h5 v-if="deploymentFlagData">
-          Deployed
-        </h5>
-        {{ formatDate }}
-        <strong>{{ formatTime }}</strong>
+        <h5 v-if="deploymentFlagData">Deployed</h5>
+        {{ formatDate }} <strong>{{ formatTime }}</strong>
       </div>
-      <div
-        v-if="deploymentFlagData"
-        class="popover-content deploy-meta-content"
-      >
+      <div v-if="deploymentFlagData" class="popover-content deploy-meta-content">
         <div>
-          <icon
-            :size="12"
-            name="commit"
-          />
-          <a :href="deploymentFlagData.commitUrl">
-            {{ deploymentFlagData.sha.slice(0, 8) }}
-          </a>
+          <icon :size="12" name="commit" />
+          <a :href="deploymentFlagData.commitUrl"> {{ deploymentFlagData.sha.slice(0, 8) }} </a>
         </div>
-        <div
-          v-if="deploymentFlagData.tag"
-        >
-          <icon
-            :size="12"
-            name="label"
-          />
-          <a :href="deploymentFlagData.tagUrl">
-            {{ deploymentFlagData.ref }}
-          </a>
+        <div v-if="deploymentFlagData.tag">
+          <icon :size="12" name="label" />
+          <a :href="deploymentFlagData.tagUrl"> {{ deploymentFlagData.ref }} </a>
         </div>
       </div>
       <div class="popover-content">
         <table class="prometheus-table">
-          <tr
-            v-for="(series, index) in timeSeries"
-            :key="index"
-          >
-            <track-line :track="series"/>
-            <td>
-              {{ series.track }} {{ seriesMetricLabel(index, series) }}
-            </td>
+          <tr v-for="(series, index) in timeSeries" :key="index">
+            <track-line :track="series" />
+            <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
             <td>
               <strong>{{ seriesMetricValue(index, series) }}</strong>
             </td>
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index ef18ae5c2c8..b5211c306a3 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -39,15 +39,9 @@ export default {
           <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
         </td>
         <track-line :track="series" />
-        <td
-          v-if="timeSeries.length > 1"
-          class="legend-metric-title">
-          <track-info
-            v-if="series.metricTag"
-            :track="series" />
-          <track-info
-            v-else
-            :track="series">
+        <td v-if="timeSeries.length > 1" class="legend-metric-title">
+          <track-info v-if="series.metricTag" :track="series" />
+          <track-info v-else :track="series">
             <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
           </track-info>
         </td>
@@ -57,13 +51,9 @@ export default {
           </track-info>
         </td>
         <template v-for="(track, trackIndex) in series.tracksLegend">
-          <track-line
-            :key="`track-line-${trackIndex}`"
-            :track="track"/>
+          <track-line :key="`track-line-${trackIndex}`" :track="track" />
           <td :key="`track-info-${trackIndex}`">
-            <track-info
-              :track="track"
-              class="legend-metric-title" />
+            <track-info :track="track" class="legend-metric-title" />
           </td>
         </template>
       </tr>
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
index a9b7ce586ce..f2c237ec391 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -52,11 +52,7 @@ export default {
       class="circle-path"
       r="3"
     />
-    <path
-      :d="generatedAreaPath"
-      :fill="areaColor"
-      class="metric-area"
-    />
+    <path :d="generatedAreaPath" :fill="areaColor" class="metric-area" />
     <path
       :d="generatedLinePath"
       :stroke="lineColor"
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index e04fd9c1f35..d2ed1ba113e 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -18,9 +18,7 @@ export default {
 </script>
 <template>
   <td>
-    <svg
-      width="16"
-      height="8">
+    <svg width="16" height="8">
       <line
         :stroke-dasharray="stylizedLine"
         :stroke="track.lineColor"
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index 241627f9790..b20ad1802f3 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -15,21 +15,11 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="showPanels"
-    class="card prometheus-panel"
-  >
+  <div v-if="showPanels" class="card prometheus-panel">
     <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="card-body prometheus-graph-group">
-      <slot></slot>
-    </div>
-  </div>
-  <div
-    v-else
-    class="prometheus-graph-group"
-  >
-    <slot></slot>
+    <div class="card-body prometheus-graph-group"><slot></slot></div>
   </div>
+  <div v-else class="prometheus-graph-group"><slot></slot></div>
 </template>
-- 
cgit v1.2.3