diff options
Diffstat (limited to 'app')
4 files changed, 41 insertions, 95 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 3e43c64139a..71463bd1748 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -5,8 +5,7 @@ * * Used in a hierarchical structure to show folders with children * in a table. - * Based on [Tree View](https://vuejs.org/examples/tree-view.html) - * The template used in this Component is non recursive. + * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html) * * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539) * for more information. @@ -17,7 +16,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - gl.environmentsList.EnvironmentItem = Vue.extend({ + gl.environmentsList.EnvironmentItem = Vue.component("environment-item", { template: '#environment-item-template', @@ -25,7 +24,7 @@ model: Object }, - data: function () { + data () { return { open: false }; @@ -40,7 +39,7 @@ * * @returns {Number} The length of the children array */ - isFolder: function () { + isFolder () { return this.model.children && this.model.children.length } }, @@ -50,7 +49,7 @@ /** * Toggles the visibility of a folders' children. */ - toggle: function () { + toggle () { if (this.isFolder) { this.open = !this.open; } diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6 index 9d4affdb2b6..027dc7fb211 100644 --- a/app/assets/javascripts/environments/environments_bundle.js.es6 +++ b/app/assets/javascripts/environments/environments_bundle.js.es6 @@ -20,7 +20,7 @@ $(() => { el: '#environments-list-view', components: { - 'environment-item': gl.environmentsList.EnvironmentItem + 'item': gl.environmentsList.EnvironmentItem }, data: { diff --git a/app/views/projects/environments/components/_environment.html.haml b/app/views/projects/environments/components/_environment.html.haml index ae080137361..76d921e9fd3 100644 --- a/app/views/projects/environments/components/_environment.html.haml +++ b/app/views/projects/environments/components/_environment.html.haml @@ -1,102 +1,52 @@ %script#environment-item-template{ "type"=> "text/x-template" } - %tr.environment - %td.folder-name{ "@click" => "toggle" } - %a{ "v-if" => "!isFolder", + %tr + %td.folder-name + %a{ "v-if" => "!isFolder", ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id" } {{model.name}} + %span{ "v-if" => "isFolder", + "@click" => "toggle" } - %span{ "v-if" => "isFolder" } - %i.folder-icon{ "v-show" => "open" } - = icon("caret-down") - - %i.folder-icon{ "v-show" => "!open" } - = icon("caret-right") + %i.folder-icon{ "v-show" => "open"} + =icon ("caret-down") + %i.folder-icon{ "v-show" => "!open"} + =icon("caret-right") {{model.name}} - + %td.deployment-column - %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid" } - = precede '#' do + %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid"} + = precede "#" do {{model.last_deployment.iid}} - - %span{ "v-if" => "model.last_deployment.user" } + + %span{ "v-if" => "model.last_deployment.user"} by %a{":href" => "'/' + model.last_deployment.user.username"} - - %img.avatar.has-tooltip.s20{ ":src" => "model.last_deployment.user.avatar_url", - ":alt" => "model.last_deployment.user.username + ' avatar'", + %img.avatar.has_tooltip.s20{ ":src" => "model.last_deployment.user.avatar_url", + ":alt" => "model.last_deployment.user.username + 'avatar'", ":title" => "model.last_deployment.user.username", - data: { container: 'body'}, - width: 20, height: 20 } - + data: {container: "body"}, + width: 20, height: 20} + %td %a.build-link{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.deployable", - ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id" } - {{model.last_deployment.deployable.name}} - = precede '#' do - ({{model.last_deployment.deployable.id}}) - + ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id"} + {{model.last_deployment.deployble.name}} + = precede "#" do + {{model.last_deployment.deployable.id}} + %td - %a{ "v-if" => "!isFolder && model.last_deployment" } - -# = render "projects/deployments/commit", deployment: "{{model.last_deployment}}" + %a{ "v-if" => "!isFolder && model.last_deployment"} + commit message goes here %p.commit-title{ "v-if" => "!isFolder && !model.last_deployment"} No deployments yet - - %td - %span{ "v-if" => "!isFolder && model.last_deployment" } + + %td + %span{ "v-if" => "!isFolder && model.last_deployment"} {{model.last_deployment.created_at}} - + %td.hidden-xs .pull-right{ "v-if" => "!isFolder"} - -# = render "projects/environments/external_url", environment: "{{model}}" - -# = render "projects/deployments/actions", deployment: "{{model.last_deployment}}" - -# = render "projects/environments/stop", environment: "{{model}}" - -# = render "projects/deployments/rollback", deployment: "{{model.last_deployment}}" - - %tr{ "v-show" => "open", - "v-if"=>"isFolder", - "v-for" => "child in model.children", - ":model" => "child" } - - %td - %a.children-name{ ":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + child.id" } - {{child.name}} - - %td.deployment-column - %span{ "v-if" => "child.last_deployment && child.last_deployment.iid" } - = precede '#' do - {{child.last_deployment.iid}} - - %span{ "v-if" => "child.last_deployment.user" } - by - %a{":href" => "'/' + child.last_deployment.user.username"} - - %img.avatar.has-tooltip.s20{ ":src" => "child.last_deployment.user.avatar_url", - ":alt" => "child.last_deployment.user.username + ' avatar'", - ":title" => "child.last_deployment.user.username", - data: { container: 'body'}, - width: 20, height: 20 } - - %td - %a.build-link{ "v-if" => "child.last_deployment && child.last_deployment.deployable", - ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + child.last_deployment.deployable.id" } - {{child.last_deployment.deployable.name}} - = precede '#' do - ({{child.last_deployment.deployable.id}}) - - %td - %a{ "v-if" => "child.last_deployment" } - -# = render "projects/deployments/commit", deployment: "{{child.last_deployment}}" - %p.commit-title{ "v-if" => "!child.last_deployment"} - No deployments yet - - %td - %span{ "v-if" => "child.last_deployment" } - {{child.last_deployment.created_at}} - - %td.hidden-xs - .pull-right - -# = render "projects/environments/external_url", environment: "{{child}}" - -# = render "projects/deployments/actions", deployment: "{{child.last_deployment}}" - -# = render "projects/environments/stop", environment: "{{child}}" - -# = render "projects/deployments/rollback", deployment: "{{child.last_deployment}}" + actions will go here + + %tr{"v-if" => "open && isFolder", "is" => "environment-item", "v-for" => "model in model.children", ":model" => "model"} diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml index 34f38a2ee32..a8667d88e7b 100644 --- a/app/views/projects/environments/index.html.haml +++ b/app/views/projects/environments/index.html.haml @@ -41,7 +41,7 @@ = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do New environment - .table-holder{ "v-if" => "!loading && state.environments.length" } + .table-holder{ "v-if" => "!loading && state.environments" } %table.table.ci-table.environments %thead %th Environment @@ -51,9 +51,6 @@ %th %th.hidden-xs %tbody - %tr{ "is"=>"environment-item", - "inline-template" => true, - "v-for" => "environment in state.environments", - ":model" => "environment" } + %tr{"is" => "environment-item", "v-for" => "model in state.environments", ":model" => "model"} =render "projects/environments/components/environment" |