Add UI modal to view the commit stats

closes mujx#24

dashboard/src/api.js

@@ -213,6 +213,18 @@ function getLeaderboards(params) {
   });
 }
 
+function getCommitLog(project, params) {
+  return m.request({
+    method: "GET",
+    url: baseUrl() + "/api/v1/commits/" + project + "/report",
+    background: true,
+    headers: {
+      authorization: storage.getHeaderToken()
+    },
+    params: params
+  });
+}
+
 export {
   createApiToken,
   checkJobStatus,
@@ -231,5 +243,6 @@ export {
   getProjectTags,
   getUserTags,
   getUserProjects,
-  getLeaderboards
+  getLeaderboards,
+  getCommitLog
 };

dashboard/src/components/projects.js

@@ -10,6 +10,7 @@ import LocalState from "../models/ProjectState.js";
 
 // Modals
 import SetTagsModal from "../modals/SetTags.js";
+import CommitListModal from "../modals/CommitList.js";
 
 // Utils
 import { mkSingleStatCard } from "../single_stat_card.js";
@@ -582,6 +583,22 @@ const ProjectComponent = {
             ])
         )
       ]),
+      m("div.mr-1", [
+        m(
+          "button.btn.btn-primary[title='See time spent per commit']",
+          {
+            onclick: e => {
+              e.redraw = false;
+              console.log("Open commit log modal");
+              CommitListModal.openModal({
+                projectName: LocalState.currentProject
+              });
+            },
+            role: "button"
+          },
+          m("i.fas.fa-code-branch.fa-md.text-white-50")
+        )
+      ]),
       m("div.mr-1", [
         m(
           "button.btn.btn-primary[title='Add tags to this project']",

dashboard/src/modals/CommitList.js

@@ -0,0 +1,232 @@
+import m from "mithril";
+import $ from "jquery";
+
+import * as api from "../api";
+import utils from "../utils";
+
+const MODAL_ID = "commit-log";
+
+const state = {
+  projectName: null,
+  repoOwner: null,
+  repoName: null,
+  githubUser: null,
+  commits: [],
+  pendingRequest: false
+};
+
+function getCommitLog(e) {
+  e.redraw = false;
+  e.preventDefault();
+
+  state.pendingRequest = true;
+  renderModal();
+
+  api
+    .getCommitLog(state.projectName, {
+      repoName: state.repoName,
+      repoOwner: state.repoOwner,
+      user: state.githubUser,
+      limit: 80
+    })
+    .then(function (res) {
+      state.commits = res.commits;
+
+      state.pendingRequest = false;
+      renderModal();
+    })
+    .catch(function (err) {
+      state.pendingRequest = false;
+      renderModal();
+
+      utils.showError("Failed to fetch the commit log");
+      console.log(err.response);
+    });
+}
+
+function closeModal(e) {
+  if (e) e.redraw = false;
+  m.render(document.getElementById(MODAL_ID), null);
+}
+
+function renderModal() {
+  let modal = document.getElementById(MODAL_ID);
+
+  if (!modal) {
+    modal = document.createElement("div");
+    modal.id = MODAL_ID;
+    document.body.appendChild(modal);
+  }
+
+  m.render(modal, m(Modal));
+}
+
+function openModal({ projectName }) {
+  state.projectName = projectName;
+  state.repoName = projectName;
+
+  renderModal();
+}
+
+function mkCommitSection() {
+  if (state.commits.length > 0) {
+    return state.commits.map(function (x) {
+      return m(
+        "a.list-group-item.list-group-item-action.flex-column.align-items-start",
+        { href: x.html_url, target: "_blank" },
+        [
+          m("div.d-flex.w-100.justify-content-between", [
+            m("h6.text-truncate", x.commit.message),
+            m(
+              "small",
+              m(
+                "span.badge.badge-pill.badge-info",
+                utils.secondsToHms(x.total_seconds)
+              )
+            )
+          ]),
+          m(
+            "small.text-muted",
+            x.author.login +
+              " - " +
+              new Date(x.commit.author.date).toLocaleString()
+          )
+        ]
+      );
+    });
+  }
+
+  if (state.pendingRequest) {
+    return m("div.spinner", [
+      m("div.bounce1"),
+      m("div.bounce2"),
+      m("div.bounce3")
+    ]);
+  }
+
+  return m("span.text-center", "Nothing fetched yet...");
+}
+
+const Modal = {
+  oncreate: () => {
+    $('[data-toggle="tooltip"]').tooltip();
+  },
+  onbeforeremove: function (vnode) {
+    vnode.dom.classList.add("fade-out");
+    return new Promise(function (resolve) {
+      vnode.dom.addEventListener("animationend", resolve);
+    });
+  },
+  view: () => {
+    return m(
+      "div.modal.fade-in.show",
+      {
+        style: "display:block; background-color:rgba(0, 0, 0, 0.3);"
+      },
+      m(
+        "div.modal-dialog.modal-lg.modal-dialog-centered[role=document]",
+        m("div.modal-content", [
+          m(
+            "div.modal-header",
+            m("h5.modal-title", "Time spent per commit"),
+            m(
+              "button.close[aria-label=Close]",
+              {
+                onclick: closeModal
+              },
+              m("span[aria-hidden=true]", "×")
+            )
+          ),
+          m(
+            "div.modal-body",
+            m(
+              "div.container-fluid",
+              m(
+                "div.row",
+                m(
+                  "form.col-lg-12",
+                  {
+                    onsubmit: getCommitLog
+                  },
+                  [
+                    m("div.row", [
+                      m("div.col-md-4", [
+                        m("label", { for: "repoOwnerInput" }, "Repo owner"),
+                        m("input.form-control", {
+                          id: "repoOwnerInput",
+                          type: "text",
+                          required: "required",
+                          placeholder: state.apiToken,
+                          oninput: function (e) {
+                            state.repoOwner = e.target.value;
+                          }
+                        })
+                      ]),
+                      m("div.col-md-4", [
+                        m("label", { for: "repoNameInput" }, "Repo name"),
+                        m("input.form-control", {
+                          id: "repoNameInput",
+                          type: "text",
+                          required: "required",
+                          value: state.projectName,
+                          placeholder: state.projectName,
+                          oninput: function (e) {
+                            state.repoName = e.target.value;
+                          }
+                        })
+                      ]),
+                      m("div.col-md-4", [
+                        m(
+                          "label",
+                          { for: "githubUserInput" },
+                          "Your GitHub username"
+                        ),
+                        m("input.form-control", {
+                          id: "githubUserInput",
+                          type: "text",
+                          required: "required",
+                          placeholder: state.apiToken,
+                          oninput: function (e) {
+                            state.githubUser = e.target.value;
+                          }
+                        })
+                      ])
+                    ]),
+                    m("hr"),
+                    m("div.row", [
+                      m("div.col-lg-12", [
+                        m("h5.strong.mb-4", "Commits"),
+
+                        m(
+                          "div.list-group.list-group-flush",
+                          {
+                            style:
+                              "max-height: 300px; overflow: scroll; margin-bottom: 10px;"
+                          },
+                          mkCommitSection()
+                        )
+                      ])
+                    ]),
+                    m("div.form-group.d-flex.flex-row-reverse", [
+                      m(
+                        "button.btn.btn-secondary.m-1[type=button]",
+                        { onclick: closeModal },
+                        "Cancel"
+                      ),
+                      m("button.btn.btn-primary.m-1[type=submit]", "Fetch")
+                    ])
+                  ]
+                )
+              )
+            )
+          )
+        ])
+      )
+    );
+  }
+};
+
+export default {
+  Modal,
+  openModal
+};

src/Haka/Handlers/Commits.hs

@@ -47,8 +47,8 @@ type GetCommitReport =
     :> "commits"
     :> Capture "project" Text
     :> "report"
-    :> QueryParam "repo_name" Text
-    :> QueryParam "repo_owner" Text
+    :> QueryParam "repoName" Text
+    :> QueryParam "repoOwner" Text
     :> QueryParam "user" Text
     :> QueryParam "limit" Int64
     :> Header "Authorization" ApiToken
@@ -190,8 +190,8 @@ commitReportHandler ::
   Maybe ApiToken ->
   AppM CommitReport
 commitReportHandler _ _ _ _ _ Nothing = throw Err.missingAuthError
-commitReportHandler _ Nothing _ _ _ _ = throw $ Err.missingQueryParam "repo_name"
-commitReportHandler _ _ Nothing _ _ _ = throw $ Err.missingQueryParam "repo_owner"
+commitReportHandler _ Nothing _ _ _ _ = throw $ Err.missingQueryParam "repoName"
+commitReportHandler _ _ Nothing _ _ _ = throw $ Err.missingQueryParam "repoOwner"
 commitReportHandler _ _ _ Nothing _ _ = throw $ Err.missingQueryParam "user"
 commitReportHandler proj (Just repoName) (Just repoOwner) (Just user) limit (Just token) = do
   let numCommits = fromMaybe defaultNumOfCommits limit