diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-31 21:09:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-31 21:09:11 +0300 |
commit | 0434f38ef1dce4fe640fe1e4542235746ceb943c (patch) | |
tree | 3affe5902c9da74441dfbf5069f76c023b5cd03a /app/assets/javascripts/projects | |
parent | c27acb1d376f7127cd33eadcc8f5683ed55262bc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
4 files changed, 146 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue new file mode 100644 index 00000000000..4bd72c405ee --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue @@ -0,0 +1,72 @@ +<script> +import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import StatisticsList from './statistics_list.vue'; +import { + CHART_CONTAINER_HEIGHT, + INNER_CHART_HEIGHT, + X_AXIS_LABEL_ROTATION, + X_AXIS_TITLE_OFFSET, +} from '../constants'; + +export default { + components: { + StatisticsList, + GlColumnChart, + }, + props: { + counts: { + type: Object, + required: true, + }, + timesChartData: { + type: Object, + required: true, + }, + }, + data() { + return { + timesChartTransformedData: { + full: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values), + }, + }; + }, + methods: { + mergeLabelsAndValues(labels, values) { + return labels.map((label, index) => [label, values[index]]); + }, + }, + chartContainerHeight: CHART_CONTAINER_HEIGHT, + timesChartOptions: { + height: INNER_CHART_HEIGHT, + xAxis: { + axisLabel: { + rotate: X_AXIS_LABEL_ROTATION, + }, + nameGap: X_AXIS_TITLE_OFFSET, + }, + }, +}; +</script> +<template> + <div> + <h4 class="my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4> + <div class="row"> + <div class="col-md-6"> + <statistics-list :counts="counts" /> + </div> + <div class="col-md-6"> + <strong> + {{ __('Duration for the last 30 commits') }} + </strong> + <gl-column-chart + :height="$options.chartContainerHeight" + :option="$options.timesChartOptions" + :data="timesChartTransformedData" + :y-axis-title="__('Minutes')" + :x-axis-title="__('Commit')" + x-axis-type="category" + /> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue new file mode 100644 index 00000000000..cd9e464c5ac --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue @@ -0,0 +1,30 @@ +<script> +export default { + props: { + counts: { + type: Object, + required: true, + }, + }, +}; +</script> +<template> + <ul> + <li> + <span>{{ s__('PipelineCharts|Total:') }}</span> + <strong>{{ n__('1 pipeline', '%d pipelines', counts.total) }}</strong> + </li> + <li> + <span>{{ s__('PipelineCharts|Successful:') }}</span> + <strong>{{ n__('1 pipeline', '%d pipelines', counts.success) }}</strong> + </li> + <li> + <span>{{ s__('PipelineCharts|Failed:') }}</span> + <strong>{{ n__('1 pipeline', '%d pipelines', counts.failed) }}</strong> + </li> + <li> + <span>{{ s__('PipelineCharts|Success ratio:') }}</span> + <strong>{{ counts.successRatio }}%</strong> + </li> + </ul> +</template> diff --git a/app/assets/javascripts/projects/pipelines/charts/constants.js b/app/assets/javascripts/projects/pipelines/charts/constants.js new file mode 100644 index 00000000000..eeb29370e51 --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/constants.js @@ -0,0 +1,7 @@ +export const CHART_CONTAINER_HEIGHT = 300; + +export const INNER_CHART_HEIGHT = 200; + +export const X_AXIS_LABEL_ROTATION = 45; + +export const X_AXIS_TITLE_OFFSET = 60; diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js new file mode 100644 index 00000000000..b0f5f549980 --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/index.js @@ -0,0 +1,37 @@ +import Vue from 'vue'; +import ProjectPipelinesCharts from './components/app.vue'; + +export default () => { + const el = document.querySelector('#js-project-pipelines-charts-app'); + const { + countsFailed, + countsSuccess, + countsTotal, + successRatio, + timesChartLabels, + timesChartValues, + } = el.dataset; + + return new Vue({ + el, + name: 'ProjectPipelinesChartsApp', + components: { + ProjectPipelinesCharts, + }, + render: createElement => + createElement(ProjectPipelinesCharts, { + props: { + counts: { + failed: countsFailed, + success: countsSuccess, + total: countsTotal, + successRatio, + }, + timesChartData: { + labels: JSON.parse(timesChartLabels), + values: JSON.parse(timesChartValues), + }, + }, + }), + }); +}; |