diff options
Diffstat (limited to 'app/assets/javascripts')
6 files changed, 64 insertions, 43 deletions
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue index 407af51cb7a..a31c26fb4fc 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_column.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue @@ -7,6 +7,7 @@ import eventHub from '../event_hub'; import measurements from '../utils/measurements'; import { formatRelevantDigits } from '../../lib/utils/number_utils'; + import { timeScaleFormat } from '../utils/date_time_formatters'; import bp from '../../breakpoints'; const bisectDate = d3.bisector(d => d.time).left; @@ -159,6 +160,7 @@ const xAxis = d3.svg.axis() .scale(axisXScale) .ticks(measurements.xTicks) + .tickFormat(timeScaleFormat) .orient('bottom'); const yAxis = d3.svg.axis() @@ -266,14 +268,6 @@ stroke-width="2" transform="translate(-5, 20)"> </path> - <rect - class="prometheus-graph-overlay" - :width="(graphWidth - 70)" - :height="(graphHeight - 100)" - transform="translate(-5, 20)" - ref="graphOverlay" - @mousemove="handleMouseOverGraph($event)"> - </rect> <monitoring-deployment :show-deploy-info="showDeployInfo" :deployment-data="reducedDeploymentData" @@ -289,6 +283,14 @@ :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> </svg> </svg> </div> diff --git a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue index e6432ba3191..dadbcd1aaa6 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue @@ -1,8 +1,5 @@ <script> - import { - dateFormat, - timeFormat, - } from '../constants'; + import { dateFormat, timeFormat } from '../utils/date_time_formatters'; export default { props: { @@ -58,7 +55,7 @@ class="deploy-info" v-if="showDeployInfo"> <g - v-for="(deployment, index) in deploymentData" + v-for="(deployment, index) in deploymentData" :key="index" :class="nameDeploymentClass(deployment)" :transform="transformDeploymentGroup(deployment)"> @@ -92,7 +89,7 @@ width="90" height="58"> </rect> - <g + <g transform="translate(5, 2)"> <text class="deploy-info-text text-metric-bold"> diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/monitoring_flag.vue index 5a0e50fcab3..61cbeeebb17 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_flag.vue @@ -1,8 +1,5 @@ <script> - import { - dateFormat, - timeFormat, - } from '../constants'; + import { dateFormat, timeFormat } from '../utils/date_time_formatters'; export default { props: { @@ -72,7 +69,7 @@ r="5" transform="translate(-5, 20)"> </circle> - <svg + <svg class="rect-text-metric" :x="currentFlagPosition" y="0"> diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js deleted file mode 100644 index c3a8da52404..00000000000 --- a/app/assets/javascripts/monitoring/constants.js +++ /dev/null @@ -1,4 +0,0 @@ -import d3 from 'd3'; - -export const dateFormat = d3.time.format('%b %d, %Y'); -export const timeFormat = d3.time.format('%H:%M%p'); diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js new file mode 100644 index 00000000000..26bcaa02511 --- /dev/null +++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js @@ -0,0 +1,15 @@ +import d3 from 'd3'; + +export const dateFormat = d3.time.format('%b %-d, %Y'); +export const timeFormat = d3.time.format('%-I:%M%p'); + +export const timeScaleFormat = d3.time.format.multi([ + ['.%L', d => d.getMilliseconds()], + [':%S', d => d.getSeconds()], + ['%-I:%M', d => d.getMinutes()], + ['%-I %p', d => d.getHours()], + ['%a %-d', d => d.getDay() && d.getDate() !== 1], + ['%b %-d', d => d.getDate() !== 1], + ['%B', d => d.getMonth()], + ['%Y', () => true], +]); diff --git a/app/assets/javascripts/pipelines/components/navigation_tabs.vue b/app/assets/javascripts/pipelines/components/navigation_tabs.vue index d2f6d47f043..73f7e3a0cad 100644 --- a/app/assets/javascripts/pipelines/components/navigation_tabs.vue +++ b/app/assets/javascripts/pipelines/components/navigation_tabs.vue @@ -1,23 +1,29 @@ <script> -export default { - name: 'PipelineNavigationTabs', - props: { - scope: { - type: String, - required: true, + export default { + name: 'PipelineNavigationTabs', + props: { + scope: { + type: String, + required: true, + }, + count: { + type: Object, + required: true, + }, + paths: { + type: Object, + required: true, + }, }, - count: { - type: Object, - required: true, + mounted() { + $(document).trigger('init.scrolling-tabs'); }, - paths: { - type: Object, - required: true, + methods: { + shouldRenderBadge(count) { + // 0 is valid in a badge, but evaluates to false, we need to check for undefined + return count !== undefined; + }, }, - }, - mounted() { - $(document).trigger('init.scrolling-tabs'); - }, }; </script> <template> @@ -27,7 +33,9 @@ export default { :class="{ active: scope === 'all'}"> <a :href="paths.allPath"> All - <span class="badge js-totalbuilds-count"> + <span + v-if="shouldRenderBadge(count.all)" + class="badge js-totalbuilds-count"> {{count.all}} </span> </a> @@ -37,7 +45,9 @@ export default { :class="{ active: scope === 'pending'}"> <a :href="paths.pendingPath"> Pending - <span class="badge"> + <span + v-if="shouldRenderBadge(count.pending)" + class="badge"> {{count.pending}} </span> </a> @@ -47,7 +57,9 @@ export default { :class="{ active: scope === 'running'}"> <a :href="paths.runningPath"> Running - <span class="badge"> + <span + v-if="shouldRenderBadge(count.running)" + class="badge"> {{count.running}} </span> </a> @@ -57,7 +69,9 @@ export default { :class="{ active: scope === 'finished'}"> <a :href="paths.finishedPath"> Finished - <span class="badge"> + <span + v-if="shouldRenderBadge(count.finished)" + class="badge"> {{count.finished}} </span> </a> |