Skip to content

G
gitlab-ce
Commit d3732b55 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Moves tabs into Vue Component

parent d51a5f0b
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 75 deletions
app/assets/javascripts/vue_pipelines_index/index.js
View file @ d3732b55
......@@ -7,13 +7,10 @@ require('../vue_shared/vue_resource_interceptor');
require('./pipelines');
$(() => new Vue({
el: document.querySelector('.vue-pipelines-index'),
el: document.querySelector('#pipelines-list-vue'),
data() {
const project = document.querySelector('.pipelines');
return {
scope: project.dataset.url,
store: new gl.PipelineStore(),
};
},
......@@ -21,9 +18,6 @@ $(() => new Vue({
'vue-pipelines': gl.VuePipelines,
},
template: `
<vue-pipelines
:scope="scope"
:store="store">
</vue-pipelines>
<vue-pipelines :store="store"/>
`,
}));
app/assets/javascripts/vue_pipelines_index/pipelines.js
View file @ d3732b55
......@@ -18,10 +18,11 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
},
data() {
const pipelinesData = document.querySelector('#pipelines-list-vue').dataset;
return {
...pipelinesData,
pipelines: [],
timeLoopInterval: '',
intervalId: '',
apiScope: 'all',
pageInfo: {},
pagenum: 1,
......@@ -39,7 +40,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
if (pagenum) this.pagenum = pagenum;
if (scope) this.apiScope = scope;
this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.endpoint, this.apiScope);
},
beforeUpdate() {
......@@ -49,12 +50,56 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
},
computed: {
canCreatePipelineParsed() {
return gl.utils.convertPermissionToBoolean(this.canCreatePipeline);
},
scope() {
return gl.utils.getParameterByName('scope');
},
shouldRenderErrorState() {
return this.hasError && !this.pageRequest;
},
/**
* The empty state should only be rendered when the request is made to fetch all pipelines
* and none is returned.
*
* @return {Boolean}
*/
shouldRenderEmptyState() {
return !this.hasError && !this.pageRequest && !this.pipelines.length;
return !this.hasError &&
!this.pageRequest && (
!this.pipelines.length && (this.scope === 'all' || this.scope === null)
);
},
shouldRenderTable() {
return !this.hasError &&
!this.pageRequest && this.pipelines.length;
},
/**
* Header tabs should only be rendered when we receive an error or a successfull response with
* pipelines.
*
* @return {Boolean}
*/
shouldRenderTabs() {
return !this.pageRequest && !this.hasError && this.pipelines.length;
},
/**
* Pagination should only be rendered when there is more than one page.
*
* @return {Boolean}
*/
shouldRenderPagination() {
return !this.pageRequest &&
this.pipelines.length &&
this.pageInfo.total > this.pageInfo.perPage;
},
},
......@@ -72,14 +117,80 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
},
},
template: `
<div>
<div class="pipelines realtime-loading" v-if='pageRequest'>
<i class="fa fa-spinner fa-spin"></i>
<div :class="cssClass">
<div class="top-area" v-if="!shouldRenderEmptyState">
<ul
class="nav-links">
<li :class="{ 'active': scope === null || scope === 'all'}">
<a :href="allPath">
All
</a>
<span class="badge js-totalbuilds-count">
</span>
</li>
<li
class="js-pipelines-tab-pending"
:class="{ 'active': scope === 'pending'}">
<a :href="pendingPath">
Pending
</a>
<span class="badge"></span>
</li>
<li
class="js-pipelines-tab-running"
:class="{ 'active': scope === 'running'}">
<a :href="runningPath">Running</a>
<span class="badge"></span>
</li>
<li
class="js-pipelines-tab-finished"
:class="{ 'active': scope === 'finished'}">
<a :href="finishedPath">Finished</a>
<span class="badge"></span>
</li>
<li
class="js-pipelines-tab-branches"
:class="{ 'active': scope === 'branches'}">
<a :href="branchesPath">Branches</a>
</li>
<li
class="js-pipelines-tab-tags"
:class="{ 'active': scope === 'tags'}">
<a :href="tagsPath">Tags</a>
</li>
</ul>
<div class="nav-controls">
<a
v-if="canCreatePipelineParsed"
:href="newPipelinePath"
class="btn btn-create">
Run Pipeline
</a>
<a
v-if="!hasCi"
:href="helpPagePath"
class="btn btn-info">
Get started with Pipelines
</a>
<a
:href="ciLintPath"
class="btn btn-default">
CI Lint
</a>
</div>
</div>
<div class="pipelines realtime-loading"
v-if="pageRequest">
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</div>
<div v-if="shouldRenderEmptyState"
class="row empty-state">
<div class="col-xs-12 pull-right">
<div class="svg-content">
${pipelinesEmptyStateSVG}
......@@ -92,8 +203,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
<p>
Continous Integration can help catch bugs by running your tests automatically,
while Continuous Deployment can help you deliver code to your product environment.
<a href="" class="btn btn-info">
<a :href="helpPagePath" class="btn btn-info">
Get started with Pipelines
</a>
</p>
......@@ -103,7 +213,6 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
<div v-if="shouldRenderErrorState"
class="row empty-state">
<div class="col-xs-12 pull-right">
<div class="svg-content">
${pipelinesErrorStateSVG}
......@@ -117,16 +226,17 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
</div>
</div>
<div class="table-holder" v-if='!pageRequest && pipelines.length'>
<div class="table-holder"
v-if="shouldRenderTable">
<pipelines-table-component :pipelines='pipelines'/>
</div>
<gl-pagination
v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
:pagenum='pagenum'
:change='change'
:count='count.all'
:pageInfo='pageInfo'/>
v-if="shouldRenderPagination"
:pagenum="pagenum"
:change="change"
:count="count.all"
:pageInfo="pageInfo"/>
</div>
`,
});
......
app/views/projects/pipelines/index.html.haml
View file @ d3732b55
......@@ -2,53 +2,20 @@
- page_title "Pipelines"
= render "projects/pipelines/head"
%div{ class: container_class }
.top-area
%ul.nav-links
%li.js-pipelines-tab-all{ class: active_when(@scope.nil?) }>
= link_to project_pipelines_path(@project) do
All
%span.badge.js-totalbuilds-count
= number_with_delimiter(@pipelines_count)
%li.js-pipelines-tab-pending{ class: active_when(@scope == 'pending') }>
= link_to project_pipelines_path(@project, scope: :pending) do
Pending
%span.badge
= number_with_delimiter(@pending_count)
%li.js-pipelines-tab-running{ class: active_when(@scope == 'running') }>
= link_to project_pipelines_path(@project, scope: :running) do
Running
%span.badge.js-running-count
= number_with_delimiter(@running_count)
%li.js-pipelines-tab-finished{ class: active_when(@scope == 'finished') }>
= link_to project_pipelines_path(@project, scope: :finished) do
Finished
%span.badge
= number_with_delimiter(@finished_count)
%li.js-pipelines-tab-branches{ class: active_when(@scope == 'branches') }>
= link_to project_pipelines_path(@project, scope: :branches) do
Branches
%li.js-pipelines-tab-tags{ class: active_when(@scope == 'tags') }>
= link_to project_pipelines_path(@project, scope: :tags) do
Tags
.nav-controls
- if can? current_user, :create_pipeline, @project
= link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
Run pipeline
- unless @repository.gitlab_ci_yml
= link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
= link_to ci_lint_path, class: 'btn btn-default' do
%span CI Lint
.content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
.vue-pipelines-index
= page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('vue_pipelines')
- content_for :page_specific_javascripts do
= page_specific_javascript_bundle_tag("common_vue")
= page_specific_javascript_bundle_tag("vue_pipelines")
#pipelines-list-vue{ data: { endpoint: namespace_project_pipelines_path(@project.namespace, @project, format: :json),
"css-class" => container_class,
"help-page-path" => help_page_path('ci/quick_start/README'),
"new-pipeline-path" => new_namespace_project_pipeline_path(@project.namespace, @project),
"can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
"all-path" => project_pipelines_path(@project),
"pending-path" => project_pipelines_path(@project, scope: :pending),
"running-path" => project_pipelines_path(@project, scope: :running),
"finished-path" => project_pipelines_path(@project, scope: :finished),
"branches-path" => project_pipelines_path(@project, scope: :branches),
"tags-path" => project_pipelines_path(@project, scope: :tags),
"has-ci" => @repository.gitlab_ci_yml,
"ci-lint-path" => ci_lint_path } }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7