diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-11-16 14:07:38 -0600 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-11-20 09:30:01 -0600 |
commit | 5b9495c5db851ec8d1ca2cc6da0da12d6b161130 (patch) | |
tree | f622611ceb4caeda70212a52438a2c9428511a68 /app/assets/javascripts/monitoring/components | |
parent | 29d129d21718f8aa9c7d58a8b403cf91f6d4addd (diff) | |
download | gitlab-ce-5b9495c5db851ec8d1ca2cc6da0da12d6b161130.tar.gz |
Prettify all the things
Diffstat (limited to 'app/assets/javascripts/monitoring/components')
10 files changed, 57 insertions, 205 deletions
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> |