diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-01-08 20:01:49 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-01-08 20:01:49 +0000 |
commit | 349d06688fa956732390e15cefc9006a1dd1bf8c (patch) | |
tree | aa5cbdfa94c9113015328e23921f1854380b65ac /app/assets/javascripts/monitoring | |
parent | e2b759a2f483663e0771180de6b97bb9344a56cd (diff) | |
download | gitlab-ce-349d06688fa956732390e15cefc9006a1dd1bf8c.tar.gz |
Fix more eslint rules
Diffstat (limited to 'app/assets/javascripts/monitoring')
3 files changed, 100 insertions, 91 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 61f06486d95..ea5c24efaf9 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -17,6 +17,15 @@ const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select }; export default { + components: { + GraphLegend, + GraphFlag, + GraphDeployment, + GraphPath, + }, + + mixins: [MonitoringMixin], + props: { graphData: { type: Object, @@ -45,8 +54,6 @@ }, }, - mixins: [MonitoringMixin], - data() { return { baseGraphHeight: 450, @@ -74,13 +81,6 @@ }; }, - components: { - GraphLegend, - GraphFlag, - GraphDeployment, - GraphPath, - }, - computed: { outerViewBox() { return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`; @@ -105,6 +105,26 @@ }, }, + watch: { + updateAspectRatio() { + if (this.updateAspectRatio) { + this.graphHeight = 450; + this.graphWidth = 600; + this.measurements = measurements.large; + this.draw(); + eventHub.$emit('toggleAspectRatio'); + } + }, + + hoverData() { + this.positionFlag(); + }, + }, + + mounted() { + this.draw(); + }, + methods: { draw() { const breakpointSize = bp.getBreakpointSize(); @@ -197,26 +217,6 @@ }); // This will select all of the ticks once they're rendered }, }, - - watch: { - updateAspectRatio() { - if (this.updateAspectRatio) { - this.graphHeight = 450; - this.graphWidth = 600; - this.measurements = measurements.large; - this.draw(); - eventHub.$emit('toggleAspectRatio'); - } - }, - - hoverData() { - this.positionFlag(); - }, - }, - - mounted() { - this.draw(); - }, }; </script> @@ -224,24 +224,27 @@ <div class="prometheus-graph" @mouseover="showFlagContent = true" - @mouseleave="showFlagContent = false"> + @mouseleave="showFlagContent = false" + > <h5 class="text-center graph-title"> - {{graphData.title}} + {{ graphData.title }} </h5> <div class="prometheus-svg-container" - :style="paddingBottomRootSvg"> + :style="paddingBottomRootSvg" + > <svg :viewBox="outerViewBox" - ref="baseSvg"> + ref="baseSvg" + > <g class="x-axis" - :transform="axisTransform"> - </g> + :transform="axisTransform" + /> <g class="y-axis" - transform="translate(70, 20)"> - </g> + transform="translate(70, 20)" + /> <graph-legend :graph-width="graphWidth" :graph-height="graphHeight" @@ -256,29 +259,30 @@ <svg class="graph-data" :viewBox="innerViewBox" - ref="graphData"> - <graph-path - v-for="(path, index) in timeSeries" - :key="index" - :generated-line-path="path.linePath" - :generated-area-path="path.areaPath" - :line-style="path.lineStyle" - :line-color="path.lineColor" - :area-color="path.areaColor" - /> - <graph-deployment - :deployment-data="reducedDeploymentData" - :graph-height="graphHeight" - :graph-height-offset="graphHeightOffset" - /> - <rect - class="prometheus-graph-overlay" - :width="(graphWidth - 70)" - :height="(graphHeight - 100)" - transform="translate(-5, 20)" - ref="graphOverlay" - @mousemove="handleMouseOverGraph($event)"> - </rect> + ref="graphData" + > + <graph-path + v-for="(path, index) in timeSeries" + :key="index" + :generated-line-path="path.linePath" + :generated-area-path="path.areaPath" + :line-style="path.lineStyle" + :line-color="path.lineColor" + :area-color="path.areaColor" + /> + <graph-deployment + :deployment-data="reducedDeploymentData" + :graph-height="graphHeight" + :graph-height-offset="graphHeightOffset" + /> + <rect + class="prometheus-graph-overlay" + :width="(graphWidth - 70)" + :height="(graphHeight - 100)" + transform="translate(-5, 20)" + ref="graphOverlay" + @mousemove="handleMouseOverGraph($event)" + /> </svg> </svg> <graph-flag diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue index 8d6393d4ce5..98c25307b74 100644 --- a/app/assets/javascripts/monitoring/components/graph/deployment.vue +++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue @@ -39,33 +39,35 @@ y="0" :height="calculatedHeight" width="3" - fill="url(#shadow-gradient)"> - </rect> + fill="url(#shadow-gradient)" + /> <line class="deployment-line" x1="0" y1="0" x2="0" :y2="calculatedHeight" - stroke="#000"> - </line> + stroke="#000" + /> </g> <svg height="0" - width="0"> + width="0" + > <defs> <linearGradient - id="shadow-gradient"> + id="shadow-gradient" + > <stop offset="0%" stop-color="#000" - stop-opacity="0.4"> - </stop> + stop-opacity="0.4" + /> <stop offset="100%" stop-color="#000" - stop-opacity="0"> - </stop> + 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 62ebc3f419c..07aa6a3e5de 100644 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -1,9 +1,12 @@ <script> import { dateFormat, timeFormat } from '../../utils/date_time_formatters'; import { formatRelevantDigits } from '../../../lib/utils/number_utils'; - import Icon from '../../../vue_shared/components/icon.vue'; + import icon from '../../../vue_shared/components/icon.vue'; export default { + components: { + icon, + }, props: { currentXCoordinate: { type: Number, @@ -52,10 +55,6 @@ }, }, - components: { - Icon, - }, - computed: { formatTime() { return this.deploymentFlagData ? @@ -137,33 +136,34 @@ > <div class="arrow"></div> <div class="popover-title"> - <h5 v-if="this.deploymentFlagData"> + <h5 v-if="deploymentFlagData"> Deployed </h5> - {{formatDate}} at - <strong>{{formatTime}}</strong> + {{ formatDate }} at + <strong>{{ formatTime }}</strong> </div> <div - v-if="this.deploymentFlagData" + v-if="deploymentFlagData" class="popover-content deploy-meta-content" > <div> <icon name="commit" - :size="12"> - </icon> + :size="12" + /> <a :href="deploymentFlagData.commitUrl"> - {{deploymentFlagData.sha.slice(0, 8)}} + {{ deploymentFlagData.sha.slice(0, 8) }} </a> </div> <div - v-if="deploymentFlagData.tag"> + v-if="deploymentFlagData.tag" + > <icon name="label" - :size="12"> - </icon> + :size="12" + /> <a :href="deploymentFlagData.tagUrl"> - {{deploymentFlagData.ref}} + {{ deploymentFlagData.ref }} </a> </div> </div> @@ -174,7 +174,10 @@ :key="index" > <td> - <svg width="15" height="6"> + <svg + width="15" + height="6" + > <line :stroke="series.lineColor" :stroke-dasharray="strokeDashArray(series.lineStyle)" @@ -182,13 +185,13 @@ x1="0" x2="15" y1="2" - y2="2"> - </line> + y2="2" + /> </svg> </td> - <td>{{seriesMetricLabel(index, series)}}</td> + <td>{{ seriesMetricLabel(index, series) }}</td> <td> - <strong>{{seriesMetricValue(series)}}</strong> + <strong>{{ seriesMetricValue(series) }}</strong> </td> </tr> </table> |