#35: show Branch Information \n\n add new Filter and functionality fo…

…r branch Filter

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

@@ -19,11 +19,13 @@ export default class FileEvolution extends React.Component {
     const commitBoxes = this.getCommitsDraw(space);
     //const svgHeight = (commitRects.length / 2 + 1) * this.props.commitBoxHeight + (commitRects.length / 2) * space;
     const svgHeight = this.props.commitBoxHeight + space;
-    const svgWidth = (commitBoxes.length / 2 + 1) * this.props.commitBoxHeight + (commitBoxes.length / 2) * space;
+    const svgWidth = (commitBoxes.length / 2 + 1) * this.props.commitBoxHeight + commitBoxes.length / 2 * space;
     return (
       <div className={styles.chartContainer}>
         <div id={'myChartDiv'} className={styles.chartDiv}>
-          <svg style={{ width: svgWidth, height: svgHeight }}>{commitBoxes}</svg>
+          <svg style={{ width: svgWidth, height: svgHeight }}>
+            {commitBoxes}
+          </svg>
         </div>
       </div>
     );
@@ -36,50 +38,86 @@ export default class FileEvolution extends React.Component {
         color = props.authorsColorPalette[commit.signature];
       } else if (props.commitBoxColor === 'branch') {
         //TODO branch color
-        color = 'yellow';
+        color = props.branchesColorPalette[getBranch(props, commit)];
+        if (color === undefined) {
+          color = 'red';
+        }
       }
       return color;
     }
 
+    function getBranch(props, commit) {
+      let branch = '';
+      for (const b in props.branches) {
+        const branchName = props.branches[b].branch;
+        if (commit.branch.includes(branchName)) {
+          branch = branchName;
+          break;
+        }
+      }
+      return branch;
+    }
+
     function getCommitInfo(props, commit) {
       //TODO font size
-
       const commitInfo = [];
-      if (props.showCommitMessage === 'header') {
+
+      commitInfo.push(
+        <h1>
+          {commit.messageHeader}
+        </h1>
+      );
+      commitInfo.push(<hr />);
+      if (props.showCommitMessage) {
         commitInfo.push(
-          <a href={commit.webUrl}>
-            <text fontSize="smaller">{commit.messageHeader}</text>
-          </a>
+          <text fontSize="smaller">
+            Message: {commit.message}
+          </text>
         );
-      } else if (props.showCommitMessage === 'all') {
+      }
+      if (props.showCommitSha === 'short') {
         commitInfo.push(
-          <a href={commit.webUrl}>
-            <text fontSize="smaller">{commit.message}</text>
-          </a>
+          <text fontSize="smaller">
+            Short SHA: {commit.shortSha}
+          </text>
         );
+      } else if (props.showCommitSha === 'all') {
+        commitInfo.push(<text fontSize="smaller">SHA: {commit.sha}</text>);
       }
       if (props.showCommitDate) {
-        if (commitInfo.length > 0) {
-          commitInfo.push(<hr />);
-        }
-        commitInfo.push(<text fontSize="smaller">{commit.date}</text>);
+        commitInfo.push(
+          <text fontSize="smaller">
+            Date: {commit.date}
+          </text>
+        );
       }
       if (props.showCommitAuthor) {
-        if (commitInfo.length > 0) {
-          commitInfo.push(<hr />);
-        }
-        commitInfo.push(<text fontSize="smaller">{commit.signature}</text>);
+        commitInfo.push(
+          <text fontSize="smaller">
+            Author: {commit.signature}
+          </text>
+        );
+      }
+      if (props.showCommitWeblink) {
+        commitInfo.push(
+          <a href={commit.webUrl}>
+            <text fontSize="smaller">
+              URL: {commit.webUrl}
+            </text>
+          </a>
+        );
       }
       if (props.showCommitFiles) {
-        if (commitInfo.length > 0) {
-          commitInfo.push(<hr />);
-        }
+        commitInfo.push(<text fontSize="smaller">Files:</text>);
+        commitInfo.push(<br />);
         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>
+              <text fontSize="smaller">
+                {file.path}
+              </text>
             </a>
           );
           commitInfo.push(<br />);
@@ -98,8 +136,8 @@ export default class FileEvolution extends React.Component {
       const pointsForLine = '' + lineXstart.toString() + ',' + lineY.toString() + ' ' + lineXend.toString() + ',' + lineY.toString();
 
       const arrowHeadYup = y + height / 4;
-      const arrowHeadYdown = y + (height / 4) * 3;
-      const arrowHeadX = lineXstart + ((lineXend - lineXstart) / 4) * 3;
+      const arrowHeadYdown = y + height / 4 * 3;
+      const arrowHeadX = lineXstart + (lineXend - lineXstart) / 4 * 3;
       const pointsForArrowHead =
         '' +
         arrowHeadX.toString() +
@@ -118,6 +156,7 @@ export default class FileEvolution extends React.Component {
       arrow.push(<polyline points={pointsForArrowHead} fill="none" stroke="black" />);
       return arrow;
     }
+
     const commitData = this.props.commits;
     const width = this.props.commitBoxWidth;
     const height = this.props.commitBoxHeight;
@@ -127,24 +166,26 @@ export default class FileEvolution extends React.Component {
     for (const i in commitData) {
       const commit = commitData[i];
       if (this.props.selectedAuthors.indexOf(commit.signature) > -1) {
-        const color = getBoxColor(this.props, commit);
-        commitRects.push(
-          <g width={width} height={height}>
-            <rect x={x} y={y} width={width} height={height} fill={color}></rect>
-            <foreignObject x={x} y={y} width={width} height={height}>
-              {getCommitInfo(this.props, commit)}
-            </foreignObject>
-          </g>
-        );
+        if (this.props.selectedBranches.indexOf(getBranch(this.props, commit)) > -1) {
+          const color = getBoxColor(this.props, commit);
+          commitRects.push(
+            <g width={width} height={height}>
+              <rect x={x} y={y} width={width} height={height} fill={color} />
+              <foreignObject x={x} y={y} width={width} height={height}>
+                {getCommitInfo(this.props, commit)}
+              </foreignObject>
+            </g>
+          );
 
-        commitRects.push(
-          <g width={width} height={height}>
-            {getArrow(x, y, height, width)}
-          </g>
-        );
+          commitRects.push(
+            <g width={width} height={height}>
+              {getArrow(x, y, height, width)}
+            </g>
+          );
 
-        x = x + width + space;
-        //y = y + height + space; //TODO auskommentieren
+          x = x + width + space;
+          //y = y + height + space; //TODO auskommentieren
+        }
       }
     }
     commitRects.pop(); //remove last arrow

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

@@ -23,6 +23,8 @@ const mapStateToProps = (state /*, ownProps*/) => {
     showCommitDate: FileEvolutionState.config.showCommitDate,
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
     showCommitMessage: FileEvolutionState.config.showCommitMessage,
+    showCommitWeblink: FileEvolutionState.config.showCommitWeblink,
+    showCommitSha: FileEvolutionState.config.showCommitSha,
     showCommitFiles: FileEvolutionState.config.showCommitFiles
   };
 };

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

@@ -12,7 +12,8 @@ import {
   setShowCommitDate,
   setShowCommitMessage,
   setShowCommitAuthor,
-  setShowCommitFiles
+  setShowCommitFiles,
+  setShowCommitSha, setShowCommitWeblink
 } from './sagas';
 
 import React from 'react';
@@ -37,6 +38,7 @@ const mapStateToProps = (state /*, ownProps*/) => {
     showCommitDate: FileEvolutionState.config.showCommitDate,
     showCommitAuthor: FileEvolutionState.config.showCommitAuthor,
     showCommitMessage: FileEvolutionState.config.showCommitMessage,
+    showCommitSha: FileEvolutionState.config.showCommitSha,
     showCommitFiles: FileEvolutionState.config.showCommitFiles
   };
 };
@@ -50,7 +52,9 @@ const mapDispatchToProps = (dispatch /*, ownProps*/) => {
     onClickShowCommitBoxDate: showCommitDate => dispatch(setShowCommitDate(showCommitDate)),
     onClickShowCommitBoxAuthor: showCommitAuthor => dispatch(setShowCommitAuthor(showCommitAuthor)),
     onClickShowCommitBoxFiles: showCommitFiles => dispatch(setShowCommitFiles(showCommitFiles)),
-    onSetShowCommitMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)),
+    onClickShowCommitBoxMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)),
+    onClickShowCommitBoxWeblink: showCommitWeblink => dispatch(setShowCommitWeblink(showCommitWeblink)),
+    onSetShowCommitSha: showCommitSha => dispatch(setShowCommitSha(showCommitSha)),
     onClickCommitBoxColor: commitBoxColor => dispatch(setCommitBoxColor(commitBoxColor))
   };
 };
@@ -113,6 +117,7 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Author{' '}
             </label>
+            <br/>
             <label className={styles.checkboxLabel}>
               <input
                 name="showDate"
@@ -122,6 +127,7 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Date{' '}
             </label>
+            <br/>
             <label className={styles.checkboxLabel}>
               <input
                 name="showFiles"
@@ -131,16 +137,36 @@ const FileEvolutionConfigComponent = props => {
               />{' '}
               Show Files{' '}
             </label>
+            <br/>
+            <label className={styles.checkboxLabel}>
+              <input
+                name="showMessage"
+                type="checkbox"
+                onChange={() => props.onClickShowCommitBoxMessage(!props.showCommitMessage)}
+                checked={props.showCommitMessage}
+              />{' '}
+              Show Message{' '}
+            </label>
+            <br/>
+            <label className={styles.checkboxLabel}>
+              <input
+                name="showWeblink"
+                type="checkbox"
+                onChange={() => props.onClickShowCommitBoxWeblink(!props.showCommitWeblink)}
+                checked={props.showCommitWeblink}
+              />{' '}
+              Show Weblink{' '}
+            </label>
 
-            <label className={styles.label}>Show Message</label>
+            <label className={styles.label}>Show Sha</label>
             <TabCombo
-              value={props.showCommitMessage}
+              value={props.showCommitSha}
               options={[
                 { label: 'None', icon: 'times', value: 'none' },
-                { label: 'Header', icon: 'file-alt', value: 'header' },
+                { label: 'Short', icon: 'file-alt', value: 'short' },
                 { label: 'All', icon: 'database', value: 'all' }
               ]}
-              onChange={value => props.onSetShowCommitMessage(value)}
+              onChange={value => props.onSetShowCommitSha(value)}
             />
           </div>
           <div className="control">

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

@@ -11,9 +11,11 @@ export default handleActions(
     SET_SELECTED_AUTHORS: (state, action) => _.assign({}, state, { selectedAuthors: [...action.payload] }),
     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_SHA: (state, action) => _.assign({}, state, { showCommitSha: action.payload }),
     SET_SHOW_COMMIT_AUTHOR: (state, action) => _.assign({}, state, { showCommitAuthor: action.payload }),
-    SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload })
+    SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload }),
+    SET_SHOW_COMMIT_WEBLINK: (state, action) => _.assign({}, state, { showCommitWeblink: action.payload }),
+    SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload })
   },
   {
     commitBoxWidth: 200,
@@ -22,8 +24,10 @@ export default handleActions(
     selectedAuthors: [],
     selectedBranches: [],
     showCommitDate: true,
-    showCommitMessage: 'header',
+    showCommitSha: 'short',
     showCommitAuthor: false,
-    showCommitFiles: true
+    showCommitFiles: true,
+    showCommitMessage: true,
+    showCommitWeblink: false
   }
 );

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

@@ -25,6 +25,8 @@ const getCommitsPage = until => (page, perPage) => {
                data {
                  sha
                  date
+                 branch
+                 shortSha
                  message
                  messageHeader
                  signature

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

@@ -18,7 +18,9 @@ export const setSelectedAuthors = createAction('SET_SELECTED_AUTHORS');
 export const setSelectedBranches = createAction('SET_SELECTED_BRANCHES');
 
 export const setShowCommitDate = createAction('SET_SHOW_COMMIT_DATE');
+export const setShowCommitSha = createAction('SET_SHOW_COMMIT_SHA');
 export const setShowCommitMessage = createAction('SET_SHOW_COMMIT_MESSAGE');
+export const setShowCommitWeblink = createAction('SET_SHOW_COMMIT_WEBLINK');
 export const setShowCommitAuthor = createAction('SET_SHOW_COMMIT_AUTHOR');
 export const setShowCommitFiles = createAction('SET_SHOW_COMMIT_FILES');
 
@@ -65,7 +67,7 @@ export const fetchFileEvolutionData = fetchFactory(
     //const commiters = yield getCommiters();
     return yield Promise.join(getCommitData(), getBranches(), getCommiters(), getFiles())
       .spread((commits, branches, commiters, files) => {
-        console.log(files);
+        console.log(commits);
         const authorsColorPalette = getAuthorColorPalette(commiters);
         const branchesColorPalette = getBranchesColorPalette(branches);
         const commitFiles = addFilesToCommit(files, commits);
@@ -128,6 +130,11 @@ function getBranchesColorPalette(branches) {
     }
     colorPalette[branches[i].branch] = randomColor;
   }
+  let randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
+  while (randomColor.length !== 7) {
+    randomColor = randomColor + '0';
+  }
+  colorPalette['tags/v1.0.0'] = randomColor;
   console.log(colorPalette);
   return colorPalette;
 }