Moves tabs into Vue Component
This commit is contained in:
Filipa Lacerda
parent
d51a5f0b4f
commit
d3732b5529
3 changed files with 145 additions and 74 deletions
|
|
@ -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"/>
|
||||
`,
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_bundle_tag("common_vue")
|
||||
= page_specific_javascript_bundle_tag("vue_pipelines")
|
||||
|
||||
%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')
|
||||
#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 } }
|
||||
|
|
|
|||
Loading…
Reference in a new issue