diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-04-06 21:30:58 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-04-06 22:51:57 +0300 |
commit | d303b5ba1f6b7c2465bb6d67f42138ca0e37b875 (patch) | |
tree | af34af529e6ee0d5c8c05218db3e97b183fc89e7 /app | |
parent | 89c8bd4ecae77ac0872e5a02f1cc07b04866d460 (diff) |
Added specs for rendered output, changed the background for stable tracks
Diffstat (limited to 'app')
5 files changed, 36 insertions, 7 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue index 6e15f938ab7..fc4b3689dfd 100644 --- a/app/assets/javascripts/monitoring/components/graph/axis.vue +++ b/app/assets/javascripts/monitoring/components/graph/axis.vue @@ -1,5 +1,6 @@ <script> import { convertToSentenceCase } from '~/lib/utils/text_utility'; +import { s__ } from '~/locale'; export default { props: { @@ -74,6 +75,10 @@ export default { yAxisLabelSentenceCase() { return `${convertToSentenceCase(this.yAxisLabel)} (${this.unitOfDisplay})`; }, + + timeString() { + return s__('PrometheusDashboard|Time'); + }, }, mounted() { this.$nextTick(() => { @@ -131,7 +136,7 @@ export default { :y="yPosition" dy=".35em" > - Time + {{ timeString }} </text> </g> </template> diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index e91c1a267fe..da9280cf1f1 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -17,6 +17,13 @@ export default { required: true, }, }, + methods: { + isStable(track) { + return { + 'prometheus-table-row-highlight': track.trackName !== 'Canary' && track.renderCanary, + }; + }, + }, }; </script> <template> @@ -26,6 +33,7 @@ export default { v-for="(series, index) in timeSeries" :key="index" v-if="series.shouldRenderLegend" + :class="isStable(series)" > <td> <strong v-if="series.renderCanary">{{ series.trackName }}</strong> @@ -53,7 +61,9 @@ export default { :track="track" :key="`track-line-${trackIndex}`"/> <td :key="`track-info-${trackIndex}`"> - <track-info :track="track" /> + <track-info + class="legend-metric-title" + :track="track" /> </td> </template> </tr> diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue index d529ac1ceb9..79b322e2e42 100644 --- a/app/assets/javascripts/monitoring/components/graph/track_line.vue +++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue @@ -7,10 +7,10 @@ export default { required: true, }, }, - methods: { - strokeDashArray(type) { - if (type === 'dashed') return '6, 3'; - if (type === 'dotted') return '3, 3'; + computed: { + stylizedLine() { + if (this.track.lineStyle === 'dashed') return '6, 3'; + if (this.track.lineStyle === 'dotted') return '3, 3'; return null; }, }, @@ -22,7 +22,7 @@ export default { width="15" height="6"> <line - :stroke-dasharray="strokeDashArray(track.lineStyle)" + :stroke-dasharray="stylizedLine" :stroke="track.lineColor" stroke-width="4" :x1="0" diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index a81904d5338..8ee1bb03d55 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -767,3 +767,8 @@ $border-color-settings: #e1e1e1; Modals */ $modal-body-height: 134px; + +/* +Prometheus +*/ +$prometheus-table-row-highlight-color: $theme-gray-100; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 9016dd3374f..3a300086fa3 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -321,6 +321,11 @@ vertical-align: top; } } + + .legend-metric-title { + font-size: 12px; + vertical-align: middle; + } } .prometheus-svg-container { @@ -409,3 +414,7 @@ } } } + +.prometheus-table-row-highlight { + background-color: $prometheus-table-row-highlight-color; +} |