Apply styling to ItemCommitComponent

app/assets/javascripts/cycle_analytics/components/item_commit_component.js.es6

@@ -14,9 +14,36 @@
   */
 
   global.cycleAnalytics.ItemCommitComponent = Vue.extend({
-    template: '#item-commit-component',
     props: {
       commit: Object,
-    }
+    },
+    template: `
+      <div class="item-details item-conmmit-component">
+        <h5 class="item-title">
+          <a href="commit.url">{{ 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="#" class="commit-hash-link monospace">{{ commit.hash }}</a>
+          pushed by
+          <a href="commit.profile" class="commit-author-link">{{ commit.author }}</a>
+        </span>
+      </div>
+      <div class="item-time">
+        <span class="hours" v-if="commit.totalTime.hours">
+          {{ commit.totalTime.hours }}
+          <abbr title="Hours">hr</abbr>
+        </span>
+        <span class="minutes" v-if="commit.totalTime.minutes">
+          {{ commit.totalTime.minutes }}
+          <abbr title="Minutes">mins</abbr>
+        </span>
+      </div>
+    `,
   });
 }(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6

@@ -14,8 +14,8 @@
         <div class="events-description">
           Time before an issue starts implementation
         </div>
-        <ul class="event-list">
-          <li class="event-item" v-for="commit in items">
+        <ul class="stage-event-list">
+          <li class="stage-event-item" v-for="commit in items">
             <item-commit-component :commit="commit"></item-commit-component>
           </li>
         </ul>

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -327,5 +327,23 @@
         color: $gl-text-color;
       }
     }
+
+    .commit-author-link {
+      color: $gl-dark-link-color;
+    }
+
+    // Custom CSS for components
+    .item-conmmit-component {
+      .commit-icon {
+        position: relative;
+        top: 3px;
+        left: 1px;
+        display: inline-block;
+
+        svg {
+          float: left;
+        }
+      } 
+    }
   }
 }

app/views/projects/cycle_analytics/show.html.haml

@@ -119,7 +119,6 @@
       %li{ "v-for" => "mergeRequest in items" }
         %item-merge-request-component{ ":merge-request" => "mergeRequest" }
 
-
 %script{ type: 'text/x-template', id: 'stage-staging-component' }
   %div
     .events-description
@@ -136,20 +135,6 @@
       %li{ "v-for" => "issue in items" }
         %item-issue-component{ ":issue" => "issue" }
 
-%script{ type: 'text/x-template', id: 'item-commit-component' }
-  %div
-    %p
-      %h5
-        %a{:href => "commit.url"}
-          {{ commit.title }}
-      %span
-        First
-        %a{:href => "#"}
-          {{ commit.hash }}
-        pushed by
-        %a{:href => "commit.profile"}
-          {{ commit.author }}
-
 %script{ type: 'text/x-template', id: 'item-merge-request-component' }
   %div
     %p