Combine components for better legibility

50afa5fd · Alfredo Sumaran · f78935ea · f78935ea · f78935ea · f78935ea
12 changed file
--- a/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-
-  /*
-  `build` prop should have
-
-  - Build name/title
-  - Build ID
-  - Build URL
-  - Build branch
-  - Build branch URL
-  - Build short SHA
-  - Build commit URL
-  - Build date
-  - Total time
-  */
-
-  global.cycleAnalytics.ItemBuildComponent = Vue.extend({
-    props: {
-      build: Object,
-    },
-    template: `
-      <div class="item-build-component">
-        <div class="item-details">
-          <h5 class="item-title">
-            <span class="icon-build-status">
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
-                <g fill="#31AF64" fill-rule="evenodd">
-                  <path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/>
-                  <path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/>
-                </g>
-              </svg>
-            </span>
-            <a :href="build.url"  class="item-build-name">
-              {{ build.name }}
-            </a>
-            &middot;
-            <a href="#" class="pipeline-id">
-              #{{ build.id }}
-            </a>
-            <i class="fa fa-code-fork"></i>
-            <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
-            <span class="icon-branch">
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
-                <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/>
-              </svg>
-            </span>
-            <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a>
-          </h5>
-          <span>
-            <a :href="build.url" class="issue-date">
-              {{ build.date }}
-            </a>
-          </span>
-        </div>
-        <div class="item-time">
-          <total-time :time="build.totalTime"></total-time>
-        </div>
-      </div>
-    `,
-  });
-}(window.gl || (window.gl = {})));
--- a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-
-  /*
-  `issue` prop should have
-
-  - Issue title
-  - Issue URL
-  - Issue ID
-  - Issue date created
-  - Issue author
-  - Issue author profile URL
-  - Issue author avatar URL
-  - Total time
-  */
-
-  global.cycleAnalytics.ItemIssueComponent = Vue.extend({
-    props: {
-      issue: Object,
-    },
-    template: `
-      <div>
-        <div class="item-details">
-          <img class="avatar" :src="issue.author.avatarUrl">
-          <h5 class="item-title issue-title">
-            <a class="issue-title" :href="issue.url">
-              {{ issue.title }}
-            </a>
-          </h5>
-          <a :href="issue.url" class="issue-link">
-            #{{ issue.iid }}
-          </a>
-          &middot;
-          <span>
-            Opened
-            <a :href="issue.url" class="issue-date">
-              {{ issue.createdAt }}
-            </a>
-          </span>
-          <span>
-          by
-          <a :href="issue.author.webUrl" class="issue-author-link">
-            {{ issue.author.name }}
-          </a>
-          </span>
-        </div>
-        <div class="item-time">
-          <total-time :time="issue.totalTime"></total-time>
-        </div>
-      </div>
-    `,
-  });
-})(window.gl || (window.gl = {}));
--- a/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6
-((global) => {
-  global.cycleAnalytics = global.cycleAnalytics || {};
-
-  /*
-  `mergeRequest` prop should have
-
-  - MR title
-  - MR URL
-  - MR ID
-  - MR date opened
-  - MR author
-  - MR author profile URL
-  - MR author avatar URL
-  - Total time
-  */
-
-  global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({
-    props: {
-      mergeRequest: Object,
-    },
-    template: `
-      <div>
-        <div class="item-details">
-          <img class="avatar" :src="mergeRequest.author.avatarUrl">
-          <h5 class="item-title merge-merquest-title">
-            <a :href="mergeRequest.url">
-              {{ mergeRequest.title }}
-            </a>
-          </h5>
-          <a :href="mergeRequest.url" class="issue-link">
-            !{{ mergeRequest.iid }}
-          </a>
-          &middot;
-          <span>
-            Opened
-            <a :href="mergeRequest.url" class="issue-date">
-              {{ mergeRequest.createdAt }}
-            </a>
-          </span>
-          <span>
-          by
-          <a :href="mergeRequest.author.webUrl" class="issue-author-link">
-            {{ mergeRequest.author.name }}
-          </a>
-          </span>
-        </div>
-        <div class="item-time">
-          <total-time :time="mergeRequest.totalTime"></total-time>
-        </div>
-      </div>
-    `,
-  });
-}(window.gl || (window.gl = {})));
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageCodeComponent = Vue.extend({
-    components: {
-      'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,8 +13,30 @@
          {{ stage.description }}
        </div>
        <ul class="stage-event-list">
-          <li class="stage-event-item" v-for="mergeRequest in items">
-            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          <li v-for="mergeRequest in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="mergeRequest.author.avatarUrl">
+              <h5 class="item-title merge-merquest-title">
+                <a :href="mergeRequest.url">
+                  {{ mergeRequest.title }}
+                </a>
+              </h5>
+              <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="mergeRequest.url" class="issue-date">
+                  {{ mergeRequest.createdAt }}
+                </a>
+              </span>
+              <span>
+                by
+                <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="mergeRequest.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageIssueComponent = Vue.extend({
-    components: {
-      'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,8 +13,34 @@
          {{ stage.description }}
        </div>
        <ul class="stage-event-list">
-          <li class="stage-event-item" v-for="issue in items">
-            <item-issue-component :issue="issue"></item-issue-component>
+          <li v-for="issue in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="issue.author.avatarUrl">
+              <h5 class="item-title issue-title">
+                <a class="issue-title" :href="issue.url">
+                  {{ issue.title }}
+                </a>
+              </h5>
+              <a :href="issue.url" class="issue-link">
+                #{{ issue.iid }}
+              </a>
+              &middot;
+              <span>
+                Opened
+                <a :href="issue.url" class="issue-date">
+                  {{ issue.createdAt }}
+                </a>
+              </span>
+              <span>
+              by
+              <a :href="issue.author.webUrl" class="issue-author-link">
+                {{ issue.author.name }}
+              </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="issue.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StagePlanComponent = Vue.extend({
-    components: {
-      'item-commit-component': gl.cycleAnalytics.ItemCommitComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,8 +13,31 @@
          {{ stage.description }}
        </div>
        <ul class="stage-event-list">
-          <li class="stage-event-item" v-for="commit in items">
-            <item-commit-component :commit="commit"></item-commit-component>
+          <li v-for="commit in items" class="stage-event-item">
+            <div class="item-details item-conmmit-component">
+              <img class="avatar" :src="commit.author.avatarUrl">
+              <h5 class="item-title commit-title">
+                <a :href="commit.commitUrl">
+                  {{ commit.title }}
+                </a>
+              </h5>
+              <span>
+                First
+                <span class="commit-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 40 40">
+                    <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
+                  </svg>
+                </span>
+                <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
+                pushed by
+                <a :href="commit.author.webUrl" class="commit-author-link">
+                  {{ commit.author.name }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="commit.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageProductionComponent = Vue.extend({
-    components: {
-      'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -15,9 +12,35 @@
        <div class="events-description">
          {{ stage.description }}
        </div>
-        <ul>
-          <li v-for="issue in items">
-            <item-issue-component :issue="issue"></item-issue-component>
+        <ul class="stage-event-list">
+          <li v-for="issue in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="issue.author.avatarUrl">
+              <h5 class="item-title issue-title">
+                <a class="issue-title" :href="issue.url">
+                  {{ issue.title }}
+                </a>
+              </h5>
+              <a :href="issue.url" class="issue-link">
+                #{{ issue.iid }}
+              </a>
+              &middot;
+              <span>
+                Opened
+                <a :href="issue.url" class="issue-date">
+                  {{ issue.createdAt }}
+                </a>
+              </span>
+              <span>
+              by
+              <a :href="issue.author.webUrl" class="issue-author-link">
+                {{ issue.author.name }}
+              </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="issue.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageReviewComponent = Vue.extend({
-    components: {
-      'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,8 +13,42 @@
          {{ stage.description }}
        </div>
        <ul class="stage-event-list">
-          <li class="stage-event-item" v-for="mergeRequest in items">
-            <item-merge-request-component :merge-request="mergeRequest"></item-merge-request-component>
+          <li v-for="mergeRequest in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="mergeRequest.author.avatarUrl">
+              <h5 class="item-title merge-merquest-title">
+                <a :href="mergeRequest.url">
+                  {{ mergeRequest.title }}
+                </a>
+              </h5>
+              <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="mergeRequest.url" class="issue-date">
+                  {{ mergeRequest.createdAt }}
+                </a>
+              </span>
+              <span>
+                by
+                <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+              </span>
+              <template v-if="mergeRequest.state === 'closed'">
+                <span class="merge-request-state">
+                  <i class="fa fa-ban"></i>
+                  {{ mergeRequest.state.toUpperCase() }}
+                </span>
+              </template>
+              <template v-else>
+                <span class="merge-request-branch" v-if="mergeRequest.branch">
+                  <i class= "fa fa-code-fork"></i>
+                  <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
+                </span>
+              </template>
+            </div>
+            <div class="item-time">
+              <total-time :time="mergeRequest.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6
@@ -3,10 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageStagingComponent = Vue.extend({
-    template: '#stage-staging-component',
-    components: {
-      'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,9 +12,36 @@
        <div class="events-description">
          {{ stage.description }}
        </div>
-        <ul>
-          <li v-for="build in items">
-            <item-build-component :build="build"></item-build-component>
+        <ul class="stage-event-list">
+          <li v-for="build in items" class="stage-event-item item-build-component">
+            <div class="item-details">
+              <img class="avatar" :src="build.author.avatarUrl">
+              <h5 class="item-title">
+                <a :href="build.url" class="pipeline-id">
+                  #{{ build.iid }}
+                </a>
+                <i class="fa fa-code-fork"></i>
+                <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+                <span class="icon-branch">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+                    <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/>
+                  </svg>
+                </span>
+                <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a>
+              </h5>
+              <span>
+                <a :href="build.url" class="issue-date">
+                  {{ build.createdAt }}
+                </a>
+                by
+                <a :href="build.author.webUrl" class="issue-author-link">
+                  {{ build.author.name }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="build.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6
@@ -3,9 +3,6 @@
  global.cycleAnalytics = global.cycleAnalytics || {};

  global.cycleAnalytics.StageTestComponent = Vue.extend({
-    components: {
-      'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
-    },
    props: {
      items: Array,
      stage: Object,
@@ -16,8 +13,42 @@
          {{ stage.description }}
        </div>
        <ul class="stage-event-list">
-          <li class="stage-event-item" v-for="build in items">
-            <item-build-component :build="build"></item-build-component>
+          <li v-for="build in items" class="stage-event-item item-build-component">
+            <div class="item-details">
+              <h5 class="item-title">
+                <span class="icon-build-status">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+                    <g fill="#31AF64" fill-rule="evenodd">
+                      <path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/>
+                      <path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/>
+                    </g>
+                  </svg>
+                </span>
+                <a :href="build.url"  class="item-build-name">
+                  {{ build.name }}
+                </a>
+                &middot;
+                <a href="#" class="pipeline-id">
+                  #{{ build.id }}
+                </a>
+                <i class="fa fa-code-fork"></i>
+                <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+                <span class="icon-branch">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+                    <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/>
+                  </svg>
+                </span>
+                <a :href="build.commitUrl" class="short-sha monospace">da57eb39</a>
+              </h5>
+              <span>
+                <a :href="build.url" class="issue-date">
+                  {{ build.date }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="build.totalTime"></total-time>
+            </div>
          </li>
        </ul>
      </div>

--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
@@ -55,10 +55,10 @@

      newEvents.forEach((item) => {
        item.totalTime = item.total_time;
-        item.createdAt = item.created_at;
        item.author.webUrl = item.author.web_url;
        item.author.avatarUrl = item.author.avatar_url;

+        if (item.created_at) item.createdAt = item.created_at;
        if (item.short_sha) item.shortSha = item.short_sha;
        if (item.commit_url) item.commitUrl = item.commit_url;


--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -344,6 +344,17 @@
        }
      } 
    }
+
+    .merge-request-branch {
+      a {
+        max-width: 180px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
  }
  
  // Custom Styles for stage items