From 3ac6407aa9ca5ecc8db54c7363160f6968a84f57 Mon Sep 17 00:00:00 2001 From: profjellybean Date: Sat, 26 Nov 2022 09:51:59 +0100 Subject: [PATCH] #59: Copied base structure, made entry in index for navigation --- ui/src/index.js | 2 + .../dashboard/visualizationRegistry.js | 2 + .../file-tree-comparison/chart/chart.js | 37 ++++++ .../file-tree-comparison/chart/index.js | 18 +++ .../legacy/file-tree-comparison/config.js | 48 ++++++++ .../legacy/file-tree-comparison/help.js | 7 ++ .../legacy/file-tree-comparison/index.js | 17 +++ .../file-tree-comparison/reducers/config.js | 13 ++ .../file-tree-comparison/reducers/data.js | 22 ++++ .../file-tree-comparison/reducers/index.js | 10 ++ .../file-tree-comparison/sagas/index.js | 97 +++++++++++++++ .../legacy/file-tree-comparison/styles.scss | 112 ++++++++++++++++++ 12 files changed, 385 insertions(+) create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/chart/index.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/config.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/help.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/index.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/reducers/index.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js create mode 100644 ui/src/visualizations/legacy/file-tree-comparison/styles.scss diff --git a/ui/src/index.js b/ui/src/index.js index 82dc8a5f..a9c1d403 100755 --- a/ui/src/index.js +++ b/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) => { diff --git a/ui/src/visualizations/dashboard/visualizationRegistry.js b/ui/src/visualizations/dashboard/visualizationRegistry.js index 399a7f28..f59edabb 100644 --- a/ui/src/visualizations/dashboard/visualizationRegistry.js +++ b/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, }; diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/chart.js new file mode 100644 index 00000000..112997cf --- /dev/null +++ b/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( + + + + + + + + + + + + + +
Commit 1Commit 2
Test2Test3
+ ); + } +} diff --git a/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js b/ui/src/visualizations/legacy/file-tree-comparison/chart/index.js new file mode 100644 index 00000000..12124901 --- /dev/null +++ b/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); diff --git a/ui/src/visualizations/legacy/file-tree-comparison/config.js b/ui/src/visualizations/legacy/file-tree-comparison/config.js new file mode 100644 index 00000000..8b2a3c87 --- /dev/null +++ b/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 ( + `#${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; diff --git a/ui/src/visualizations/legacy/file-tree-comparison/help.js b/ui/src/visualizations/legacy/file-tree-comparison/help.js new file mode 100644 index 00000000..8bea6c35 --- /dev/null +++ b/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 () =>
; diff --git a/ui/src/visualizations/legacy/file-tree-comparison/index.js b/ui/src/visualizations/legacy/file-tree-comparison/index.js new file mode 100644 index 00000000..8175e4b9 --- /dev/null +++ b/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, +}; diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js new file mode 100644 index 00000000..bd1931dc --- /dev/null +++ b/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( + { + + }, + { + + } +); diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/data.js new file mode 100644 index 00000000..9345f86a --- /dev/null +++ b/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, + } +); diff --git a/ui/src/visualizations/legacy/file-tree-comparison/reducers/index.js b/ui/src/visualizations/legacy/file-tree-comparison/reducers/index.js new file mode 100644 index 00000000..1eb9dd27 --- /dev/null +++ b/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, +}); diff --git a/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js b/ui/src/visualizations/legacy/file-tree-comparison/sagas/index.js new file mode 100644 index 00000000..ffc644cf --- /dev/null +++ b/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; +} diff --git a/ui/src/visualizations/legacy/file-tree-comparison/styles.scss b/ui/src/visualizations/legacy/file-tree-comparison/styles.scss new file mode 100644 index 00000000..1e142697 --- /dev/null +++ b/ui/src/visualizations/legacy/file-tree-comparison/styles.scss @@ -0,0 +1,112 @@ +@import '../../../../../node_modules/bulma'; + +.chartContainer{ + height: 100%; + width: auto; + flex-direction: column; + padding: 5px; + justify-content: center; + + .loadingHintContainer{ + .loadingHint { + font-size: 40px; + text-align: center; + } + } + + .chartLine{ + flex-grow: 1; + display: flex; + align-items: center; + height: 100%; + + .text{ + writing-mode: vertical-lr; + transform: rotate(-180deg); + margin-right: 10px; + } + + .chart{ + width: 100%; + height: 100%; + background: #ffffff; + display: flex; + } + } +} + +.configContainer{ + .field + .field { + border-top: 1px solid #dbdbdb; + } + + .checkboxLabel { + cursor: pointer; + } +} + +.form { + margin-bottom: 0; +} + +.help { + width: 100%; + overflow-y: auto; + font-size: 1.5em; + + h2 { + font-size: 1.2em; + font-weight: bold; + } + + h3 { + font-size: 1.1em; + font-weight: bold; + } + + ul { + list-style-type: circle; + margin-left: 1.5em; + } + + p { + margin-bottom: 1em; + } + + i { + width: 25px; + text-align: center; + } +} + +.errorMessage:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; +} + +.errorMessage{ + width: 100%; + text-align: center; +} + +.tableGeneral{ + border-collapse: collapse; + height: 100%; +} + +.headerCommits{ + border-bottom: 3px solid black; + height: 5%; + text-align: center; +} + +.tdLine{ + border-left: 3px solid black; +} + +.tableContent{ + height: 100%; +} +