#35: show files in the Box \n\n Show which files are changed in the c…

…ommit

ui/src/visualizations/File-Evolution/chart/chart.js

@@ -43,11 +43,20 @@ export default class FileEvolution extends React.Component {
 
     function getCommitInfo(props, commit) {
       //TODO font size
+
       const commitInfo = [];
       if (props.showCommitMessage === 'header') {
-        commitInfo.push(<text fontSize="smaller">{commit.messageHeader}</text>);
+        commitInfo.push(
+          <a href={commit.webUrl}>
+            <text fontSize="smaller">{commit.messageHeader}</text>
+          </a>
+        );
       } else if (props.showCommitMessage === 'all') {
-        commitInfo.push(<text fontSize="smaller">{commit.message}</text>);
+        commitInfo.push(
+          <a href={commit.webUrl}>
+            <text fontSize="smaller">{commit.message}</text>
+          </a>
+        );
       }
       if (props.showCommitDate) {
         if (commitInfo.length > 0) {
@@ -61,6 +70,21 @@ export default class FileEvolution extends React.Component {
         }
         commitInfo.push(<text fontSize="smaller">{commit.signature}</text>);
       }
+      if (props.showCommitFiles) {
+        if (commitInfo.length > 0) {
+          commitInfo.push(<hr />);
+        }
+        const files = props.commitFiles[commit.sha];
+        for (const f in files) {
+          const file = files[f];
+          commitInfo.push(
+            <a href={file.webUrl}>
+              <text fontSize="smaller">{file.path}</text>
+            </a>
+          );
+          commitInfo.push(<br />);
+        }
+      }
       return commitInfo;
     }
 
@@ -99,7 +123,7 @@ export default class FileEvolution extends React.Component {
     const height = this.props.commitBoxHeight;
     const commitRects = [];
     let x = 20;
-    let y = 20;
+    const y = 20;
     for (const i in commitData) {
       const commit = commitData[i];
       if (this.props.selectedAuthors.indexOf(commit.signature) > -1) {

ui/src/visualizations/File-Evolution/chart/index.js

@@ -8,19 +8,22 @@ const mapStateToProps = (state /*, ownProps*/) => {
   const FileEvolutionState = state.visualizations.fileEvolution.state;
   console.log(FileEvolutionState);
   return {
+    files: FileEvolutionState.data.data.files,
     branches: FileEvolutionState.data.data.branches,
     committers: FileEvolutionState.data.data.committers,
     commits: FileEvolutionState.data.data.commits,
     authorsColorPalette: FileEvolutionState.data.data.authorsColorPalette,
     branchesColorPalette: FileEvolutionState.data.data.branchesColorPalette,
+    commitFiles: FileEvolutionState.data.data.commitFiles,
     selectedAuthors: FileEvolutionState.config.selectedAuthors,
     selectedBranches: FileEvolutionState.config.selectedBranches,
     commitBoxHeight: FileEvolutionState.config.commitBoxHeight,
     commitBoxWidth: FileEvolutionState.config.commitBoxWidth,
     commitBoxColor: FileEvolutionState.config.commitBoxColor,
     showCommitDate: FileEvolutionState.config.showCommitDate,
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
-    showCommitMessage: FileEvolutionState.config.showCommitMessage
+    showCommitMessage: FileEvolutionState.config.showCommitMessage,
+    showCommitFiles: FileEvolutionState.config.showCommitFiles
   };
 };
 

ui/src/visualizations/File-Evolution/config.js

@@ -11,7 +11,8 @@ import {
   setSelectedBranches,
   setShowCommitDate,
   setShowCommitMessage,
-  setShowCommitAuthor
+  setShowCommitAuthor,
+  setShowCommitFiles
 } from './sagas';
 
 import React from 'react';
@@ -35,7 +36,8 @@ const mapStateToProps = (state /*, ownProps*/) => {
     commitBoxColor: FileEvolutionState.config.commitBoxColor,
     showCommitDate: FileEvolutionState.config.showCommitDate,
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
-    showCommitMessage: FileEvolutionState.config.showCommitMessage
+    showCommitMessage: FileEvolutionState.config.showCommitMessage,
+    showCommitFiles: FileEvolutionState.config.showCommitFiles
   };
 };
 
@@ -47,6 +49,7 @@ const mapDispatchToProps = (dispatch /*, ownProps*/) => {
     onSetCommitBoxWidth: commitBoxWidth => dispatch(setCommitBoxWidth(commitBoxWidth)),
     onClickShowCommitBoxDate: showCommitDate => dispatch(setShowCommitDate(showCommitDate)),
     onClickShowCommitBoxAuthor: showCommitAuthor => dispatch(setShowCommitAuthor(showCommitAuthor)),
+    onClickShowCommitBoxFiles: showCommitFiles => dispatch(setShowCommitFiles(showCommitFiles)),
     onSetShowCommitMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)),
     onClickCommitBoxColor: commitBoxColor => dispatch(setCommitBoxColor(commitBoxColor))
   };
@@ -112,13 +115,22 @@ const FileEvolutionConfigComponent = props => {
             </label>
             <label className={styles.checkboxLabel}>
               <input
-                name="showAuthor"
+                name="showDate"
                 type="checkbox"
                 onChange={() => props.onClickShowCommitBoxDate(!props.showCommitDate)}
                 checked={props.showCommitDate}
               />{' '}
               Show Date{' '}
             </label>
+            <label className={styles.checkboxLabel}>
+              <input
+                name="showFiles"
+                type="checkbox"
+                onChange={() => props.onClickShowCommitBoxFiles(!props.showCommitFiles)}
+                checked={props.showCommitFiles}
+              />{' '}
+              Show Files{' '}
+            </label>
 
             <label className={styles.label}>Show Message</label>
             <TabCombo

ui/src/visualizations/File-Evolution/reducers/config.js

@@ -12,16 +12,18 @@ export default handleActions(
     SET_SELECTED_BRANCHES: (state, action) => _.assign({}, state, { selectedBranches: [...action.payload] }),
     SET_SHOW_COMMIT_DATE: (state, action) => _.assign({}, state, { showCommitDate: action.payload }),
     SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload }),
-    SET_SHOW_COMMIT_AUTHOR: (state, action) => _.assign({}, state, { showCommitAuthor: action.payload })
+    SET_SHOW_COMMIT_AUTHOR: (state, action) => _.assign({}, state, { showCommitAuthor: action.payload }),
+    SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload })
   },
   {
-    commitBoxWidth: 100,
-    commitBoxHeight: 100,
+    commitBoxWidth: 200,
+    commitBoxHeight: 200,
     commitBoxColor: 'author',
     selectedAuthors: [],
     selectedBranches: [],
     showCommitDate: true,
     showCommitMessage: 'header',
-    showCommitAuthor: false
+    showCommitAuthor: false,
+    showCommitFiles: true
   }
 );

ui/src/visualizations/File-Evolution/sagas/getFiles.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import { traversePages, graphQl } from '../../../utils';
+
+/**
+ * Get files with commits from the database.
+ * @returns {*}
+ */
+export default function getFiles() {
+  const fileList = [];
+
+  return traversePages(getFilesWithCommmits(), files => {
+    fileList.push(files);
+  }).then(function() {
+    return fileList;
+  });
+}
+
+const getFilesWithCommmits = until => (page, perPage) => {
+  return graphQl
+    .query(
+      `query ($page: Int, $perPage: Int) {
+  files(page: $page, perPage: $perPage) {
+    data{
+      path
+      webUrl   
+      commits{
+        count
+        data{
+          sha
+          date
+        }
+      }
+    }
+  }
+}
+`,
+      { page, perPage }
+    )
+    .then(resp => resp.files);
+};

ui/src/visualizations/File-Evolution/sagas/index.js

@@ -8,6 +8,7 @@ import { fetchFactory, timestampedActionFactory, mapSaga } from '../../../sagas/
 import getCommitData from './getCommitData.js';
 import getBranches from './getBranches.js';
 import getCommiters from './getCommiters.js';
+import getFiles from './getFiles.js';
 
 export const setCommitBoxHeight = createAction('SET_COMMIT_BOX_HEIGHT');
 export const setCommitBoxWidth = createAction('SET_COMMIT_BOX_WIDTH');
@@ -19,6 +20,7 @@ export const setSelectedBranches = createAction('SET_SELECTED_BRANCHES');
 export const setShowCommitDate = createAction('SET_SHOW_COMMIT_DATE');
 export const setShowCommitMessage = createAction('SET_SHOW_COMMIT_MESSAGE');
 export const setShowCommitAuthor = createAction('SET_SHOW_COMMIT_AUTHOR');
+export const setShowCommitFiles = createAction('SET_SHOW_COMMIT_FILES');
 
 export const requestFileEvolutionData = createAction('REQUEST_FILE_EVOLUTION_DATA');
 export const receiveFileEvolutionData = timestampedActionFactory('RECEIVE_FILE_EVOLUTION_DATA');
@@ -61,11 +63,15 @@ function* watchRefresh() {
 export const fetchFileEvolutionData = fetchFactory(
   function*() {
     //const commiters = yield getCommiters();
-    return yield Promise.join(getCommitData(), getBranches(), getCommiters())
-      .spread((commits, branches, commiters) => {
+    return yield Promise.join(getCommitData(), getBranches(), getCommiters(), getFiles())
+      .spread((commits, branches, commiters, files) => {
+        console.log(files);
         const authorsColorPalette = getAuthorColorPalette(commiters);
         const branchesColorPalette = getBranchesColorPalette(branches);
+        const commitFiles = addFilesToCommit(files, commits);
         return {
+          files,
+          commitFiles,
           commits,
           branches,
           commiters,
@@ -83,6 +89,22 @@ export const fetchFileEvolutionData = fetchFactory(
   receiveFileEvolutionDataError
 );
 
+function addFilesToCommit(files, commits) {
+  const commitFiles = {};
+  for (const c in commits) {
+    const sha = '' + commits[c].sha;
+    commitFiles[sha] = [];
+  }
+  for (const f in files) {
+    const file = files[f];
+    for (const c in files[f].commits.data) {
+      const fileSha = '' + files[f].commits.data[c].sha;
+      commitFiles[fileSha].push(file);
+    }
+  }
+  return commitFiles;
+}
+
 function getAuthorColorPalette(commiters) {
   //TODO Color???
   const colorPalette = {};