Loading... This may take a while.
17 |Loading... This may take a while.
17 |(Make sure the uploaded projects contain a webpack config file in their root directories!)
26 |
on the top-left corner of this document to get to a specific section of this guide more efficiently.
5 |
6 | ## Getting Started - Familiarizing Yourself With bev's Directories
7 | Before outlining current issues and conceptualized new features for this product, I would like to provide a brief run-down of the features contained within this application.
8 |
9 | ### app/main/
10 | Contains a few small files which leverage electron and others to interact directly with the user's native OS.
11 |
12 | * `io.js` contains the logic which allows a user to select or remove folders, as well as the logic to analyze the dependencies of provided folder paths.
13 | * `notification.js` houses minor logic to natively render notifications to the user's machine.
14 |
15 | ### render/assets/
16 | Contains all assets displayed in the application.
17 |
18 | ### render/html/
19 | This is the folder the application is where webpack will build to.
20 | As such, the entirety of its contents are in the gitignore.
21 |
22 | ### render/js/
23 | Content intended to communicate with the backend (app/main/) and render content from it to the frontend.
24 | Though this intent could seem in contradiction with the next section's description, bearing in mind that this is to specifically be an intermediary between front and back end features will help understand its place in this application's architecture.
25 |
26 | ### render/src/
27 | All front end rendering via React is housed here.
28 | Internal components rendered through `App.jsx` can be found in the components directory.
29 |
30 | ## Conceptualized New Features & Existing Bugs
31 | ### The Bounty Board (Bugs)
32 | * Nodes reposition when selected (position should only change on drag)
33 | * Cannot unselect a node until it has moved (selecting again, regardless of position, should unselect)
34 |
35 | ### Features
36 | * Improved Testing
37 | * CI/CD which automatically builds and deploys latest to `bev.dev` when all tests pass successfully on any merge to `main`
38 | * Improved performance by creating a bash file which pairs down what is currently done by the webpack-cli in `io.js`
39 | * Ability to delete Nodes from the dependency graph
40 | * Drag/Create edges in the dependency graph
41 | * Only for first party files (no node modules)
42 | * This should also programmatically update imports in the respective first party files the action is performed on
43 | * Create a right-hand panel which displays information on the selected Node in the Dependency Chart
44 | * 
45 | * If the right-hand display panel is implemented, functionality to edit first party files directly is desirable
46 | * Implement GitHub Releases
--------------------------------------------------------------------------------
/app/render/src/components/Dashboard/Files.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 |
3 | const Files = (props) =>{
4 |
5 | const bundle = props.mfe;
6 | const totalSizePerAsset = {};
7 | const showFileDetailsObj = {};
8 | const hoverObj = {};
9 | Object.entries(bundle.assets).forEach(([k,v]) => {
10 | let totalSize = 0;
11 | v.forEach(e => totalSize += e.size)
12 | totalSizePerAsset[k] = totalSize;
13 | showFileDetailsObj[k] = false;
14 | hoverObj[k] = false;
15 | })
16 | const [showFileDetails, setShowFileDetails] = useState(showFileDetailsObj);
17 | const [hover, setHover] = useState(hoverObj);
18 |
19 | const handleClick = (e) => {
20 | console.log('e', e);
21 | const fileType = e.target.id;
22 | const newProperty = {};
23 | newProperty[fileType] = showFileDetails[fileType] === true ? false : true;
24 | setShowFileDetails({...showFileDetails, ...newProperty});
25 | console.log('showFileDetails', showFileDetails);
26 | }
27 |
28 | const fileTypeStyle = {};
29 | Object.keys(hover).forEach(fileType => {
30 | fileTypeStyle[fileType] = {
31 | display: 'flex',
32 | flexDirection: 'row',
33 | padding: '10px',
34 | borderStyle: 'ridge',
35 | justifyContent: 'space-between',
36 | backgroundColor: hover[fileType] === true ? 'aliceblue' : ''
37 | }
38 | })
39 |
40 | const handleHover = (e) => {
41 | console.log('hover before change', hover)
42 | const fileType = e.target.id;
43 | hover[fileType] = hover[fileType] ? false : true;
44 | setHover({...hover});
45 | console.log('hover after change', hover)
46 | }
47 |
48 | return (
49 | <>
50 | 
46 | 
47 | 
48 | `;
49 |
50 | folderListElem.appendChild(itemDomElem);
51 | });
52 |
53 | const projectButton = document.getElementById('create-project');
54 |
55 | // Logic to tone up or down the 'Analyze Dependencies' button
56 | // based on if folders have been selected.
57 | !folders[0]
58 | ? (projectButton.disabled = true)
59 | : (projectButton.disabled = false);
60 | };
61 |
62 | // Functionality for dependency analysis
63 | window.analyzeDep = function () {
64 | const folderNodes = document.getElementsByClassName('app__folders__item');
65 | const folderObjs = Array.from(folderNodes);
66 | const folders = folderObjs.map((node) =>
67 | node.getAttribute('data-folderpath')
68 | );
69 |
70 | const loadProject = document.getElementById('loading');
71 | loadProject.innerText = 'Loading...';
72 | loadProject.click();
73 |
74 | ipcRenderer.invoke( 'app:on-analyze', folders).then( results => {
75 | console.log('results', results)
76 | if (results.error) {
77 | const loadingContent = document.querySelector('#loading-content');
78 | loadingContent.parentElement.removeChild(loadingContent);
79 | const startButton = document.querySelector('#create-project');
80 | startButton.innerText = `${results.msg} \n Reload app and choose another project`;
81 | startButton.appendChild(errorText);
82 | return;
83 | }
84 | //change the value of a dom element.
85 | const startProject = document.getElementById('start-project');
86 | startProject.value = JSON.stringify(results);
87 | startProject.click();
88 | });
89 |
90 | // Navigates the user to a dependency graphy once analysis is complete
91 | ipcRenderer.invoke('app:on-analyze', folders).then((results) => {
92 | const startProject = document.getElementById('start-project');
93 | startProject.value = JSON.stringify(results);
94 | startProject.click();
95 | });
96 | };
97 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Introducing bev
2 |
3 | bev (Bird’s Eye View) is a microservice migration helper and a dependency manager. Developed under tech accelerator, OS Labs, bev is a multi-platform desktop application that allows you to analyze and visualize dependencies. bev alleviates the pain of migrating to microservices.
4 |
5 | ### Getting Started With bev
6 |
7 | We designed bev with simplicity in mind, so all you need to do is select the root directory of your microservice app and press “Analyze Dependencies.” We’ll take it from here!
8 |
9 | Click on the "Open Folders" button and select the folder(s) containing your project.
10 |
11 | 
12 |
13 | ## Features
14 | #### Dependency Visualizer
15 |
16 | bev parses through your project’s file structure to generate an interactive dependency graph. The dependency graph is a nice quick way to see how your dependencies *interflamingle*. The blue nodes represent local dependencies whereas the red nodes represent third-party dependencies. The tan nodes always represent the root directory.
17 |
18 | Click on any node to see which children components rely on it.
19 |
20 | 
21 |
22 | #### Bundle Sizer
23 |
24 | bev also finds and analyzes your bundle files. bev gives you a detailed breakdown of what’s being bundled.
25 |
26 | 
27 |
28 | Select the version history of which bundle file to view to see how the bundle has changed since updating dependencies.
29 |
30 | 
31 |
32 | ## How to Contribute
33 |
34 | If you would like to contribute, clone the repo.
35 |
36 | ```
37 | git clone https://github.com/oslabs-beta/bev.git
38 | ```
39 |
40 | ### Build Steps
41 |
42 | 1. Install dependencies by using the following command:
43 | ```
44 | npm i
45 | ```
46 | 2. To bundle all the files together, use:
47 | ```
48 | npm run build
49 | ```
50 | 3. To run the development build, use:
51 | ```
52 | npm start
53 | ```
54 | 4. To build the Electron app, use:
55 | ```
56 | npm run pack
57 | ```
58 |
59 | Electron-builder is configured to build for Mac, Windows and Linux. To configure which platform to build for, go into `package.json` and edit the scripts.
60 | ```
61 | "scripts": {
62 | "start": "electron .",
63 | "build": "cross-env NODE_ENV=development webpack",
64 | "postinstall": "electron-builder install-app-deps",
65 | "pack": "electron-builder -mwl"
66 | },
67 | ```
68 | In the `pack` script, append `m`, `w`, or `l` after the `-` to specify which platforms to build for.
69 | e.g.: To build for mac only, edit the pack script to:
70 | ```
71 | "pack": "electron-builder -m"
72 | ```
73 |
74 | #### Features we’d like to implement
75 |
76 | Please see our `CONTRIBUTING.md` for a detailed list of current bugs and conceptualized new features to implement.
77 |
78 | Of course, if you have a new feature which is not on this list, you are also welcome to submit and present it.
79 |
80 | ## Built With
81 | - Electron
82 | - React
83 | - React Router
84 | - React Testing Library
85 | - Dagre
86 | - Dependency Cruiser
87 | - Webpack CLI
88 | - React Flow
89 | - Jest
90 |
91 | ## Contributors
92 |
93 | Tu Pham | [Linkedin](https://www.linkedin.com/in/toopham/) | [Github](https://github.com/toopham)
94 |
95 | Ryan Lee | [Linkedin](https://www.linkedin.com/in/ryan-lee-dev/) | [Github](https://github.com/savoy1211)
96 |
97 | Michael Pay | [Linkedin](https://www.linkedin.com/in/michael-edward-pay/) | [Github](https://github.com/airpick)
98 |
99 | Ian Tran | [Linkedin](https://www.linkedin.com/in/ictran/) | [Github](https://github.com/eienTran)
100 |
--------------------------------------------------------------------------------
/app/render/src/components/Diagram.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import ReactFlow, {
3 | removeElements,
4 | addEdge,
5 | MiniMap,
6 | Controls,
7 | Background,
8 | } from 'react-flow-renderer';
9 | import { LocalNodeComponent, DefaultNodeComponent } from '../node-handling/styling';
10 | import { mapToElements } from '../node-handling/reposition'
11 | // import Legend from './Legend';
12 | import dagre from 'dagre';
13 |
14 | // React flow props, independent of Diagram hooks
15 | const onLoad = (reactFlowInstance) => {
16 | console.log('flow loaded:', reactFlowInstance);
17 | reactFlowInstance.fitView();
18 | };
19 |
20 | const nodeTypes = {
21 | local: LocalNodeComponent,
22 | default: DefaultNodeComponent
23 | }
24 |
25 | // let nodesAndEdges = allNodesAndEdges;
26 | let nodesAndEdges;
27 |
28 | const Diagram = ({ resultElements, bundleInfo, initialDiagramLoad, setInitialDiagramLoad }) => {
29 | // On first load, reinitialize dagre graph
30 | if (!initialDiagramLoad) {
31 | const dagreGraph = new dagre.graphlib.Graph();
32 | dagreGraph.setDefaultEdgeLabel(() => ({}));
33 | nodesAndEdges = mapToElements(resultElements);
34 | }
35 |
36 | // Diagram hooks
37 | const [elements, setElements]= useState(!initialDiagramLoad ? [...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...nodesAndEdges.edges] : []);
38 | const [clickedElement, setClickedElement] = useState({});
39 |
40 |
41 | // React Flow props, contingent on hooks
42 | const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
43 | const onConnect = (params) => setElements((els) => addEdge(params, els));
44 |
45 | // Toggle edge animation on node click
46 | useEffect(() => {
47 | if (clickedElement.hasOwnProperty('id')) {
48 | setInitialDiagramLoad(true);
49 | console.log('if block triggered')
50 | const id = clickedElement.id;
51 | const newEdges = [];
52 | nodesAndEdges.edges.forEach(edge => {
53 | if (edge.source === id) edge.animated = !edge.animated;
54 | if (edge.target === id) edge.animated = !edge.animated;
55 | newEdges.push(edge);
56 | })
57 | console.log('click', clickedElement);
58 | setElements([...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...newEdges]);
59 |
60 | } else {
61 | console.log('else block triggered');
62 | setElements([...nodesAndEdges.localNodes, ...nodesAndEdges.thirdPartyNodes, ...nodesAndEdges.edges]);
63 | }
64 | }, [clickedElement, resultElements])
65 |
66 | return (
67 | <>
68 |