├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── __tests__
└── supertest.js
├── dist
├── assets
│ ├── Lambda_Potato-removebg-preview.png
│ ├── connecting.gif
│ ├── failing.gif
│ ├── ghows-DA-e4d56fd0-0b53-432b-94f5-0038a178bea7-bcfea8ee.webp
│ ├── greg.jpeg
│ ├── index-5548e6c0.css
│ ├── index-d2746986.js
│ ├── michael.png
│ ├── nhat.jpeg
│ ├── removing.gif
│ └── zach.png
└── index.html
├── index.html
├── jest.config.js
├── nodemon.json
├── package.json
├── public
└── assets
│ ├── LambdaPeelerIcon.jpeg
│ ├── Lambda_Potato-removebg-preview.png
│ ├── connecting.gif
│ ├── failing.gif
│ ├── ghows-DA-e4d56fd0-0b53-432b-94f5-0038a178bea7-bcfea8ee.webp
│ ├── greg.jpeg
│ ├── lambdaicon.png
│ ├── michael.png
│ ├── nhat.jpeg
│ ├── removing.gif
│ └── zach.png
├── server
├── controllers
│ ├── functionController.ts
│ ├── js
│ │ ├── functionControllers.js
│ │ ├── layerControllers.js
│ │ ├── testControllers.js
│ │ └── userControllers.js
│ ├── layerController.ts
│ ├── testController.ts
│ └── userController.ts
├── db.js
├── db.ts
├── js
│ └── servers.js
├── models
│ ├── historyLogModel.ts
│ ├── js
│ │ ├── notificationModel.js
│ │ └── userModels.js
│ ├── notificationModel.ts
│ └── userModel.ts
├── routes
│ ├── functionRouter.ts
│ ├── js
│ │ ├── functionRouters.js
│ │ ├── layerRouters.js
│ │ └── userRouters.js
│ ├── layerRouter.ts
│ └── userRouter.ts
└── server.ts
├── src
├── App.jsx
├── Main.jsx
├── components
│ ├── Display.jsx
│ ├── Function.jsx
│ ├── FunctionModal.jsx
│ ├── HistoryLog.jsx
│ ├── Layer.jsx
│ ├── LayersModal.jsx
│ ├── LinkedFunctions.jsx
│ ├── LinkedLayers.jsx
│ ├── Login.jsx
│ ├── MainDisplay.jsx
│ ├── Navbar.jsx
│ ├── Notification.jsx
│ ├── Settings.jsx
│ └── Splash.jsx
├── containers
│ ├── FunctionsContainer.jsx
│ ├── HistoryContainer.jsx
│ ├── LayersContainer.jsx
│ └── NotificationContainer.jsx
└── styles.css
├── tsconfig.json
├── vercel.json
└── vite.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-react", "@babel/preset-env", "@babel/preset-typescript"],
3 | "plugins": ["@babel/plugin-proposal-class-properties"]
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | db.ts
4 | dbs.js
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # LambdaPeeler
2 | 
3 | 
4 | 
5 | 
6 | 
7 | 
8 | 
9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 |
19 |
20 |
Web dashboard for managing AWS Lambda functions and layers
21 | Lambda Peeler is a web-based dashboard tailored for AWS Lambda developers. It is meticulously designed to bridge the gap between managing Lambda functions and layers, simplifying AWS cloud operations.
22 |
23 | # Table of Contents
24 | - Link to Site
25 | - [Features](#features)
26 | - [Demo](#demo)
27 | - [Connecting to our App](#connecting-to-our-app)
28 | - [Contributing](#contributing)
29 | - [License](#license)
30 | - [Authors](#authors)
31 | ## Features
32 | **Bulk Operations**: Time is of the essence. And Lambda Peeler understands that. Perform bulk connections and disconnections without a hitch, and with the assurance of compatibility.
33 |
34 | **Risk Mitigation**: Gone are the days of the dreaded trial-and-error. Our built-in compatibility testing feature cross-examines functions with layers, ensuring they're in harmony. This not only guarantees smoother integrations but significantly curtails the risk of runtime failures.
35 |
36 | **Error Handling**: Our robust error messages notify users of failed connection attempts, allowing them to easily troubleshoot problems.
37 |
38 | **Direct AWS Integration**: Leveraging the AWS SDK, Lambda Peeler is deeply integrated with AWS services. This ensures real-time operations and a seamless user experience.
39 |
40 | ## Demo
41 | **Connecting a function to a layer**
42 | 
43 |
44 | **Removing a function from a layer**
45 | 
46 |
47 | **Failed Compatibility**
48 | 
49 |
50 | **Please note that Lambda functions must have at least one shareable test event in order to connect via our dashboard!**
51 |
52 | **How to Make a Shareable Test**
53 | 
54 |
55 | ## Connecting to our App
56 | 1. Navigate to your IAM dashboard on your AWS account and create a new role.
57 | 
58 |
59 | 2. Select AWS Account as the trusted entity and enter our tool's ARN number: 524403604286.
60 | 
61 |
62 | 3. When adding permissions, make sure to add AmazonEventBridgeSchemasFullAccess and AWSLambda_FullAccess. Your permissions should end up looking like this when you are finalizing the role.
63 | 
64 |
65 | 4. The role name has to be OSPTool.
66 | 
67 |
68 | 5. Click on OSPTool under roles and copy the ARN number.
69 | 
70 |
71 | 6. Your trust relationships under your OSPTool role should also look like this.
72 | 
73 |
74 | 7. Head over to our website lambdapeeler.com and sign up by entering your ARN number as well as the region of your AWS account.
75 | 
76 |
77 | ## Contributing
78 | Contributions are the foundation of the Open Source Community, fostering an environment where developers can openly share, collaborate, and ignite inspiration! Your contributions, whatever you decide to offer, are deeply valued and welcomed. Please create a fork of the dev branch and create a feature branch on your own repo. Make all pull requests from your feature branch into LambdaPeeler's dev branch. Also, feel free to open an issue!
79 |
80 | **Features to Add**
81 | - Users can currently connect functions to layers on the layers tab but not the other way around on the functions tab
82 | - We would like to move any unused layers to a separate log in order to reduce clutter on the dashboard
83 | - The ability for users to see information about their layers on our dashboard such as dependencies and runtime enviroment
84 |
85 | If you have any questions or need help troubleshooting, please feel free to reach out on Linkedin!
86 |
87 | ## License
88 | LambdaPeeler is licensed under the MIT License. See LICENSE for more details.
89 |
90 | ## Authors
91 |
89 | {/* Pass Layers and Function data from get requests to LayersContainer component. 'function' variable names creates errors, so lambda used in place */}
90 | {}
91 |
92 | )}
93 | {activeTab === 'Functions' && (
94 |
95 | {/* Pass Layers and Function data from get requests to LayersContainer component. 'function' variable names creates errors, so lambda used in place */}
96 | {}
97 |
142 | );
143 | };
144 |
145 | export default Display;
146 |
--------------------------------------------------------------------------------
/src/components/Function.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState, useEffect } from 'react';
3 | import axios from 'axios';
4 | import LinkedLayers from './LinkedLayers';
5 | import LayerModal from './LayersModal';
6 | import CircularProgress from '@mui/material/CircularProgress';
7 | import { Button, IconButton, Tooltip, Box } from '@mui/material';
8 | import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
9 | //CircularProgress, Button, IconButton, Tooltip, Box, LibraryAddIcon all used for styling
10 |
11 | /*functionName(string),
12 | ARN(string) of Function ARN,
13 | functionLayersArn:(array) of Layer ARNs on functions
14 | layers(Array or objects) layer data from get request in Display.js
15 | */
16 | const Function = ({ functionName, ARN, functionLayersARN, layers }) => {
17 | // isCollapsed is tracked for each displayed Layer. true (default) means the Layer display is collapsed, false means the Layer box has expanded
18 | const [isCollapsed, setIsCollapsed] = useState(true);
19 | // associatedLayers is the state variable for tracking which layers are connected to a given Function.
20 | // it is an array of objects in this format:
21 | // {
22 | // LayerName: layer.name,
23 | // LayerVersion: layer.versions[index],
24 | // LayerArn: layerARN
25 | // }
26 | const [associatedLayers, setAssociatedLayers] = useState([]);
27 | // isOpened is for the FunctionModal for each displayed Layer. true means the modal is opened, false (default) means the modal is not opened
28 | const [isOpened, setIsOpened] = useState(false);
29 | // isLoading is the state variable used to control the CircularProgress loading doodle
30 | const [isLoading, setIsLoading] = useState(false);
31 |
32 | // post request to fetch layers that are associated with a specific function
33 | const fetchAssociatedLayers = async () => {
34 | axios
35 | //post request to functionRouter.js
36 | .post(
37 | 'http://localhost:3000/api/functions/layers',
38 | //pass Function ARN and Layers Array to backend
39 | { ARN: ARN, layers: layers },
40 | {
41 | withCredentials: true,
42 | headers: {
43 | 'Content-Type': 'application/json',
44 | },
45 | }
46 | )
47 | .then((response) => {
48 | // wait for response to update assocatedLayers state with the response.data
49 | //Response.data is an array of layer objects. Each object contains specific layer information
50 | console.log('response.data000:', response.data);
51 | setAssociatedLayers(response.data);
52 | })
53 | .catch((err) => {
54 | console.log('Error:', err);
55 | });
56 | };
57 |
58 | // rerender layers list whenever the state changes
59 | // isCollapsed/isOpened with be changed on button clicks
60 | useEffect(() => {
61 | if (!isCollapsed) {
62 | //get array of layer objects
63 | fetchAssociatedLayers();
64 | }
65 | }, [isCollapsed, isOpened]);
66 |
67 | // opens and closes modal
68 | const openModal = () => {
69 | setIsOpened(true);
70 | };
71 |
72 | const closeModal = () => {
73 | setIsOpened(false);
74 | };
75 |
76 | // post request to link function and layer
77 | const linkLayers = async (event) => {
78 | //start the loading animation by changing isLoading state
79 | setIsLoading(true);
80 | event.preventDefault();
81 | // pull form data and put into arr
82 | const formResponse = new FormData(event.target);
83 | const arrayOfCheckedLayers = [];
84 | //Take keys from fromResponse and push into arrayOfCheckedLayers
85 | //arrayOfCheckedLayers will be sent to backend
86 | for (const key of formResponse.keys()) {
87 | arrayOfCheckedLayers.push(key);
88 | }
89 | try {
90 | //functionality not yet set up
91 | const result = await axios.post(
92 | 'https://lambda-peeler.onrender.com/api/functions/add',
93 | {
94 | ARN: ARN,
95 | layerArray: arrayOfCheckedLayers,
96 | FunctionName: functionName,
97 | },
98 | {
99 | withCredentials: true,
100 | headers: {
101 | 'Content-Type': 'application/json',
102 | },
103 | }
104 | );
105 | //update loading states for animation - when post request is receieved end the animation
106 | setIsLoading(false);
107 | setIsOpened(false);
108 | return;
109 | } catch (error) {
110 | //update loading states for animation - if post fails end animation
111 | console.log('error: ', error);
112 | setIsLoading(false);
113 | setIsOpened(false);
114 |
115 | // Pop up to alert user of errors
116 | const messages = [];
117 | if (typeof error.response.data === 'string') {
118 | alert(error.response.data);
119 | } else {
120 | const errorArr = error.response.data;
121 | errorArr.forEach((message) => {
122 | console.log('error message: ', message);
123 | alert(message);
124 | });
125 | }
126 | }
127 | };
128 |
129 | return (
130 |
131 | {/* make button to open/close layer information */}
132 |
144 | {/* When button is clicked isCollapsed state changes -
145 | display layer information in dropdown */}
146 | {!isCollapsed && (
147 |
170 | {/* Pass data to LinkedLayers to display details */}
171 |
181 |
182 | ))}
183 | {/* Renders a Box component from MUI that will contain the "add function" function*/}
184 |
189 |
190 | {/* When add function on the layer tab is clicked, a modal of all functions will pop up*/}
191 |
198 |
199 | )}
200 |
201 | );
202 | };
203 |
204 | export default Function;
205 |
--------------------------------------------------------------------------------
/src/components/FunctionModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState, useEffect } from 'react';
3 | import {
4 | Modal,
5 | Box,
6 | Button,
7 | Checkbox,
8 | FormControlLabel,
9 | Typography,
10 | } from '@mui/material';
11 | import CircularProgress from '@mui/material/CircularProgress';
12 | import LinearProgress from '@mui/material/LinearProgress';
13 | import axios from 'axios';
14 | import { useTheme } from "@mui/material/styles";
15 |
16 | // modal that pops up when the + (add functions) button is clicked on a specific layer in the layers tab.
17 | // contains checkboxes for all functions
18 | const FunctionModal = ({
19 | open,
20 | closeFunction,
21 | functions,
22 | onSubmit,
23 | isLoading,
24 | }) => {
25 | // used for the loading bar
26 | const [progress, setProgress] = useState(0);
27 | // used for MUI styling
28 | const theme = useTheme();
29 |
30 | useEffect(() => {
31 | // if loading, increment progress bar by 1 to visualize loading progress
32 | if (isLoading) {
33 | const interval = setInterval(() => {
34 | setProgress((prevProgress) => {
35 | if (prevProgress >= 100) {
36 | clearInterval(interval);
37 | return 100;
38 | }
39 | return prevProgress + 1.1;
40 | });
41 | }, 100);
42 | }
43 | setProgress(0);
44 | }, [isLoading]);
45 |
46 | return (
47 |
48 |
49 |
70 | {/* renders the function names with checkboxes. onSubmit is defined in Layer.jsx */}
71 |
102 | {/* renders the loading bar after submission*/}
103 | {isLoading && (
104 |
17 | )
18 | }
19 |
20 | export default HistoryLog;
--------------------------------------------------------------------------------
/src/components/Layer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState, useEffect } from 'react';
3 | import LinkedFunctions from './LinkedFunctions.jsx';
4 | import FunctionModal from './FunctionModal.jsx';
5 | import axios from 'axios';
6 | import CircularProgress from '@mui/material/CircularProgress';
7 | import { Button, IconButton, Tooltip, Box, Skeleton } from '@mui/material';
8 | import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
9 |
10 | const Layer = ({ layerName, versionNumber, ARN, functions }) => {
11 | // isCollapsed is tracked for each displayed Layer. true (default) means the Layer display is collapsed, false means the Layer box has expanded
12 | const [isCollapsed, setIsCollapsed] = useState(true);
13 | // associatedFunctions keeps track of which functions are linked to a layer
14 | const [associatedFunctions, setAssociatedFunctions] = useState([]);
15 | // isOpened is for the FunctionModal for each displayed Layer. true means the modal is opened, false (default) means the modal is not opened
16 | const [isOpened, setIsOpened] = useState(false);
17 | const [isLoading, setIsLoading] = useState(false);
18 |
19 | // invoked when the state of isCollapsed or isOpened changes
20 | // post requeset to grab associated functions
21 | const fetchAssociatedFunctions = async () => {
22 | axios
23 | .post(
24 | 'https://lambda-peeler.onrender.com/api/layers/functions',
25 | { ARN: ARN },
26 | {
27 | withCredentials: true,
28 | headers: {
29 | 'Content-Type': 'application/json',
30 | },
31 | }
32 | )
33 | .then((response) => {
34 | setAssociatedFunctions(response.data);
35 | })
36 | .catch((err) => {
37 | console.log('Error:', err);
38 | });
39 | };
40 |
41 | // this useEffect will be invoked whenever you click on a layer component
42 | //or when the pop up for the function is opened or closed
43 | useEffect(() => {
44 | // if the layer component is expanded, invoke this function
45 | if (!isCollapsed) {
46 | fetchAssociatedFunctions();
47 | }
48 | }, [isCollapsed, isOpened]);
49 |
50 | // changes the state for when function Modal opens and closes
51 | // openModal is passed down to the add function button
52 | const openModal = () => {
53 | setIsOpened(true);
54 | };
55 | // closeModal is passed down to the Function Modal component
56 | const closeModal = () => {
57 | setIsOpened(false);
58 | };
59 |
60 | // function to get the array of function names which have been checked in the FunctionModal for a given Layer
61 | // passed down to FunctionModal
62 | const linkFunction = async (event) => {
63 | setIsLoading(true);
64 | event.preventDefault();
65 | // pull form data and store in array to be sent to server
66 | const formResponse = new FormData(event.target);
67 | const arrayOfCheckedFunctions = [];
68 | for (const func of formResponse.keys()) {
69 | arrayOfCheckedFunctions.push(func);
70 | }
71 | try {
72 | const result = await axios.post(
73 | 'https://lambda-peeler.onrender.com/api/layers/add',
74 | {
75 | ARN: ARN,
76 | functionArray: arrayOfCheckedFunctions,
77 | layerName: layerName,
78 | },
79 | {
80 | withCredentials: true,
81 | headers: {
82 | 'Content-Type': 'application/json',
83 | },
84 | }
85 | );
86 | setIsLoading(false);
87 | setIsOpened(false);
88 | return;
89 | } catch (error) {
90 | setIsLoading(false);
91 | setIsOpened(false);
92 |
93 | // alert user of any errors
94 | const messages = [];
95 | if (typeof error.response.data === 'string') {
96 | alert(error.response.data);
97 | } else {
98 | const errorArr = error.response.data;
99 | errorArr.forEach((message) => {
100 | console.log('error message: ', message);
101 | alert(message);
102 | });
103 | }
104 | }
105 | };
106 |
107 | return (
108 |
109 | {/* Layer component renders a button that has an onClick, layer name, ver, ARN */}
110 |
123 | {/* if isCollapsed is false, show a div of functions*/}
124 | {!isCollapsed && (
125 |
126 |
Functions
127 | {/* if isLoading is true, show the circule progress component from MUI*/}
128 | {isLoading && (
129 |
136 |
143 |
144 | )}
145 | {/* Takes the functions from the state associatedFunctions and create seperate components called LinkedFunctions*/}
146 | {associatedFunctions.map((element, index) => (
147 |
148 |
157 |
158 | ))}
159 | {/* Renders a Box component from MUI that will contain the "add function" function*/}
160 |
165 |
166 | openModal()}>
167 |
168 |
169 |
170 |
171 | {/* When add function on the layer tab is clicked, a modal of all functions will pop up*/}
172 |
179 |
53 | Lambda Peeler is a web-based dashboard tailored for AWS Lambda
54 | developers. It is meticulously designed to bridge the gap between
55 | managing Lambda functions and layers, simplifying AWS cloud
56 | operations.
57 |
72 | Effortlessly link multiple functions through our sleek, user
73 | interface. Behind the scenes, Lambda Peeler diligently conducts
74 | assessments, ensuring runtime and dependency compatibility.
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Removing a function
82 |
83 |
84 | Seamlessly disconnect functions with just a single click. Our
85 | intuitive dashboard ensures swift and effortless layer management,
86 | streamlining your AWS Lambda experience.
87 |
88 |
89 |
90 |
91 |
92 |
93 |
Failing Compatability
94 |
95 |
96 | Our built-in compatibility testing feature cross-examines
97 | functions with layers, reducing the chance of introducing code
98 | breaking changes.
99 |
100 |
101 |
102 |
103 |
104 |
105 |
Meet the Team
106 |
107 |
108 |
112 | Nhat Trinh
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
127 | Greg Osborn
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
142 | Michael Shand
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
157 | Zach Hamilton
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | );
171 | };
172 |
173 | export default Splash;
174 |
--------------------------------------------------------------------------------
/src/containers/FunctionsContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Function from '../components/Function.jsx';
3 |
4 | const FunctionsContainer = ({ data, lambda }) => {
5 | return (
6 | // map the array of functions to individual Function components
7 | // functionLayersARN is the Layers array for a specific function, coming from GetFunction/GetFunctionConfiguration AWS commands
8 | // layers is the array of all layers coming from Display
9 |
101 |
102 | 
105 |
106 | 
138 | 
50 | 
78 | 
90 | 
102 | 
112 | Nhat Trinh
113 | 
127 | Greg Osborn
128 | 
142 | Michael Shand
143 | 
157 | Zach Hamilton
158 |