Merge branch 'ci-tables-ui-improvements' into 'master'

Pipelines tables UI improvements Closes #28383, #26611, #21788, #27048, and #27828 See merge request !9442

Merge branch 'ci-tables-ui-improvements' into 'master'
Pipelines tables UI improvements Closes #28383, #26611, #21788, #27048, and #27828 See merge request !9442
737ea1a8 · Annabel Dunstone Gray · a20ce16a · 729d2ea0 · 737ea1a8 · 737ea1a8
Commit 737ea1a8 authored Feb 27, 2017 by Annabel Dunstone Gray
4 changed files
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -33,18 +33,16 @@
    },
    template: `
      <td class="pipeline-actions hidden-xs">
-        <div class="controls pull-right">
+        <div class="pull-right">
-          <div class="btn-group inline">
          <div class="btn-group">
+            <div class="btn-group" v-if="actions">
              <button
-                v-if='actions'
                class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
                data-toggle="dropdown"
                title="Manual job"
                data-placement="top"
-                aria-label="Manual job"
+                aria-label="Manual job">
-              >
+                <span v-html="svgs.iconPlay" aria-hidden="true"></span>
-                <span v-html='svgs.iconPlay' aria-hidden="true"></span>
                <i class="fa fa-caret-down" aria-hidden="true"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-align-right">
@@ -52,23 +50,21 @@
                  <a
                    rel="nofollow"
                    data-method="post"
-                    :href='action.path'
+                    :href="action.path">
-                  >
+                    <span v-html="svgs.iconPlay" aria-hidden="true"></span>
-                    <span v-html='svgs.iconPlay' aria-hidden="true"></span>
                    <span>{{action.name}}</span>
                  </a>
                </li>
              </ul>
            </div>
-            <div class="btn-group">
+            <div class="btn-group" v-if="artifacts">
              <button
-                v-if='artifacts'
                class="dropdown-toggle btn btn-default build-artifacts has-tooltip js-pipeline-dropdown-download"
                title="Artifacts"
                data-placement="top"
                data-toggle="dropdown"
-                aria-label="Artifacts"
+                aria-label="Artifacts">
-              >
                <i class="fa fa-download" aria-hidden="true"></i>
                <i class="fa fa-caret-down" aria-hidden="true"></i>
              </button>
@@ -76,20 +72,16 @@
                <li v-for='artifact in pipeline.details.artifacts'>
                  <a
                    rel="nofollow"
-                    download
+                    :href="artifact.path">
-                    :href='artifact.path'
-                  >
                    <i class="fa fa-download" aria-hidden="true"></i>
                    <span>{{download(artifact.name)}}</span>
                  </a>
                </li>
              </ul>
            </div>
-          </div>
+            <div class="btn-group" v-if="pipeline.flags.retryable">
-          <div class="cancel-retry-btns inline">
              <a
-              v-if='pipeline.flags.retryable'
+                class="btn btn-default btn-retry has-tooltip"
-              class="btn has-tooltip"
                title="Retry"
                rel="nofollow"
                data-method="post"
@@ -99,9 +91,9 @@
                aria-label="Retry">
                <i class="fa fa-repeat" aria-hidden="true"></i>
              </a>
+            </div>
+            <div class="btn-group" v-if="pipeline.flags.cancelable">
              <a
-              v-if='pipeline.flags.cancelable'
-              @click="confirmAction"
                class="btn btn-remove has-tooltip"
                title="Cancel"
                rel="nofollow"
@@ -114,6 +106,7 @@
              </a>
            </div>
          </div>
+        </div>
      </td>
    `,
  });

--- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -54,7 +54,7 @@ require('../lib/utils/datetime_utility');
      },
    },
    template: `
-      <td>
+      <td class="pipelines-time-ago">
        <p class="duration" v-if='duration'>
          <span v-html='svgs.iconTimer'></span>
          {{duration}}
@@ -65,8 +65,7 @@ require('../lib/utils/datetime_utility');
            data-toggle="tooltip"
            data-placement="top"
            data-container="body"
-            :data-original-title='localTimeFinished'
+            :data-original-title='localTimeFinished'>
-          >
            {{timeStopped.words}}
          </time>
        </p>

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -13,21 +13,16 @@
    white-space: nowrap;
  }
-  .commit-title {
+  .table-holder {
-    margin: 0;
+    width: 100%;
-  }
+    overflow: auto;
-  .controls {
-    white-space: nowrap;
  }
-  .btn {
+  .commit-title {
-    margin: 4px;
+    margin: 0;
  }
  .table.ci-table {
-    min-width: 1200px;
-    table-layout: fixed;
    .label {
      margin-bottom: 3px;
@@ -37,16 +32,72 @@
      color: $black;
    }
-    .pipeline-date,
+    .stage-cell {
-    .pipeline-status {
+      min-width: 130px; // Guarantees we show at least 4 stages in line
-      width: 10%;
+      width: 20%;
+    }
+    .pipelines-time-ago {
+      text-align: right;
    }
-    .pipeline-info,
-    .pipeline-commit,
-    .pipeline-stages,
    .pipeline-actions {
-      width: 20%;
+      padding-right: 0;
+      min-width: 170px; //Guarantees buttons don't break in several lines.
+      .btn-default {
+        color: $gl-text-color-secondary;
+      }
+      .btn.btn-retry:hover,
+      .btn.btn-retry:focus {
+        border-color: $gray-darkest;
+        background-color: $white-normal;
+      }
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
+      .dropdown-menu {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+      .dropdown-toggle,
+      .dropdown-menu {
+        color: $gl-text-color-secondary;
+        .fa {
+          color: $gl-text-color-secondary;
+          font-size: 14px;
+        }
+        svg,
+        .fa {
+          margin-right: 0;
+        }
+      }
+      .btn-group {
+        &.open {
+          .btn-default {
+            background-color: $white-normal;
+            border-color: $border-white-normal;
+          }
+        }
+        .btn {
+          .icon-play {
+            height: 13px;
+            width: 12px;
+          }
+        }
+      }
+      .tooltip {
+        white-space: nowrap;
+      }
    }
  }
 }
@@ -61,28 +112,11 @@
  }
 }
-.content-list.pipelines .table-holder {
-  min-height: 300px;
-}
-.pipeline-holder {
-  width: 100%;
-  overflow: auto;
-}
 .table.ci-table {
-  min-width: 900px;
-  &.pipeline {
+  &.builds-page tr {
-    min-width: 650px;
-  }
-  &.builds-page {
-    tr {
    height: 71px;
  }
-  }
  tr {
    th {
@@ -99,7 +133,7 @@
    }
    .commit-link {
-      padding: 9px 8px 10px;
+      padding: 9px 8px 10px 2px;
    }
  }
@@ -206,73 +240,9 @@
    }
  }
-  .pipeline-actions {
+  .build-link a {
-    min-width: 140px;
-    .btn {
-      margin: 0;
-      color: $gl-text-color-secondary;
-    }
-    .cancel-retry-btns {
-      vertical-align: middle;
-      .btn:not(:first-child) {
-        margin-left: 8px;
-      }
-    }
-    .dropdown-menu {
-      max-height: 250px;
-      overflow-y: auto;
-    }
-    .dropdown-toggle,
-    .dropdown-menu {
-      color: $gl-text-color-secondary;
-      .fa {
-        color: $gl-text-color-secondary;
-        font-size: 14px;
-      }
-      svg,
-      .fa {
-        margin-right: 0;
-      }
-    }
-    .btn-remove {
-      color: $white-light;
-    }
-    .btn-group {
-      &.open {
-        .btn-default {
-          background-color: $white-normal;
-          border-color: $border-white-normal;
-        }
-      }
-      .btn {
-        .icon-play {
-          height: 13px;
-          width: 12px;
-        }
-      }
-    }
-    .tooltip {
-      white-space: nowrap;
-    }
-  }
-  .build-link {
-    a {
    color: $gl-text-color;
  }
-  }
  .btn-group.open .dropdown-toggle {
    box-shadow: none;
@@ -335,32 +305,9 @@
 }
 .tab-pane {
-  &.pipelines {
+  &.builds .ci-table tr {
-    .ci-table {
-      min-width: 900px;
-    }
-    .content-list.pipelines {
-      overflow: auto;
-    }
-    .stage {
-      max-width: 100px;
-      width: 100px;
-    }
-    .pipeline-actions {
-      min-width: initial;
-    }
-  }
-  &.builds {
-    .ci-table {
-      tr {
    height: 71px;
  }
-    }
-  }
 }
 // Pipeline graph

--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
- status = pipeline.status
- show_commit = local_assigns.fetch(:show_commit, true)
- show_branch = local_assigns.fetch(:show_branch, true)
-%tr.commit
-  %td.commit-link
-    = render 'ci/status/badge', status: pipeline.detailed_status(current_user)
-  %td
-    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
-      %span.pipeline-id ##{pipeline.id}
-    %span by
-    - if pipeline.user
-      = user_avatar(user: pipeline.user, size: 20)
-    - else
-      %span.api.monospace API
-    - if pipeline.latest?
-      %span.label.label-success.has-tooltip{ title: 'Latest pipeline for this branch' } latest
-    - if pipeline.triggered?
-      %span.label.label-primary triggered
-    - if pipeline.yaml_errors.present?
-      %span.label.label-danger.has-tooltip{ title: "#{pipeline.yaml_errors}" } yaml invalid
-    - if pipeline.builds.any?(&:stuck?)
-      %span.label.label-warning stuck
-  %td.branch-commit
-    - if pipeline.ref && show_branch
-      .icon-container
-        = pipeline.tag? ? icon('tag') : icon('code-fork')
-      = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace branch-name"
-    - if show_commit
-      .icon-container.commit-icon
-        = custom_icon("icon_commit")
-      = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "commit-id monospace"
-    %p.commit-title
-      - if commit = pipeline.commit
-        = author_avatar(commit, size: 20)
-        = link_to_gfm truncate(commit.title, length: 60, escape: false), namespace_project_commit_path(pipeline.project.namespace, pipeline.project, commit.id), class: "commit-row-message"
-      - else
-        Cant find HEAD commit for this branch
-  %td
-    = render 'shared/mini_pipeline_graph', pipeline: pipeline, klass: 'js-mini-pipeline-graph'
-  %td
-    - if pipeline.duration
-      %p.duration
-        = custom_icon("icon_timer")
-        = duration_in_numbers(pipeline.duration)
-    - if pipeline.finished_at
-      %p.finished-at
-        = icon("calendar")
-        #{time_ago_with_tooltip(pipeline.finished_at, short_format: false)}
-  %td.pipeline-actions.hidden-xs
-    .controls.pull-right
-      - artifacts = pipeline.builds.latest.with_artifacts_not_expired
-      - actions = pipeline.manual_actions
-      - if artifacts.present? || actions.any?
-        .btn-group.inline
-          - if actions.any?
-            .btn-group
-              %button.dropdown-toggle.btn.btn-default.has-tooltip.js-pipeline-dropdown-manual-actions{ type: 'button', title: 'Manual pipeline', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Manual pipeline' }
-                = custom_icon('icon_play')
-                = icon('caret-down', 'aria-hidden' => 'true')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - actions.each do |build|
-                  %li
-                    = link_to play_namespace_project_build_path(pipeline.project.namespace, pipeline.project, build), method: :post, rel: 'nofollow' do
-                      = custom_icon('icon_play')
-                      %span= build.name
-          - if artifacts.present?
-            .btn-group
-              %button.dropdown-toggle.btn.btn-default.build-artifacts.has-tooltip.js-pipeline-dropdown-download{ type: 'button', title: 'Artifacts', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Artifacts' }
-                = icon("download")
-                = icon('caret-down')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - artifacts.each do |build|
-                  %li
-                    = link_to download_namespace_project_build_artifacts_path(pipeline.project.namespace, pipeline.project, build), rel: 'nofollow', download: '' do
-                      = icon("download")
-                      %span Download '#{build.name}' artifacts
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        .cancel-retry-btns.inline
-          - if pipeline.retryable?
-            = link_to retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn has-tooltip', title: 'Retry', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Retry' , method: :post do
-              = icon("repeat")
-          - if pipeline.cancelable?
-            = link_to cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-remove has-tooltip', title: 'Cancel', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Cancel' , method: :post do
-              = icon("remove")