#59: Copied base structure, made entry in index for navigation

ui/src/index.js

@@ -33,6 +33,7 @@ import ciBuilds from './visualizations/VisualizationComponents/ciBuilds';
 import issues from './visualizations/VisualizationComponents/issues';
 import changes from './visualizations/VisualizationComponents/changes';
 import RootOffline from './components/RootOffline';
+import fileTreeComparison from './visualizations/legacy/file-tree-comparison';
 
 const visualizationModules = [
   newDashboard,
@@ -45,6 +46,7 @@ const visualizationModules = [
   ciBuilds,
   issues,
   changes,
+  fileTreeComparison,
 ];
 
 Database.checkBackendConnection().then((connection) => {

ui/src/visualizations/dashboard/visualizationRegistry.js

@@ -8,6 +8,7 @@ import hotspotDials from '../legacy/hotspot-dials';
 import ciBuilds from '../VisualizationComponents/ciBuilds';
 import issues from '../VisualizationComponents/issues';
 import changes from '../VisualizationComponents/changes';
+import fileTreeComparison from '../legacy/file-tree-comparison';
 
 export default {
   changes,
@@ -18,4 +19,5 @@ export default {
   hotspotDials,
   additions_deletions,
   empty,
+  fileTreeComparison,
 };

ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js

@@ -0,0 +1,37 @@
+'use strict';
+
+import React from 'react';
+import * as d3 from 'd3';
+
+import styles from '../styles.scss';
+import _ from 'lodash';
+
+import StackedAreaChart from '../../../../components/StackedAreaChart';
+import moment from 'moment';
+import chroma from 'chroma-js';
+
+export default class Changes extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    console.log(this.props);
+    return(
+      <table className={styles.tableGeneral}>
+        <thead>
+        <tr className={styles.headerCommits}>
+          <td>Commit 1</td>
+          <td className={styles.tdLine}>Commit 2</td>
+        </tr>
+        </thead>
+        <tbody>
+        <tr className={styles.tableContent}>
+          <td>Test2</td>
+          <td className={styles.tdLine}>Test3</td>
+        </tr>
+        </tbody>
+      </table>
+    );
+  }
+}

ui/src/visualizations/legacy/file-tree-comparison/chart/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import { connect } from 'react-redux';
+import Chart from './chart.js';
+
+
+const mapStateToProps = (state /*, ownProps*/) => {
+  const corState = state.visualizations.fileTreeComparison.state;
+  //console.log(corState);
+  return {
+    commits: corState.data.data,
+
+  }
+  ;
+};
+
+
+export default connect(mapStateToProps)(Chart);

ui/src/visualizations/legacy/file-tree-comparison/config.js

@@ -0,0 +1,48 @@
+'use strict';
+
+import { connect } from 'react-redux';
+import Promise from 'bluebird';
+import Database from '../../../database/database';
+import SearchBox from '../../../components/SearchBox';
+
+
+const mapStateToProps = (state /*, ownProps*/) => {
+  const fileTreeState = state;
+
+  return {
+    fileTreeState,
+  };
+};
+
+const mapDispatchToProps = (dispatch ) => {
+  return {
+    //onClickMetric: (metric) => dispatch(setDisplayMetric(metric)),
+    //onClickCheckboxLegend: (selected) => dispatch(setSelectedAuthors(selected)),
+  };
+};
+
+const ChangesConfigComponent = (props) => {
+  return (
+    <SearchBox
+      placeholder="Select commit..."
+      renderOption={(i) => `#${i.iid} ${i.title}`}
+      search={(text) => {
+        return Promise.resolve(Database.searchCommits(text)).map((i) => {
+          i.createdAt = new Date(i.createdAt);
+          i.closedAt = i.closedAt && new Date(i.closedAt);
+          return i;
+        });
+      }}
+      value={props.issue}
+      onChange={(issue) => {
+        if (issue !== null) {
+          props.onSetIssue(issue);
+        }
+      }}
+    />//TODO search bar
+  );
+};
+
+const FileTreeConfig = connect(mapStateToProps, mapDispatchToProps)(ChangesConfigComponent);
+
+export default FileTreeConfig;

ui/src/visualizations/legacy/file-tree-comparison/help.js

@@ -0,0 +1,7 @@
+'use strict';
+
+import cx from 'classnames';
+
+import styles from './styles.scss';
+
+export default () => <div className={cx('box', styles.help)}></div>;

ui/src/visualizations/legacy/file-tree-comparison/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import ChartComponent from './chart';
+import ConfigComponent from './config.js';
+import HelpComponent from './help.js';
+import saga from './sagas';
+import reducer from './reducers';
+
+export default {
+  id: 'fileTreeComparison',
+  label: 'FileTreeComparison',
+  saga,
+  reducer,
+  ChartComponent,
+  ConfigComponent,
+  HelpComponent,
+};

ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js

@@ -0,0 +1,13 @@
+'use strict';
+
+import { handleActions } from 'redux-actions';
+import _ from 'lodash';
+
+export default handleActions(
+  {
+
+  },
+  {
+
+  }
+);

ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import { handleActions } from 'redux-actions';
+import _ from 'lodash';
+
+export default handleActions(
+  {
+    REQUEST_CHANGES_DATA: (state) => _.assign({}, state, { isFetching: true }),
+    RECEIVE_CHANGES_DATA: (state, action) => {
+      return _.assign({}, state, {
+        data: action.payload,
+        isFetching: false,
+        receivedAt: action.meta.receivedAt,
+      });
+    },
+  },
+  {
+    data: {},
+    lastFetched: null,
+    isFetching: null,
+  }
+);

ui/src/visualizations/legacy/file-tree-comparison/reducers/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+import config from './config.js';
+import data from './data.js';
+import { combineReducers } from 'redux';
+
+export default combineReducers({
+  data,
+  config,
+});

ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js

@@ -0,0 +1,97 @@
+'use strict';
+
+import { fetchFactory, mapSaga, timestampedActionFactory } from '../../../../sagas/utils';
+import { createAction } from 'redux-actions';
+import Database from '../../../../database/database';
+import { graphQl } from '../../../../utils';
+
+export const requestCommitsAndFileTree = createAction('REQUEST_COMMITS_AND_FILE_TREE');
+export const receiveCommitsAndFileTree = timestampedActionFactory('RECEIVE_COMMITS_AND_FILE_TREE');
+export const receiveCommitsAndFileTreeError = createAction('RECEIVE_COMMITS_AND_FILE_TREE_ERROR');
+
+export default function* () {
+  // fetch data once on entry
+  yield* fetchFileTreeEvolutionData();
+}
+
+export const fetchFileTreeEvolutionData = fetchFactory(
+  function* () {
+
+    const { firstCommit, lastCommit } = yield Database.getBounds(); //getting first and last commit date
+    const firstCommitTimestamp = Date.parse(firstCommit.date);
+    const lastCommitTimestamp = Date.parse(lastCommit.date);
+
+    const commits = yield Database.getCommitData([firstCommitTimestamp, lastCommitTimestamp], [firstCommitTimestamp, lastCommitTimestamp]); //COMMITS
+
+    const fileTree = yield Database.requestFileStructure();
+    const hierarchicalFileTree = makeHierarchyFileTree(fileTree); //FILETREE
+
+
+
+    //console.log(yield Database.searchCommits('Bug')); //search commits
+
+    return { commits, hierarchicalFileTree };
+
+    return yield graphQl //TODO replace with my query, get changes by certain commit
+      .query(
+        `{  
+        commits(sort: "ASC") {
+          data {
+            date
+            message
+            files {
+              data {
+                stats {
+                  additions
+                  deletions
+                }
+                file {
+                  path,
+                }
+                lineCount
+              }
+            }
+          }
+        }
+      }`
+      )
+      .then((resp) => {
+        const commitsWithFileTree = [];
+
+        for (const commit of resp.commits.data) {
+          //const fileTree = makeHierarchyFileTreee(commit);
+          //const commitWithFileTree = [commit, fileTree];
+          //commitsWithFileTree.push(commitWithFileTree);
+          //fileTree = applyCommit(fileTree, commit);
+          //fileTreeHistory.push(fileTree);
+        }
+        return {
+          commitsWithFileTree,
+
+          //fileTreeHistory,
+          //commits: resp.commits.data
+        };
+      });
+  },
+  requestCommitsAndFileTree, //LOGGER
+  receiveCommitsAndFileTree,
+  receiveCommitsAndFileTreeError
+);
+
+function makeHierarchyFileTree(fileTree) {
+  const result = [];
+  const level = { result };
+
+  fileTree.files.data.forEach((entry) => {
+    entry.path.split('/').reduce((r, name) => {
+      if (!r[name]) {
+        r[name] = { result: [] };
+        r.result.push({ name, children: r[name].result });
+      }
+
+      return r[name];
+    }, level);
+  });
+
+  return result;
+}